@cas-smartdesign/design-tokens 3.0.3 → 3.0.5

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 (11) hide show
  1. package/dist/dark/_tokens.scss +78 -78
  2. package/dist/dark/tokens.css +78 -78
  3. package/dist/dark/tokens.json +156 -156
  4. package/dist/docs/index.html +160 -96
  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 +81 -81
  9. package/package.json +8 -2
  10. package/theme-switcher.d.ts +3 -0
  11. package/theme-switcher.mjs +133 -0
package/dist/dark/_tokens.scss CHANGED
@@ -40,9 +40,9 @@
40
40
  /** Another background color for less prominent actions; Action = do something */
41
41
  --color-bg-action-neutral-weakest: var(--base-color-grey-800);
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
- --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-750);
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. */
@@ -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
@@ -40,9 +40,9 @@
40
40
  /** Another background color for less prominent actions; Action = do something */
41
41
  --color-bg-action-neutral-weakest: var(--base-color-grey-800);
42
42
  /** Hover state for color/bg/action-neutralWeakest */
43
- --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-750);
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. */
@@ -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%);