@medusajs/ui-preset 1.0.0 → 1.0.2

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 +5 -5
  2. package/CHANGELOG.md +72 -0
  3. package/LICENSE +21 -0
  4. package/README.md +36 -1
  5. package/dist/index.js +366 -236
  6. package/dist/index.mjs +366 -236
  7. package/package.json +6 -1
  8. package/src/plugin.ts +17 -2
  9. package/src/theme/extension/theme.ts +86 -55
  10. package/src/theme/tokens/colors.ts +104 -90
  11. package/src/theme/tokens/components.ts +74 -38
  12. package/src/theme/tokens/effects.ts +34 -36
  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.2",
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
@@ -18,11 +18,11 @@ export default plugin(
18
18
  },
19
19
  })
20
20
 
21
- addComponents(components)
22
21
  addComponents(typography)
23
22
 
24
23
  addBase({
25
24
  ":root": { ...colors.light, ...effects.light },
25
+ ...components.light,
26
26
  })
27
27
 
28
28
  if (darkMode === "class") {
@@ -33,6 +33,7 @@ export default plugin(
33
33
  addBase({
34
34
  "@media (prefers-color-scheme: dark)": {
35
35
  ":root": { ...colors.dark, ...effects.dark },
36
+ ...components.dark,
36
37
  },
37
38
  })
38
39
  }
@@ -46,7 +47,21 @@ export default plugin(
46
47
  mono: FONT_FAMILY_MONO,
47
48
  },
48
49
  transitionProperty: {
49
- fg: "color, background-color, border-color, box-shadow",
50
+ fg: "color, background-color, border-color, box-shadow, opacity",
51
+ },
52
+ keyframes: {
53
+ "accordion-down": {
54
+ from: { height: "0px" },
55
+ to: { height: "var(--radix-accordion-content-height)" },
56
+ },
57
+ "accordion-up": {
58
+ from: { height: "var(--radix-accordion-content-height)" },
59
+ to: { height: "0px" },
60
+ },
61
+ },
62
+ animation: {
63
+ "accordion-down": "accordion-down 0.2s ease-out",
64
+ "accordion-up": "accordion-up 0.2s ease-out",
50
65
  },
51
66
  },
