@cas-smartdesign/design-tokens 3.0.4 → 3.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/dark/_tokens.scss +79 -79
  2. package/dist/dark/tokens.css +79 -79
  3. package/dist/dark/tokens.json +158 -158
  4. package/dist/docs/index.html +3 -3
  5. package/dist/light/_tokens.scss +3 -3
  6. package/dist/light/tokens.css +3 -3
  7. package/dist/light/tokens.json +6 -6
  8. package/dist/tokens.css +82 -82
  9. package/package.json +1 -1
package/dist/dark/_tokens.scss CHANGED
@@ -42,7 +42,7 @@
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
43
  --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
44
  /** Pressed state for color/bg/action-neutralWeakest */
45
- --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-750);
45
+ --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-650);
46
46
  /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
47
47
  --color-bg-assistive: var(--base-color-blue-750);
48
48
  /** Brand-based background color, primarily for the header area. The color does not suggest interactivity. */
@@ -58,7 +58,7 @@
58
58
  /** Background color for components that allow selection; customizable; Selection = choose something */
59
59
  --color-bg-selection-accent-default: var(--base-color-blue-500);
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
- --color-bg-selection-accent-weak: var(--base-color-blue-800);
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-700);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
63
  --color-bg-selection-accent-weak-hover: var(--base-color-blue-750);
64
64
  /** Third background color for components that allow selection; Selection = choose something */
@@ -118,7 +118,7 @@
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
121
- --color-border-selection-accent-weak: var(--base-color-blue-750);
121
+ --color-border-selection-accent-weak: var(--base-color-blue-700);
122
122
  /** Third border color for components that allow selectio; Selection = choose something */
123
123
  --color-border-selection-neutral-default: var(--base-color-grey-500);
124
124
  /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
@@ -207,58 +207,58 @@
207
207
  --color-rainbow-blue-strong10: var(--base-color-blue-400);
208
208
  --color-rainbow-blue-strong20: var(--base-color-blue-350);
209
209
  --color-rainbow-blue-strong30: var(--base-color-blue-200);
