@cas-smartdesign/design-tokens 2.0.0 → 3.0.0

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 (38) hide show
  1. package/dist/base/_tokens.scss +401 -0
  2. package/dist/base/tokens.css +401 -0
  3. package/dist/base/tokens.json +6810 -0
  4. package/dist/dark/_tokens.scss +316 -0
  5. package/dist/dark/tokens.css +316 -0
  6. package/dist/dark/tokens.json +4103 -0
  7. package/dist/docs/assets/color-prominence-guide.svg +53 -0
  8. package/dist/docs/assets/color-role-guide.svg +65 -0
  9. package/dist/docs/assets/color-state-guide.svg +53 -0
  10. package/dist/docs/assets/color-type-guide.svg +58 -0
  11. package/dist/docs/assets/examples/buttons_default.svg +124 -0
  12. package/dist/docs/assets/examples/buttons_ghost.svg +119 -0
  13. package/dist/docs/assets/examples/buttons_outline.svg +142 -0
  14. package/dist/docs/assets/examples/buttons_standard.svg +129 -0
  15. package/dist/docs/assets/examples/checkbox_default.svg +106 -0
  16. package/dist/docs/assets/examples/content.svg +68 -0
  17. package/dist/docs/assets/examples/input_default-focus.svg +87 -0
  18. package/dist/docs/assets/examples/input_default.svg +46 -0
  19. package/dist/docs/assets/examples/input_disabled.svg +70 -0
  20. package/dist/docs/assets/examples/input_error.svg +48 -0
  21. package/dist/docs/assets/examples/input_warning.svg +46 -0
  22. package/dist/docs/assets/examples/list_item_navigation.svg +193 -0
  23. package/dist/docs/assets/examples/list_item_selection.svg +113 -0
  24. package/dist/docs/assets/examples/note.svg +160 -0
  25. package/dist/docs/assets/examples/segmented_button_group.svg +57 -0
  26. package/dist/docs/assets/examples/tag.svg +190 -0
  27. package/dist/docs/index.html +5317 -192
  28. package/dist/light/_tokens.scss +316 -0
  29. package/dist/light/tokens.css +316 -0
  30. package/dist/light/tokens.json +4103 -0
  31. package/dist/tokens.css +1033 -165
  32. package/npm-third-party-licenses.json +1 -1
  33. package/package.json +15 -5
  34. package/readme.md +7 -2
  35. package/dist/tokens.d.ts +0 -222
  36. package/dist/tokens.esm.js +0 -2189
  37. package/dist/tokens.json +0 -2993
  38. package/dist/tokens.scss +0 -494
