@marianmeres/stuic 3.0.4 → 3.0.6

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 (64) hide show
  1. package/dist/components/DropdownMenu/index.css +3 -3
  2. package/dist/components/Input/FieldOptions.svelte +1 -1
  3. package/dist/components/Modal/index.css +2 -2
  4. package/dist/components/ModalDialog/index.css +2 -2
  5. package/dist/components/TabbedMenu/index.css +2 -2
  6. package/dist/components/ThemePreview/ThemePreview.svelte +0 -5
  7. package/dist/components/ThemePreview/index.css +2 -10
  8. package/dist/index.css +1 -1
  9. package/dist/themes/blue-orange.js +9 -21
  10. package/dist/themes/css/blue-orange.css +9 -23
  11. package/dist/themes/css/cyan-red.css +9 -23
  12. package/dist/themes/css/cyan-slate.css +9 -23
  13. package/dist/themes/css/emerald-amber-forest.css +6 -20
  14. package/dist/themes/css/emerald-pink.css +9 -23
  15. package/dist/themes/css/fuchsia-emerald.css +9 -23
  16. package/dist/themes/css/gray.css +6 -20
  17. package/dist/themes/css/indigo-amber.css +9 -23
  18. package/dist/themes/css/lime-fuchsia-neon.css +3 -17
  19. package/dist/themes/css/orange-pink-sunset.css +9 -23
  20. package/dist/themes/css/pink-emerald.css +9 -23
  21. package/dist/themes/css/pink-teal.css +6 -20
  22. package/dist/themes/css/purple-yellow.css +9 -23
  23. package/dist/themes/css/rainbow.css +9 -23
  24. package/dist/themes/css/red-blue.css +9 -23
  25. package/dist/themes/css/red-cyan.css +9 -23
  26. package/dist/themes/css/red-sky.css +61 -75
  27. package/dist/themes/css/rose-teal.css +9 -23
  28. package/dist/themes/css/sky-amber.css +9 -23
  29. package/dist/themes/css/slate-cyan.css +9 -23
  30. package/dist/themes/css/slate-teal-ocean.css +6 -20
  31. package/dist/themes/css/stone-orange-earth.css +3 -17
  32. package/dist/themes/css/stone.css +239 -0
  33. package/dist/themes/css/teal-rose.css +9 -23
  34. package/dist/themes/css/violet-lime.css +9 -23
  35. package/dist/themes/css/violet-rose-dusk.css +6 -20
  36. package/dist/themes/cyan-red.js +9 -21
  37. package/dist/themes/cyan-slate.js +9 -21
  38. package/dist/themes/emerald-amber-forest.js +1 -13
  39. package/dist/themes/emerald-pink.js +9 -21
  40. package/dist/themes/fuchsia-emerald.js +9 -21
  41. package/dist/themes/gray.js +1 -13
  42. package/dist/themes/indigo-amber.js +9 -21
  43. package/dist/themes/lime-fuchsia-neon.js +3 -15
  44. package/dist/themes/orange-pink-sunset.js +9 -21
  45. package/dist/themes/pink-emerald.js +9 -21
  46. package/dist/themes/pink-teal.js +6 -18
  47. package/dist/themes/purple-yellow.js +9 -21
  48. package/dist/themes/rainbow.js +9 -21
  49. package/dist/themes/red-blue.js +9 -21
  50. package/dist/themes/red-cyan.js +9 -21
  51. package/dist/themes/red-sky.js +38 -50
  52. package/dist/themes/rose-teal.js +9 -21
  53. package/dist/themes/sky-amber.js +9 -21
  54. package/dist/themes/slate-cyan.js +9 -21
  55. package/dist/themes/slate-teal-ocean.js +1 -13
  56. package/dist/themes/stone-orange-earth.js +3 -15
  57. package/dist/themes/stone.js +163 -0
  58. package/dist/themes/teal-rose.js +9 -21
  59. package/dist/themes/violet-lime.js +9 -21
  60. package/dist/themes/violet-rose-dusk.js +1 -13
  61. package/package.json +1 -1
  62. package/dist/themes/css/neutral.css +0 -253
  63. package/dist/themes/neutral.js +0 -175
  64. /package/dist/themes/{neutral.d.ts → stone.d.ts} +0 -0