210
- --color-rainbow-blue-weak10: var(--base-color-blue-650);
211
- --color-rainbow-blue-weak20: var(--base-color-blue-700);
212
- --color-rainbow-blue-weak30: var(--base-color-blue-750);
213
- --color-rainbow-blue-weak40: var(--base-color-blue-800);
214
- --color-rainbow-brown-default: var(--base-color-brown-500);
215
- --color-rainbow-brown-strong10: var(--base-color-brown-400);
216
- --color-rainbow-brown-strong20: var(--base-color-brown-350);
217
- --color-rainbow-brown-strong30: var(--base-color-brown-200);
218
- --color-rainbow-brown-weak10: var(--base-color-brown-650);
219
- --color-rainbow-brown-weak20: var(--base-color-brown-700);
220
- --color-rainbow-brown-weak30: var(--base-color-brown-750);
221
- --color-rainbow-brown-weak40: var(--base-color-brown-800);
222
- --color-rainbow-cyan-default: var(--base-color-cyan-500);
223
- --color-rainbow-cyan-strong10: var(--base-color-cyan-400);
224
- --color-rainbow-cyan-strong20: var(--base-color-cyan-350);
225
- --color-rainbow-cyan-strong30: var(--base-color-cyan-200);
226
- --color-rainbow-cyan-weak10: var(--base-color-cyan-650);
227
- --color-rainbow-cyan-weak20: var(--base-color-cyan-700);
228
- --color-rainbow-cyan-weak30: var(--base-color-cyan-750);
229
- --color-rainbow-cyan-weak40: var(--base-color-cyan-800);
230
- --color-rainbow-dark-blue-default: var(--base-color-dark-blue-500);
231
- --color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-400);
232
- --color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-350);
233
- --color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-200);
234
- --color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-650);
235
- --color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-700);
236
- --color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-750);
237
- --color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-800);
238
- --color-rainbow-dark-green-default: var(--base-color-dark-green-500);
239
- --color-rainbow-dark-green-strong10: var(--base-color-dark-green-400);
240
- --color-rainbow-dark-green-strong20: var(--base-color-dark-green-350);
241
- --color-rainbow-dark-green-strong30: var(--base-color-dark-green-200);
242
- --color-rainbow-dark-green-weak10: var(--base-color-dark-green-650);
243
- --color-rainbow-dark-green-weak20: var(--base-color-dark-green-700);
244
- --color-rainbow-dark-green-weak30: var(--base-color-dark-green-750);
245
- --color-rainbow-dark-green-weak40: var(--base-color-dark-green-800);
210
+ --color-rainbow-blue-weak10: var(--base-color-blue-600);
211
+ --color-rainbow-blue-weak20: var(--base-color-blue-650);
212
+ --color-rainbow-blue-weak30: var(--base-color-blue-700);
213
+ --color-rainbow-blue-weak40: var(--base-color-blue-750);
214
+ --color-rainbow-brown-default: var(--base-color-brown-350);
215
+ --color-rainbow-brown-strong10: var(--base-color-brown-300);
216
+ --color-rainbow-brown-strong20: var(--base-color-brown-250);
217
+ --color-rainbow-brown-strong30: var(--base-color-brown-100);
218
+ --color-rainbow-brown-weak10: var(--base-color-brown-400);
219
+ --color-rainbow-brown-weak20: var(--base-color-brown-500);
220
+ --color-rainbow-brown-weak30: var(--base-color-brown-600);
221
+ --color-rainbow-brown-weak40: var(--base-color-brown-650);
222
+ --color-rainbow-cyan-default: var(--base-color-cyan-400);
223
+ --color-rainbow-cyan-strong10: var(--base-color-cyan-350);
224
+ --color-rainbow-cyan-strong20: var(--base-color-cyan-300);
225
+ --color-rainbow-cyan-strong30: var(--base-color-cyan-150);
226
+ --color-rainbow-cyan-weak10: var(--base-color-cyan-500);
227
+ --color-rainbow-cyan-weak20: var(--base-color-cyan-600);
228
+ --color-rainbow-cyan-weak30: var(--base-color-cyan-650);
229
+ --color-rainbow-cyan-weak40: var(--base-color-cyan-700);
230
+ --color-rainbow-dark-blue-default: var(--base-color-dark-blue-350);
231
+ --color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-300);
232
+ --color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-250);
233
+ --color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-100);
234
+ --color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-400);
235
+ --color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-500);
236
+ --color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-600);
237
+ --color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-650);
238
+ --color-rainbow-dark-green-default: var(--base-color-dark-green-400);
239
+ --color-rainbow-dark-green-strong10: var(--base-color-dark-green-350);
240
+ --color-rainbow-dark-green-strong20: var(--base-color-dark-green-300);
241
+ --color-rainbow-dark-green-strong30: var(--base-color-dark-green-150);
242
+ --color-rainbow-dark-green-weak10: var(--base-color-dark-green-500);
243
+ --color-rainbow-dark-green-weak20: var(--base-color-dark-green-600);
244
+ --color-rainbow-dark-green-weak30: var(--base-color-dark-green-650);
245
+ --color-rainbow-dark-green-weak40: var(--base-color-dark-green-700);
246
246
  --color-rainbow-green-default: var(--base-color-green-500);
247
247
  --color-rainbow-green-strong10: var(--base-color-green-400);
248
248
  --color-rainbow-green-strong20: var(--base-color-green-350);
249
249
  --color-rainbow-green-strong30: var(--base-color-green-200);
250
- --color-rainbow-green-weak10: var(--base-color-green-650);
251
- --color-rainbow-green-weak20: var(--base-color-green-700);
252
- --color-rainbow-green-weak30: var(--base-color-green-750);
253
- --color-rainbow-green-weak40: var(--base-color-green-800);
250
+ --color-rainbow-green-weak10: var(--base-color-green-600);
251
+ --color-rainbow-green-weak20: var(--base-color-green-650);
252
+ --color-rainbow-green-weak30: var(--base-color-green-700);
253
+ --color-rainbow-green-weak40: var(--base-color-green-750);
254
254
  --color-rainbow-grey-default: var(--base-color-grey-500);
