@medusajs/ui-preset 1.0.0 → 1.0.1

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 (13) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/CHANGELOG.md +49 -0
  3. package/LICENSE +21 -0
  4. package/README.md +36 -1
  5. package/dist/index.js +217 -224
  6. package/dist/index.mjs +217 -224
  7. package/package.json +6 -1
  8. package/src/plugin.ts +14 -0
  9. package/src/theme/extension/theme.ts +56 -57
  10. package/src/theme/tokens/colors.ts +67 -93
  11. package/src/theme/tokens/components.ts +4 -32
  12. package/src/theme/tokens/effects.ts +27 -29
  13. package/src/theme/tokens/typography.ts +49 -13
package/package.json CHANGED
@@ -1,8 +1,13 @@
1
1
  {
2
2
  "name": "@medusajs/ui-preset",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Medusa UI preset",
5
5
  "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/medusajs/ui.git",
9
+ "directory": "packages/ui-preset"
10
+ },
6
11
  "author": "Kasper Kristensen <kasper@medusajs.com>",
7
12
  "exports": {
8
13
  ".": {
package/src/plugin.ts CHANGED
@@ -48,6 +48,20 @@ export default plugin(
48
48
  transitionProperty: {
49
49
  fg: "color, background-color, border-color, box-shadow",
50
50
  },
51
+ keyframes: {
52
+ "accordion-down": {
53
+ from: { height: "0px" },
54
+ to: { height: "var(--radix-accordion-content-height)" },
55
+ },
56
+ "accordion-up": {
57
+ from: { height: "var(--radix-accordion-content-height)" },
58
+ to: { height: "0px" },
59
+ },
60
+ },
61
+ animation: {
62
+ "accordion-down": "accordion-down 0.2s ease-out",
63
+ "accordion-up": "accordion-up 0.2s ease-out",
64
+ },
51
65
  },
52
66
  },
53
67
  }
