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/tailwind-preset.js ADDED
@@ -0,0 +1,396 @@
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
+ module.exports = {
4
+ "darkMode": "class",
5
+ "theme": {
6
+ "extend": {
7
+ "colors": {
8
+ "fg-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
9
+ "light-text-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
10
+ "dark-text-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
11
+ "fg-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
12
+ "light-text-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
13
+ "dark-text-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
14
+ "fg-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
15
+ "light-text-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
16
+ "dark-text-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
17
+ "fg-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
18
+ "light-text-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
19
+ "dark-text-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
20
+ "accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
21
+ "light-accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
22
+ "dark-accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
23
+ "accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
24
+ "light-accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
25
+ "dark-accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
26
+ "accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
27
+ "light-accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
28
+ "dark-accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
29
+ "accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
30
+ "light-accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
31
+ "dark-accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
32
+ "primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
33
+ "light-primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
34
+ "dark-primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
35
+ "primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
36
+ "light-primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
37
+ "dark-primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
38
+ "primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
39
+ "light-primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
40
+ "dark-primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
41
+ "primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
42
+ "light-primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
43
+ "dark-primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
44
+ "secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
45
+ "light-secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
46
+ "dark-secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
47
+ "secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
48
+ "light-secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
49
+ "dark-secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
50
+ "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
51
+ "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
52
+ "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
53
+ "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
54
+ "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
55
+ "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
56
+ "error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
57
+ "light-error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
58
+ "dark-error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
59
+ "error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
60
+ "light-error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
61
+ "dark-error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
62
+ "error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
63
+ "light-error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
64
+ "dark-error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
65
+ "error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
66
+ "light-error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
67
+ "dark-error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
68
+ "error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
69
+ "light-error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
70
+ "dark-error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
71
+ "error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
72
+ "light-error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
73
+ "dark-error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
74
+ "error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
75
+ "light-error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
76
+ "dark-error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
77
+ "error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
78
+ "light-error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
79
+ "dark-error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
80
+ "error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
81
+ "light-error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
82
+ "dark-error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
83
+ "warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
84
+ "light-warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
85
+ "dark-warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
86
+ "warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
87
+ "light-warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
88
+ "dark-warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
89
+ "warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
90
+ "light-warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
91
+ "dark-warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
92
+ "warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
93
+ "light-warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
94
+ "dark-warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
95
+ "warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
96
+ "light-warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
97
+ "dark-warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
98
+ "warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
99
+ "light-warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
100
+ "dark-warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
101
+ "warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
102
+ "light-warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
103
+ "dark-warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
104
+ "warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
105
+ "light-warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
106
+ "dark-warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
107
+ "warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
108
+ "light-warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
109
+ "dark-warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
110
+ "warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
111
+ "light-warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
112
+ "dark-warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
113
+ "info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
114
+ "light-info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
115
+ "dark-info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
116
+ "info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
117
+ "light-info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
118
+ "dark-info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
119
+ "info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
120
+ "light-info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
121
+ "dark-info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
122
+ "info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
123
+ "light-info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
124
+ "dark-info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
125
+ "info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
126
+ "light-info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
127
+ "dark-info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
128
+ "info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
129
+ "light-info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
130
+ "dark-info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
131
+ "info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
132
+ "light-info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
133
+ "dark-info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
134
+ "info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
135
+ "light-info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
136
+ "dark-info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
137
+ "info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
138
+ "light-info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
139
+ "dark-info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
140
+ "info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
141
+ "light-info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
142
+ "dark-info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
143
+ "success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
144
+ "light-success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
145
+ "dark-success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
146
+ "success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
147
+ "light-success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
148
+ "dark-success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
149
+ "success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
150
+ "light-success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
151
+ "dark-success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
152
+ "success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
153
+ "light-success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
154
+ "dark-success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
155
+ "success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
156
+ "light-success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
157
+ "dark-success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
158
+ "success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
159
+ "light-success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
160
+ "dark-success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
161
+ "success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
162
+ "light-success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
163
+ "dark-success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
164
+ "success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
165
+ "light-success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
166
+ "dark-success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
167
+ "success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
168
+ "light-success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
169
+ "dark-success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
170
+ "success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
171
+ "light-success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
172
+ "dark-success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
173
+ "background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
174
+ "light-background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
175
+ "dark-background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
176
+ "background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
177
+ "light-background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
178
+ "dark-background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
179
+ "background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
180
+ "light-background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
181
+ "dark-background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
182
+ "background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
183
+ "light-background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
184
+ "dark-background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
185
+ "background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
186
+ "light-background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
187
+ "dark-background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
188
+ "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
189
+ "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
190
+ "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
191
+ "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
192
+ "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
193
+ "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
194
+ "action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
195
+ "light-action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
196
+ "dark-action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
197
+ "action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
198
+ "light-action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
199
+ "dark-action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
200
+ "action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
201
+ "light-action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
202
+ "dark-action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
203
+ "action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
204
+ "light-action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
205
+ "dark-action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
206
+ "actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
207
+ "light-actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
208
+ "dark-actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
209
+ "actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
210
+ "light-actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
211
+ "dark-actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
212
+ "actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
213
+ "light-actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
214
+ "dark-actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
215
+ "actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
216
+ "light-actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
217
+ "dark-actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
218
+ "actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
219
+ "light-actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
220
+ "dark-actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
221
+ "actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
222
+ "light-actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
223
+ "dark-actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
224
+ "actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
225
+ "light-actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
226
+ "dark-actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
227
+ "actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
228
+ "light-actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
229
+ "dark-actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
230
+ "misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
231
+ "light-misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
232
+ "dark-misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
233
+ "misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
234
+ "light-misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
235
+ "dark-misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
236
+ "misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
237
+ "light-misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
238
+ "dark-misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
239
+ "misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)",
240
+ "light-misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)",
241
+ "dark-misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)"
242
+ },
243
+ "borderRadius": {
244
+ "inline": "var(--os-radius-inline)",
245
+ "control": "var(--os-radius-control)",
246
+ "container": "var(--os-radius-container)",
247
+ "full": "var(--os-radius-full)"
248
+ },
249
+ "boxShadow": {
250
+ "overlay": "var(--os-shadow-overlay)"
251
+ },
252
+ "transitionTimingFunction": {
253
+ "out": "var(--os-ease-out)",
254
+ "emphasized": "var(--os-ease-emphasized)",
255
+ "spring": "var(--os-ease-spring)"
256
+ },
257
+ "spacing": {
258
+ "small": "var(--os-spacing-small)",
259
+ "medium": "var(--os-spacing-medium)",
260
+ "large": "var(--os-spacing-large)"
261
+ },
262
+ "fontSize": {
263
+ "h1": [
264
+ "96px",
265
+ {
266
+ "lineHeight": "115px",
267
+ "letterSpacing": "-1.5px",
268
+ "fontWeight": "400"
269
+ }
270
+ ],
271
+ "h2": [
272
+ "60px",
273
+ {
274
+ "lineHeight": "72px",
275
+ "letterSpacing": "-0.5px",
276
+ "fontWeight": "400"
277
+ }
278
+ ],
279
+ "h3": [
280
+ "48px",
281
+ {
282
+ "lineHeight": "58px",
283
+ "letterSpacing": "0px",
284
+ "fontWeight": "400"
285
+ }
286
+ ],
287
+ "h4": [
288
+ "34px",
289
+ {
290
+ "lineHeight": "41px",
291
+ "letterSpacing": "0.3px",
292
+ "fontWeight": "400"
293
+ }
294
+ ],
295
+ "h5": [
296
+ "24px",
297
+ {
298
+ "lineHeight": "29px",
299
+ "letterSpacing": "0px",
300
+ "fontWeight": "400"
301
+ }
302
+ ],
303
+ "h6": [
304
+ "20px",
305
+ {
306
+ "lineHeight": "30px",
307
+ "letterSpacing": "0.2px",
308
+ "fontWeight": "400"
309
+ }
310
+ ],
311
+ "subtitle1": [
312
+ "16px",
313
+ {
314
+ "lineHeight": "24px",
315
+ "letterSpacing": "0.2px",
316
+ "fontWeight": "400"
317
+ }
318
+ ],
319
+ "subtitle2": [
320
+ "14px",
321
+ {
322
+ "lineHeight": "21px",
323
+ "letterSpacing": "0.1px",
324
+ "fontWeight": "400"
325
+ }
326
+ ],
327
+ "body1": [
328
+ "16px",
329
+ {
330
+ "lineHeight": "24px",
331
+ "letterSpacing": "0.2px",
332
+ "fontWeight": "400"
333
+ }
334
+ ],
335
+ "body2": [
336
+ "14px",
337
+ {
338
+ "lineHeight": "21px",
339
+ "letterSpacing": "0.2px",
340
+ "fontWeight": "400"
341
+ }
342
+ ],
343
+ "caption": [
344
+ "12px",
345
+ {
346
+ "lineHeight": "18px",
347
+ "letterSpacing": "0.5px",
348
+ "fontWeight": "400"
349
+ }
350
+ ]
351
+ },
352
+ "fontFamily": {
353
+ "inter": "Inter, sans-serif"
354
+ },
355
+ "fontWeight": {
356
+ "h1": "400",
357
+ "h2": "400",
358
+ "h3": "400",
359
+ "h4": "400",
360
+ "h5": "400",
361
+ "h6": "400",
362
+ "subtitle1": "400",
363
+ "subtitle2": "400",
364
+ "body1": "400",
365
+ "body2": "400",
366
+ "caption": "400"
367
+ },
368
+ "letterSpacing": {
369
+ "h1": "-1.5px",
370
+ "h2": "-0.5px",
371
+ "h3": "0px",
372
+ "h4": "0.3px",
373
+ "h5": "0px",
374
+ "h6": "0.2px",
375
+ "subtitle1": "0.2px",
376
+ "subtitle2": "0.1px",
377
+ "body1": "0.2px",
378
+ "body2": "0.2px",
379
+ "caption": "0.5px"
380
+ },
381
+ "lineHeight": {
382
+ "h1": "115px",
383
+ "h2": "72px",
384
+ "h3": "58px",
385
+ "h4": "41px",
386
+ "h5": "29px",
387
+ "h6": "30px",
388
+ "subtitle1": "24px",
389
+ "subtitle2": "21px",
390
+ "body1": "24px",
391
+ "body2": "21px",
392
+ "caption": "18px"
393
+ }
394
+ }
395
+ }
396
+ };