Skip to content

Commit 00de9c0

Browse files
matmkianmatmkian
committed
chore(color): always use colors css variables
1 parent 50f040a commit 00de9c0

File tree

10 files changed

+583
-1724
lines changed

10 files changed

+583
-1724
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
### Changed
11+
12+
- Always use colors css variables.
13+
1014
## [2.1.9][] - 2021-12-15
1115

1216
### Fixed

‎packages/lumx-core/src/css/design-tokens.css

Lines changed: 144 additions & 575 deletions
Large diffs are not rendered by default.

‎packages/lumx-core/src/js/constants/design-tokens.ts

Lines changed: 140 additions & 418 deletions
Large diffs are not rendered by default.

‎packages/lumx-core/src/scss/_design-tokens.scss

Lines changed: 148 additions & 580 deletions
Large diffs are not rendered by default.

‎packages/lumx-core/src/scss/core/color/_functions.scss

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
@function lumx-color-variant($color, $variant) {
22
@if map-has-key($lumx-color-palette, $color) {
3-
@if $color == 'primary' or $color == 'secondary' {
4-
@return var(--lumx-color-#{$color}-#{$variant});
5-
} @else {
6-
@return map-get(map-get($lumx-color-palette, $color), $variant);
7-
}
3+
@return var(--lumx-color-#{$color}-#{$variant});
84
} @else {
9-
@return map-get(map-get($lumx-color-palette, 'dark'), $variant);
5+
@return var(--lumx-color-dark-N);
106
}
117
}

‎packages/lumx-core/style-dictionary/properties/components/button.json

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
"border-width": { "value": "0" },
1111
"theme-light": {
1212
"background-color": { "value": "var(--lumx-color-primary-N)" },
13-
"color": "{color.light.N}",
13+
"color": { "value": "var(--lumx-color-light-N)" },
1414
"border-color": { "value": "transparent" }
1515
},
1616
"theme-dark": {
17-
"background-color": "{color.light.N}",
17+
"background-color": { "value": "var(--lumx-color-light-N)" },
1818
"color": { "value": "var(--lumx-color-primary-N)" },
1919
"border-color": { "value": "transparent" }
2020
}
@@ -26,11 +26,11 @@
2626
"border-width": { "value": "0" },
2727
"theme-light": {
2828
"background-color": { "value": "var(--lumx-color-primary-D1)" },
29-
"color": "{color.light.N}",
29+
"color": { "value": "var(--lumx-color-light-N)" },
3030
"border-color": { "value": "transparent" }
3131
},
3232
"theme-dark": {
33-
"background-color": "{color.light.L1}",
33+
"background-color": { "value": "var(--lumx-color-light-L1)" },
3434
"color": { "value": "var(--lumx-color-primary-N)" },
3535
"border-color": { "value": "transparent" }
3636
}
@@ -42,11 +42,11 @@
4242
"border-width": { "value": "0" },
4343
"theme-light": {
4444
"background-color": { "value": "var(--lumx-color-primary-D2)" },
45-
"color": "{color.light.N}",
45+
"color": { "value": "var(--lumx-color-light-N)" },
4646
"border-color": { "value": "transparent" }
4747
},
4848
"theme-dark": {
49-
"background-color": "{color.light.L2}",
49+
"background-color": { "value": "var(--lumx-color-light-L2)" },
5050
"color": { "value": "var(--lumx-color-primary-N)" },
5151
"border-color": { "value": "transparent" }
5252
}
@@ -59,13 +59,13 @@
5959
},
6060
"border-width": { "value": "0" },
6161
"theme-light": {
62-
"background-color": "{color.dark.L5}",
63-
"color": "{color.dark.L1}",
62+
"background-color": { "value": "var(--lumx-color-dark-L5)" },
63+
"color": { "value": "var(--lumx-color-dark-L1)" },
6464
"border-color": { "value": "transparent" }
6565
},
6666
"theme-dark": {
67-
"background-color": "{color.light.L5}",
68-
"color": "{color.light.N}",
67+
"background-color": { "value": "var(--lumx-color-light-L5)" },
68+
"color": { "value": "var(--lumx-color-light-N)" },
6969
"border-color": { "value": "transparent" }
7070
}
7171
},
@@ -75,13 +75,13 @@
7575
},
7676
"border-width": { "value": "0" },
7777
"theme-light": {
78-
"background-color": "{color.dark.L4}",
79-
"color": "{color.dark.L1}",
78+
"background-color": { "value": "var(--lumx-color-dark-L4)" },
79+
"color": { "value": "var(--lumx-color-dark-L1)" },
8080
"border-color": { "value": "transparent" }
8181
},
8282
"theme-dark": {
83-
"background-color": "{color.light.L4}",
84-
"color": "{color.light.N}",
83+
"background-color": { "value": "var(--lumx-color-light-L4)" },
84+
"color": { "value": "var(--lumx-color-light-N)" },
8585
"border-color": { "value": "transparent" }
8686
}
8787
},
@@ -91,13 +91,13 @@
9191
},
9292
"border-width": { "value": "0" },
9393
"theme-light": {
94-
"background-color": "{color.dark.L3}",
95-
"color": "{color.dark.L1}",
94+
"background-color": { "value": "var(--lumx-color-dark-L3)" },
95+
"color": { "value": "var(--lumx-color-dark-L1)" },
9696
"border-color": { "value": "transparent" }
9797
},
9898
"theme-dark": {
99-
"background-color": "{color.light.L3}",
100-
"color": "{color.light.N}",
99+
"background-color": { "value": "var(--lumx-color-light-L3)" },
100+
"color": { "value": "var(--lumx-color-light-N)" },
101101
"border-color": { "value": "transparent" }
102102
}
103103
}
@@ -110,12 +110,12 @@
110110
"border-width": { "value": "0" },
111111
"theme-light": {
112112
"background-color": { "value": "transparent" },
113-
"color": "{color.dark.L1}",
113+
"color": { "value": "var(--lumx-color-dark-L1)" },
114114
"border-color": { "value": "transparent" }
115115
},
116116
"theme-dark": {
117117
"background-color": { "value": "transparent" },
118-
"color": "{color.light.N}",
118+
"color": { "value": "var(--lumx-color-light-N)" },
119119
"border-color": { "value": "transparent" }
120120
}
121121
},
@@ -125,13 +125,13 @@
125125
},
126126
"border-width": { "value": "0" },
127127
"theme-light": {
128-
"background-color": "{color.dark.L5}",
129-
"color": "{color.dark.L1}",
128+
"background-color": { "value": "var(--lumx-color-dark-L5)" },
129+
"color": { "value": "var(--lumx-color-dark-L1)" },
130130
"border-color": { "value": "transparent" }
131131
},
132132
"theme-dark": {
133-
"background-color": "{color.light.L5}",
134-
"color": "{color.light.N}",
133+
"background-color": { "value": "var(--lumx-color-light-L5)" },
134+
"color": { "value": "var(--lumx-color-light-N)" },
135135
"border-color": { "value": "transparent" }
136136
}
137137
},
@@ -141,13 +141,13 @@
141141
},
142142
"border-width": { "value": "0" },
143143
"theme-light": {
144-
"background-color": "{color.dark.L4}",
145-
"color": "{color.dark.L1}",
144+
"background-color": { "value": "var(--lumx-color-dark-L4)" },
145+
"color": { "value": "var(--lumx-color-dark-L1)" },
146146
"border-color": { "value": "transparent" }
147147
},
148148
"theme-dark": {
149-
"background-color": "{color.light.L4}",
150-
"color": "{color.light.N}",
149+
"background-color": { "value": "var(--lumx-color-light-L4)" },
150+
"color": { "value": "var(--lumx-color-light-N)" },
151151
"border-color": { "value": "transparent" }
152152
}
153153
}
@@ -164,8 +164,8 @@
164164
"border-color": { "value": "transparent" }
165165
},
166166
"theme-dark": {
167-
"background-color": "{color.light.L3}",
168-
"color": "{color.light.N}",
167+
"background-color": { "value": "var(--lumx-color-light-L3)" },
168+
"color": { "value": "var(--lumx-color-light-N)" },
169169
"border-color": { "value": "transparent" }
170170
}
171171
},
@@ -180,8 +180,8 @@
180180
"border-color": { "value": "transparent" }
181181
},
182182
"theme-dark": {
183-
"background-color": "{color.light.L4}",
184-
"color": "{color.light.N}",
183+
"background-color": { "value": "var(--lumx-color-light-L4)" },
184+
"color": { "value": "var(--lumx-color-light-N)" },
185185
"border-color": { "value": "transparent" }
186186
}
187187
},
@@ -196,8 +196,8 @@
196196
"border-color": { "value": "transparent" }
197197
},
198198
"theme-dark": {
199-
"background-color": "{color.light.L5}",
200-
"color": "{color.light.N}",
199+
"background-color": { "value": "var(--lumx-color-light-L5)" },
200+
"color": { "value": "var(--lumx-color-light-N)" },
201201
"border-color": { "value": "transparent" }
202202
}
203203
}