255
255
  --color-rainbow-grey-strong10: var(--base-color-grey-400);
256
256
  --color-rainbow-grey-strong20: var(--base-color-grey-350);
257
257
  --color-rainbow-grey-strong30: var(--base-color-grey-200);
258
- --color-rainbow-grey-weak10: var(--base-color-grey-650);
259
- --color-rainbow-grey-weak20: var(--base-color-grey-700);
260
- --color-rainbow-grey-weak30: var(--base-color-grey-750);
261
- --color-rainbow-grey-weak40: var(--base-color-grey-800);
258
+ --color-rainbow-grey-weak10: var(--base-color-grey-600);
259
+ --color-rainbow-grey-weak20: var(--base-color-grey-650);
260
+ --color-rainbow-grey-weak30: var(--base-color-grey-700);
261
+ --color-rainbow-grey-weak40: var(--base-color-grey-750);
262
262
  /** Strong contrasting neutral color, mostly for outlines. Intended for special cases, that do not justify an extra semantic token, e.g. for outlining the selected app tile. */
263
263
  --color-rainbow-mono-strong: var(--base-color-white-opaque);
264
264
  /** Weak contrasting neutral color, mostly for border. Camouflage with bg/default. Intended for special cases, that do not justify an extra semantic token, e.g. for separating a foreground element from its background. */
@@ -267,44 +267,44 @@
267
267
  --color-rainbow-orange-strong10: var(--base-color-orange-400);
268
268
  --color-rainbow-orange-strong20: var(--base-color-orange-350);
269
269
  --color-rainbow-orange-strong30: var(--base-color-orange-200);
270
- --color-rainbow-orange-weak10: var(--base-color-orange-650);
271
- --color-rainbow-orange-weak20: var(--base-color-orange-700);
272
- --color-rainbow-orange-weak30: var(--base-color-orange-750);
273
- --color-rainbow-orange-weak40: var(--base-color-orange-800);
274
- --color-rainbow-pink-default: var(--base-color-pink-500);
275
- --color-rainbow-pink-strong10: var(--base-color-pink-400);
276
- --color-rainbow-pink-strong20: var(--base-color-pink-350);
277
- --color-rainbow-pink-strong30: var(--base-color-pink-200);
278
- --color-rainbow-pink-weak10: var(--base-color-pink-650);
279
- --color-rainbow-pink-weak20: var(--base-color-pink-700);
280
- --color-rainbow-pink-weak30: var(--base-color-pink-750);
281
- --color-rainbow-pink-weak40: var(--base-color-pink-800);
282
- --color-rainbow-purple-default: var(--base-color-purple-500);
283
- --color-rainbow-purple-strong10: var(--base-color-purple-400);
284
- --color-rainbow-purple-strong20: var(--base-color-purple-350);
285
- --color-rainbow-purple-strong30: var(--base-color-purple-200);
286
- --color-rainbow-purple-weak10: var(--base-color-purple-650);
287
- --color-rainbow-purple-weak20: var(--base-color-purple-650);
288
- --color-rainbow-purple-weak30: var(--base-color-purple-750);
289
- --color-rainbow-purple-weak40: var(--base-color-purple-800);
290
- --color-rainbow-red-default: var(--base-color-red-500);
291
- --color-rainbow-red-strong10: var(--base-color-red-400);
292
- --color-rainbow-red-strong20: var(--base-color-red-350);
293
- --color-rainbow-red-strong30: var(--base-color-red-200);
294
- --color-rainbow-red-weak10: var(--base-color-red-650);
295
- --color-rainbow-red-weak20: var(--base-color-red-700);
296
- --color-rainbow-red-weak30: var(--base-color-red-750);
297
- --color-rainbow-red-weak40: var(--base-color-red-800);
270
+ --color-rainbow-orange-weak10: var(--base-color-orange-600);
271
+ --color-rainbow-orange-weak20: var(--base-color-orange-650);
272
+ --color-rainbow-orange-weak30: var(--base-color-orange-700);
273
+ --color-rainbow-orange-weak40: var(--base-color-orange-750);
274
+ --color-rainbow-pink-default: var(--base-color-pink-350);
275
+ --color-rainbow-pink-strong10: var(--base-color-pink-300);
276
+ --color-rainbow-pink-strong20: var(--base-color-pink-250);
277
+ --color-rainbow-pink-strong30: var(--base-color-pink-100);
278
+ --color-rainbow-pink-weak10: var(--base-color-pink-400);
279
+ --color-rainbow-pink-weak20: var(--base-color-pink-500);
280
+ --color-rainbow-pink-weak30: var(--base-color-pink-600);
281
+ --color-rainbow-pink-weak40: var(--base-color-pink-650);
282
+ --color-rainbow-purple-default: var(--base-color-purple-350);
283
+ --color-rainbow-purple-strong10: var(--base-color-purple-300);
284
+ --color-rainbow-purple-strong20: var(--base-color-purple-250);
285
+ --color-rainbow-purple-strong30: var(--base-color-purple-100);
286
+ --color-rainbow-purple-weak10: var(--base-color-purple-400);
287
+ --color-rainbow-purple-weak20: var(--base-color-purple-500);
288
+ --color-rainbow-purple-weak30: var(--base-color-purple-600);
289
+ --color-rainbow-purple-weak40: var(--base-color-purple-650);
290
+ --color-rainbow-red-default: var(--base-color-red-400);
291
+ --color-rainbow-red-strong10: var(--base-color-red-350);
292
+ --color-rainbow-red-strong20: var(--base-color-red-300);
293
+ --color-rainbow-red-strong30: var(--base-color-red-150);
294
+ --color-rainbow-red-weak10: var(--base-color-red-500);
295
+ --color-rainbow-red-weak20: var(--base-color-red-600);
296
+ --color-rainbow-red-weak30: var(--base-color-red-650);
297
+ --color-rainbow-red-weak40: var(--base-color-red-700);
298
298
  /** On dark backgrounds. For the foreground and the border, which are placed on a colored background that does not change with the design options. The selection is based on contrast. */