package/dist/components/DropdownMenu/index.css CHANGED
@@ -13,8 +13,8 @@
13
13
  --stuic-dropdown-menu-transition: 150ms;
14
14
 
15
15
  /* Dropdown container colors */
16
- --stuic-dropdown-menu-bg: var(--stuic-color-surface);
17
- --stuic-dropdown-menu-text: var(--stuic-color-surface-foreground);
16
+ --stuic-dropdown-menu-bg: var(--stuic-color-background);
17
+ --stuic-dropdown-menu-text: var(--stuic-color-foreground);
18
18
  --stuic-dropdown-menu-border: var(--stuic-color-border);
19
19
  --stuic-dropdown-menu-shadow: var(--shadow-lg);
20
20
 
@@ -66,7 +66,7 @@
66
66
  --stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
67
67
 
68
68
  /* Search */
69
- --stuic-dropdown-menu-search-bg: var(--stuic-color-surface);
69
+ --stuic-dropdown-menu-search-bg: var(--stuic-color-background);
70
70
  --stuic-dropdown-menu-search-border: var(--stuic-color-border);
71
71
  --stuic-dropdown-menu-search-text: var(--stuic-color-muted-foreground);
72
72
  }
package/dist/components/Input/FieldOptions.svelte CHANGED
@@ -738,7 +738,7 @@
738
738
  {/each}
739
739
  </div>
740
740
  <!-- {/if} -->
741
- <div class="p-2 px-3 flex items-end justify-between">
741
+ <div class="pt-3 pl-1 flex items-end justify-between">
742
742
  <div class="text-xs stuic-field-options-muted">
743
743
  <!-- Use arrows to navigate. Spacebar and Enter to select and/or submit. -->