52
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
+ "pressed": {
9
+ "DEFAULT": "var(--button-inverted-pressed)"
10
+ },
11
+ "hover": {
12
+ "DEFAULT": "var(--button-inverted-hover)"
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
+ "neutral": {
25
+ "pressed": {
26
+ "DEFAULT": "var(--button-neutral-pressed)"
27
+ },
28
+ "DEFAULT": "var(--button-neutral)",
29
+ "hover": {
30
+ "DEFAULT": "var(--button-neutral-hover)"
31
+ }
32
+ },
33
+ "danger": {
34
+ "DEFAULT": "var(--button-danger)",
35
+ "pressed": {
36
+ "DEFAULT": "var(--button-danger-pressed)"
37
+ },
38
+ "hover": {
39
+ "DEFAULT": "var(--button-danger-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": {
@@ -236,69 +274,62 @@ export const theme = {
236
274
  "DEFAULT": "var(--fg-muted)"
237
275
  }
238
276
  },
239
- "button": {
240
- "danger": {
241
- "pressed": {
242
- "DEFAULT": "var(--button-danger-pressed)"
277
+ "contrast": {
278
+ "bg": {
279
+ "subtle": {
280
+ "DEFAULT": "var(--contrast-bg-subtle)"
243
281
  },
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)"
282
+ "base": {
283
+ "DEFAULT": "var(--contrast-bg-base)",
284
+ "pressed": {
285
+ "DEFAULT": "var(--contrast-bg-base-pressed)"
286
+ },
287
+ "hover": {
288
+ "DEFAULT": "var(--contrast-bg-base-hover)"
289
+ }
253
290
  },
254
- "pressed": {
255
- "DEFAULT": "var(--button-transparent-pressed)"
291
+ "highlight": {
292
+ "DEFAULT": "var(--contrast-bg-highlight)"
256
293
  }
257
294
  },
258
- "inverted": {
259
- "DEFAULT": "var(--button-inverted)",
260
- "pressed": {
261
- "DEFAULT": "var(--button-inverted-pressed)"
262
- },
263
- "hover": {
264
- "DEFAULT": "var(--button-inverted-hover)"
295
+ "border": {
296
+ "base": {
297
+ "DEFAULT": "var(--contrast-border-base)"
265
298
  }
266
299
  },
267
- "neutral": {
268
- "pressed": {
269
- "DEFAULT": "var(--button-neutral-pressed)"
300
+ "fg": {
301
+ "primary": {
302
+ "DEFAULT": "var(--contrast-fg-primary)"
270
303
  },
271
- "DEFAULT": "var(--button-neutral)",
272
- "hover": {
273
- "DEFAULT": "var(--button-neutral-hover)"
304
+ "secondary": {
305
+ "DEFAULT": "var(--contrast-fg-secondary)"
274
306
  }
275
307
  }
276
308
  }
277
309
  }
278
310
  },
279
311
  "boxShadow": {
280
- "borders-focus": "var(--borders-focus)",
281
- "borders-interactive": "var(--borders-interactive)",
282
- "borders-active": "var(--borders-active)",
312
+ "elevation-card-hover": "var(--elevation-card-hover)",
313
+ "elevation-modal": "var(--elevation-modal)",
314
+ "buttons-inverted": "var(--buttons-inverted)",
315
+ "elevation-card-rest": "var(--elevation-card-rest)",
316
+ "buttons-neutral-focus": "var(--buttons-neutral-focus)",
317
+ "borders-interactive-with-active": "var(--borders-interactive-with-active)",
318
+ "buttons-danger-focus": "var(--buttons-danger-focus)",
319
+ "borders-base": "var(--borders-base)",
320
+ "buttons-danger": "var(--buttons-danger)",
283
321
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
284
- "borders-error": "var(--borders-error)",
285
322
  "details-switch-handle": "var(--details-switch-handle)",
323
+ "buttons-neutral": "var(--buttons-neutral)",
286
324
  "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
287
- "elevation-flyout": "var(--elevation-flyout)",
288
325
  "details-switch-background-focus": "var(--details-switch-background-focus)",
289
- "borders-base": "var(--borders-base)",
326
+ "borders-error": "var(--borders-error)",
327
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
328
+ "borders-focus": "var(--borders-focus)",
329
+ "details-switch-background": "var(--details-switch-background)",
290
330
  "elevation-tooltip": "var(--elevation-tooltip)",
291
331
  "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
292
- "elevation-card-hover": "var(--elevation-card-hover)",
293
- "elevation-modal": "var(--elevation-modal)",
294
- "elevation-card-rest": "var(--elevation-card-rest)",
295
- "buttons-neutral": "var(--buttons-neutral)",
296
- "buttons-colored-focus": "var(--buttons-colored-focus)",
297
- "buttons-colored": "var(--buttons-colored)",
298
- "buttons-neutral-focus": "var(--buttons-neutral-focus)",
299
- "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)"
332
+ "elevation-flyout": "var(--elevation-flyout)"
302
333
  }
303
334
  }
304
335
  }
package/src/theme/tokens/colors.ts CHANGED
@@ -1,5 +1,35 @@
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
+ "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
12
+ "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
13
+ "--bg-switch-off": "rgba(53, 55, 60, 1)",
14
+ "--border-strong": "rgba(53, 55, 60, 1)",
15
+ "--fg-subtle": "rgba(173, 177, 184, 1)",
16
+ "--fg-base": "rgba(237, 238, 240, 1)",
17
+ "--bg-base-hover": "rgba(39, 40, 45, 1)",
18
+ "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
19
+ "--fg-disabled": "rgba(60, 63, 68, 1)",
20
+ "--bg-subtle": "rgba(24, 24, 26, 1)",
21
+ "--tag-neutral-border": "rgba(60, 63, 68, 1)",
22
+ "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
23
+ "--tag-neutral-text": "rgba(173, 177, 184, 1)",
24
+ "--fg-muted": "rgba(105, 110, 119, 1)",
25
+ "--button-danger-pressed": "rgba(225, 29, 72, 1)",
26
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
27
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
28
+ "--code-bg-header": "rgba(24, 24, 26, 1)",
29
+ "--border-loud": "rgba(237, 238, 240, 1)",
30
+ "--bg-base-pressed": "rgba(46, 48, 53, 1)",
31
+ "--bg-disabled": "rgba(39, 40, 45, 1)",
32
+ "--code-icon": "rgba(70, 75, 80, 1)",
3
33
  "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
4
34
  "--border-danger": "rgba(190, 18, 60, 1)",
5
35
  "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -11,95 +41,76 @@ export const colors = {
11
41
  "--button-danger": "rgba(159, 18, 57, 1)",
12
42
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
13
43
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
14
- "--bg-overlay": "rgba(10, 10, 10, 0.7)",
15
44
  "--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)",
45
+ "--bg-overlay": "rgba(24, 24, 26, 0.7)",
46
+ "--fg-on-inverted": "rgba(24, 24, 26, 1)",
47
+ "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
48
+ "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
49
+ "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
23
50
  "--tag-red-border": "rgba(136, 19, 55, 1)",
24
51
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
25
- "--button-transparent-hover": "rgba(38, 38, 38, 1)",
52
+ "--button-transparent-hover": "rgba(39, 40, 45, 1)",
26
53
  "--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
54
  "--tag-orange-text": "rgba(251, 191, 36, 1)",
31
55
  "--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)",
56
+ "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
37
57
  "--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
58
  "--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)",
59
+ "--bg-base": "rgba(27, 27, 31, 1)",
44
60
  "--tag-red-text": "rgba(251, 113, 133, 1)",
45
61
  "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
46
62
  "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
47
63
  "--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)",
64
+ "--border-transparent": "rgba(255, 255, 255, 0)",
65
+ "--code-border": "rgba(46, 48, 53, 1)",
53
66
  "--tag-orange-icon": "rgba(245, 158, 11, 1)",
54
67
  "--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
68
  "--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
69
  "--tag-green-bg": "rgba(2, 44, 34, 1)",
61
- "--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
62
70
  "--tag-blue-border": "rgba(30, 58, 138, 1)",
63
- "--fg-muted": "rgba(110, 110, 110, 1)",
64
71
  "--tag-purple-border": "rgba(76, 29, 149, 1)",
65
72
  "--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
73
  "--tag-orange-bg": "rgba(69, 26, 3, 1)",
70
- "--bg-disabled": "rgba(38, 38, 38, 1)",
71
74
  "--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)",
75
+ "--code-bg-base": "rgba(27, 27, 31, 1)",
76
+ "--button-transparent": "rgba(255, 255, 255, 0)",
77
+ "--button-neutral": "rgba(39, 40, 45, 1)",
76
78
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
77
79
  "--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)",
80
+ "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
81
+ "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
82
+ "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
83
+ "--button-inverted-hover": "rgba(255, 255, 255, 1)",
84
+ "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
85
+ "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
86
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
88
87
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
89
88
  "--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)",
89
+ "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
94
90
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
95
91
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
96
- "--tag-neutral-icon": "rgba(129, 129, 129, 1)",
97
92
  "--tag-purple-icon": "rgba(139, 92, 246, 1)",
98
93
  "--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)"
94
+ "--tag-green-icon": "rgba(16, 185, 129, 1)",
95
+ "--button-inverted": "rgba(237, 238, 240, 1)",
96
+ "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
97
+ "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
98
+ "--bg-component": "rgba(39, 40, 45, 1)",
99
+ "--bg-field": "rgba(39, 40, 45, 1)",
100
+ "--bg-field-hover": "rgba(46, 48, 53, 1)",
101
+ "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
102
+ "--contrast-bg-base": "rgba(228, 228, 233, 1)",
103
+ "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
104
+ "--contrast-border-base": "rgba(185, 187, 198, 1)",
105
+ "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
106
+ "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
107
+ "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
108
+ "--contrast-bg-highlight": "rgba(242, 242, 245, 1)"
101
109
  },
102
110
  "light": {
111
+ "--button-inverted": "rgba(3, 7, 18, 1)",
112
+ "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
113
+ "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
103
114
  "--code-text-base": "rgba(249, 250, 251, 1)",
104
115
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
105
116
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -120,24 +131,16 @@ export const colors = {
120
131
  "--tag-purple-text": "rgba(109, 40, 217, 1)",
121
132
  "--tag-blue-bg": "rgba(219, 234, 254, 1)",
122
133
  "--tag-blue-icon": "rgba(37, 99, 235, 1)",
123
- "--bg-component": "rgba(241, 243, 245, 1)",
124
134
  "--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
135
  "--border-loud": "rgba(3, 7, 18, 1)",
128
136
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
129
137
  "--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
138
  "--button-transparent": "rgba(255, 255, 255, 0)",
134
- "--bg-interactive": "rgba(59, 130, 246, 1)",
135
139
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
136
140
  "--fg-interactive": "rgba(59, 130, 246, 1)",
137
141
  "--fg-error": "rgba(225, 29, 72, 1)",
138
142
  "--border-danger": "rgba(190, 18, 60, 1)",
139
143
  "--border-transparent": "rgba(3, 7, 18, 0)",
140
- "--bg-overlay": "rgba(3, 7, 18, 0.4)",
141
144
  "--fg-base": "rgba(3, 7, 18, 1)",
142
145
  "--fg-disabled": "rgba(209, 213, 219, 1)",
143
146
  "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -163,42 +166,53 @@ export const colors = {
163
166
  "--tag-red-border": "rgba(254, 205, 211, 1)",
164
167
  "--tag-green-border": "rgba(167, 243, 208, 1)",
165
168
  "--tag-green-text": "rgba(4, 120, 87, 1)",
166
- "--bg-disabled": "rgba(243, 244, 246, 1)",
167
169
  "--button-transparent-hover": "rgba(249, 250, 251, 1)",
168
170
  "--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
171
  "--code-bg-base": "rgba(17, 24, 39, 1)",
174
172
  "--code-bg-header": "rgba(31, 41, 55, 1)",
175
173
  "--code-text-subtle": "rgba(156, 163, 175, 1)",
176
174
  "--code-border": "rgba(55, 65, 81, 1)",
177
175
  "--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)",
176
+ "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
177
+ "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
178
+ "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
190
179
  "--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)",
180
+ "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
181
+ "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
182
+ "--button-neutral-hover": "rgba(249, 250, 251, 1)",
183
+ "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
184
+ "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
196
185
  "--button-danger": "rgba(225, 29, 72, 1)",
197
186
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
198
187
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
199
- "--button-danger-hover": "rgba(225, 29, 72, 1)",
188
+ "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
189
+ "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
190
+ "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
191
+ "--button-danger-pressed": "rgba(159, 18, 57, 1)",
192
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
193
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
194
+ "--button-inverted-hover": "rgba(17, 24, 39, 1)",
195
+ "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
196
+ "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
197
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
200
198
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
201
199
  "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
202
- "--bg-switch-off": "rgba(229, 231, 235, 1)"
200
+ "--bg-component": "rgba(241, 243, 245, 1)",
201
+ "--bg-overlay": "rgba(3, 7, 18, 0.4)",
202
+ "--bg-switch-off": "rgba(229, 231, 235, 1)",
203
+ "--bg-field-hover": "rgba(243, 244, 246, 1)",
204
+ "--bg-field": "rgba(249, 250, 251, 1)",
205
+ "--bg-interactive": "rgba(59, 130, 246, 1)",
206
+ "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
207
+ "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
208
+ "--bg-disabled": "rgba(243, 244, 246, 1)",
209
+ "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
210
+ "--contrast-bg-base": "rgba(27, 27, 31, 1)",
211
+ "--contrast-border-base": "rgba(60, 63, 68, 1)",
212
+ "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
213
+ "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
214
+ "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
215
+ "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
216
+ "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
203
217
  }
204
218
  }
package/src/theme/tokens/components.ts CHANGED
@@ -1,42 +1,78 @@
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%"
2
+ "dark": {
3
+ ".button-neutral-hover-gradient": {
4
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
5
+ "opacity": "6%"
6
+ },
7
+ ".button-danger-pressed-gradient": {
8
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
9
+ "opacity": "10%"
10
+ },
11
+ ".button-danger-gradient": {
12
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
13
+ "opacity": "10%"
14
+ },
15
+ ".button-neutral-pressed-gradient": {
16
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
17
+ "opacity": "6%"
18
+ },
19
+ ".button-neutral-gradient": {
20
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
21
+ "opacity": "6%"
22
+ },
23
+ ".button-inverted-pressed-gradient": {
24
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
25
+ "opacity": "12%"
26
+ },
27
+ ".button-inverted-hover-gradient": {
28
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
29
+ "opacity": "12%"
30
+ },
31
+ ".button-danger-hover-gradient": {
32
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
33
+ "opacity": "10%"
34
+ },
35
+ ".button-inverted-gradient": {
36
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
37
+ "opacity": "12%"
38
+ }
5
39
  },
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
- ".button-inverted-gradient": {
15
- "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%"
25
- },
26
- ".button-inverted-hover-gradient": {
27
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
28
- "opacity": "16%"
29
- },
30
- ".button-neutral-gradient": {
31
- "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%"
40
+ "light": {
41
+ ".button-inverted-gradient": {
42
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
43
+ "opacity": "16%"
44
+ },
45
+ ".button-neutral-pressed-gradient": {
46
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
47
+ "opacity": "3%"
48
+ },
49
+ ".button-neutral-gradient": {
50
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
51
+ "opacity": "3%"
52
+ },
53
+ ".button-neutral-hover-gradient": {
54
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
55
+ "opacity": "3%"
56
+ },
57
+ ".button-danger-gradient": {
58
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
59
+ "opacity": "16%"
60
+ },
61
+ ".button-inverted-pressed-gradient": {
62
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
63
+ "opacity": "16%"
64
+ },
65
+ ".button-danger-pressed-gradient": {
66
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
67
+ "opacity": "16%"
68
+ },
69
+ ".button-inverted-hover-gradient": {
70
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
71
+ "opacity": "16%"
72
+ },
73
+ ".button-danger-hover-gradient": {
74
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
75
+ "opacity": "16%"
76
+ }
41
77
  }
42
78
  }