package/src/theme/extension/theme.ts CHANGED
@@ -2,6 +2,44 @@ export const theme = {
2
2
  "extend": {
3
3
  "colors": {
4
4
  "ui": {
5
+ "button": {
6
+ "inverted": {
7
+ "DEFAULT": "var(--button-inverted)",
8
+ "hover": {
9
+ "DEFAULT": "var(--button-inverted-hover)"
10
+ },
11
+ "pressed": {
12
+ "DEFAULT": "var(--button-inverted-pressed)"
13
+ }
14
+ },
15
+ "transparent": {
16
+ "DEFAULT": "var(--button-transparent)",
17
+ "hover": {
18
+ "DEFAULT": "var(--button-transparent-hover)"
19
+ },
20
+ "pressed": {
21
+ "DEFAULT": "var(--button-transparent-pressed)"
22
+ }
23
+ },
24
+ "danger": {
25
+ "pressed": {
26
+ "DEFAULT": "var(--button-danger-pressed)"
27
+ },
28
+ "DEFAULT": "var(--button-danger)",
29
+ "hover": {
30
+ "DEFAULT": "var(--button-danger-hover)"
31
+ }
32
+ },
33
+ "neutral": {
34
+ "pressed": {
35
+ "DEFAULT": "var(--button-neutral-pressed)"
36
+ },
37
+ "DEFAULT": "var(--button-neutral)",
38
+ "hover": {
39
+ "DEFAULT": "var(--button-neutral-hover)"
40
+ }
41
+ }
42
+ },
5
43
  "code": {
6
44
  "text": {
7
45
  "base": {
@@ -181,6 +219,17 @@ export const theme = {
181
219
  "component": {
182
220
  "DEFAULT": "var(--bg-component)"
183
221
  },
222
+ "overlay": {
223
+ "DEFAULT": "var(--bg-overlay)"
224
+ },
225
+ "switch": {
226
+ "off": {
227
+ "DEFAULT": "var(--bg-switch-off)",
228
+ "hover": {
229
+ "DEFAULT": "var(--bg-switch-off-hover)"
230
+ }
231
+ }
232
+ },
184
233
  "field": {
185
234
  "hover": {
186
235
  "DEFAULT": "var(--bg-field-hover)"
@@ -190,19 +239,8 @@ export const theme = {
190
239
  "interactive": {
191
240
  "DEFAULT": "var(--bg-interactive)"
192
241
  },
193
- "overlay": {
194
- "DEFAULT": "var(--bg-overlay)"
195
- },
196
242
  "disabled": {
197
243
  "DEFAULT": "var(--bg-disabled)"
198
- },
199
- "switch": {
200
- "off": {
201
- "hover": {
202
- "DEFAULT": "var(--bg-switch-off-hover)"
203
- },
204
- "DEFAULT": "var(--bg-switch-off)"
205
- }
206
244
  }
207
245
  },
208
246
  "fg": {
@@ -235,70 +273,31 @@ export const theme = {
235
273
  "muted": {
236
274
  "DEFAULT": "var(--fg-muted)"
237
275
  }
238
- },
239
- "button": {
240
- "danger": {
241
- "pressed": {
242
- "DEFAULT": "var(--button-danger-pressed)"
243
- },
244
- "DEFAULT": "var(--button-danger)",
245
- "hover": {
246
- "DEFAULT": "var(--button-danger-hover)"
247
- }
248
- },
249
- "transparent": {
250
- "DEFAULT": "var(--button-transparent)",
251
- "hover": {
252
- "DEFAULT": "var(--button-transparent-hover)"
253
- },
254
- "pressed": {
255
- "DEFAULT": "var(--button-transparent-pressed)"
256
- }
257
- },
258
- "inverted": {
259
- "DEFAULT": "var(--button-inverted)",
260
- "pressed": {
261
- "DEFAULT": "var(--button-inverted-pressed)"
262
- },
263
- "hover": {
264
- "DEFAULT": "var(--button-inverted-hover)"
265
- }
266
- },
267
- "neutral": {
268
- "pressed": {
269
- "DEFAULT": "var(--button-neutral-pressed)"
270
- },
271
- "DEFAULT": "var(--button-neutral)",
272
- "hover": {
273
- "DEFAULT": "var(--button-neutral-hover)"
274
- }
275
- }
276
276
  }
277
277
  }
278
278
  },
279
279
  "boxShadow": {
280
+ "elevation-flyout": "var(--elevation-flyout)",
281
+ "elevation-tooltip": "var(--elevation-tooltip)",
282
+ "elevation-card-rest": "var(--elevation-card-rest)",
283
+ "buttons-neutral-focus": "var(--buttons-neutral-focus)",
280
284
  "borders-focus": "var(--borders-focus)",
281
285
  "borders-interactive": "var(--borders-interactive)",
282
286
  "borders-active": "var(--borders-active)",
283
287
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
284
288
  "borders-error": "var(--borders-error)",
285
- "details-switch-handle": "var(--details-switch-handle)",
286
289
  "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
287
- "elevation-flyout": "var(--elevation-flyout)",
290
+ "details-switch-handle": "var(--details-switch-handle)",
288
291
  "details-switch-background-focus": "var(--details-switch-background-focus)",
289
292
  "borders-base": "var(--borders-base)",
290
- "elevation-tooltip": "var(--elevation-tooltip)",
291
293
  "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
292
294
  "elevation-card-hover": "var(--elevation-card-hover)",
293
295
  "elevation-modal": "var(--elevation-modal)",
294
- "elevation-card-rest": "var(--elevation-card-rest)",
295
296
  "buttons-neutral": "var(--buttons-neutral)",
296
- "buttons-colored-focus": "var(--buttons-colored-focus)",
297
297
  "buttons-colored": "var(--buttons-colored)",
298
- "buttons-neutral-focus": "var(--buttons-neutral-focus)",
299
298
  "borders-base-with-shadow": "var(--borders-base-with-shadow)",
300
- "borders-strong-with-shadow": "var(--borders-strong-with-shadow)",
301
- "details-switch-background": "var(--details-switch-background)"
299
+ "details-switch-background": "var(--details-switch-background)",
300
+ "buttons-colored-focus": "var(--buttons-colored-focus)"
302
301
  }
303
302
  }
304
303
  }
package/src/theme/tokens/colors.ts CHANGED
@@ -1,5 +1,31 @@
1
1
  export const colors = {
2
2
  "dark": {
3
+ "--code-text-subtle": "rgba(105, 110, 119, 1)",
4
+ "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
5
+ "--border-base": "rgba(46, 48, 53, 1)",
6
+ "--code-text-base": "rgba(237, 238, 240, 1)",
7
+ "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
8
+ "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
9
+ "--fg-on-color": "rgba(255, 255, 255, 1)",
10
+ "--button-neutral-hover": "rgba(53, 55, 60, 1)",
11
+ "--bg-switch-off": "rgba(53, 55, 60, 1)",
12
+ "--border-strong": "rgba(53, 55, 60, 1)",
13
+ "--fg-subtle": "rgba(173, 177, 184, 1)",
14
+ "--fg-base": "rgba(237, 238, 240, 1)",
15
+ "--bg-base-hover": "rgba(39, 40, 45, 1)",
16
+ "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
17
+ "--fg-disabled": "rgba(60, 63, 68, 1)",
18
+ "--bg-subtle": "rgba(24, 24, 26, 1)",
19
+ "--tag-neutral-border": "rgba(60, 63, 68, 1)",
20
+ "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
21
+ "--tag-neutral-text": "rgba(173, 177, 184, 1)",
22
+ "--fg-muted": "rgba(105, 110, 119, 1)",
23
+ "--button-danger-pressed": "rgba(225, 29, 72, 1)",
24
+ "--code-bg-header": "rgba(24, 24, 26, 1)",
25
+ "--border-loud": "rgba(237, 238, 240, 1)",
26
+ "--bg-base-pressed": "rgba(46, 48, 53, 1)",
27
+ "--bg-disabled": "rgba(39, 40, 45, 1)",
28
+ "--code-icon": "rgba(70, 75, 80, 1)",
3
29
  "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
4
30
  "--border-danger": "rgba(190, 18, 60, 1)",
5
31
  "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -11,95 +37,61 @@ export const colors = {
11
37
  "--button-danger": "rgba(159, 18, 57, 1)",
12
38
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
13
39
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
14
- "--bg-overlay": "rgba(10, 10, 10, 0.7)",
15
40
  "--fg-interactive": "rgba(96, 165, 250, 1)",
16
- "--fg-on-inverted": "rgba(10, 10, 10, 1)",
17
- "--button-danger-pressed": "rgba(159, 18, 57, 1)",
18
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
19
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
20
- "--button-neutral-pressed": "rgba(38, 38, 38, 1)",
21
- "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
22
- "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
41
+ "--bg-overlay": "rgba(24, 24, 26, 0.7)",
42
+ "--fg-on-inverted": "rgba(24, 24, 26, 1)",
43
+ "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
23
44
  "--tag-red-border": "rgba(136, 19, 55, 1)",
24
45
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
25
- "--button-transparent-hover": "rgba(38, 38, 38, 1)",
46
+ "--button-transparent-hover": "rgba(39, 40, 45, 1)",
26
47
  "--tag-blue-text": "rgba(96, 165, 250, 1)",
27
- "--button-inverted": "rgba(238, 238, 238, 1)",
28
- "--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
29
- "--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
30
48
  "--tag-orange-text": "rgba(251, 191, 36, 1)",
31
49
  "--tag-green-text": "rgba(52, 211, 153, 1)",
32
- "--button-transparent": "rgba(0, 0, 0, 0)",
33
- "--button-transparent-pressed": "rgba(48, 48, 48, 1)",
34
- "--tag-neutral-bg": "rgba(48, 48, 48, 1)",
35
- "--code-text-subtle": "rgba(110, 110, 110, 1)",
36
- "--code-bg-base": "rgba(30, 30, 30, 1)",
50
+ "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
37
51
  "--tag-orange-border": "rgba(120, 53, 15, 1)",
38
- "--border-base": "rgba(48, 48, 48, 1)",
39
- "--bg-component": "rgba(38, 38, 38, 1)",
40
- "--code-text-base": "rgba(238, 238, 238, 1)",
41
52
  "--tag-green-border": "rgba(6, 78, 59, 1)",
42
- "--bg-base": "rgba(23, 23, 23, 1)",
43
- "--fg-on-color": "rgba(238, 238, 238, 1)",
53
+ "--bg-base": "rgba(27, 27, 31, 1)",
44
54
  "--tag-red-text": "rgba(251, 113, 133, 1)",
45
55
  "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
46
56
  "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
47
57
  "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
48
- "--border-strong": "rgba(55, 55, 55, 1)",
49
- "--fg-subtle": "rgba(163, 163, 163, 1)",
50
- "--fg-base": "rgba(238, 238, 238, 1)",
51
- "--code-border": "rgba(48, 48, 48, 1)",
52
- "--border-transparent": "rgba(238, 238, 238, 0)",
58
+ "--border-transparent": "rgba(255, 255, 255, 0)",
59
+ "--code-border": "rgba(46, 48, 53, 1)",
53
60
  "--tag-orange-icon": "rgba(245, 158, 11, 1)",
54
61
  "--tag-purple-bg": "rgba(46, 16, 100, 1)",
55
- "--bg-base-hover": "rgba(38, 38, 38, 1)",
56
- "--bg-subtle-hover": "rgba(23, 23, 23, 1)",
57
62
  "--tag-blue-bg": "rgba(23, 37, 84, 1)",
58
- "--fg-disabled": "rgba(63, 63, 63, 1)",
59
- "--bg-subtle": "rgba(10, 10, 10, 1)",
60
63
  "--tag-green-bg": "rgba(2, 44, 34, 1)",
61
- "--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
62
64
  "--tag-blue-border": "rgba(30, 58, 138, 1)",
63
- "--fg-muted": "rgba(110, 110, 110, 1)",
64
65
  "--tag-purple-border": "rgba(76, 29, 149, 1)",
65
66
  "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
66
- "--code-bg-header": "rgba(23, 23, 23, 1)",
67
- "--border-loud": "rgba(238, 238, 238, 1)",
68
- "--bg-base-pressed": "rgba(48, 48, 48, 1)",
69
67
  "--tag-orange-bg": "rgba(69, 26, 3, 1)",
70
- "--bg-disabled": "rgba(38, 38, 38, 1)",
71
68
  "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
72
- "--code-icon": "rgba(74, 74, 74, 1)",
73
- "--bg-field-hover": "rgba(48, 48, 48, 1)",
74
- "--bg-field": "rgba(38, 38, 38, 1)",
75
- "--button-neutral": "rgba(38, 38, 38, 1)",
69
+ "--code-bg-base": "rgba(27, 27, 31, 1)",
70
+ "--button-transparent": "rgba(255, 255, 255, 0)",
71
+ "--button-neutral": "rgba(39, 40, 45, 1)",
76
72
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
77
73
  "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
78
- "--button-inverted-pressed": "rgba(238, 238, 238, 1)",
79
- "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
80
- "--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
81
- "--button-neutral-hover": "rgba(38, 38, 38, 1)",
82
- "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
83
- "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
84
- "--button-inverted-hover": "rgba(238, 238, 238, 1)",
85
- "--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
86
- "--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
87
- "--button-danger-hover": "rgba(159, 18, 57, 1)",
88
- "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
89
- "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
90
- "--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
91
- "--bg-switch-off": "rgba(55, 55, 55, 1)",
92
- "--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
93
- "--tag-neutral-border": "rgba(63, 63, 63, 1)",
74
+ "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
75
+ "--button-inverted-hover": "rgba(255, 255, 255, 1)",
76
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
77
+ "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
94
78
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
95
79
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
96
- "--tag-neutral-icon": "rgba(129, 129, 129, 1)",
97
80
  "--tag-purple-icon": "rgba(139, 92, 246, 1)",
98
81
  "--tag-purple-text": "rgba(167, 139, 250, 1)",
99
- "--tag-neutral-text": "rgba(163, 163, 163, 1)",
100
- "--tag-green-icon": "rgba(16, 185, 129, 1)"
82
+ "--tag-green-icon": "rgba(16, 185, 129, 1)",
83
+ "--button-inverted": "rgba(237, 238, 240, 1)",
84
+ "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
85
+ "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
86
+ "--bg-component": "rgba(39, 40, 45, 1)",
87
+ "--bg-field": "rgba(39, 40, 45, 1)",
88
+ "--bg-field-hover": "rgba(46, 48, 53, 1)"
101
89
  },
102
90
  "light": {
91
+ "--button-inverted": "rgba(3, 7, 18, 1)",
92
+ "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
93
+ "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
94
+ "--button-inverted-hover": "rgba(31, 41, 55, 1)",
103
95
  "--code-text-base": "rgba(249, 250, 251, 1)",
104
96
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
105
97
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -120,24 +112,17 @@ export const colors = {
120
112
  "--tag-purple-text": "rgba(109, 40, 217, 1)",
121
113
  "--tag-blue-bg": "rgba(219, 234, 254, 1)",
122
114
  "--tag-blue-icon": "rgba(37, 99, 235, 1)",
123
- "--bg-component": "rgba(241, 243, 245, 1)",
124
115
  "--border-error": "rgba(225, 29, 72, 1)",
125
- "--bg-field-hover": "rgba(243, 244, 246, 1)",
126
- "--bg-field": "rgba(249, 250, 251, 1)",
127
116
  "--border-loud": "rgba(3, 7, 18, 1)",
128
117
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
129
118
  "--fg-on-color": "rgba(255, 255, 255, 1)",
130
- "--button-danger-pressed": "rgba(225, 29, 72, 1)",
131
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
132
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
133
119
  "--button-transparent": "rgba(255, 255, 255, 0)",
134
- "--bg-interactive": "rgba(59, 130, 246, 1)",
120
+ "--button-danger-pressed": "rgba(190, 18, 60, 1)",
135
121
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
136
122
  "--fg-interactive": "rgba(59, 130, 246, 1)",
137
123
  "--fg-error": "rgba(225, 29, 72, 1)",
138
124
  "--border-danger": "rgba(190, 18, 60, 1)",
139
125
  "--border-transparent": "rgba(3, 7, 18, 0)",
140
- "--bg-overlay": "rgba(3, 7, 18, 0.4)",
141
126
  "--fg-base": "rgba(3, 7, 18, 1)",
142
127
  "--fg-disabled": "rgba(209, 213, 219, 1)",
143
128
  "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -163,42 +148,31 @@ export const colors = {
163
148
  "--tag-red-border": "rgba(254, 205, 211, 1)",
164
149
  "--tag-green-border": "rgba(167, 243, 208, 1)",
165
150
  "--tag-green-text": "rgba(4, 120, 87, 1)",
166
- "--bg-disabled": "rgba(243, 244, 246, 1)",
167
151
  "--button-transparent-hover": "rgba(249, 250, 251, 1)",
168
152
  "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
169
- "--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
170
- "--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
171
- "--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
172
- "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
173
153
  "--code-bg-base": "rgba(17, 24, 39, 1)",
174
154
  "--code-bg-header": "rgba(31, 41, 55, 1)",
175
155
  "--code-text-subtle": "rgba(156, 163, 175, 1)",
176
156
  "--code-border": "rgba(55, 65, 81, 1)",
177
157
  "--code-icon": "rgba(107, 114, 128, 1)",
178
- "--button-inverted": "rgba(10, 10, 10, 1)",
179
- "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
180
- "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
181
- "--button-neutral-pressed": "rgba(255, 255, 255, 1)",
182
- "--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
183
- "--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
184
- "--button-inverted-pressed": "rgba(10, 10, 10, 1)",
185
- "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
186
- "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
187
- "--button-inverted-hover": "rgba(10, 10, 10, 1)",
188
- "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
189
- "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
158
+ "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
159
+ "--button-inverted-pressed": "rgba(55, 65, 81, 1)",
190
160
  "--button-neutral": "rgba(255, 255, 255, 1)",
191
- "--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
192
- "--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
193
- "--button-neutral-hover": "rgba(255, 255, 255, 1)",
194
- "--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
195
- "--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
161
+ "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
162
+ "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
196
163
  "--button-danger": "rgba(225, 29, 72, 1)",
197
164
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
198
165
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
166
+ "--button-neutral-hover": "rgba(249, 250, 251, 1)",
199
167
  "--button-danger-hover": "rgba(225, 29, 72, 1)",
200
- "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
201
- "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
202
- "--bg-switch-off": "rgba(229, 231, 235, 1)"
168
+ "--bg-component": "rgba(241, 243, 245, 1)",
169
+ "--bg-overlay": "rgba(3, 7, 18, 0.4)",
170
+ "--bg-switch-off": "rgba(229, 231, 235, 1)",
171
+ "--bg-field-hover": "rgba(243, 244, 246, 1)",
172
+ "--bg-field": "rgba(249, 250, 251, 1)",
173
+ "--bg-interactive": "rgba(59, 130, 246, 1)",
174
+ "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
175
+ "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
176
+ "--bg-disabled": "rgba(243, 244, 246, 1)"
203
177
  }
204
178
  }
package/src/theme/tokens/components.ts CHANGED
@@ -1,42 +1,14 @@
1
1
  export const components = {
2
- ".button-danger-gradient": {
3
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
4
- "opacity": "16%"
5
- },
6
- ".button-danger-pressed-gradient": {
7
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
8
- "opacity": "20%"
9
- },
10
- ".button-neutral-pressed-gradient": {
11
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
12
- "opacity": "4%"
13
- },
14
2
  ".button-inverted-gradient": {
15
3
  "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
16
- "opacity": "16%"
17
- },
18
- ".bg-switch-off-hover-gradient": {
19
- "backgroundImage": "linear-gradient(0deg, var(--bg-switch-off-hover-gradient-from), var(--bg-switch-off-hover-gradient-to))",
20
- "opacity": "6%"
21
- },
22
- ".button-inverted-pressed-gradient": {
23
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
24
- "opacity": "16%"
4
+ "opacity": "12%"
25
5
  },
26
- ".button-inverted-hover-gradient": {
27
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
6
+ ".button-danger-gradient": {
7
+ "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
28
8
  "opacity": "16%"
29
9
  },
30
10
  ".button-neutral-gradient": {
31
11
  "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
32
- "opacity": "4%"
33
- },
34
- ".button-neutral-hover-gradient": {
35
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
36
- "opacity": "8%"
37
- },
38
- ".button-danger-hover-gradient": {
39
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
40
- "opacity": "14.000000000000002%"
12
+ "opacity": "6%"
41
13
  }
42
14
  }
package/src/theme/tokens/effects.ts CHANGED
@@ -1,50 +1,48 @@
1
1
  export const effects = {
2
2
  "dark": {
3
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
4
- "--buttons-colored": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
3
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
4
+ "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
5
+ "--borders-base": "0px 0px 0px 1px rgba(46, 48, 53, 1)",
6
+ "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
7
+ "--borders-base-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(46, 48, 53, 1), 0px 0.5px 0px 1.5px rgba(0, 0, 0, 0.4)",
8
+ "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
9
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
5
10
  "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
6
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
7
- "--buttons-colored-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
11
+ "--buttons-colored-focus": "0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
8
12
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
9
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.24), 0px 0px 0px 1px rgba(55, 55, 55, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
10
13
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
11
14
  "--borders-interactive": "0px 0px 0px 1px rgba(96, 165, 250, 1)",
12
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(48, 48, 48, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
13
- "--borders-base": "0px 0px 0px 1px rgba(48, 48, 48, 1)",
14
- "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(23, 23, 23, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
15
- "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
16
- "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
17
- "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
15
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
16
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
18
17
  "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.25)",
19
18
  "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
20
- "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
21
- "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(48, 48, 48, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
19
+ "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
22
20
  "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1)",
23
21
  "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
24
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)"
22
+ "--buttons-colored": "0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6)",
23
+ "--buttons-neutral": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.25px 0px 0px rgba(0, 0, 0, 0.6), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.6)"
25
24
  },
26
25
  "light": {
26
+ "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
27
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
28
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
29
+ "--buttons-neutral-focus": "0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
27
30
  "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
28
31
  "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
29
32
  "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
30
33
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
31
34
  "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
32
- "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.02), 0px 5px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)",
33
35
  "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
34
- "--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
35
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
36
- "--borders-base": "0px 0px 0px 1px rgba(229, 229, 229, 1)",
37
- "--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
36
+ "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)",
37
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
38
+ "--borders-base": "0px 0px 0px 1px rgba(229, 231, 235, 1)",
38
39
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
39
- "--elevation-card-hover": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
40
- "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 229, 229, 0.4) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08), 0px 2px 24px 0px rgba(0, 0, 0, 0.08)",
41
- "--elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
42
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
43
- "--buttons-colored-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
44
- "--buttons-colored": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
45
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
46
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(229, 229, 229, 1)",
47
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(212, 212, 212, 1)",
48
- "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)"
40
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
41
+ "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
42
+ "--buttons-neutral": "0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16)",
43
+ "--buttons-colored": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.25px 0px 0px rgba(3, 7, 18, 0.16), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.16)",
44
+ "--borders-base-with-shadow": "0px 1px 2px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(229, 231, 235, 1)",
45
+ "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
46
+ "--buttons-colored-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.25px 0px 0px rgba(3, 7, 18, 0.2), 0px 0.5px 0px 0px rgba(3, 7, 18, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)"
49
47
  }
50
48
  }