package/dist/dark/_tokens.scss ADDED
@@ -0,0 +1,316 @@
1
+ @mixin dark {
2
+ /** Customizable background color, not interactive. The color does not suggest interactivity. */
3
+ --color-bg-accent: var(--base-color-blue-500);
4
+ /** Default background color for “call-to-actions”; customisable; Action = do something */
5
+ --color-bg-action-accent-default: var(--base-color-blue-500);
6
+ /** Hover state for color/bg/action-accentDefault */
7
+ --color-bg-action-accent-default-hover: var(--base-color-blue-600);
8
+ /** Pressed state for color/bg/action-accentDefault */
9
+ --color-bg-action-accent-default-pressed: var(--base-color-blue-650);
10
+ /** Another background color for less prominent actions; customisable; Action = do something */
11
+ --color-bg-action-accent-weak: var(--base-color-blue-850);
12
+ /** Hover state for color/bg/action-accentWeak */
13
+ --color-bg-action-accent-weak-hover: var(--base-color-blue-800);
14
+ /** Pressed state for color/bg/action-accentWeak */
15
+ --color-bg-action-accent-weak-pressed: var(--base-color-blue-750);
16
+ /** Another background color for less prominent actions; customisable (see hover, pressed states); Action = do something */
17
+ --color-bg-action-accent-weakest: var(--base-color-grey-800);
18
+ /** Hover state for color/bg/action-accentWeakest */
19
+ --color-bg-action-accent-weakest-hover: var(--base-color-dark-blue-750);
20
+ /** Pressed state for color/bg/action-accentWeakest */
21
+ --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-800);
22
+ /** Background color for interactive elements that have a destructive or caution-critical effect; Action = do something */
23
+ --color-bg-action-danger-default: var(--base-color-red-800);
24
+ /** Hover state for color/bg/action-dangerDefault */
25
+ --color-bg-action-danger-default-hover: var(--base-color-red-750);
26
+ /** Pressed state for color/bg/action-dangerDefault */
27
+ --color-bg-action-danger-default-pressed: var(--base-color-red-700);
28
+ /** Default neutral background color for actions; Action = do something */
29
+ --color-bg-action-neutral-default: var(--base-color-grey-700);
30
+ /** Hover state for color/bg/action-neutralDefault */
31
+ --color-bg-action-neutral-default-hover: var(--base-color-grey-650);
32
+ /** Pressed state for color/bg/action-neutralDefault */
33
+ --color-bg-action-neutral-default-pressed: var(--base-color-grey-600);
34
+ /** Another background color for less prominent actions; Action = do something */
35
+ --color-bg-action-neutral-weak: var(--base-color-grey-700);
36
+ /** Hover state for color/bg/action-neutralWeak */
37
+ --color-bg-action-neutral-weak-hover: var(--base-color-grey-650);
38
+ /** Pressed state for color/bg/action-neutralWeak */
39
+ --color-bg-action-neutral-weak-pressed: var(--base-color-grey-600);
40
+ /** Another background color for less prominent actions; Action = do something */
41
+ --color-bg-action-neutral-weakest: var(--base-color-grey-800);
42
+ /** Hover state for color/bg/action-neutralWeakest */
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
+ /** Pressed state for color/bg/action-neutralWeakest */
45
+ --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-750);
46
+ /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
47
+ --color-bg-assistive: var(--base-color-blue-750);
48
+ /** Brand-based background color, primarily for the header area. The color does not suggest interactivity. */
49
+ --color-bg-brand: var(--base-color-grey-700);
50
+ /** Background color for the highest alert level. The color does not suggest interactivity. */
51
+ --color-bg-danger: var(--base-color-red-800);
52
+ /** Default background color for the layout, such as “regions”/”groups”. The color does not suggest interactivity. */
53
+ --color-bg-default: var(--base-color-grey-800);
54
+ /** Slightly translucent backgrond color for the layout. The color does not suggest interactivity. */
55
+ --color-bg-default-translucent: var(--base-color-grey-800op80);
56
+ /** Background color for interactive elements that are in a “disabled” state */
57
+ --color-bg-interaction-disabled: var(--base-color-grey-850);
58
+ /** Background color for components that allow selection; customizable; Selection = choose something */
59
+ --color-bg-selection-accent-default: var(--base-color-blue-500);
60
+ /** Second background color for components that allow selection; customizable; Selection = choose something */
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-800);
62
+ /** Hover state for color/bg/selection-accentWeak */
63
+ --color-bg-selection-accent-weak-hover: var(--base-color-blue-850);
64
+ /** Third background color for components that allow selection; Selection = choose something */
65
+ --color-bg-selection-neutral-default: var(--base-color-grey-700);
66
+ /** Hover state for color/bg/selection-neutralDefault */
67
+ --color-bg-selection-neutral-default-hover: var(--base-color-grey-750);
68
+ /** Fourth background color for components that allow selection; Selection = choose something */
69
+ --color-bg-selection-neutral-weakest: var(--base-color-grey-800);
70
+ /** Background color for success messages. The color does not suggest interactivity. */
71
+ --color-bg-success: var(--base-color-dark-green-750);
72
+ /** Background color for a lower warning level. The color does not suggest interactivity. */
73
+ --color-bg-warning: var(--base-color-yellow-800);
74
+ /** A softer background color for the layout. The color does not suggest interactivity. */
75
+ --color-bg-weak: var(--base-color-grey-900);
76
+ /** An even softer background color for the layout. The color does not suggest interactivity. */
77
+ --color-bg-weaker: var(--base-color-black-opaque);
78
+ /** Customizable border color, not interactive. The color does not suggest interactivity. */
79
+ --color-border-accent: var(--base-color-blue-500);
80
+ /** Default border color for important actions; customisable; Action = do something */
81
+ --color-border-action-accent-default: var(--base-color-blue-500);
82
+ /** Hover state for color/border/action-accentDefault */
83
+ --color-border-action-accent-default-hover: var(--base-color-blue-600);
84
+ /** Pressed state for color/border/action-accentDefault */
85
+ --color-border-action-accent-default-pressed: var(--base-color-blue-650);
86
+ /** border color for interactive elements that have a destructive or caution-critical effect; Action = do something */
87
+ --color-border-action-danger-default: var(--base-color-red-400);
88
+ /** Hover state for color/border/action-dangerDefault */
89
+ --color-border-action-danger-default-hover: var(--base-color-red-500);
90
+ /** Pressed state for color/border/action-dangerDefault */
91
+ --color-border-action-danger-default-pressed: var(--base-color-red-600);
92
+ /** Default neutral border color for actions; Action = do something */
93
+ --color-border-action-neutral-default: var(--base-color-grey-500);
94
+ /** Hover state for color/border/action-neutralDefault */
95
+ --color-border-action-neutral-default-hover: var(--base-color-grey-400);
96
+ /** Pressed state for color/border/action-neutralDefault */
97
+ --color-border-action-neutral-default-pressed: var(--base-color-grey-350);
98
+ /** Border color for assistive information, not customizable. The color does not suggest interactivity. */
99
+ --color-border-assistive-default: var(--base-color-blue-700);
100
+ /** Neutral border color for assistive information, not customizable. The color does not suggest interactivity. */
101
+ --color-border-assistive-neutral: var(--base-color-grey-700);
102
+ /** Strong border color for success messages. The color does not suggest interactivity. */
103
+ --color-border-assistive-strong: var(--base-color-blue-500);
104
+ /** Standard border color for the highest alert level. The color does not suggest interactivity. */
105
+ --color-border-danger-default: var(--base-color-red-750);
106
+ /** Strong border color for the highest alert level. The color does not suggest interactivity. */
107
+ --color-border-danger-strong: var(--base-color-red-400);
108
+ /** Default color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
109
+ --color-border-default: var(--base-color-grey-650);
110
+ /** Border color for interactive elements that are in a “disabled” state */
111
+ --color-border-interaction-disabled: var(--base-color-grey-650);
112
+ /** Border color for the visible focus of interactive elements */
113
+ --color-border-interaction-focus: var(--base-color-white-opaque);
114
+ /** Borders around elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
115
+ --color-border-on-color: var(--base-color-black-opaque);
116
+ /** Used in the layout on a slightly translucent background color. The color does not suggest interactivity. */
117
+ --color-border-on-translucent: var(--base-color-grey-750);
118
+ /** Border color for components that allow selection; customizable; Selection = choose something */
119
+ --color-border-selection-accent-default: var(--base-color-blue-500);
120
+ /** Second border color for components that allow selection; customizable; Selection = choose something */
121
+ --color-border-selection-accent-weak: var(--base-color-blue-750);
122
+ /** Third border color for components that allow selectio; Selection = choose something */
123
+ --color-border-selection-neutral-default: var(--base-color-grey-500);
124
+ /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
125
+ --color-border-strong: var(--base-color-grey-500);
126
+ /** Standard border color for success messages. The color does not suggest interactivity. */
127
+ --color-border-success-default: var(--base-color-dark-green-700);
128
+ /** Strong border color for success messages. The color does not suggest interactivity. */
129
+ --color-border-success-strong: var(--base-color-dark-green-400);
130
+ /** Standard border color for a lower warning level. The color does not suggest interactivity. */
131
+ --color-border-warning-default: var(--base-color-yellow-750);
132
+ /** Strong border color for a lower warning level. The color does not suggest interactivity. */
133
+ --color-border-warning-strong: var(--base-color-yellow-400);
134
+ /** Less contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
135
+ --color-border-weak: var(--base-color-grey-750);
136
+ /** Customizable foreground color. The color does not suggest interactivity. */
137
+ --color-fg-accent: var(--base-color-blue-500);
138
+ /** Default color for interactive text (hyperlinks) and other interactive foreground elements; customisable; Action = do something */
139
+ --color-fg-action-accent-default: var(--base-color-blue-500);
140
+ /** Hover state for color/fg/action-accentDefault */
141
+ --color-fg-action-accent-default-hover: var(--base-color-blue-600);
142
+ /** Pressed state for color/fg/action-accentDefault */
143
+ --color-fg-action-accent-default-pressed: var(--base-color-blue-700);
144
+ /** Foreground color for interactive elements that have a destructive or caution-critical effect; Action = do something */
145
+ --color-fg-action-danger-default: var(--base-color-red-400);
146
+ /** Hover state for color/fg/action-dangerDefault */
147
+ --color-fg-action-danger-default-hover: var(--base-color-red-500);
148
+ /** Pressed state for color/fg/action-dangerDefault */
149
+ --color-fg-action-danger-default-pressed: var(--base-color-red-600);
150
+ /** Default neutral foreground color for actions.; Action = do something */
151
+ --color-fg-action-neutral-default: var(--base-color-white-opaque);
152
+ /** Hover state for color/fg/action-neutralDefault */
153
+ --color-fg-action-neutral-default-hover: var(--base-color-white-opaque);
154
+ /** Pressed state for color/fg/action-neutralDefault */
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-white-opaque);
156
+ /** Interactive text with even lower prominence; Action = do something */
157
+ --color-fg-action-neutral-weak: var(--base-color-grey-400);
158
+ /** Hover state for color/fg/action-neutralWeak */
159
+ --color-fg-action-neutral-weak-hover: var(--base-color-grey-350);
160
+ /** Pressed state for color/fg/action-neutralWeak */
161
+ --color-fg-action-neutral-weak-pressed: var(--base-color-grey-250);
162
+ /** Assistive foreground color, not customizable. The color does not suggest interactivity. */
163
+ --color-fg-assistive-default: var(--base-color-blue-500);
164
+ /** Neutral assistive foreground color, not customizable. The color does not suggest interactivity. */
165
+ --color-fg-assistive-neutral: var(--base-color-grey-400);
166
+ /** Text and other foreground elements at the highest alert level. The color does not suggest interactivity. */
167
+ --color-fg-danger: var(--base-color-red-400);
168
+ /** Default color for text and other foreground elements. The color does not suggest interactivity. */
169
+ --color-fg-default: var(--base-color-white-opaque);
170
+ /** Text and foreground colors of interactive elements that are in a “disabled” state */
171
+ --color-fg-interaction-disabled: var(--base-color-grey-500);
172
+ /** Text and foregrounds of interactive elements using high-contrast colors for strong backgrounds. */
173
+ --color-fg-interaction-on-color: var(--base-color-black-opaque);
174
+ /** Text and foregrounds elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
175
+ --color-fg-on-color: var(--base-color-black-opaque);
176
+ /** Default color for text and the foreground of controls that allow selection, such as checkboxes or radio buttons; customizable; Selection = choose something */
177
+ --color-fg-selection-accent-default: var(--base-color-blue-500);
178
+ /** Second color for text and the foreground of controls that allow selection; Selection = choose something */
179
+ --color-fg-selection-neutral-default: var(--base-color-white-opaque);
180
+ /** Text and other foreground elements that indicate success. The color does not suggest interactivity. */
181
+ --color-fg-success: var(--base-color-dark-green-400);
182
+ /** Text and other foreground elements with a lower warning level. The color does not suggest interactivity. */
183
+ --color-fg-warning: var(--base-color-yellow-400);
184
+ /** Text with lower contrast. The color does not suggest interactivity. */
185
+ --color-fg-weak: var(--base-color-grey-250);
186
+ /** Text with even lower contrast. The color does not suggest interactivity. */
187
+ --color-fg-weaker: var(--base-color-grey-300);
188
+ --color-rainbow-ai-default-gradient-end: var(--base-color-friendly-blue-500);
189
+ --color-rainbow-ai-default-gradient-start: var(--base-color-blue-500);
190
+ --color-rainbow-ai-strong10-gradient-end: var(--base-color-friendly-blue-400);
191
+ --color-rainbow-ai-strong10-gradient-start: var(--base-color-blue-400);
192
+ --color-rainbow-ai-strong20-gradient-end: var(--base-color-friendly-blue-350);
193
+ --color-rainbow-ai-strong20-gradient-start: var(--base-color-blue-350);
194
+ --color-rainbow-ai-strong30-gradient-end: var(--base-color-friendly-blue-200);
195
+ --color-rainbow-ai-strong30-gradient-start: var(--base-color-blue-200);
196
+ --color-rainbow-ai-weak10-gradient-end: var(--base-color-friendly-blue-650);
197
+ --color-rainbow-ai-weak10-gradient-start: var(--base-color-blue-650);
198
+ --color-rainbow-ai-weak20-gradient-end: var(--base-color-friendly-blue-700);
199
+ --color-rainbow-ai-weak20-gradient-start: var(--base-color-blue-700);
200
+ --color-rainbow-ai-weak30-gradient-end: var(--base-color-friendly-blue-750);
201
+ --color-rainbow-ai-weak30-gradient-start: var(--base-color-blue-800);
202
+ --color-rainbow-ai-weak40-gradient-end: var(--base-color-friendly-blue-800);
203
+ --color-rainbow-ai-weak40-gradient-start: var(--base-color-blue-850);
204
+ /** On bright 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. */
205
+ --color-rainbow-black: var(--base-color-black-opaque);
206
+ --color-rainbow-blue-default: var(--base-color-blue-500);
207
+ --color-rainbow-blue-strong10: var(--base-color-blue-400);
208
+ --color-rainbow-blue-strong20: var(--base-color-blue-350);
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);
246
+ --color-rainbow-green-default: var(--base-color-green-500);
247
+ --color-rainbow-green-strong10: var(--base-color-green-400);
248
+ --color-rainbow-green-strong20: var(--base-color-green-350);
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);
254
+ --color-rainbow-grey-default: var(--base-color-grey-500);
255
+ --color-rainbow-grey-strong10: var(--base-color-grey-400);
256
+ --color-rainbow-grey-strong20: var(--base-color-grey-350);
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);
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
+ --color-rainbow-mono-strong: var(--base-color-white-opaque);
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. */
265
+ --color-rainbow-mono-weak: var(--base-color-grey-800);
266
+ --color-rainbow-orange-default: var(--base-color-orange-500);
267
+ --color-rainbow-orange-strong10: var(--base-color-orange-400);
268
+ --color-rainbow-orange-strong20: var(--base-color-orange-350);
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);
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
+ --color-rainbow-white: var(--base-color-white-opaque);
300
+ --color-rainbow-yellow-default: var(--base-color-yellow-500);
301
+ --color-rainbow-yellow-strong10: var(--base-color-yellow-400);
302
+ --color-rainbow-yellow-strong20: var(--base-color-yellow-350);
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);
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
+ --color-rainbow-ai-strong10: linear-gradient(90deg, var(--color-rainbow-ai-strong10-gradient-start) 0%, var(--color-rainbow-ai-strong10-gradient-end) 100%);
310
+ --color-rainbow-ai-strong20: linear-gradient(90deg, var(--color-rainbow-ai-strong20-gradient-start) 0%, var(--color-rainbow-ai-strong20-gradient-end) 100%);
311
+ --color-rainbow-ai-strong30: linear-gradient(90deg, var(--color-rainbow-ai-strong30-gradient-start) 0%, var(--color-rainbow-ai-strong30-gradient-end) 100%);
312
+ --color-rainbow-ai-weak10: linear-gradient(90deg, var(--color-rainbow-ai-weak10-gradient-start) 0%, var(--color-rainbow-ai-weak10-gradient-end) 100%);
313
+ --color-rainbow-ai-weak20: linear-gradient(270deg, var(--color-rainbow-ai-weak20-gradient-start) 0%, var(--color-rainbow-ai-weak20-gradient-end) 100%);
314
+ --color-rainbow-ai-weak30: linear-gradient(270deg, var(--color-rainbow-ai-weak30-gradient-start) 0%, var(--color-rainbow-ai-weak30-gradient-end) 100%);
315
+ --color-rainbow-ai-weak40: linear-gradient(270deg, var(--color-rainbow-ai-weak40-gradient-start) 0%, var(--color-rainbow-ai-weak40-gradient-end) 100%);
316
+ }
package/dist/dark/tokens.css ADDED
@@ -0,0 +1,316 @@
1
+ [sd-color-scheme="light dark"].prefers-dark, [sd-color-scheme="dark"] {
2
+ /** Customizable background color, not interactive. The color does not suggest interactivity. */
3
+ --color-bg-accent: var(--base-color-blue-500);
4
+ /** Default background color for “call-to-actions”; customisable; Action = do something */
5
+ --color-bg-action-accent-default: var(--base-color-blue-500);
6
+ /** Hover state for color/bg/action-accentDefault */
7
+ --color-bg-action-accent-default-hover: var(--base-color-blue-600);
8
+ /** Pressed state for color/bg/action-accentDefault */
9
+ --color-bg-action-accent-default-pressed: var(--base-color-blue-650);
10
+ /** Another background color for less prominent actions; customisable; Action = do something */
11
+ --color-bg-action-accent-weak: var(--base-color-blue-850);
12
+ /** Hover state for color/bg/action-accentWeak */
13
+ --color-bg-action-accent-weak-hover: var(--base-color-blue-800);
14
+ /** Pressed state for color/bg/action-accentWeak */
15
+ --color-bg-action-accent-weak-pressed: var(--base-color-blue-750);
16
+ /** Another background color for less prominent actions; customisable (see hover, pressed states); Action = do something */
17
+ --color-bg-action-accent-weakest: var(--base-color-grey-800);
18
+ /** Hover state for color/bg/action-accentWeakest */
19
+ --color-bg-action-accent-weakest-hover: var(--base-color-dark-blue-750);
20
+ /** Pressed state for color/bg/action-accentWeakest */
21
+ --color-bg-action-accent-weakest-pressed: var(--base-color-dark-blue-800);
22
+ /** Background color for interactive elements that have a destructive or caution-critical effect; Action = do something */
23
+ --color-bg-action-danger-default: var(--base-color-red-800);
24
+ /** Hover state for color/bg/action-dangerDefault */
25
+ --color-bg-action-danger-default-hover: var(--base-color-red-750);
26
+ /** Pressed state for color/bg/action-dangerDefault */
27
+ --color-bg-action-danger-default-pressed: var(--base-color-red-700);
28
+ /** Default neutral background color for actions; Action = do something */
29
+ --color-bg-action-neutral-default: var(--base-color-grey-700);
30
+ /** Hover state for color/bg/action-neutralDefault */
31
+ --color-bg-action-neutral-default-hover: var(--base-color-grey-650);
32
+ /** Pressed state for color/bg/action-neutralDefault */
33
+ --color-bg-action-neutral-default-pressed: var(--base-color-grey-600);
34
+ /** Another background color for less prominent actions; Action = do something */
35
+ --color-bg-action-neutral-weak: var(--base-color-grey-700);
36
+ /** Hover state for color/bg/action-neutralWeak */
37
+ --color-bg-action-neutral-weak-hover: var(--base-color-grey-650);
38
+ /** Pressed state for color/bg/action-neutralWeak */
39
+ --color-bg-action-neutral-weak-pressed: var(--base-color-grey-600);
40
+ /** Another background color for less prominent actions; Action = do something */
41
+ --color-bg-action-neutral-weakest: var(--base-color-grey-800);
42
+ /** Hover state for color/bg/action-neutralWeakest */
43
+ --color-bg-action-neutral-weakest-hover: var(--base-color-grey-700);
44
+ /** Pressed state for color/bg/action-neutralWeakest */
45
+ --color-bg-action-neutral-weakest-pressed: var(--base-color-grey-750);
46
+ /** Background color for notification messages, not customizable. The color does not suggest interactivity. */
47
+ --color-bg-assistive: var(--base-color-blue-750);
48
+ /** Brand-based background color, primarily for the header area. The color does not suggest interactivity. */
49
+ --color-bg-brand: var(--base-color-grey-700);
50
+ /** Background color for the highest alert level. The color does not suggest interactivity. */
51
+ --color-bg-danger: var(--base-color-red-800);
52
+ /** Default background color for the layout, such as “regions”/”groups”. The color does not suggest interactivity. */
53
+ --color-bg-default: var(--base-color-grey-800);
54
+ /** Slightly translucent backgrond color for the layout. The color does not suggest interactivity. */
55
+ --color-bg-default-translucent: var(--base-color-grey-800op80);
56
+ /** Background color for interactive elements that are in a “disabled” state */
57
+ --color-bg-interaction-disabled: var(--base-color-grey-850);
58
+ /** Background color for components that allow selection; customizable; Selection = choose something */
59
+ --color-bg-selection-accent-default: var(--base-color-blue-500);
60
+ /** Second background color for components that allow selection; customizable; Selection = choose something */
61
+ --color-bg-selection-accent-weak: var(--base-color-blue-800);
62
+ /** Hover state for color/bg/selection-accentWeak */
63
+ --color-bg-selection-accent-weak-hover: var(--base-color-blue-850);
64
+ /** Third background color for components that allow selection; Selection = choose something */
65
+ --color-bg-selection-neutral-default: var(--base-color-grey-700);
66
+ /** Hover state for color/bg/selection-neutralDefault */
67
+ --color-bg-selection-neutral-default-hover: var(--base-color-grey-750);
68
+ /** Fourth background color for components that allow selection; Selection = choose something */
69
+ --color-bg-selection-neutral-weakest: var(--base-color-grey-800);
70
+ /** Background color for success messages. The color does not suggest interactivity. */
71
+ --color-bg-success: var(--base-color-dark-green-750);
72
+ /** Background color for a lower warning level. The color does not suggest interactivity. */
73
+ --color-bg-warning: var(--base-color-yellow-800);
74
+ /** A softer background color for the layout. The color does not suggest interactivity. */
75
+ --color-bg-weak: var(--base-color-grey-900);
76
+ /** An even softer background color for the layout. The color does not suggest interactivity. */
77
+ --color-bg-weaker: var(--base-color-black-opaque);
78
+ /** Customizable border color, not interactive. The color does not suggest interactivity. */
79
+ --color-border-accent: var(--base-color-blue-500);
80
+ /** Default border color for important actions; customisable; Action = do something */
81
+ --color-border-action-accent-default: var(--base-color-blue-500);
82
+ /** Hover state for color/border/action-accentDefault */
83
+ --color-border-action-accent-default-hover: var(--base-color-blue-600);
84
+ /** Pressed state for color/border/action-accentDefault */
85
+ --color-border-action-accent-default-pressed: var(--base-color-blue-650);
86
+ /** border color for interactive elements that have a destructive or caution-critical effect; Action = do something */
87
+ --color-border-action-danger-default: var(--base-color-red-400);
88
+ /** Hover state for color/border/action-dangerDefault */
89
+ --color-border-action-danger-default-hover: var(--base-color-red-500);
90
+ /** Pressed state for color/border/action-dangerDefault */
91
+ --color-border-action-danger-default-pressed: var(--base-color-red-600);
92
+ /** Default neutral border color for actions; Action = do something */
93
+ --color-border-action-neutral-default: var(--base-color-grey-500);
94
+ /** Hover state for color/border/action-neutralDefault */
95
+ --color-border-action-neutral-default-hover: var(--base-color-grey-400);
96
+ /** Pressed state for color/border/action-neutralDefault */
97
+ --color-border-action-neutral-default-pressed: var(--base-color-grey-350);
98
+ /** Border color for assistive information, not customizable. The color does not suggest interactivity. */
99
+ --color-border-assistive-default: var(--base-color-blue-700);
100
+ /** Neutral border color for assistive information, not customizable. The color does not suggest interactivity. */
101
+ --color-border-assistive-neutral: var(--base-color-grey-700);
102
+ /** Strong border color for success messages. The color does not suggest interactivity. */
103
+ --color-border-assistive-strong: var(--base-color-blue-500);
104
+ /** Standard border color for the highest alert level. The color does not suggest interactivity. */
105
+ --color-border-danger-default: var(--base-color-red-750);
106
+ /** Strong border color for the highest alert level. The color does not suggest interactivity. */
107
+ --color-border-danger-strong: var(--base-color-red-400);
108
+ /** Default color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
109
+ --color-border-default: var(--base-color-grey-650);
110
+ /** Border color for interactive elements that are in a “disabled” state */
111
+ --color-border-interaction-disabled: var(--base-color-grey-650);
112
+ /** Border color for the visible focus of interactive elements */
113
+ --color-border-interaction-focus: var(--base-color-white-opaque);
114
+ /** Borders around elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
115
+ --color-border-on-color: var(--base-color-black-opaque);
116
+ /** Used in the layout on a slightly translucent background color. The color does not suggest interactivity. */
117
+ --color-border-on-translucent: var(--base-color-grey-750);
118
+ /** Border color for components that allow selection; customizable; Selection = choose something */
119
+ --color-border-selection-accent-default: var(--base-color-blue-500);
120
+ /** Second border color for components that allow selection; customizable; Selection = choose something */
121
+ --color-border-selection-accent-weak: var(--base-color-blue-750);
122
+ /** Third border color for components that allow selectio; Selection = choose something */
123
+ --color-border-selection-neutral-default: var(--base-color-grey-500);
124
+ /** More contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
125
+ --color-border-strong: var(--base-color-grey-500);
126
+ /** Standard border color for success messages. The color does not suggest interactivity. */
127
+ --color-border-success-default: var(--base-color-dark-green-700);
128
+ /** Strong border color for success messages. The color does not suggest interactivity. */
129
+ --color-border-success-strong: var(--base-color-dark-green-400);
130
+ /** Standard border color for a lower warning level. The color does not suggest interactivity. */
131
+ --color-border-warning-default: var(--base-color-yellow-750);
132
+ /** Strong border color for a lower warning level. The color does not suggest interactivity. */
133
+ --color-border-warning-strong: var(--base-color-yellow-400);
134
+ /** Less contrasting color for “borders", such as frames or dividing lines. The color does not suggest interactivity. */
135
+ --color-border-weak: var(--base-color-grey-750);
136
+ /** Customizable foreground color. The color does not suggest interactivity. */
137
+ --color-fg-accent: var(--base-color-blue-500);
138
+ /** Default color for interactive text (hyperlinks) and other interactive foreground elements; customisable; Action = do something */
139
+ --color-fg-action-accent-default: var(--base-color-blue-500);
140
+ /** Hover state for color/fg/action-accentDefault */
141
+ --color-fg-action-accent-default-hover: var(--base-color-blue-600);
142
+ /** Pressed state for color/fg/action-accentDefault */
143
+ --color-fg-action-accent-default-pressed: var(--base-color-blue-700);
144
+ /** Foreground color for interactive elements that have a destructive or caution-critical effect; Action = do something */
145
+ --color-fg-action-danger-default: var(--base-color-red-400);
146
+ /** Hover state for color/fg/action-dangerDefault */
147
+ --color-fg-action-danger-default-hover: var(--base-color-red-500);
148
+ /** Pressed state for color/fg/action-dangerDefault */
149
+ --color-fg-action-danger-default-pressed: var(--base-color-red-600);
150
+ /** Default neutral foreground color for actions.; Action = do something */
151
+ --color-fg-action-neutral-default: var(--base-color-white-opaque);
152
+ /** Hover state for color/fg/action-neutralDefault */
153
+ --color-fg-action-neutral-default-hover: var(--base-color-white-opaque);
154
+ /** Pressed state for color/fg/action-neutralDefault */
155
+ --color-fg-action-neutral-default-pressed: var(--base-color-white-opaque);
156
+ /** Interactive text with even lower prominence; Action = do something */
157
+ --color-fg-action-neutral-weak: var(--base-color-grey-400);
158
+ /** Hover state for color/fg/action-neutralWeak */
159
+ --color-fg-action-neutral-weak-hover: var(--base-color-grey-350);
160
+ /** Pressed state for color/fg/action-neutralWeak */
161
+ --color-fg-action-neutral-weak-pressed: var(--base-color-grey-250);
162
+ /** Assistive foreground color, not customizable. The color does not suggest interactivity. */
163
+ --color-fg-assistive-default: var(--base-color-blue-500);
164
+ /** Neutral assistive foreground color, not customizable. The color does not suggest interactivity. */
165
+ --color-fg-assistive-neutral: var(--base-color-grey-400);
166
+ /** Text and other foreground elements at the highest alert level. The color does not suggest interactivity. */
167
+ --color-fg-danger: var(--base-color-red-400);
168
+ /** Default color for text and other foreground elements. The color does not suggest interactivity. */
169
+ --color-fg-default: var(--base-color-white-opaque);
170
+ /** Text and foreground colors of interactive elements that are in a “disabled” state */
171
+ --color-fg-interaction-disabled: var(--base-color-grey-500);
172
+ /** Text and foregrounds of interactive elements using high-contrast colors for strong backgrounds. */
173
+ --color-fg-interaction-on-color: var(--base-color-black-opaque);
174
+ /** Text and foregrounds elements using high-contrast colors for strong backgrounds. The color does not suggest interactivity. */
175
+ --color-fg-on-color: var(--base-color-black-opaque);
176
+ /** Default color for text and the foreground of controls that allow selection, such as checkboxes or radio buttons; customizable; Selection = choose something */
177
+ --color-fg-selection-accent-default: var(--base-color-blue-500);
178
+ /** Second color for text and the foreground of controls that allow selection; Selection = choose something */
179
+ --color-fg-selection-neutral-default: var(--base-color-white-opaque);
180
+ /** Text and other foreground elements that indicate success. The color does not suggest interactivity. */
181
+ --color-fg-success: var(--base-color-dark-green-400);
182
+ /** Text and other foreground elements with a lower warning level. The color does not suggest interactivity. */
183
+ --color-fg-warning: var(--base-color-yellow-400);
184
+ /** Text with lower contrast. The color does not suggest interactivity. */
185
+ --color-fg-weak: var(--base-color-grey-250);
186
+ /** Text with even lower contrast. The color does not suggest interactivity. */
187
+ --color-fg-weaker: var(--base-color-grey-300);
188
+ --color-rainbow-ai-default-gradient-end: var(--base-color-friendly-blue-500);
189
+ --color-rainbow-ai-default-gradient-start: var(--base-color-blue-500);
190
+ --color-rainbow-ai-strong10-gradient-end: var(--base-color-friendly-blue-400);
191
+ --color-rainbow-ai-strong10-gradient-start: var(--base-color-blue-400);
192
+ --color-rainbow-ai-strong20-gradient-end: var(--base-color-friendly-blue-350);
193
+ --color-rainbow-ai-strong20-gradient-start: var(--base-color-blue-350);
194
+ --color-rainbow-ai-strong30-gradient-end: var(--base-color-friendly-blue-200);
195
+ --color-rainbow-ai-strong30-gradient-start: var(--base-color-blue-200);
196
+ --color-rainbow-ai-weak10-gradient-end: var(--base-color-friendly-blue-650);
197
+ --color-rainbow-ai-weak10-gradient-start: var(--base-color-blue-650);
198
+ --color-rainbow-ai-weak20-gradient-end: var(--base-color-friendly-blue-700);
199
+ --color-rainbow-ai-weak20-gradient-start: var(--base-color-blue-700);
200
+ --color-rainbow-ai-weak30-gradient-end: var(--base-color-friendly-blue-750);
201
+ --color-rainbow-ai-weak30-gradient-start: var(--base-color-blue-800);
202
+ --color-rainbow-ai-weak40-gradient-end: var(--base-color-friendly-blue-800);
203
+ --color-rainbow-ai-weak40-gradient-start: var(--base-color-blue-850);
204
+ /** On bright 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. */
205
+ --color-rainbow-black: var(--base-color-black-opaque);
206
+ --color-rainbow-blue-default: var(--base-color-blue-500);
207
+ --color-rainbow-blue-strong10: var(--base-color-blue-400);
208
+ --color-rainbow-blue-strong20: var(--base-color-blue-350);
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);
246
+ --color-rainbow-green-default: var(--base-color-green-500);
247
+ --color-rainbow-green-strong10: var(--base-color-green-400);
248
+ --color-rainbow-green-strong20: var(--base-color-green-350);
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);
254
+ --color-rainbow-grey-default: var(--base-color-grey-500);
255
+ --color-rainbow-grey-strong10: var(--base-color-grey-400);
256
+ --color-rainbow-grey-strong20: var(--base-color-grey-350);
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);
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
+ --color-rainbow-mono-strong: var(--base-color-white-opaque);
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. */
265
+ --color-rainbow-mono-weak: var(--base-color-grey-800);
266
+ --color-rainbow-orange-default: var(--base-color-orange-500);
267
+ --color-rainbow-orange-strong10: var(--base-color-orange-400);
268
+ --color-rainbow-orange-strong20: var(--base-color-orange-350);
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);
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
+ --color-rainbow-white: var(--base-color-white-opaque);
300
+ --color-rainbow-yellow-default: var(--base-color-yellow-500);
301
+ --color-rainbow-yellow-strong10: var(--base-color-yellow-400);
302
+ --color-rainbow-yellow-strong20: var(--base-color-yellow-350);
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);
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
+ --color-rainbow-ai-strong10: linear-gradient(90deg, var(--color-rainbow-ai-strong10-gradient-start) 0%, var(--color-rainbow-ai-strong10-gradient-end) 100%);
310
+ --color-rainbow-ai-strong20: linear-gradient(90deg, var(--color-rainbow-ai-strong20-gradient-start) 0%, var(--color-rainbow-ai-strong20-gradient-end) 100%);
311
+ --color-rainbow-ai-strong30: linear-gradient(90deg, var(--color-rainbow-ai-strong30-gradient-start) 0%, var(--color-rainbow-ai-strong30-gradient-end) 100%);
312
+ --color-rainbow-ai-weak10: linear-gradient(90deg, var(--color-rainbow-ai-weak10-gradient-start) 0%, var(--color-rainbow-ai-weak10-gradient-end) 100%);
313
+ --color-rainbow-ai-weak20: linear-gradient(270deg, var(--color-rainbow-ai-weak20-gradient-start) 0%, var(--color-rainbow-ai-weak20-gradient-end) 100%);
314
+ --color-rainbow-ai-weak30: linear-gradient(270deg, var(--color-rainbow-ai-weak30-gradient-start) 0%, var(--color-rainbow-ai-weak30-gradient-end) 100%);
315
+ --color-rainbow-ai-weak40: linear-gradient(270deg, var(--color-rainbow-ai-weak40-gradient-start) 0%, var(--color-rainbow-ai-weak40-gradient-end) 100%);
316
+ }