oneslash-design-system 1.8.4 → 2.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 (53) hide show
  1. package/README.md +20 -6
  2. package/dist/components/alert.jsx +10 -10
  3. package/dist/components/button.jsx +22 -22
  4. package/dist/components/checkBox.jsx +10 -10
  5. package/dist/components/emptyBox.jsx +2 -2
  6. package/dist/components/icon.jsx +8 -8
  7. package/dist/components/iconButton.jsx +16 -16
  8. package/dist/components/line.jsx +1 -1
  9. package/dist/components/link.jsx +13 -13
  10. package/dist/components/loadingScreen.jsx +1 -1
  11. package/dist/components/menu.jsx +2 -1
  12. package/dist/components/menuItem.jsx +8 -8
  13. package/dist/components/modal.jsx +7 -6
  14. package/dist/components/navigation.jsx +1 -1
  15. package/dist/components/popover.jsx +3 -2
  16. package/dist/components/radioGroup.jsx +6 -6
  17. package/dist/components/select.jsx +10 -10
  18. package/dist/components/sharedStyles.d.ts +5 -5
  19. package/dist/components/sharedStyles.jsx +5 -5
  20. package/dist/components/tab.jsx +4 -4
  21. package/dist/components/tableCell.jsx +1 -1
  22. package/dist/components/tableContainer.jsx +1 -1
  23. package/dist/components/tableHeader.jsx +1 -1
  24. package/dist/components/tableHeaderCell.jsx +1 -1
  25. package/dist/components/tabsContainer.jsx +2 -2
  26. package/dist/components/tag.jsx +36 -36
  27. package/dist/components/textField.jsx +9 -9
  28. package/dist/components/textarea.jsx +8 -8
  29. package/dist/components/timeStamp.jsx +2 -2
  30. package/dist/components/tooltip.jsx +1 -1
  31. package/dist/components/useDarkMode.d.ts +3 -0
  32. package/dist/components/useDarkMode.js +25 -9
  33. package/dist/components/userImage.jsx +6 -3
  34. package/dist/designTokens.d.ts +619 -269
  35. package/dist/designTokens.js +103 -1
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +1 -0
  38. package/dist/stories/EmptyBox.stories.jsx +1 -0
  39. package/dist/tailwind-preset-auto.js +402 -0
  40. package/dist/tailwind-preset.js +396 -0
  41. package/dist/theme-auto.css +256 -0
  42. package/dist/theme.css +251 -0
  43. package/dist/themes/default-auto.css +248 -0
  44. package/dist/themes/default.css +165 -0
  45. package/dist/themes/forest-auto.css +248 -0
  46. package/dist/themes/forest.css +165 -0
  47. package/dist/tokens.css +19 -0
  48. package/dist/typography.css +81 -0
  49. package/package.json +18 -5
  50. package/dist/output.css +0 -2021
  51. package/dist/tailwind.config.d.ts +0 -3
  52. package/dist/tailwind.config.js +0 -222
  53. package/dist/tsconfig.tsbuildinfo +0 -1