299
299
  --color-rainbow-white: var(--base-color-white-opaque);
300
300
  --color-rainbow-yellow-default: var(--base-color-yellow-500);
301
301
  --color-rainbow-yellow-strong10: var(--base-color-yellow-400);
302
302
  --color-rainbow-yellow-strong20: var(--base-color-yellow-350);
303
303
  --color-rainbow-yellow-strong30: var(--base-color-yellow-200);
304
- --color-rainbow-yellow-weak10: var(--base-color-yellow-650);
305
- --color-rainbow-yellow-weak20: var(--base-color-yellow-700);
306
- --color-rainbow-yellow-weak30: var(--base-color-yellow-750);
307
- --color-rainbow-yellow-weak40: var(--base-color-yellow-800);
304
+ --color-rainbow-yellow-weak10: var(--base-color-yellow-600);
305
+ --color-rainbow-yellow-weak20: var(--base-color-yellow-650);
306
+ --color-rainbow-yellow-weak30: var(--base-color-yellow-700);
307
+ --color-rainbow-yellow-weak40: var(--base-color-yellow-750);
308
308
  --color-rainbow-ai-default: linear-gradient(90deg, var(--color-rainbow-ai-default-gradient-start) 0%, var(--color-rainbow-ai-default-gradient-end) 100%);
309
309
  --color-rainbow-ai-strong10: linear-gradient(90deg, var(--color-rainbow-ai-strong10-gradient-start) 0%, var(--color-rainbow-ai-strong10-gradient-end) 100%);
310
310
  --color-rainbow-ai-strong20: linear-gradient(90deg, var(--color-rainbow-ai-strong20-gradient-start) 0%, var(--color-rainbow-ai-strong20-gradient-end) 100%);
package/dist/dark/tokens.css CHANGED
@@ -42,7 +42,7 @@
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
43
  --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
44
  /** Pressed state for color/bg/action-neutralWeakest */
