Skip to content

Commit 936638d

Browse files
michaelmkrausmfranzkenmerget
authored
fix: add separate file for adaptive colors (#5614)
* feat: add separate file for adaptive colors * chore: add color utils to allow overwriting [data-color] in tailwind --------- Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Nicolas Merget <[email protected]> Co-authored-by: Nicolas Merget <[email protected]>
1 parent f8fbf1d commit 936638d

24 files changed

+202
-2900
lines changed

‎.changeset/tiny-ravens-peel.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@db-ux/core-foundations": patch
3+
"@db-ux/ngx-core-components": patch
4+
"@db-ux/react-core-components": patch
5+
"@db-ux/wc-core-components": patch
6+
"@db-ux/v-core-components": patch
7+
---
8+
9+
fix: issue with tailwind not reflecting adaptive color changes with `[data-color="xxx"]`

‎packages/foundations/tailwind/theme/_colors-utils.scss‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
@mixin get-color($color-name, $adaptive-name) {
2+
/* Basic-Level */
3+
--color-#{$adaptive-name}-bg-basic-level-1-default: var(
4+
--db-#{$color-name}-bg-basic-level-1-default
5+
);
6+
--color-#{$adaptive-name}-bg-basic-level-1-hovered: var(
7+
--db-#{$color-name}-bg-basic-level-1-hovered
8+
);
9+
--color-#{$adaptive-name}-bg-basic-level-1-pressed: var(
10+
--db-#{$color-name}-bg-basic-level-1-pressed
11+
);
12+
--color-#{$adaptive-name}-bg-basic-level-2-default: var(
13+
--db-#{$color-name}-bg-basic-level-2-default
14+
);
15+
--color-#{$adaptive-name}-bg-basic-level-2-hovered: var(
16+
--db-#{$color-name}-bg-basic-level-2-hovered
17+
);
18+
--color-#{$adaptive-name}-bg-basic-level-2-pressed: var(
19+
--db-#{$color-name}-bg-basic-level-2-pressed
20+
);
21+
--color-#{$adaptive-name}-bg-basic-level-3-default: var(
22+
--db-#{$color-name}-bg-basic-level-3-default
23+
);
24+
--color-#{$adaptive-name}-bg-basic-level-3-hovered: var(
25+
--db-#{$color-name}-bg-basic-level-3-hovered
26+
);
27+
--color-#{$adaptive-name}-bg-basic-level-3-pressed: var(
28+
--db-#{$color-name}-bg-basic-level-3-pressed
29+
);
30+
31+
/* Transparent */
32+
--color-#{$adaptive-name}-bg-basic-transparent-full-default: var(
33+
--db-#{$color-name}-bg-basic-transparent-full-default
34+
);
35+
--color-#{$adaptive-name}-bg-basic-transparent-semi-default: var(
36+
--db-#{$color-name}-bg-basic-transparent-semi-default
37+
);
38+
--color-#{$adaptive-name}-bg-basic-transparent-full-hovered: var(
39+
--db-#{$color-name}-bg-basic-transparent-full-hovered
40+
);
41+
--color-#{$adaptive-name}-bg-basic-transparent-full-pressed: var(
42+
--db-#{$color-name}-bg-basic-transparent-full-pressed
43+
);
44+
--color-#{$adaptive-name}-bg-basic-transparent-semi-hovered: var(
45+
--db-#{$color-name}-bg-basic-transparent-semi-hovered
46+
);
47+
--color-#{$adaptive-name}-bg-basic-transparent-semi-pressed: var(
48+
--db-#{$color-name}-bg-basic-transparent-semi-pressed
49+
);
50+
51+
/* Inverted */
52+
--color-#{$adaptive-name}-bg-inverted-contrast-max-default: var(
53+
--db-#{$color-name}-bg-inverted-contrast-max-default
54+
);
55+
--color-#{$adaptive-name}-bg-inverted-contrast-max-hovered: var(
56+
--db-#{$color-name}-bg-inverted-contrast-max-hovered
57+
);
58+
--color-#{$adaptive-name}-bg-inverted-contrast-max-pressed: var(
59+
--db-#{$color-name}-bg-inverted-contrast-max-pressed
60+
);
61+
--color-#{$adaptive-name}-bg-inverted-contrast-high-default: var(
62+
--db-#{$color-name}-bg-inverted-contrast-high-default
63+
);
64+
--color-#{$adaptive-name}-bg-inverted-contrast-high-hovered: var(
65+
--db-#{$color-name}-bg-inverted-contrast-high-hovered
66+
);
67+
--color-#{$adaptive-name}-bg-inverted-contrast-high-pressed: var(
68+
--db-#{$color-name}-bg-inverted-contrast-high-pressed
69+
);
70+
--color-#{$adaptive-name}-bg-inverted-contrast-low-default: var(
71+
--db-#{$color-name}-bg-inverted-contrast-low-default
72+
);
73+
--color-#{$adaptive-name}-bg-inverted-contrast-low-hovered: var(
74+
--db-#{$color-name}-bg-inverted-contrast-low-hovered
75+
);
76+
--color-#{$adaptive-name}-bg-inverted-contrast-low-pressed: var(
77+
--db-#{$color-name}-bg-inverted-contrast-low-pressed
78+
);
79+
80+
/* On Colors */
81+
82+
--color-#{$adaptive-name}-on-bg-basic-emphasis-100-default: var(
83+
--db-#{$color-name}-on-bg-basic-emphasis-100-default
84+
);
85+
--color-#{$adaptive-name}-on-bg-basic-emphasis-100-hovered: var(
86+
--db-#{$color-name}-on-bg-basic-emphasis-100-hovered
87+
);
88+
--color-#{$adaptive-name}-on-bg-basic-emphasis-100-pressed: var(
89+
--db-#{$color-name}-on-bg-basic-emphasis-100-pressed
90+
);
91+
--color-#{$adaptive-name}-on-bg-basic-emphasis-90-default: var(
92+
--db-#{$color-name}-on-bg-basic-emphasis-90-default
93+
);
94+
--color-#{$adaptive-name}-on-bg-basic-emphasis-90-hovered: var(
95+
--db-#{$color-name}-on-bg-basic-emphasis-90-hovered
96+
);
97+
--color-#{$adaptive-name}-on-bg-basic-emphasis-90-pressed: var(
98+
--db-#{$color-name}-on-bg-basic-emphasis-90-pressed
99+
);
100+
--color-#{$adaptive-name}-on-bg-basic-emphasis-80-default: var(
101+
--db-#{$color-name}-on-bg-basic-emphasis-80-default
102+
);
103+
--color-#{$adaptive-name}-on-bg-basic-emphasis-80-hovered: var(
104+
--db-#{$color-name}-on-bg-basic-emphasis-80-hovered
105+
);
106+
--color-#{$adaptive-name}-on-bg-basic-emphasis-80-pressed: var(
107+
--db-#{$color-name}-on-bg-basic-emphasis-80-pressed
108+
);
109+
--color-#{$adaptive-name}-on-bg-basic-emphasis-70-default: var(
110+
--db-#{$color-name}-on-bg-basic-emphasis-70-default
111+
);
112+
--color-#{$adaptive-name}-on-bg-basic-emphasis-70-hovered: var(
113+
--db-#{$color-name}-on-bg-basic-emphasis-70-hovered
114+
);
115+
--color-#{$adaptive-name}-on-bg-basic-emphasis-70-pressed: var(
116+
--db-#{$color-name}-on-bg-basic-emphasis-70-pressed
117+
);
118+
--color-#{$adaptive-name}-on-bg-basic-emphasis-60-default: var(
119+
--db-#{$color-name}-on-bg-basic-emphasis-60-default
120+
);
121+
--color-#{$adaptive-name}-on-bg-basic-emphasis-60-hovered: var(
122+
--db-#{$color-name}-on-bg-basic-emphasis-60-hovered
123+
);
124+
--color-#{$adaptive-name}-on-bg-basic-emphasis-60-pressed: var(
125+
--db-#{$color-name}-on-bg-basic-emphasis-60-pressed
126+
);
127+
--color-#{$adaptive-name}-on-bg-basic-emphasis-50-default: var(
128+
--db-#{$color-name}-on-bg-basic-emphasis-50-default
129+
);
130+
--color-#{$adaptive-name}-on-bg-basic-emphasis-50-hovered: var(
131+
--db-#{$color-name}-on-bg-basic-emphasis-50-hovered
132+
);
133+
--color-#{$adaptive-name}-on-bg-basic-emphasis-50-pressed: var(
134+
--db-#{$color-name}-on-bg-basic-emphasis-50-pressed
135+
);
136+
137+
/* On Inverted */
138+
--color-#{$adaptive-name}-on-bg-inverted-default: var(
139+
--db-#{$color-name}-on-bg-inverted-default
140+
);
141+
--color-#{$adaptive-name}-on-bg-inverted-hovered: var(
142+
--db-#{$color-name}-on-bg-inverted-hovered
143+
);
144+
--color-#{$adaptive-name}-on-bg-inverted-pressed: var(
145+
--db-#{$color-name}-on-bg-inverted-pressed
146+
);
147+
148+
/* On Origin */
149+
--color-#{$adaptive-name}-on-origin-default: var(
150+
--db-#{$color-name}-on-origin-default
151+
);
152+
--color-#{$adaptive-name}-on-origin-hovered: var(
153+
--db-#{$color-name}-on-origin-hovered
154+
);
155+
--color-#{$adaptive-name}-on-origin-pressed: var(
156+
--db-#{$color-name}-on-origin-pressed
157+
);
158+
--color-#{$adaptive-name}-origin-default: var(
159+
--db-#{$color-name}-origin-default
160+
);
161+
--color-#{$adaptive-name}-origin-hovered: var(
162+
--db-#{$color-name}-origin-hovered
163+
);
164+
--color-#{$adaptive-name}-origin-pressed: var(
165+
--db-#{$color-name}-origin-pressed
166+
);
167+
}

‎packages/foundations/tailwind/theme/colors.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@use "colors-utils";
2+
@use "sass:list";
3+
@use "../../styles/colors"; // Import path is relative to build output (scss → build/styles, tailwind → build/tailwind)
4+
5+
$all-variants: list.append(
6+
list.join(colors.$variants, colors.$additional-variants),
7+
"adaptive"
8+
);
9+
10+
// stylelint-disable-next-line scss/at-rule-no-unknown
11+
@theme {
12+
@each $color-name in $all-variants {
13+
@include colors-utils.get-color($color-name, $color-name);
14+
}
15+
}
16+
17+
@layer colors {
18+
@each $color-name in $all-variants {
19+
[data-color="#{$color-name}"],
20+
.db-color-#{$color-name} {
21+
@include colors-utils.get-color($color-name, "adaptive");
22+
}
23+
}
24+
}

‎packages/foundations/tailwind/theme/colors/blue.css‎

Lines changed: 0 additions & 154 deletions
This file was deleted.

0 commit comments

Comments
 (0)