package/dist/theme-auto.css ADDED
@@ -0,0 +1,256 @@
1
+ /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
2
+ /* dark: .dark class, or the OS setting unless .light is set; pair with themes/*-auto.css */
3
+ @custom-variant dark {
4
+ &:where(.dark, .dark *) { @slot; }
5
+ @media (prefers-color-scheme: dark) {
6
+ &:where(:not(.light, .light *)) { @slot; }
7
+ }
8
+ }
9
+
10
+ @theme inline {
11
+ --color-fg-primary: rgb(var(--os-color-text-primary));
12
+ --color-light-text-primary: rgb(var(--os-color-text-primary));
13
+ --color-dark-text-primary: rgb(var(--os-color-text-primary));
14
+ --color-fg-secondary: rgb(var(--os-color-text-secondary));
15
+ --color-light-text-secondary: rgb(var(--os-color-text-secondary));
16
+ --color-dark-text-secondary: rgb(var(--os-color-text-secondary));
17
+ --color-fg-disabled: rgb(var(--os-color-text-disabled));
18
+ --color-light-text-disabled: rgb(var(--os-color-text-disabled));
19
+ --color-dark-text-disabled: rgb(var(--os-color-text-disabled));
20
+ --color-fg-contrast: rgb(var(--os-color-text-contrast));
21
+ --color-light-text-contrast: rgb(var(--os-color-text-contrast));
22
+ --color-dark-text-contrast: rgb(var(--os-color-text-contrast));
23
+ --color-accent-main: rgb(var(--os-color-accent-main));
24
+ --color-light-accent-main: rgb(var(--os-color-accent-main));
25
+ --color-dark-accent-main: rgb(var(--os-color-accent-main));
26
+ --color-accent-dark: rgb(var(--os-color-accent-dark));
27
+ --color-light-accent-dark: rgb(var(--os-color-accent-dark));
28
+ --color-dark-accent-dark: rgb(var(--os-color-accent-dark));
29
+ --color-accent-light: rgb(var(--os-color-accent-light));
30
+ --color-light-accent-light: rgb(var(--os-color-accent-light));
31
+ --color-dark-accent-light: rgb(var(--os-color-accent-light));
32
+ --color-accent-contrast: rgb(var(--os-color-accent-contrast));
33
+ --color-light-accent-contrast: rgb(var(--os-color-accent-contrast));
34
+ --color-dark-accent-contrast: rgb(var(--os-color-accent-contrast));
35
+ --color-primary-main: rgb(var(--os-color-primary-main));
36
+ --color-light-primary-main: rgb(var(--os-color-primary-main));
37
+ --color-dark-primary-main: rgb(var(--os-color-primary-main));
38
+ --color-primary-dark: rgb(var(--os-color-primary-dark));
39
+ --color-light-primary-dark: rgb(var(--os-color-primary-dark));
40
+ --color-dark-primary-dark: rgb(var(--os-color-primary-dark));
41
+ --color-primary-light: rgb(var(--os-color-primary-light));
42
+ --color-light-primary-light: rgb(var(--os-color-primary-light));
43
+ --color-dark-primary-light: rgb(var(--os-color-primary-light));
44
+ --color-primary-contrast: rgb(var(--os-color-primary-contrast));
45
+ --color-light-primary-contrast: rgb(var(--os-color-primary-contrast));
46
+ --color-dark-primary-contrast: rgb(var(--os-color-primary-contrast));
47
+ --color-secondary-main: rgb(var(--os-color-secondary-main));
48
+ --color-light-secondary-main: rgb(var(--os-color-secondary-main));
49
+ --color-dark-secondary-main: rgb(var(--os-color-secondary-main));
50
+ --color-secondary-dark: rgb(var(--os-color-secondary-dark));
51
+ --color-light-secondary-dark: rgb(var(--os-color-secondary-dark));
52
+ --color-dark-secondary-dark: rgb(var(--os-color-secondary-dark));
53
+ --color-secondary-light: rgb(var(--os-color-secondary-light));
54
+ --color-light-secondary-light: rgb(var(--os-color-secondary-light));
55
+ --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
56
+ --color-error-main: rgb(var(--os-color-error-main));
57
+ --color-light-error-main: rgb(var(--os-color-error-main));
58
+ --color-dark-error-main: rgb(var(--os-color-error-main));
59
+ --color-error-dark: rgb(var(--os-color-error-dark));
60
+ --color-light-error-dark: rgb(var(--os-color-error-dark));
61
+ --color-dark-error-dark: rgb(var(--os-color-error-dark));
62
+ --color-error-light: rgb(var(--os-color-error-light));
63
+ --color-light-error-light: rgb(var(--os-color-error-light));
64
+ --color-dark-error-light: rgb(var(--os-color-error-light));
65
+ --color-error-alertBg: rgb(var(--os-color-error-alertBg));
66
+ --color-light-error-alertBg: rgb(var(--os-color-error-alertBg));
67
+ --color-dark-error-alertBg: rgb(var(--os-color-error-alertBg));
68
+ --color-error-contrast: rgb(var(--os-color-error-contrast));
69
+ --color-light-error-contrast: rgb(var(--os-color-error-contrast));
70
+ --color-dark-error-contrast: rgb(var(--os-color-error-contrast));
71
+ --color-error-fill: rgb(var(--os-color-error-fill));
72
+ --color-light-error-fill: rgb(var(--os-color-error-fill));
73
+ --color-dark-error-fill: rgb(var(--os-color-error-fill));
74
+ --color-error-onFill: rgb(var(--os-color-error-onFill));
75
+ --color-light-error-onFill: rgb(var(--os-color-error-onFill));
76
+ --color-dark-error-onFill: rgb(var(--os-color-error-onFill));
77
+ --color-error-text: rgb(var(--os-color-error-text));
78
+ --color-light-error-text: rgb(var(--os-color-error-text));
79
+ --color-dark-error-text: rgb(var(--os-color-error-text));
80
+ --color-error-textHover: rgb(var(--os-color-error-textHover));
81
+ --color-light-error-textHover: rgb(var(--os-color-error-textHover));
82
+ --color-dark-error-textHover: rgb(var(--os-color-error-textHover));
83
+ --color-error-tint: rgb(var(--os-color-error-tint));
84
+ --color-light-error-tint: rgb(var(--os-color-error-tint));
85
+ --color-dark-error-tint: rgb(var(--os-color-error-tint));
86
+ --color-warning-main: rgb(var(--os-color-warning-main));
87
+ --color-light-warning-main: rgb(var(--os-color-warning-main));
88
+ --color-dark-warning-main: rgb(var(--os-color-warning-main));
89
+ --color-warning-dark: rgb(var(--os-color-warning-dark));
90
+ --color-light-warning-dark: rgb(var(--os-color-warning-dark));
91
+ --color-dark-warning-dark: rgb(var(--os-color-warning-dark));
92
+ --color-warning-light: rgb(var(--os-color-warning-light));
93
+ --color-light-warning-light: rgb(var(--os-color-warning-light));
94
+ --color-dark-warning-light: rgb(var(--os-color-warning-light));
95
+ --color-warning-alertBg: rgb(var(--os-color-warning-alertBg));
96
+ --color-light-warning-alertBg: rgb(var(--os-color-warning-alertBg));
97
+ --color-dark-warning-alertBg: rgb(var(--os-color-warning-alertBg));
98
+ --color-warning-contrast: rgb(var(--os-color-warning-contrast));
99
+ --color-light-warning-contrast: rgb(var(--os-color-warning-contrast));
100
+ --color-dark-warning-contrast: rgb(var(--os-color-warning-contrast));
101
+ --color-warning-fill: rgb(var(--os-color-warning-fill));
102
+ --color-light-warning-fill: rgb(var(--os-color-warning-fill));
103
+ --color-dark-warning-fill: rgb(var(--os-color-warning-fill));
104
+ --color-warning-onFill: rgb(var(--os-color-warning-onFill));
105
+ --color-light-warning-onFill: rgb(var(--os-color-warning-onFill));
106
+ --color-dark-warning-onFill: rgb(var(--os-color-warning-onFill));
107
+ --color-warning-text: rgb(var(--os-color-warning-text));
108
+ --color-light-warning-text: rgb(var(--os-color-warning-text));
109
+ --color-dark-warning-text: rgb(var(--os-color-warning-text));
110
+ --color-warning-textHover: rgb(var(--os-color-warning-textHover));
111
+ --color-light-warning-textHover: rgb(var(--os-color-warning-textHover));
112
+ --color-dark-warning-textHover: rgb(var(--os-color-warning-textHover));
113
+ --color-warning-tint: rgb(var(--os-color-warning-tint));
114
+ --color-light-warning-tint: rgb(var(--os-color-warning-tint));
115
+ --color-dark-warning-tint: rgb(var(--os-color-warning-tint));
116
+ --color-info-main: rgb(var(--os-color-info-main));
117
+ --color-light-info-main: rgb(var(--os-color-info-main));
118
+ --color-dark-info-main: rgb(var(--os-color-info-main));
119
+ --color-info-dark: rgb(var(--os-color-info-dark));
120
+ --color-light-info-dark: rgb(var(--os-color-info-dark));
121
+ --color-dark-info-dark: rgb(var(--os-color-info-dark));
122
+ --color-info-light: rgb(var(--os-color-info-light));
123
+ --color-light-info-light: rgb(var(--os-color-info-light));
124
+ --color-dark-info-light: rgb(var(--os-color-info-light));
125
+ --color-info-alertBg: rgb(var(--os-color-info-alertBg));
126
+ --color-light-info-alertBg: rgb(var(--os-color-info-alertBg));
127
+ --color-dark-info-alertBg: rgb(var(--os-color-info-alertBg));
128
+ --color-info-contrast: rgb(var(--os-color-info-contrast));
129
+ --color-light-info-contrast: rgb(var(--os-color-info-contrast));
130
+ --color-dark-info-contrast: rgb(var(--os-color-info-contrast));
131
+ --color-info-fill: rgb(var(--os-color-info-fill));
132
+ --color-light-info-fill: rgb(var(--os-color-info-fill));
133
+ --color-dark-info-fill: rgb(var(--os-color-info-fill));
134
+ --color-info-onFill: rgb(var(--os-color-info-onFill));
135
+ --color-light-info-onFill: rgb(var(--os-color-info-onFill));
136
+ --color-dark-info-onFill: rgb(var(--os-color-info-onFill));
137
+ --color-info-text: rgb(var(--os-color-info-text));
138
+ --color-light-info-text: rgb(var(--os-color-info-text));
139
+ --color-dark-info-text: rgb(var(--os-color-info-text));
140
+ --color-info-textHover: rgb(var(--os-color-info-textHover));
141
+ --color-light-info-textHover: rgb(var(--os-color-info-textHover));
142
+ --color-dark-info-textHover: rgb(var(--os-color-info-textHover));
143
+ --color-info-tint: rgb(var(--os-color-info-tint));
144
+ --color-light-info-tint: rgb(var(--os-color-info-tint));
145
+ --color-dark-info-tint: rgb(var(--os-color-info-tint));
146
+ --color-success-main: rgb(var(--os-color-success-main));
147
+ --color-light-success-main: rgb(var(--os-color-success-main));
148
+ --color-dark-success-main: rgb(var(--os-color-success-main));
149
+ --color-success-dark: rgb(var(--os-color-success-dark));
150
+ --color-light-success-dark: rgb(var(--os-color-success-dark));
151
+ --color-dark-success-dark: rgb(var(--os-color-success-dark));
152
+ --color-success-light: rgb(var(--os-color-success-light));
153
+ --color-light-success-light: rgb(var(--os-color-success-light));
154
+ --color-dark-success-light: rgb(var(--os-color-success-light));
155
+ --color-success-alertBg: rgb(var(--os-color-success-alertBg));
156
+ --color-light-success-alertBg: rgb(var(--os-color-success-alertBg));
157
+ --color-dark-success-alertBg: rgb(var(--os-color-success-alertBg));
158
+ --color-success-contrast: rgb(var(--os-color-success-contrast));
159
+ --color-light-success-contrast: rgb(var(--os-color-success-contrast));
160
+ --color-dark-success-contrast: rgb(var(--os-color-success-contrast));
161
+ --color-success-fill: rgb(var(--os-color-success-fill));
162
+ --color-light-success-fill: rgb(var(--os-color-success-fill));
163
+ --color-dark-success-fill: rgb(var(--os-color-success-fill));
164
+ --color-success-onFill: rgb(var(--os-color-success-onFill));
165
+ --color-light-success-onFill: rgb(var(--os-color-success-onFill));
166
+ --color-dark-success-onFill: rgb(var(--os-color-success-onFill));
167
+ --color-success-text: rgb(var(--os-color-success-text));
168
+ --color-light-success-text: rgb(var(--os-color-success-text));
169
+ --color-dark-success-text: rgb(var(--os-color-success-text));
170
+ --color-success-textHover: rgb(var(--os-color-success-textHover));
171
+ --color-light-success-textHover: rgb(var(--os-color-success-textHover));
172
+ --color-dark-success-textHover: rgb(var(--os-color-success-textHover));
173
+ --color-success-tint: rgb(var(--os-color-success-tint));
174
+ --color-light-success-tint: rgb(var(--os-color-success-tint));
175
+ --color-dark-success-tint: rgb(var(--os-color-success-tint));
176
+ --color-background-default: rgb(var(--os-color-background-default));
177
+ --color-light-background-default: rgb(var(--os-color-background-default));
178
+ --color-dark-background-default: rgb(var(--os-color-background-default));
179
+ --color-background-accent100: rgb(var(--os-color-background-accent100));
180
+ --color-light-background-accent100: rgb(var(--os-color-background-accent100));
181
+ --color-dark-background-accent100: rgb(var(--os-color-background-accent100));
182
+ --color-background-accent200: rgb(var(--os-color-background-accent200));
183
+ --color-light-background-accent200: rgb(var(--os-color-background-accent200));
184
+ --color-dark-background-accent200: rgb(var(--os-color-background-accent200));
185
+ --color-background-accent300: rgb(var(--os-color-background-accent300));
186
+ --color-light-background-accent300: rgb(var(--os-color-background-accent300));
187
+ --color-dark-background-accent300: rgb(var(--os-color-background-accent300));
188
+ --color-background-elevated: rgb(var(--os-color-background-elevated));
189
+ --color-light-background-elevated: rgb(var(--os-color-background-elevated));
190
+ --color-dark-background-elevated: rgb(var(--os-color-background-elevated));
191
+ --color-background-overlay: rgb(var(--os-color-background-overlay));
192
+ --color-light-background-overlay: rgb(var(--os-color-background-overlay));
193
+ --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
194
+ --color-action-active: rgb(var(--os-color-action-active));
195
+ --color-light-action-active: rgb(var(--os-color-action-active));
196
+ --color-dark-action-active: rgb(var(--os-color-action-active));
197
+ --color-action-hover: rgb(var(--os-color-action-hover));
198
+ --color-light-action-hover: rgb(var(--os-color-action-hover));
199
+ --color-dark-action-hover: rgb(var(--os-color-action-hover));
200
+ --color-action-selected: rgb(var(--os-color-action-selected));
201
+ --color-light-action-selected: rgb(var(--os-color-action-selected));
202
+ --color-dark-action-selected: rgb(var(--os-color-action-selected));
203
+ --color-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
204
+ --color-light-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
205
+ --color-dark-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
206
+ --color-action-disabled: rgb(var(--os-color-action-disabled));
207
+ --color-light-action-disabled: rgb(var(--os-color-action-disabled));
208
+ --color-dark-action-disabled: rgb(var(--os-color-action-disabled));
209
+ --color-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
210
+ --color-light-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
211
+ --color-dark-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
212
+ --color-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
213
+ --color-light-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
214
+ --color-dark-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
215
+ --color-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
216
+ --color-light-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
217
+ --color-dark-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
218
+ --color-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
219
+ --color-light-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
220
+ --color-dark-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
221
+ --color-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
222
+ --color-light-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
223
+ --color-dark-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
224
+ --color-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
225
+ --color-light-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
226
+ --color-dark-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
227
+ --color-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
228
+ --color-light-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
229
+ --color-dark-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
230
+ --color-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
231
+ --color-light-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
232
+ --color-dark-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
233
+ --color-misc-divider: rgb(var(--os-color-misc-divider));
234
+ --color-light-misc-divider: rgb(var(--os-color-misc-divider));
235
+ --color-dark-misc-divider: rgb(var(--os-color-misc-divider));
236
+ --color-misc-scrim: rgb(var(--os-color-misc-scrim));
237
+ --color-light-misc-scrim: rgb(var(--os-color-misc-scrim));
238
+ --color-dark-misc-scrim: rgb(var(--os-color-misc-scrim));
239
+ --color-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
240
+ --color-light-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
241
+ --color-dark-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
242
+ --color-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
243
+ --color-light-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
244
+ --color-dark-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
245
+ --radius-inline: var(--os-radius-inline);
246
+ --radius-control: var(--os-radius-control);
247
+ --radius-container: var(--os-radius-container);
248
+ --radius-full: var(--os-radius-full);
249
+ --shadow-overlay: var(--os-shadow-overlay);
250
+ --ease-out: var(--os-ease-out);
251
+ --ease-emphasized: var(--os-ease-emphasized);
252
+ --ease-spring: var(--os-ease-spring);
253
+ --spacing-small: var(--os-spacing-small);
254
+ --spacing-medium: var(--os-spacing-medium);
255
+ --spacing-large: var(--os-spacing-large);
256
+ }
package/dist/theme.css ADDED
@@ -0,0 +1,251 @@
1
+ /* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
2
+ /* dark: .dark class only; pair with themes/default.css or forest.css */
3
+ @custom-variant dark (&:where(.dark, .dark *));
4
+
5
+ @theme inline {
6
+ --color-fg-primary: rgb(var(--os-color-text-primary));
7
+ --color-light-text-primary: rgb(var(--os-color-text-primary));
8
+ --color-dark-text-primary: rgb(var(--os-color-text-primary));
9
+ --color-fg-secondary: rgb(var(--os-color-text-secondary));
10
+ --color-light-text-secondary: rgb(var(--os-color-text-secondary));
11
+ --color-dark-text-secondary: rgb(var(--os-color-text-secondary));
12
+ --color-fg-disabled: rgb(var(--os-color-text-disabled));
13
+ --color-light-text-disabled: rgb(var(--os-color-text-disabled));
14
+ --color-dark-text-disabled: rgb(var(--os-color-text-disabled));
15
+ --color-fg-contrast: rgb(var(--os-color-text-contrast));
16
+ --color-light-text-contrast: rgb(var(--os-color-text-contrast));
17
+ --color-dark-text-contrast: rgb(var(--os-color-text-contrast));
18
+ --color-accent-main: rgb(var(--os-color-accent-main));
19
+ --color-light-accent-main: rgb(var(--os-color-accent-main));
20
+ --color-dark-accent-main: rgb(var(--os-color-accent-main));
21
+ --color-accent-dark: rgb(var(--os-color-accent-dark));
22
+ --color-light-accent-dark: rgb(var(--os-color-accent-dark));
23
+ --color-dark-accent-dark: rgb(var(--os-color-accent-dark));
24
+ --color-accent-light: rgb(var(--os-color-accent-light));
25
+ --color-light-accent-light: rgb(var(--os-color-accent-light));
26
+ --color-dark-accent-light: rgb(var(--os-color-accent-light));
27
+ --color-accent-contrast: rgb(var(--os-color-accent-contrast));
28
+ --color-light-accent-contrast: rgb(var(--os-color-accent-contrast));
29
+ --color-dark-accent-contrast: rgb(var(--os-color-accent-contrast));
30
+ --color-primary-main: rgb(var(--os-color-primary-main));
31
+ --color-light-primary-main: rgb(var(--os-color-primary-main));
32
+ --color-dark-primary-main: rgb(var(--os-color-primary-main));
33
+ --color-primary-dark: rgb(var(--os-color-primary-dark));
34
+ --color-light-primary-dark: rgb(var(--os-color-primary-dark));
35
+ --color-dark-primary-dark: rgb(var(--os-color-primary-dark));
36
+ --color-primary-light: rgb(var(--os-color-primary-light));
37
+ --color-light-primary-light: rgb(var(--os-color-primary-light));
38
+ --color-dark-primary-light: rgb(var(--os-color-primary-light));
39
+ --color-primary-contrast: rgb(var(--os-color-primary-contrast));
40
+ --color-light-primary-contrast: rgb(var(--os-color-primary-contrast));
41
+ --color-dark-primary-contrast: rgb(var(--os-color-primary-contrast));
42
+ --color-secondary-main: rgb(var(--os-color-secondary-main));
43
+ --color-light-secondary-main: rgb(var(--os-color-secondary-main));
44
+ --color-dark-secondary-main: rgb(var(--os-color-secondary-main));
45
+ --color-secondary-dark: rgb(var(--os-color-secondary-dark));
46
+ --color-light-secondary-dark: rgb(var(--os-color-secondary-dark));
47
+ --color-dark-secondary-dark: rgb(var(--os-color-secondary-dark));
48
+ --color-secondary-light: rgb(var(--os-color-secondary-light));
49
+ --color-light-secondary-light: rgb(var(--os-color-secondary-light));
50
+ --color-dark-secondary-light: rgb(var(--os-color-secondary-light));
51
+ --color-error-main: rgb(var(--os-color-error-main));
52
+ --color-light-error-main: rgb(var(--os-color-error-main));
53
+ --color-dark-error-main: rgb(var(--os-color-error-main));
54
+ --color-error-dark: rgb(var(--os-color-error-dark));
55
+ --color-light-error-dark: rgb(var(--os-color-error-dark));
56
+ --color-dark-error-dark: rgb(var(--os-color-error-dark));
57
+ --color-error-light: rgb(var(--os-color-error-light));
58
+ --color-light-error-light: rgb(var(--os-color-error-light));
59
+ --color-dark-error-light: rgb(var(--os-color-error-light));
60
+ --color-error-alertBg: rgb(var(--os-color-error-alertBg));
61
+ --color-light-error-alertBg: rgb(var(--os-color-error-alertBg));
62
+ --color-dark-error-alertBg: rgb(var(--os-color-error-alertBg));
63
+ --color-error-contrast: rgb(var(--os-color-error-contrast));
64
+ --color-light-error-contrast: rgb(var(--os-color-error-contrast));
65
+ --color-dark-error-contrast: rgb(var(--os-color-error-contrast));
66
+ --color-error-fill: rgb(var(--os-color-error-fill));
67
+ --color-light-error-fill: rgb(var(--os-color-error-fill));
68
+ --color-dark-error-fill: rgb(var(--os-color-error-fill));
69
+ --color-error-onFill: rgb(var(--os-color-error-onFill));
70
+ --color-light-error-onFill: rgb(var(--os-color-error-onFill));
71
+ --color-dark-error-onFill: rgb(var(--os-color-error-onFill));
72
+ --color-error-text: rgb(var(--os-color-error-text));
73
+ --color-light-error-text: rgb(var(--os-color-error-text));
74
+ --color-dark-error-text: rgb(var(--os-color-error-text));
75
+ --color-error-textHover: rgb(var(--os-color-error-textHover));
76
+ --color-light-error-textHover: rgb(var(--os-color-error-textHover));
77
+ --color-dark-error-textHover: rgb(var(--os-color-error-textHover));
78
+ --color-error-tint: rgb(var(--os-color-error-tint));
79
+ --color-light-error-tint: rgb(var(--os-color-error-tint));
80
+ --color-dark-error-tint: rgb(var(--os-color-error-tint));
81
+ --color-warning-main: rgb(var(--os-color-warning-main));
82
+ --color-light-warning-main: rgb(var(--os-color-warning-main));
83
+ --color-dark-warning-main: rgb(var(--os-color-warning-main));
84
+ --color-warning-dark: rgb(var(--os-color-warning-dark));
85
+ --color-light-warning-dark: rgb(var(--os-color-warning-dark));
86
+ --color-dark-warning-dark: rgb(var(--os-color-warning-dark));
87
+ --color-warning-light: rgb(var(--os-color-warning-light));
88
+ --color-light-warning-light: rgb(var(--os-color-warning-light));
89
+ --color-dark-warning-light: rgb(var(--os-color-warning-light));
90
+ --color-warning-alertBg: rgb(var(--os-color-warning-alertBg));
91
+ --color-light-warning-alertBg: rgb(var(--os-color-warning-alertBg));
92
+ --color-dark-warning-alertBg: rgb(var(--os-color-warning-alertBg));
93
+ --color-warning-contrast: rgb(var(--os-color-warning-contrast));
94
+ --color-light-warning-contrast: rgb(var(--os-color-warning-contrast));
95
+ --color-dark-warning-contrast: rgb(var(--os-color-warning-contrast));
96
+ --color-warning-fill: rgb(var(--os-color-warning-fill));
97
+ --color-light-warning-fill: rgb(var(--os-color-warning-fill));
98
+ --color-dark-warning-fill: rgb(var(--os-color-warning-fill));
99
+ --color-warning-onFill: rgb(var(--os-color-warning-onFill));
100
+ --color-light-warning-onFill: rgb(var(--os-color-warning-onFill));
101
+ --color-dark-warning-onFill: rgb(var(--os-color-warning-onFill));
102
+ --color-warning-text: rgb(var(--os-color-warning-text));
103
+ --color-light-warning-text: rgb(var(--os-color-warning-text));
104
+ --color-dark-warning-text: rgb(var(--os-color-warning-text));
105
+ --color-warning-textHover: rgb(var(--os-color-warning-textHover));
106
+ --color-light-warning-textHover: rgb(var(--os-color-warning-textHover));
107
+ --color-dark-warning-textHover: rgb(var(--os-color-warning-textHover));
108
+ --color-warning-tint: rgb(var(--os-color-warning-tint));
109
+ --color-light-warning-tint: rgb(var(--os-color-warning-tint));
110
+ --color-dark-warning-tint: rgb(var(--os-color-warning-tint));
111
+ --color-info-main: rgb(var(--os-color-info-main));
112
+ --color-light-info-main: rgb(var(--os-color-info-main));
113
+ --color-dark-info-main: rgb(var(--os-color-info-main));
114
+ --color-info-dark: rgb(var(--os-color-info-dark));
115
+ --color-light-info-dark: rgb(var(--os-color-info-dark));
116
+ --color-dark-info-dark: rgb(var(--os-color-info-dark));
117
+ --color-info-light: rgb(var(--os-color-info-light));
118
+ --color-light-info-light: rgb(var(--os-color-info-light));
119
+ --color-dark-info-light: rgb(var(--os-color-info-light));
120
+ --color-info-alertBg: rgb(var(--os-color-info-alertBg));
121
+ --color-light-info-alertBg: rgb(var(--os-color-info-alertBg));
122
+ --color-dark-info-alertBg: rgb(var(--os-color-info-alertBg));
123
+ --color-info-contrast: rgb(var(--os-color-info-contrast));
124
+ --color-light-info-contrast: rgb(var(--os-color-info-contrast));
125
+ --color-dark-info-contrast: rgb(var(--os-color-info-contrast));
126
+ --color-info-fill: rgb(var(--os-color-info-fill));
127
+ --color-light-info-fill: rgb(var(--os-color-info-fill));
128
+ --color-dark-info-fill: rgb(var(--os-color-info-fill));
129
+ --color-info-onFill: rgb(var(--os-color-info-onFill));
130
+ --color-light-info-onFill: rgb(var(--os-color-info-onFill));
131
+ --color-dark-info-onFill: rgb(var(--os-color-info-onFill));
132
+ --color-info-text: rgb(var(--os-color-info-text));
133
+ --color-light-info-text: rgb(var(--os-color-info-text));
134
+ --color-dark-info-text: rgb(var(--os-color-info-text));
135
+ --color-info-textHover: rgb(var(--os-color-info-textHover));
136
+ --color-light-info-textHover: rgb(var(--os-color-info-textHover));
137
+ --color-dark-info-textHover: rgb(var(--os-color-info-textHover));
138
+ --color-info-tint: rgb(var(--os-color-info-tint));
139
+ --color-light-info-tint: rgb(var(--os-color-info-tint));
140
+ --color-dark-info-tint: rgb(var(--os-color-info-tint));
141
+ --color-success-main: rgb(var(--os-color-success-main));
142
+ --color-light-success-main: rgb(var(--os-color-success-main));
143
+ --color-dark-success-main: rgb(var(--os-color-success-main));
144
+ --color-success-dark: rgb(var(--os-color-success-dark));
145
+ --color-light-success-dark: rgb(var(--os-color-success-dark));
146
+ --color-dark-success-dark: rgb(var(--os-color-success-dark));
147
+ --color-success-light: rgb(var(--os-color-success-light));
148
+ --color-light-success-light: rgb(var(--os-color-success-light));
149
+ --color-dark-success-light: rgb(var(--os-color-success-light));
150
+ --color-success-alertBg: rgb(var(--os-color-success-alertBg));
151
+ --color-light-success-alertBg: rgb(var(--os-color-success-alertBg));
152
+ --color-dark-success-alertBg: rgb(var(--os-color-success-alertBg));
153
+ --color-success-contrast: rgb(var(--os-color-success-contrast));
154
+ --color-light-success-contrast: rgb(var(--os-color-success-contrast));
155
+ --color-dark-success-contrast: rgb(var(--os-color-success-contrast));
156
+ --color-success-fill: rgb(var(--os-color-success-fill));
157
+ --color-light-success-fill: rgb(var(--os-color-success-fill));
158
+ --color-dark-success-fill: rgb(var(--os-color-success-fill));
159
+ --color-success-onFill: rgb(var(--os-color-success-onFill));
160
+ --color-light-success-onFill: rgb(var(--os-color-success-onFill));
161
+ --color-dark-success-onFill: rgb(var(--os-color-success-onFill));
162
+ --color-success-text: rgb(var(--os-color-success-text));
163
+ --color-light-success-text: rgb(var(--os-color-success-text));
164
+ --color-dark-success-text: rgb(var(--os-color-success-text));
165
+ --color-success-textHover: rgb(var(--os-color-success-textHover));
166
+ --color-light-success-textHover: rgb(var(--os-color-success-textHover));
167
+ --color-dark-success-textHover: rgb(var(--os-color-success-textHover));
168
+ --color-success-tint: rgb(var(--os-color-success-tint));
169
+ --color-light-success-tint: rgb(var(--os-color-success-tint));
170
+ --color-dark-success-tint: rgb(var(--os-color-success-tint));
171
+ --color-background-default: rgb(var(--os-color-background-default));
172
+ --color-light-background-default: rgb(var(--os-color-background-default));
173
+ --color-dark-background-default: rgb(var(--os-color-background-default));
174
+ --color-background-accent100: rgb(var(--os-color-background-accent100));
175
+ --color-light-background-accent100: rgb(var(--os-color-background-accent100));
176
+ --color-dark-background-accent100: rgb(var(--os-color-background-accent100));
177
+ --color-background-accent200: rgb(var(--os-color-background-accent200));
178
+ --color-light-background-accent200: rgb(var(--os-color-background-accent200));
179
+ --color-dark-background-accent200: rgb(var(--os-color-background-accent200));
180
+ --color-background-accent300: rgb(var(--os-color-background-accent300));
181
+ --color-light-background-accent300: rgb(var(--os-color-background-accent300));
182
+ --color-dark-background-accent300: rgb(var(--os-color-background-accent300));
183
+ --color-background-elevated: rgb(var(--os-color-background-elevated));
184
+ --color-light-background-elevated: rgb(var(--os-color-background-elevated));
185
+ --color-dark-background-elevated: rgb(var(--os-color-background-elevated));
186
+ --color-background-overlay: rgb(var(--os-color-background-overlay));
187
+ --color-light-background-overlay: rgb(var(--os-color-background-overlay));
188
+ --color-dark-background-overlay: rgb(var(--os-color-background-overlay));
189
+ --color-action-active: rgb(var(--os-color-action-active));
190
+ --color-light-action-active: rgb(var(--os-color-action-active));
191
+ --color-dark-action-active: rgb(var(--os-color-action-active));
192
+ --color-action-hover: rgb(var(--os-color-action-hover));
193
+ --color-light-action-hover: rgb(var(--os-color-action-hover));
194
+ --color-dark-action-hover: rgb(var(--os-color-action-hover));
195
+ --color-action-selected: rgb(var(--os-color-action-selected));
196
+ --color-light-action-selected: rgb(var(--os-color-action-selected));
197
+ --color-dark-action-selected: rgb(var(--os-color-action-selected));
198
+ --color-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
199
+ --color-light-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
200
+ --color-dark-action-disabledBackground: rgb(var(--os-color-action-disabledBackground));
201
+ --color-action-disabled: rgb(var(--os-color-action-disabled));
202
+ --color-light-action-disabled: rgb(var(--os-color-action-disabled));
203
+ --color-dark-action-disabled: rgb(var(--os-color-action-disabled));
204
+ --color-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
205
+ --color-light-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
206
+ --color-dark-actionBackground-enabled: rgb(var(--os-color-actionBackground-enabled));
207
+ --color-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
208
+ --color-light-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
209
+ --color-dark-actionBackground-hovered: rgb(var(--os-color-actionBackground-hovered));
210
+ --color-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
211
+ --color-light-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
212
+ --color-dark-actionBackground-selected: rgb(var(--os-color-actionBackground-selected));
213
+ --color-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
214
+ --color-light-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
215
+ --color-dark-actionBackground-disabled: rgb(var(--os-color-actionBackground-disabled));
216
+ --color-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
217
+ --color-light-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
218
+ --color-dark-actionOutlinedBorder-enabled: rgb(var(--os-color-actionOutlinedBorder-enabled));
219
+ --color-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
220
+ --color-light-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
221
+ --color-dark-actionOutlinedBorder-hovered: rgb(var(--os-color-actionOutlinedBorder-hovered));
222
+ --color-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
223
+ --color-light-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
224
+ --color-dark-actionOutlinedBorder-selected: rgb(var(--os-color-actionOutlinedBorder-selected));
225
+ --color-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
226
+ --color-light-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
227
+ --color-dark-actionOutlinedBorder-disabled: rgb(var(--os-color-actionOutlinedBorder-disabled));
228
+ --color-misc-divider: rgb(var(--os-color-misc-divider));
229
+ --color-light-misc-divider: rgb(var(--os-color-misc-divider));
230
+ --color-dark-misc-divider: rgb(var(--os-color-misc-divider));
231
+ --color-misc-scrim: rgb(var(--os-color-misc-scrim));
232
+ --color-light-misc-scrim: rgb(var(--os-color-misc-scrim));
233
+ --color-dark-misc-scrim: rgb(var(--os-color-misc-scrim));
234
+ --color-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
235
+ --color-light-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
236
+ --color-dark-misc-tooltipBg: rgb(var(--os-color-misc-tooltipBg));
237
+ --color-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
238
+ --color-light-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
239
+ --color-dark-misc-tooltipText: rgb(var(--os-color-misc-tooltipText));
240
+ --radius-inline: var(--os-radius-inline);
241
+ --radius-control: var(--os-radius-control);
242
+ --radius-container: var(--os-radius-container);
243
+ --radius-full: var(--os-radius-full);
244
+ --shadow-overlay: var(--os-shadow-overlay);
245
+ --ease-out: var(--os-ease-out);
246
+ --ease-emphasized: var(--os-ease-emphasized);
247
+ --ease-spring: var(--os-ease-spring);
248
+ --spacing-small: var(--os-spacing-small);
249
+ --spacing-medium: var(--os-spacing-medium);
250
+ --spacing-large: var(--os-spacing-large);
251
+ }