45
- --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-750);
45
+ --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-650);
46
46
  /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
47
47
  --color-bg-assistive: var(--base-color-blue-750);
48
48
  /** Brand-based background color, primarily for the header area. The color does not suggest interactivity. */
@@ -58,7 +58,7 @@
58
58
  /** Background color for components that allow selection; customizable; Selection = choose something */
59
59
  --color-bg-selection-accent-default: var(--base-color-blue-500);
60
60
  /** Second background color for components that allow selection; customizable; Selection = choose something */
61
- --color-bg-selection-accent-weak: var(--base-color-blue-800);
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-700);
62
62
  /** Hover state for color/bg/selection-accentWeak */
63
63
  --color-bg-selection-accent-weak-hover: var(--base-color-blue-750);
64
64
  /** Third background color for components that allow selection; Selection = choose something */
@@ -118,7 +118,7 @@
118
118
  /** Border color for components that allow selection; customizable; Selection = choose something */
119
119
  --color-border-selection-accent-default: var(--base-color-blue-500);
120
120
  /** Second border color for components that allow selection; customizable; Selection = choose something */
121
- --color-border-selection-accent-weak: var(--base-color-blue-750);
121
+ --color-border-selection-accent-weak: var(--base-color-blue-700);
122
122
  /** Third border color for components that allow selectio; Selection = choose something */
123
123
  --color-border-selection-neutral-default: var(--base-color-grey-500);
124
124
  /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
@@ -207,58 +207,58 @@
207
207
  --color-rainbow-blue-strong10: var(--base-color-blue-400);
208
208
  --color-rainbow-blue-strong20: var(--base-color-blue-350);
209
209
  --color-rainbow-blue-strong30: var(--base-color-blue-200);
