Skip to content

Commit 3bef802

Browse files
lskramarovlskramarov
authored
feat: generate css-variables for colors (#DS-2338) (#8)
1 parent 54c0bdf commit 3bef802

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1952
-2452
lines changed

‎packages/design-tokens/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ visual language, including color, typography, and spacing we use.
1111
Design tokens are key-value pairs. For example:
1212
```
1313
Key: value;
14-
$card-dark-color-scheme-success-background: #276211;
14+
$card-dark-success-background: #276211;
1515
```
1616
- The key name defines the usage or how to apply the value to a specific context, such as using text on a light background
1717
- The key stores visual design attributes

‎packages/design-tokens/web/components/alert.json5

+62-62
Original file line numberDiff line numberDiff line change
@@ -121,155 +121,155 @@
121121
'title-compact': { value: 'text-big-strong' },
122122
text: { value: 'text-normal' },
123123
},
124-
'light-color-scheme': {
124+
light: {
125125
default: {
126126
contrast: {
127127
container: {
128-
background: { value: '{light-color-scheme.background.contrast-fade}' },
129-
title: { value: '{light-color-scheme.foreground.contrast}' },
130-
text: { value: '{light-color-scheme.foreground.contrast}' }
128+
background: { value: '{light.background.contrast-fade}' },
129+
title: { value: '{light.foreground.contrast}' },
130+
text: { value: '{light.foreground.contrast}' }
131131
}
132132
},
133133
error: {
134134
container: {
135-
background: { value: '{light-color-scheme.background.contrast-fade}' },
136-
title: { value: '{light-color-scheme.foreground.contrast}' },
137-
text: { value: '{light-color-scheme.foreground.contrast}' }
135+
background: { value: '{light.background.contrast-fade}' },
136+
title: { value: '{light.foreground.contrast}' },
137+
text: { value: '{light.foreground.contrast}' }
138138
}
139139
},
140140
warning: {
141141
container: {
142-
background: { value: '{light-color-scheme.background.contrast-fade}' },
143-
title: { value: '{light-color-scheme.foreground.contrast}' },
144-
text: { value: '{light-color-scheme.foreground.contrast}' }
142+
background: { value: '{light.background.contrast-fade}' },
143+
title: { value: '{light.foreground.contrast}' },
144+
text: { value: '{light.foreground.contrast}' }
145145
}
146146
},
147147
success: {
148148
container: {
149-
background: { value: '{light-color-scheme.background.contrast-fade}' },
150-
title: { value: '{light-color-scheme.foreground.contrast}' },
151-
text: { value: '{light-color-scheme.foreground.contrast}' }
149+
background: { value: '{light.background.contrast-fade}' },
150+
title: { value: '{light.foreground.contrast}' },
151+
text: { value: '{light.foreground.contrast}' }
152152
}
153153
},
154154
theme: {
155155
container: {
156-
background: { value: '{light-color-scheme.background.contrast-fade}' },
157-
title: { value: '{light-color-scheme.foreground.contrast}' },
158-
text: { value: '{light-color-scheme.foreground.contrast}' }
156+
background: { value: '{light.background.contrast-fade}' },
157+
title: { value: '{light.foreground.contrast}' },
158+
text: { value: '{light.foreground.contrast}' }
159159
}
160160
}
161161
},
162162
colored: {
163163
contrast: {
164164
container: {
165-
background: { value: '{light-color-scheme.background.contrast-fade}' },
166-
title: { value: '{light-color-scheme.foreground.contrast}' },
167-
text: { value: '{light-color-scheme.foreground.contrast}' }
165+
background: { value: '{light.background.contrast-fade}' },
166+
title: { value: '{light.foreground.contrast}' },
167+
text: { value: '{light.foreground.contrast}' }
168168
}
169169
},
170170
error: {
171171
container: {
172-
background: { value: '{light-color-scheme.background.error-fade}' },
173-
title: { value: '{light-color-scheme.foreground.contrast}' },
174-
text: { value: '{light-color-scheme.foreground.contrast}' }
172+
background: { value: '{light.background.error-fade}' },
173+
title: { value: '{light.foreground.contrast}' },
174+
text: { value: '{light.foreground.contrast}' }
175175
}
176176
},
177177
warning: {
178178
container: {
179-
background: { value: '{light-color-scheme.background.warning-fade}' },
180-
title: { value: '{light-color-scheme.foreground.contrast}' },
181-
text: { value: '{light-color-scheme.foreground.contrast}' }
179+
background: { value: '{light.background.warning-fade}' },
180+
title: { value: '{light.foreground.contrast}' },
181+
text: { value: '{light.foreground.contrast}' }
182182
}
183183
},
184184
success: {
185185
container: {
186-
background: { value: '{light-color-scheme.background.success-fade}' },
187-
title: { value: '{light-color-scheme.foreground.contrast}' },
188-
text: { value: '{light-color-scheme.foreground.contrast}' }
186+
background: { value: '{light.background.success-fade}' },
187+
title: { value: '{light.foreground.contrast}' },
188+
text: { value: '{light.foreground.contrast}' }
189189
}
190190
},
191191
theme: {
192192
container: {
193-
background: { value: '{light-color-scheme.background.theme-fade}' },
194-
title: { value: '{light-color-scheme.foreground.contrast}' },
195-
text: { value: '{light-color-scheme.foreground.contrast}' }
193+
background: { value: '{light.background.theme-fade}' },
194+
title: { value: '{light.foreground.contrast}' },
195+
text: { value: '{light.foreground.contrast}' }
196196
}
197197
}
198198
},
199199

200200
},
201-
'dark-color-scheme': {
201+
dark: {
202202
default: {
203203
contrast: {
204204
container: {
205-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
206-
title: { value: '{dark-color-scheme.foreground.contrast}' },
207-
text: { value: '{dark-color-scheme.foreground.contrast}' }
205+
background: { value: '{dark.background.contrast-fade}' },
206+
title: { value: '{dark.foreground.contrast}' },
207+
text: { value: '{dark.foreground.contrast}' }
208208
}
209209
},
210210
error: {
211211
container: {
212-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
213-
title: { value: '{dark-color-scheme.foreground.contrast}' },
214-
text: { value: '{dark-color-scheme.foreground.contrast}' }
212+
background: { value: '{dark.background.contrast-fade}' },
213+
title: { value: '{dark.foreground.contrast}' },
214+
text: { value: '{dark.foreground.contrast}' }
215215
}
216216
},
217217
warning: {
218218
container: {
219-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
220-
title: { value: '{dark-color-scheme.foreground.contrast}' },
221-
text: { value: '{dark-color-scheme.foreground.contrast}' }
219+
background: { value: '{dark.background.contrast-fade}' },
220+
title: { value: '{dark.foreground.contrast}' },
221+
text: { value: '{dark.foreground.contrast}' }
222222
}
223223
},
224224
success: {
225225
container: {
226-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
227-
title: { value: '{dark-color-scheme.foreground.contrast}' },
228-
text: { value: '{dark-color-scheme.foreground.contrast}' }
226+
background: { value: '{dark.background.contrast-fade}' },
227+
title: { value: '{dark.foreground.contrast}' },
228+
text: { value: '{dark.foreground.contrast}' }
229229
}
230230
},
231231
theme: {
232232
container: {
233-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
234-
title: { value: '{dark-color-scheme.foreground.contrast}' },
235-
text: { value: '{dark-color-scheme.foreground.contrast}' }
233+
background: { value: '{dark.background.contrast-fade}' },
234+
title: { value: '{dark.foreground.contrast}' },
235+
text: { value: '{dark.foreground.contrast}' }
236236
}
237237
}
238238
},
239239
colored: {
240240
contrast: {
241241
container: {
242-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
243-
title: { value: '{dark-color-scheme.foreground.contrast}' },
244-
text: { value: '{dark-color-scheme.foreground.contrast}' }
242+
background: { value: '{dark.background.contrast-fade}' },
243+
title: { value: '{dark.foreground.contrast}' },
244+
text: { value: '{dark.foreground.contrast}' }
245245
}
246246
},
247247
error: {
248248
container: {
249-
background: { value: '{dark-color-scheme.background.error-fade}' },
250-
title: { value: '{dark-color-scheme.foreground.contrast}' },
251-
text: { value: '{dark-color-scheme.foreground.contrast}' }
249+
background: { value: '{dark.background.error-fade}' },
250+
title: { value: '{dark.foreground.contrast}' },
251+
text: { value: '{dark.foreground.contrast}' }
252252
}
253253
},
254254
warning: {
255255
container: {
256-
background: { value: '{dark-color-scheme.background.warning-fade}' },
257-
title: { value: '{dark-color-scheme.foreground.contrast}' },
258-
text: { value: '{dark-color-scheme.foreground.contrast}' }
256+
background: { value: '{dark.background.warning-fade}' },
257+
title: { value: '{dark.foreground.contrast}' },
258+
text: { value: '{dark.foreground.contrast}' }
259259
}
260260
},
261261
success: {
262262
container: {
263-
background: { value: '{dark-color-scheme.background.success-fade}' },
264-
title: { value: '{dark-color-scheme.foreground.contrast}' },
265-
text: { value: '{dark-color-scheme.foreground.contrast}' }
263+
background: { value: '{dark.background.success-fade}' },
264+
title: { value: '{dark.foreground.contrast}' },
265+
text: { value: '{dark.foreground.contrast}' }
266266
}
267267
},
268268
theme: {
269269
container: {
270-
background: { value: '{dark-color-scheme.background.theme-fade}' },
271-
title: { value: '{dark-color-scheme.foreground.contrast}' },
272-
text: { value: '{dark-color-scheme.foreground.contrast}' }
270+
background: { value: '{dark.background.theme-fade}' },
271+
title: { value: '{dark.foreground.contrast}' },
272+
text: { value: '{dark.foreground.contrast}' }
273273
}
274274
}
275275
},

0 commit comments

Comments
 (0)