‎packages/lumx-core/style-dictionary/properties/components/navigation.json

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@
2424
},
2525
"theme-light": {
2626
"background-color": { "value": "transparent" },
27-
"border-color": "{color.dark.L5}",
28-
"icon-color": "{color.dark.L1}",
29-
"label-color": "{color.dark.N}",
27+
"border-color": { "value": "var(--lumx-color-dark-L5)" },
28+
"icon-color": { "value": "var(--lumx-color-dark-L1)" },
29+
"label-color": { "value": "var(--lumx-color-dark-N)" },
3030
"chevron-background-color": { "value": "transparent" },
31-
"chevron-color": "{color.dark.L1}"
31+
"chevron-color": { "value": "var(--lumx-color-dark-L1)" }
3232
},
3333
"theme-dark": {
3434
"background-color": { "value": "transparent" },
35-
"border-color": "{color.light.L5}",
36-
"icon-color": "{color.light.N}",
37-
"label-color": "{color.light.N}",
35+
"border-color": { "value": "var(--lumx-color-light-L5)" },
36+
"icon-color": { "value": "var(--lumx-color-light-N)" },
37+
"label-color": { "value": "var(--lumx-color-light-N)" },
3838
"chevron-background-color": { "value": "transparent" },
39-
"chevron-color": "{color.light.N}"
39+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
4040
}
4141
},
4242
"state-hover": {
@@ -55,20 +55,20 @@
5555
}
5656
},
5757
"theme-light": {
58-
"background-color": "{color.dark.L5}",
59-
"border-color": "{color.dark.L5}",
60-
"icon-color": "{color.dark.L1}",
61-
"label-color": "{color.dark.N}",
62-
"chevron-background-color": "{color.dark.L5}",
63-
"chevron-color": "{color.dark.L1}"
58+
"background-color": { "value": "var(--lumx-color-dark-L5)" },
59+
"border-color": { "value": "var(--lumx-color-dark-L5)" },
60+
"icon-color": { "value": "var(--lumx-color-dark-L1)" },
61+
"label-color": { "value": "var(--lumx-color-dark-N)" },
62+
"chevron-background-color": { "value": "var(--lumx-color-dark-L5)" },
63+
"chevron-color": { "value": "var(--lumx-color-dark-L1)" }
6464
},
6565
"theme-dark": {
66-
"background-color": "{color.light.L5}",
67-
"border-color": "{color.light.L5}",
68-
"icon-color": "{color.light.N}",
69-
"label-color": "{color.light.N}",
70-
"chevron-background-color": "{color.light.L5}",
71-
"chevron-color": "{color.light.N}"
66+
"background-color": { "value": "var(--lumx-color-light-L5)" },
67+
"border-color": { "value": "var(--lumx-color-light-L5)" },
68+
"icon-color": { "value": "var(--lumx-color-light-N)" },
69+
"label-color": { "value": "var(--lumx-color-light-N)" },
70+
"chevron-background-color": { "value": "var(--lumx-color-light-L5)" },
71+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
7272
}
7373
},
7474
"state-active": {
@@ -87,20 +87,20 @@
8787
}
8888
},
8989
"theme-light": {
90-
"background-color": "{color.dark.L4}",
91-
"border-color": "{color.dark.L5}",
92-
"icon-color": "{color.dark.L1}",
93-
"label-color": "{color.dark.N}",
94-
"chevron-background-color": "{color.dark.L4}",
95-
"chevron-color": "{color.dark.L1}"
90+
"background-color": { "value": "var(--lumx-color-dark-L4)" },
91+
"border-color": { "value": "var(--lumx-color-dark-L5)" },
92+
"icon-color": { "value": "var(--lumx-color-dark-L1)" },
93+
"label-color": { "value": "var(--lumx-color-dark-N)" },
94+
"chevron-background-color": { "value": "var(--lumx-color-dark-L4)" },
95+
"chevron-color": { "value": "var(--lumx-color-dark-L1)" }
9696
},
9797
"theme-dark": {
98-
"background-color": "{color.light.L4}",
99-
"border-color": "{color.light.L5}",
100-
"icon-color": "{color.light.N}",
101-
"label-color": "{color.light.N}",
102-
"chevron-background-color": "{color.light.L4}",
103-
"chevron-color": "{color.light.N}"
98+
"background-color": { "value": "var(--lumx-color-light-L4)" },
99+
"border-color": { "value": "var(--lumx-color-light-L5)" },
100+
"icon-color": { "value": "var(--lumx-color-light-N)" },
101+
"label-color": { "value": "var(--lumx-color-light-N)" },
102+
"chevron-background-color": { "value": "var(--lumx-color-light-L4)" },
103+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
104104
}
105105
}
106106
},
@@ -129,12 +129,12 @@
129129
"chevron-color": { "value": "var(--lumx-color-primary-D2)" }
130130
},
131131
"theme-dark": {
132-
"background-color": "{color.light.L3}",
133-
"border-color": "{color.light.L5}",
134-
"icon-color": "{color.light.N}",
135-
"label-color": "{color.light.N}",
132+
"background-color": { "value": "var(--lumx-color-light-L3)" },
133+
"border-color": { "value": "var(--lumx-color-light-L5)" },
134+
"icon-color": { "value": "var(--lumx-color-light-N)" },
135+
"label-color": { "value": "var(--lumx-color-light-N)" },
136136
"chevron-background-color": { "value": "transparent" },
137-
"chevron-color": "{color.light.N}"
137+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
138138
}
139139
},
140140
"state-hover": {
@@ -161,12 +161,12 @@
161161
"chevron-color": { "value": "var(--lumx-color-primary-D2)" }
162162
},
163163
"theme-dark": {
164-
"background-color": "{color.light.L4}",
165-
"border-color": "{color.light.L5}",
166-
"icon-color": "{color.light.N}",
167-
"label-color": "{color.light.N}",
168-
"chevron-background-color": "{color.light.L4}",
169-
"chevron-color": "{color.light.N}"
164+
"background-color": { "value": "var(--lumx-color-light-L4)" },
165+
"border-color": { "value": "var(--lumx-color-light-L5)" },
166+
"icon-color": { "value": "var(--lumx-color-light-N)" },
167+
"label-color": { "value": "var(--lumx-color-light-N)" },
168+
"chevron-background-color": { "value": "var(--lumx-color-light-L4)" },
169+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
170170
}
171171
},
172172
"state-active": {
@@ -193,12 +193,12 @@
193193
"chevron-color": { "value": "var(--lumx-color-primary-D2)" }
194194
},
195195
"theme-dark": {
196-
"background-color": "{color.light.L5}",
197-
"border-color": "{color.light.L5}",
198-
"icon-color": "{color.light.N}",
199-
"label-color": "{color.light.N}",
200-
"chevron-background-color": "{color.light.L5}",
201-
"chevron-color": "{color.light.N}"
196+
"background-color": { "value": "var(--lumx-color-light-L5)" },
197+
"border-color": { "value": "var(--lumx-color-light-L5)" },
198+
"icon-color": { "value": "var(--lumx-color-light-N)" },
199+
"label-color": { "value": "var(--lumx-color-light-N)" },
200+
"chevron-background-color": { "value": "var(--lumx-color-light-L5)" },
201+
"chevron-color": { "value": "var(--lumx-color-light-N)" }
202202
}
203203
}
204204
}

0 commit comments

Comments
 (0)