210
- --color-rainbow-blue-weak10: var(--base-color-blue-650);
211
- --color-rainbow-blue-weak20: var(--base-color-blue-700);
212
- --color-rainbow-blue-weak30: var(--base-color-blue-750);
213
- --color-rainbow-blue-weak40: var(--base-color-blue-800);
214
- --color-rainbow-brown-default: var(--base-color-brown-500);
215
- --color-rainbow-brown-strong10: var(--base-color-brown-400);
216
- --color-rainbow-brown-strong20: var(--base-color-brown-350);
217
- --color-rainbow-brown-strong30: var(--base-color-brown-200);
218
- --color-rainbow-brown-weak10: var(--base-color-brown-650);
219
- --color-rainbow-brown-weak20: var(--base-color-brown-700);
220
- --color-rainbow-brown-weak30: var(--base-color-brown-750);
221
- --color-rainbow-brown-weak40: var(--base-color-brown-800);
222
- --color-rainbow-cyan-default: var(--base-color-cyan-500);
223
- --color-rainbow-cyan-strong10: var(--base-color-cyan-400);
224
- --color-rainbow-cyan-strong20: var(--base-color-cyan-350);
225
- --color-rainbow-cyan-strong30: var(--base-color-cyan-200);
226
- --color-rainbow-cyan-weak10: var(--base-color-cyan-650);
227
- --color-rainbow-cyan-weak20: var(--base-color-cyan-700);
228
- --color-rainbow-cyan-weak30: var(--base-color-cyan-750);
229
- --color-rainbow-cyan-weak40: var(--base-color-cyan-800);
230
- --color-rainbow-dark-blue-default: var(--base-color-dark-blue-500);
231
- --color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-400);
232
- --color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-350);
233
- --color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-200);
234
- --color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-650);
235
- --color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-700);
236
- --color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-750);
237
- --color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-800);
238
- --color-rainbow-dark-green-default: var(--base-color-dark-green-500);
239
- --color-rainbow-dark-green-strong10: var(--base-color-dark-green-400);
240
- --color-rainbow-dark-green-strong20: var(--base-color-dark-green-350);
241
- --color-rainbow-dark-green-strong30: var(--base-color-dark-green-200);
242
- --color-rainbow-dark-green-weak10: var(--base-color-dark-green-650);
243
- --color-rainbow-dark-green-weak20: var(--base-color-dark-green-700);
244
- --color-rainbow-dark-green-weak30: var(--base-color-dark-green-750);
245
- --color-rainbow-dark-green-weak40: var(--base-color-dark-green-800);
210
+ --color-rainbow-blue-weak10: var(--base-color-blue-600);
211
+ --color-rainbow-blue-weak20: var(--base-color-blue-650);
212
+ --color-rainbow-blue-weak30: var(--base-color-blue-700);
213
+ --color-rainbow-blue-weak40: var(--base-color-blue-750);
214
+ --color-rainbow-brown-default: var(--base-color-brown-350);
215
+ --color-rainbow-brown-strong10: var(--base-color-brown-300);
216
+ --color-rainbow-brown-strong20: var(--base-color-brown-250);
217
+ --color-rainbow-brown-strong30: var(--base-color-brown-100);
218
+ --color-rainbow-brown-weak10: var(--base-color-brown-400);
219
+ --color-rainbow-brown-weak20: var(--base-color-brown-500);
220
+ --color-rainbow-brown-weak30: var(--base-color-brown-600);
221
+ --color-rainbow-brown-weak40: var(--base-color-brown-650);
222
+ --color-rainbow-cyan-default: var(--base-color-cyan-400);
223
+ --color-rainbow-cyan-strong10: var(--base-color-cyan-350);
224
+ --color-rainbow-cyan-strong20: var(--base-color-cyan-300);
225
+ --color-rainbow-cyan-strong30: var(--base-color-cyan-150);
226
+ --color-rainbow-cyan-weak10: var(--base-color-cyan-500);
227
+ --color-rainbow-cyan-weak20: var(--base-color-cyan-600);
228
+ --color-rainbow-cyan-weak30: var(--base-color-cyan-650);
229
+ --color-rainbow-cyan-weak40: var(--base-color-cyan-700);
230
+ --color-rainbow-dark-blue-default: var(--base-color-dark-blue-350);
231
+ --color-rainbow-dark-blue-strong10: var(--base-color-dark-blue-300);
232
+ --color-rainbow-dark-blue-strong20: var(--base-color-dark-blue-250);
233
+ --color-rainbow-dark-blue-strong30: var(--base-color-dark-blue-100);
234
+ --color-rainbow-dark-blue-weak10: var(--base-color-dark-blue-400);
235
+ --color-rainbow-dark-blue-weak20: var(--base-color-dark-blue-500);
236
+ --color-rainbow-dark-blue-weak30: var(--base-color-dark-blue-600);
237
+ --color-rainbow-dark-blue-weak40: var(--base-color-dark-blue-650);
238
+ --color-rainbow-dark-green-default: var(--base-color-dark-green-400);
239
+ --color-rainbow-dark-green-strong10: var(--base-color-dark-green-350);
240
+ --color-rainbow-dark-green-strong20: var(--base-color-dark-green-300);
241
+ --color-rainbow-dark-green-strong30: var(--base-color-dark-green-150);
242
+ --color-rainbow-dark-green-weak10: var(--base-color-dark-green-500);
243
+ --color-rainbow-dark-green-weak20: var(--base-color-dark-green-600);
244
+ --color-rainbow-dark-green-weak30: var(--base-color-dark-green-650);
245
+ --color-rainbow-dark-green-weak40: var(--base-color-dark-green-700);
246
246
  --color-rainbow-green-default: var(--base-color-green-500);
247
247
  --color-rainbow-green-strong10: var(--base-color-green-400);
248
248
  --color-rainbow-green-strong20: var(--base-color-green-350);
249
249
  --color-rainbow-green-strong30: var(--base-color-green-200);
250
- --color-rainbow-green-weak10: var(--base-color-green-650);
251
- --color-rainbow-green-weak20: var(--base-color-green-700);
252
- --color-rainbow-green-weak30: var(--base-color-green-750);
253
- --color-rainbow-green-weak40: var(--base-color-green-800);
250
+ --color-rainbow-green-weak10: var(--base-color-green-600);
251
+ --color-rainbow-green-weak20: var(--base-color-green-650);
252
+ --color-rainbow-green-weak30: var(--base-color-green-700);
253
+ --color-rainbow-green-weak40: var(--base-color-green-750);
254
254
  --color-rainbow-grey-default: var(--base-color-grey-500);