744
744
  {#if allowUnknown}
package/dist/components/Modal/index.css CHANGED
@@ -6,8 +6,8 @@
6
6
 
7
7
  :root {
8
8
  /* Background & text - reference theme tokens */
9
- --stuic-modal-bg: var(--stuic-color-surface);
10
- --stuic-modal-text: var(--stuic-color-surface-foreground);
9
+ --stuic-modal-bg: var(--stuic-color-background);
10
+ --stuic-modal-text: var(--stuic-color-foreground);
11
11
 
12
12
  /* Border radius (desktop only - mobile is fullscreen) */
13
13
  --stuic-modal-radius: var(--radius-md);
package/dist/components/ModalDialog/index.css CHANGED
@@ -13,8 +13,8 @@
13
13
  --stuic-modal-dialog-backdrop: rgb(0 0 0 / 0.4);
14
14
 
15
15
  /* Content box - reference theme tokens */
16
- --stuic-modal-dialog-bg: var(--stuic-color-surface);
17
- --stuic-modal-dialog-text: var(--stuic-color-surface-foreground);
16
+ --stuic-modal-dialog-bg: var(--stuic-color-background);
17
+ --stuic-modal-dialog-text: var(--stuic-color-foreground);
18
18
 
19
19
  /* Optional shadow for elevation */
20
20
  --stuic-modal-dialog-shadow: var(--shadow-xl);
package/dist/components/TabbedMenu/index.css CHANGED
@@ -6,8 +6,8 @@
6
6
 
7
7
  :root {
8
8
  /* Color tokens */
9
- --stuic-tabbed-menu-tab-bg: var(--stuic-color-muted);
10
- --stuic-tabbed-menu-tab-text: var(--stuic-color-muted-foreground);
9
+ --stuic-tabbed-menu-tab-bg: var(--stuic-color-surface);
10
+ --stuic-tabbed-menu-tab-text: var(--stuic-color-surface-foreground);
11
11
  --stuic-tabbed-menu-tab-bg-active: var(--stuic-color-primary);
12
12
  --stuic-tabbed-menu-tab-text-active: var(--stuic-color-primary-foreground);
13
13
  --stuic-tabbed-menu-border: var(--stuic-color-border);
package/dist/components/ThemePreview/ThemePreview.svelte CHANGED
@@ -242,11 +242,6 @@
242
242
  <span class="surface-1-foreground-text">surface-1-foreground</span>
243
243
  </div>
244
244
 
245
- <div class="color-swatch surface-2">
246
- <span class="swatch-label">surface-2</span>
247
- <span class="surface-2-foreground-text">surface-2-foreground</span>
248
- </div>
249
-
250
245
  <div class="color-swatch muted-bg">
251
246
  <span class="swatch-label">muted</span>
252
247
  <span class="muted-foreground-text">muted-foreground</span>
package/dist/components/ThemePreview/index.css CHANGED
@@ -25,8 +25,8 @@
25
25
  --stuic-theme-preview-transition: 150ms;
26
26
 
27
27
  /* Section-specific tokens that consume theme colors */
28
- --stuic-theme-preview-header-bg: var(--stuic-color-surface-2);
29
- --stuic-theme-preview-header-text: var(--stuic-color-surface-2-foreground);
28
+ --stuic-theme-preview-header-bg: var(--stuic-color-surface-1);
29
+ --stuic-theme-preview-header-text: var(--stuic-color-surface-1-foreground);
30
30
  --stuic-theme-preview-sidebar-bg: var(--stuic-color-surface-1);
31
31
  --stuic-theme-preview-sidebar-text: var(--stuic-color-surface-1-foreground);
32
32
  --stuic-theme-preview-sidebar-width: 200px;
@@ -259,10 +259,6 @@
259
259
  background: var(--stuic-color-surface-1);
260
260
  }
261
261
 
262
- .stuic-theme-preview .color-swatch.surface-2 {
263
- background: var(--stuic-color-surface-2);
264
- }
265
-
266
262
  .stuic-theme-preview .color-swatch.muted-bg {
267
263
  background: var(--stuic-color-muted);
268
264
  }
@@ -280,10 +276,6 @@
280
276
  color: var(--stuic-color-surface-1-foreground);
281
277
  }
282
278
 
283
- .stuic-theme-preview .surface-2-foreground-text {
284
- color: var(--stuic-color-surface-2-foreground);
285
- }
286
-
287
279
  .stuic-theme-preview .muted-foreground-text {
288
280
  color: var(--stuic-color-muted-foreground);
289
281
  }
package/dist/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @source "./";
2
2
 
3
3
  /* */
4
- @import "./themes/css/neutral.css";
4
+ @import "./themes/css/stone.css";
5
5
 
6
6
  /*****************************************************************************************
7
7
 
package/dist/themes/blue-orange.js CHANGED
@@ -45,23 +45,17 @@ const light = {
45
45
  foreground: "var(--color-stone-900)",
46
46
  },
47
47
  surface: {
48
- DEFAULT: "var(--color-stone-50)",
49
- foreground: "var(--color-stone-900)",
50
- hover: "var(--color-stone-100)",
51
- active: "var(--color-stone-200)",
52
- },
53
- "surface-1": {
54
- DEFAULT: "var(--color-stone-100)",
55
- foreground: "var(--color-stone-900)",
56
- hover: "var(--color-stone-200)",
57
- active: "var(--color-stone-300)",
58
- },
59
- "surface-2": {
60
48
  DEFAULT: "var(--color-stone-200)",
61
49
  foreground: "var(--color-stone-900)",
62
50
  hover: "var(--color-stone-300)",
63
51
  active: "var(--color-stone-400)",
64
52
  },
53
+ "surface-1": {
54
+ DEFAULT: "var(--color-stone-300)",
55
+ foreground: "var(--color-stone-900)",
56
+ hover: "var(--color-stone-400)",
57
+ active: "var(--color-stone-500)",
58
+ },
65
59
  muted: {
66
60
  DEFAULT: "var(--color-stone-100)",
67
61
  foreground: "var(--color-stone-500)",
@@ -72,9 +66,9 @@ const light = {
72
66
  single: {
73
67
  foreground: "var(--color-stone-900)",
74
68
  border: {
75
- DEFAULT: "var(--color-stone-200)",
76
- hover: "var(--color-stone-300)",
77
- active: "var(--color-stone-400)",
69
+ DEFAULT: "var(--color-stone-300)",
70
+ hover: "var(--color-stone-400)",
71
+ active: "var(--color-stone-500)",
78
72
  },
79
73
  input: {
80
74
  DEFAULT: "var(--color-white)",
@@ -143,12 +137,6 @@ const dark = {
143
137
  hover: "var(--color-stone-600)",
144
138
  active: "var(--color-stone-500)",
145
139
  },
146
- "surface-2": {
147
- DEFAULT: "var(--color-stone-600)",
148
- foreground: "var(--color-stone-100)",
149
- hover: "var(--color-stone-500)",
150
- active: "var(--color-stone-400)",
151
- },
152
140
  muted: {
153
141
  DEFAULT: "var(--color-stone-700)",
154
142
  foreground: "var(--color-stone-400)",
package/dist/themes/css/blue-orange.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-stone-100, #737373);
70
- --stuic-color-surface-active: var(--color-stone-200, #737373);
69
+ --stuic-color-surface-hover: var(--color-stone-300, #737373);
70
+ --stuic-color-surface-active: var(--color-stone-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-stone-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-stone-50, #737373);
83
+ --stuic-color-surface: var(--color-stone-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-stone-100, #737373);
86
- --stuic-color-surface-1-hover: var(--color-stone-200, #737373);
87
- --stuic-color-surface-1-active: var(--color-stone-300, #737373);
85
+ --stuic-color-surface-1: var(--color-stone-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-stone-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-stone-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-stone-200, #737373);
93
- --stuic-color-surface-2-hover: var(--color-stone-300, #737373);
94
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-stone-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-stone-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-stone-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-stone-100, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-stone-200, #737373);
@@ -109,10 +102,10 @@
109
102
  --stuic-color-foreground-hover: var(--color-stone-900, #737373);
110
103
  --stuic-color-foreground-active: var(--color-stone-900, #737373);
111
104
 
112
- --stuic-color-border: var(--color-stone-200, #737373);
105
+ --stuic-color-border: var(--color-stone-300, #737373);
113
106
 
114
- --stuic-color-border-hover: var(--color-stone-300, #737373);
115
- --stuic-color-border-active: var(--color-stone-400, #737373);
107
+ --stuic-color-border-hover: var(--color-stone-400, #737373);
108
+ --stuic-color-border-active: var(--color-stone-500, #737373);
116
109
 
117
110
  --stuic-color-input: var(--color-white, #ffffff);
118
111
 
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-stone-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-stone-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-stone-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-stone-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-stone-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-stone-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-stone-600, #737373);
package/dist/themes/css/cyan-red.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-stone-100, #737373);
70
- --stuic-color-surface-active: var(--color-stone-200, #737373);
69
+ --stuic-color-surface-hover: var(--color-stone-300, #737373);
70
+ --stuic-color-surface-active: var(--color-stone-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-stone-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-stone-50, #737373);
83
+ --stuic-color-surface: var(--color-stone-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-stone-100, #737373);
86
- --stuic-color-surface-1-hover: var(--color-stone-200, #737373);
87
- --stuic-color-surface-1-active: var(--color-stone-300, #737373);
85
+ --stuic-color-surface-1: var(--color-stone-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-stone-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-stone-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-stone-200, #737373);
93
- --stuic-color-surface-2-hover: var(--color-stone-300, #737373);
94
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-stone-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-stone-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-stone-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-stone-100, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-stone-200, #737373);
@@ -109,10 +102,10 @@
109
102
  --stuic-color-foreground-hover: var(--color-stone-900, #737373);
110
103
  --stuic-color-foreground-active: var(--color-stone-900, #737373);
111
104
 
112
- --stuic-color-border: var(--color-stone-200, #737373);
105
+ --stuic-color-border: var(--color-stone-300, #737373);
113
106
 
114
- --stuic-color-border-hover: var(--color-stone-300, #737373);
115
- --stuic-color-border-active: var(--color-stone-400, #737373);
107
+ --stuic-color-border-hover: var(--color-stone-400, #737373);
108
+ --stuic-color-border-active: var(--color-stone-500, #737373);
116
109
 
117
110
  --stuic-color-input: var(--color-white, #ffffff);
118
111
 
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-stone-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-stone-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-stone-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-stone-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-stone-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-stone-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-stone-600, #737373);
package/dist/themes/css/cyan-slate.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-neutral-100, #737373);
70
- --stuic-color-surface-active: var(--color-neutral-200, #737373);
69
+ --stuic-color-surface-hover: var(--color-neutral-300, #737373);
70
+ --stuic-color-surface-active: var(--color-neutral-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-neutral-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-neutral-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-neutral-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-neutral-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-neutral-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-neutral-50, #737373);
83
+ --stuic-color-surface: var(--color-neutral-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-neutral-100, #737373);
86
- --stuic-color-surface-1-hover: var(--color-neutral-200, #737373);
87
- --stuic-color-surface-1-active: var(--color-neutral-300, #737373);
85
+ --stuic-color-surface-1: var(--color-neutral-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-neutral-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-neutral-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-neutral-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-neutral-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-neutral-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-neutral-200, #737373);
93
- --stuic-color-surface-2-hover: var(--color-neutral-300, #737373);
94
- --stuic-color-surface-2-active: var(--color-neutral-400, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-neutral-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-neutral-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-neutral-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-neutral-100, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-neutral-200, #737373);
@@ -109,10 +102,10 @@
109
102
  --stuic-color-foreground-hover: var(--color-neutral-900, #737373);
110
103
  --stuic-color-foreground-active: var(--color-neutral-900, #737373);
111
104
 
112
- --stuic-color-border: var(--color-neutral-200, #737373);
105
+ --stuic-color-border: var(--color-neutral-300, #737373);
113
106
 
114
- --stuic-color-border-hover: var(--color-neutral-300, #737373);
115
- --stuic-color-border-active: var(--color-neutral-400, #737373);
107
+ --stuic-color-border-hover: var(--color-neutral-400, #737373);
108
+ --stuic-color-border-active: var(--color-neutral-500, #737373);
116
109
 
117
110
  --stuic-color-input: var(--color-white, #ffffff);
118
111
 
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-neutral-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-neutral-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-neutral-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-neutral-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-neutral-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-neutral-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-neutral-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-neutral-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-neutral-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-neutral-600, #737373);
package/dist/themes/css/emerald-amber-forest.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-stone-200, #737373);
70
- --stuic-color-surface-active: var(--color-stone-300, #737373);
69
+ --stuic-color-surface-hover: var(--color-stone-300, #737373);
70
+ --stuic-color-surface-active: var(--color-stone-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-stone-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-stone-100, #737373);
83
+ --stuic-color-surface: var(--color-stone-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-stone-200, #737373);
86
- --stuic-color-surface-1-hover: var(--color-stone-300, #737373);
87
- --stuic-color-surface-1-active: var(--color-stone-400, #737373);
85
+ --stuic-color-surface-1: var(--color-stone-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-stone-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-stone-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-stone-300, #737373);
93
- --stuic-color-surface-2-hover: var(--color-stone-400, #737373);
94
- --stuic-color-surface-2-active: var(--color-stone-500, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-stone-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-stone-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-stone-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-stone-200, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-stone-300, #737373);
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-stone-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-stone-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-stone-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-stone-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-stone-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-stone-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-stone-600, #737373);
package/dist/themes/css/emerald-pink.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-stone-100, #737373);
70
- --stuic-color-surface-active: var(--color-stone-200, #737373);
69
+ --stuic-color-surface-hover: var(--color-stone-300, #737373);
70
+ --stuic-color-surface-active: var(--color-stone-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-stone-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-stone-50, #737373);
83
+ --stuic-color-surface: var(--color-stone-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-stone-100, #737373);
86
- --stuic-color-surface-1-hover: var(--color-stone-200, #737373);
87
- --stuic-color-surface-1-active: var(--color-stone-300, #737373);
85
+ --stuic-color-surface-1: var(--color-stone-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-stone-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-stone-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-stone-200, #737373);
93
- --stuic-color-surface-2-hover: var(--color-stone-300, #737373);
94
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-stone-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-stone-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-stone-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-stone-100, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-stone-200, #737373);
@@ -109,10 +102,10 @@
109
102
  --stuic-color-foreground-hover: var(--color-stone-900, #737373);
110
103
  --stuic-color-foreground-active: var(--color-stone-900, #737373);
111
104
 
112
- --stuic-color-border: var(--color-stone-200, #737373);
105
+ --stuic-color-border: var(--color-stone-300, #737373);
113
106
 
114
- --stuic-color-border-hover: var(--color-stone-300, #737373);
115
- --stuic-color-border-active: var(--color-stone-400, #737373);
107
+ --stuic-color-border-hover: var(--color-stone-400, #737373);
108
+ --stuic-color-border-active: var(--color-stone-500, #737373);
116
109
 
117
110
  --stuic-color-input: var(--color-white, #ffffff);
118
111
 
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-stone-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-stone-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-stone-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-stone-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-stone-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-stone-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-stone-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-stone-600, #737373);
package/dist/themes/css/fuchsia-emerald.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-neutral-100, #737373);
70
- --stuic-color-surface-active: var(--color-neutral-200, #737373);
69
+ --stuic-color-surface-hover: var(--color-neutral-300, #737373);
70
+ --stuic-color-surface-active: var(--color-neutral-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-neutral-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-neutral-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-neutral-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-neutral-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-neutral-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-neutral-50, #737373);
83
+ --stuic-color-surface: var(--color-neutral-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-neutral-100, #737373);
86
- --stuic-color-surface-1-hover: var(--color-neutral-200, #737373);
87
- --stuic-color-surface-1-active: var(--color-neutral-300, #737373);
85
+ --stuic-color-surface-1: var(--color-neutral-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-neutral-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-neutral-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-neutral-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-neutral-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-neutral-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-neutral-200, #737373);
93
- --stuic-color-surface-2-hover: var(--color-neutral-300, #737373);
94
- --stuic-color-surface-2-active: var(--color-neutral-400, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-neutral-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-neutral-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-neutral-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-neutral-100, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-neutral-200, #737373);
@@ -109,10 +102,10 @@
109
102
  --stuic-color-foreground-hover: var(--color-neutral-900, #737373);
110
103
  --stuic-color-foreground-active: var(--color-neutral-900, #737373);
111
104
 
112
- --stuic-color-border: var(--color-neutral-200, #737373);
105
+ --stuic-color-border: var(--color-neutral-300, #737373);
113
106
 
114
- --stuic-color-border-hover: var(--color-neutral-300, #737373);
115
- --stuic-color-border-active: var(--color-neutral-400, #737373);
107
+ --stuic-color-border-hover: var(--color-neutral-400, #737373);
108
+ --stuic-color-border-active: var(--color-neutral-500, #737373);
116
109
 
117
110
  --stuic-color-input: var(--color-white, #ffffff);
118
111
 
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-neutral-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-neutral-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-neutral-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-neutral-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-neutral-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-neutral-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-neutral-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-neutral-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-neutral-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-neutral-600, #737373);
package/dist/themes/css/gray.css CHANGED
@@ -66,8 +66,8 @@
66
66
  --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
67
  --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
68
  --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
- --stuic-color-surface-hover: var(--color-gray-200, #737373);
70
- --stuic-color-surface-active: var(--color-gray-300, #737373);
69
+ --stuic-color-surface-hover: var(--color-gray-300, #737373);
70
+ --stuic-color-surface-active: var(--color-gray-400, #737373);
71
71
  --stuic-color-surface-foreground: var(--color-gray-900, #737373);
72
72
  --stuic-color-surface-foreground-hover: var(--color-gray-900, #737373);
73
73
  --stuic-color-surface-foreground-active: var(--color-gray-900, #737373);
@@ -80,22 +80,15 @@
80
80
  --stuic-color-background-foreground-hover: var(--color-gray-900, #737373);
81
81
  --stuic-color-background-foreground-active: var(--color-gray-900, #737373);
82
82
 
83
- --stuic-color-surface: var(--color-gray-100, #737373);
83
+ --stuic-color-surface: var(--color-gray-200, #737373);
84
84
 
85
- --stuic-color-surface-1: var(--color-gray-200, #737373);
86
- --stuic-color-surface-1-hover: var(--color-gray-300, #737373);
87
- --stuic-color-surface-1-active: var(--color-gray-400, #737373);
85
+ --stuic-color-surface-1: var(--color-gray-300, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-gray-400, #737373);
87
+ --stuic-color-surface-1-active: var(--color-gray-500, #737373);
88
88
  --stuic-color-surface-1-foreground: var(--color-gray-900, #737373);
89
89
  --stuic-color-surface-1-foreground-hover: var(--color-gray-900, #737373);
90
90
  --stuic-color-surface-1-foreground-active: var(--color-gray-900, #737373);
91
91
 
92
- --stuic-color-surface-2: var(--color-gray-300, #737373);
93
- --stuic-color-surface-2-hover: var(--color-gray-400, #737373);
94
- --stuic-color-surface-2-active: var(--color-gray-500, #737373);
95
- --stuic-color-surface-2-foreground: var(--color-gray-900, #737373);
96
- --stuic-color-surface-2-foreground-hover: var(--color-gray-900, #737373);
97
- --stuic-color-surface-2-foreground-active: var(--color-gray-900, #737373);
98
-
99
92
  --stuic-color-muted: var(--color-gray-200, #737373);
100
93
 
101
94
  --stuic-color-muted-hover: var(--color-gray-300, #737373);
@@ -216,13 +209,6 @@
216
209
  --stuic-color-surface-1-foreground-hover: var(--color-gray-100, #737373);
217
210
  --stuic-color-surface-1-foreground-active: var(--color-gray-100, #737373);
218
211
 
219
- --stuic-color-surface-2: var(--color-gray-600, #737373);
220
- --stuic-color-surface-2-hover: var(--color-gray-500, #737373);
221
- --stuic-color-surface-2-active: var(--color-gray-400, #737373);
222
- --stuic-color-surface-2-foreground: var(--color-gray-100, #737373);
223
- --stuic-color-surface-2-foreground-hover: var(--color-gray-100, #737373);
224
- --stuic-color-surface-2-foreground-active: var(--color-gray-100, #737373);
225
-
226
212
  --stuic-color-muted: var(--color-gray-700, #737373);
227
213
 
228
214
  --stuic-color-muted-hover: var(--color-gray-600, #737373);