255
255
  --color-rainbow-grey-strong10: var(--base-color-grey-400);
256
256
  --color-rainbow-grey-strong20: var(--base-color-grey-350);
257
257
  --color-rainbow-grey-strong30: var(--base-color-grey-200);
258
- --color-rainbow-grey-weak10: var(--base-color-grey-650);
259
- --color-rainbow-grey-weak20: var(--base-color-grey-700);
260
- --color-rainbow-grey-weak30: var(--base-color-grey-750);
261
- --color-rainbow-grey-weak40: var(--base-color-grey-800);
258
+ --color-rainbow-grey-weak10: var(--base-color-grey-600);
259
+ --color-rainbow-grey-weak20: var(--base-color-grey-650);
260
+ --color-rainbow-grey-weak30: var(--base-color-grey-700);
261
+ --color-rainbow-grey-weak40: var(--base-color-grey-750);
262
262
  /** Strong contrasting neutral color, mostly for outlines. Intended for special cases, that do not justify an extra semantic token, e.g. for outlining the selected app tile. */
263
263
  --color-rainbow-mono-strong: var(--base-color-white-opaque);
264
264
  /** Weak contrasting neutral color, mostly for border. Camouflage with bg/default. Intended for special cases, that do not justify an extra semantic token, e.g. for separating a foreground element from its background. */
@@ -267,44 +267,44 @@
267
267
  --color-rainbow-orange-strong10: var(--base-color-orange-400);
268
268
  --color-rainbow-orange-strong20: var(--base-color-orange-350);
269
269
  --color-rainbow-orange-strong30: var(--base-color-orange-200);
270
- --color-rainbow-orange-weak10: var(--base-color-orange-650);
271
- --color-rainbow-orange-weak20: var(--base-color-orange-700);
272
- --color-rainbow-orange-weak30: var(--base-color-orange-750);
273
- --color-rainbow-orange-weak40: var(--base-color-orange-800);
274
- --color-rainbow-pink-default: var(--base-color-pink-500);
275
- --color-rainbow-pink-strong10: var(--base-color-pink-400);
276
- --color-rainbow-pink-strong20: var(--base-color-pink-350);
277
- --color-rainbow-pink-strong30: var(--base-color-pink-200);
278
- --color-rainbow-pink-weak10: var(--base-color-pink-650);
279
- --color-rainbow-pink-weak20: var(--base-color-pink-700);
280
- --color-rainbow-pink-weak30: var(--base-color-pink-750);
281
- --color-rainbow-pink-weak40: var(--base-color-pink-800);
282
- --color-rainbow-purple-default: var(--base-color-purple-500);
283
- --color-rainbow-purple-strong10: var(--base-color-purple-400);
284
- --color-rainbow-purple-strong20: var(--base-color-purple-350);
285
- --color-rainbow-purple-strong30: var(--base-color-purple-200);
286
- --color-rainbow-purple-weak10: var(--base-color-purple-650);
287
- --color-rainbow-purple-weak20: var(--base-color-purple-650);
288
- --color-rainbow-purple-weak30: var(--base-color-purple-750);
289
- --color-rainbow-purple-weak40: var(--base-color-purple-800);
290
- --color-rainbow-red-default: var(--base-color-red-500);
291
- --color-rainbow-red-strong10: var(--base-color-red-400);
292
- --color-rainbow-red-strong20: var(--base-color-red-350);
293
- --color-rainbow-red-strong30: var(--base-color-red-200);
294
- --color-rainbow-red-weak10: var(--base-color-red-650);
295
- --color-rainbow-red-weak20: var(--base-color-red-700);
296
- --color-rainbow-red-weak30: var(--base-color-red-750);
297
- --color-rainbow-red-weak40: var(--base-color-red-800);
270
+ --color-rainbow-orange-weak10: var(--base-color-orange-600);
271
+ --color-rainbow-orange-weak20: var(--base-color-orange-650);
272
+ --color-rainbow-orange-weak30: var(--base-color-orange-700);
273
+ --color-rainbow-orange-weak40: var(--base-color-orange-750);
274
+ --color-rainbow-pink-default: var(--base-color-pink-350);
275
+ --color-rainbow-pink-strong10: var(--base-color-pink-300);
276
+ --color-rainbow-pink-strong20: var(--base-color-pink-250);
277
+ --color-rainbow-pink-strong30: var(--base-color-pink-100);
278
+ --color-rainbow-pink-weak10: var(--base-color-pink-400);
279
+ --color-rainbow-pink-weak20: var(--base-color-pink-500);
280
+ --color-rainbow-pink-weak30: var(--base-color-pink-600);
281
+ --color-rainbow-pink-weak40: var(--base-color-pink-650);
282
+ --color-rainbow-purple-default: var(--base-color-purple-350);
283
+ --color-rainbow-purple-strong10: var(--base-color-purple-300);
284
+ --color-rainbow-purple-strong20: var(--base-color-purple-250);
285
+ --color-rainbow-purple-strong30: var(--base-color-purple-100);
286
+ --color-rainbow-purple-weak10: var(--base-color-purple-400);
287
+ --color-rainbow-purple-weak20: var(--base-color-purple-500);
288
+ --color-rainbow-purple-weak30: var(--base-color-purple-600);
289
+ --color-rainbow-purple-weak40: var(--base-color-purple-650);
290
+ --color-rainbow-red-default: var(--base-color-red-400);
291
+ --color-rainbow-red-strong10: var(--base-color-red-350);
292
+ --color-rainbow-red-strong20: var(--base-color-red-300);
293
+ --color-rainbow-red-strong30: var(--base-color-red-150);
294
+ --color-rainbow-red-weak10: var(--base-color-red-500);
295
+ --color-rainbow-red-weak20: var(--base-color-red-600);
296
+ --color-rainbow-red-weak30: var(--base-color-red-650);
297
+ --color-rainbow-red-weak40: var(--base-color-red-700);
298
298
  /** On dark backgrounds. For the foreground and the border, which are placed on a colored background that does not change with the design options. The selection is based on contrast. */
299
299
  --color-rainbow-white: var(--base-color-white-opaque);
300
300
  --color-rainbow-yellow-default: var(--base-color-yellow-500);
301
301
  --color-rainbow-yellow-strong10: var(--base-color-yellow-400);
302
302
  --color-rainbow-yellow-strong20: var(--base-color-yellow-350);
303
303
  --color-rainbow-yellow-strong30: var(--base-color-yellow-200);
304
- --color-rainbow-yellow-weak10: var(--base-color-yellow-650);
305
- --color-rainbow-yellow-weak20: var(--base-color-yellow-700);
306
- --color-rainbow-yellow-weak30: var(--base-color-yellow-750);
307
- --color-rainbow-yellow-weak40: var(--base-color-yellow-800);
304
+ --color-rainbow-yellow-weak10: var(--base-color-yellow-600);
305
+ --color-rainbow-yellow-weak20: var(--base-color-yellow-650);
306
+ --color-rainbow-yellow-weak30: var(--base-color-yellow-700);
307
+ --color-rainbow-yellow-weak40: var(--base-color-yellow-750);
308
308
  --color-rainbow-ai-default: linear-gradient(90deg, var(--color-rainbow-ai-default-gradient-start) 0%, var(--color-rainbow-ai-default-gradient-end) 100%);
309
309
  --color-rainbow-ai-strong10: linear-gradient(90deg, var(--color-rainbow-ai-strong10-gradient-start) 0%, var(--color-rainbow-ai-strong10-gradient-end) 100%);
310
310
  --color-rainbow-ai-strong20: linear-gradient(90deg, var(--color-rainbow-ai-strong20-gradient-start) 0%, var(--color-rainbow-ai-strong20-gradient-end) 100%);