@marianmeres/design-tokens 1.8.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/AGENTS.md +1 -1
  2. package/API.md +2 -2
  3. package/dist/css/disco.css +191 -0
  4. package/dist/css/electric-lemonade.css +191 -0
  5. package/dist/css/hummingbird.css +191 -0
  6. package/dist/css/nebula.css +191 -0
  7. package/dist/css/peacock.css +191 -0
  8. package/dist/css/velvet.css +191 -0
  9. package/dist/css/watermelon.css +191 -0
  10. package/dist/themes/disco.d.ts +4 -0
  11. package/dist/themes/disco.js +121 -0
  12. package/dist/themes/electric-lemonade.d.ts +4 -0
  13. package/dist/themes/electric-lemonade.js +121 -0
  14. package/dist/themes/hummingbird.d.ts +4 -0
  15. package/dist/themes/hummingbird.js +124 -0
  16. package/dist/themes/mod.d.ts +15 -1
  17. package/dist/themes/mod.js +35 -0
  18. package/dist/themes/nebula.d.ts +4 -0
  19. package/dist/themes/nebula.js +120 -0
  20. package/dist/themes/peacock.d.ts +4 -0
  21. package/dist/themes/peacock.js +121 -0
  22. package/dist/themes/velvet.d.ts +4 -0
  23. package/dist/themes/velvet.js +121 -0
  24. package/dist/themes/watermelon.d.ts +4 -0
  25. package/dist/themes/watermelon.js +144 -0
  26. package/package.json +1 -1
package/AGENTS.md CHANGED
@@ -21,7 +21,7 @@ Entry points:
21
21
 
22
22
  - `.` — core generation functions, types, color palette
23
23
  - `./reboot` — Bootstrap Reboot `--bs-*` variable bridge
24
- - `./themes` — 43 pre-built theme definitions + `themeNames` constant + `bundledThemes` / `bundledThemeNames` / `getBundledTheme` runtime helpers
24
+ - `./themes` — 50 pre-built theme definitions + `themeNames` constant + `bundledThemes` / `bundledThemeNames` / `getBundledTheme` runtime helpers
25
25
  - `./css/*.css` — pre-built CSS files (**npm only** — JSR does not support directory exports)
26
26
 
27
27
  ## Project Structure
package/API.md CHANGED
@@ -428,9 +428,9 @@ themeNames; // → ["amber-olive-safari", "blue-orange", ..., "zinc"]
428
428
 
429
429
  _Import from `@marianmeres/design-tokens/themes`_
430
430
 
431
- 43 pre-built `ThemeSchema` definitions, each with light + dark mode:
431
+ 50 pre-built `ThemeSchema` definitions, each with light + dark mode:
432
432
 
433
- `amberOliveSafari`, `blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `mauve`, `mauveLimeElectric`, `mauveTeal`, `mist`, `mistIndigoFjord`, `mistVioletAurora`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `olive`, `oliveAmberSafari`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `stoneOrangeEarth`, `taupe`, `taupeOliveClay`, `taupeRoseBlush`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
433
+ `amberOliveSafari`, `blueOrange`, `cyanRed`, `cyanSlate`, `disco`, `electricLemonade`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `hummingbird`, `indigoAmber`, `limeFuchsiaNeon`, `mauve`, `mauveLimeElectric`, `mauveTeal`, `mist`, `mistIndigoFjord`, `mistVioletAurora`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `nebula`, `olive`, `oliveAmberSafari`, `orangePinkSunset`, `peacock`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `stoneOrangeEarth`, `taupe`, `taupeOliveClay`, `taupeRoseBlush`, `tealRose`, `velvet`, `violetLime`, `violetRoseDusk`, `watermelon`, `zinc`
434
434
 
435
435
  All bundled themes include a `surface-1` paired role (on top of the required `background`, `muted`, `surface`) as a conventional extra elevation.
436
436
 
package/dist/css/disco.css ADDED
@@ -0,0 +1,191 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #facc15;
4
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #000000;
7
+ --stuic-color-primary-foreground-hover: #000000;
8
+ --stuic-color-primary-foreground-active: #000000;
9
+
10
+ --stuic-color-accent: #ec4899;
11
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 20%);
13
+ --stuic-color-accent-foreground: #ffffff;
14
+ --stuic-color-accent-foreground-hover: #ffffff;
15
+ --stuic-color-accent-foreground-active: #ffffff;
16
+
17
+ --stuic-color-destructive: #e11d48;
18
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 20%);
20
+ --stuic-color-destructive-foreground: #ffffff;
21
+ --stuic-color-destructive-foreground-hover: #ffffff;
22
+ --stuic-color-destructive-foreground-active: #ffffff;
23
+
24
+ --stuic-color-warning: #f97316;
25
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 20%);
27
+ --stuic-color-warning-foreground: #ffffff;
28
+ --stuic-color-warning-foreground-hover: #ffffff;
29
+ --stuic-color-warning-foreground-active: #ffffff;
30
+
31
+ --stuic-color-success: #059669;
32
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 20%);
34
+ --stuic-color-success-foreground: #ffffff;
35
+ --stuic-color-success-foreground-hover: #ffffff;
36
+ --stuic-color-success-foreground-active: #ffffff;
37
+
38
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
39
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 50%);
40
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
41
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
42
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 50%);
43
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
44
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
45
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 50%);
46
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
47
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
48
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 50%);
49
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
50
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
51
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
+ --stuic-color-surface: #e7e4e7;
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
+ --stuic-color-surface-foreground: #1d161e;
57
+ --stuic-color-surface-foreground-hover: #1d161e;
58
+ --stuic-color-surface-foreground-active: #1d161e;
59
+ --stuic-color-surface-1: #d7d0d7;
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
+ --stuic-color-surface-1-foreground: #1d161e;
63
+ --stuic-color-surface-1-foreground-hover: #1d161e;
64
+ --stuic-color-surface-1-foreground-active: #1d161e;
65
+
66
+ --stuic-color-background: #fafafa;
67
+ --stuic-color-background-hover: #fafafa;
68
+ --stuic-color-background-active: #fafafa;
69
+ --stuic-color-background-foreground: #1d161e;
70
+ --stuic-color-background-foreground-hover: #1d161e;
71
+ --stuic-color-background-foreground-active: #1d161e;
72
+
73
+ --stuic-color-muted: #f3f1f3;
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
+ --stuic-color-muted-foreground: #79697b;
77
+ --stuic-color-muted-foreground-hover: #79697b;
78
+ --stuic-color-muted-foreground-active: #79697b;
79
+
80
+ --stuic-color-foreground: #1d161e;
81
+ --stuic-color-foreground-hover: #1d161e;
82
+ --stuic-color-foreground-active: #1d161e;
83
+
84
+ --stuic-color-border: #d7d0d7;
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
+
88
+ --stuic-color-input: #ffffff;
89
+ --stuic-color-input-hover: #fafafa;
90
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
+
92
+ --stuic-color-ring: color-mix(in srgb, #facc15 20%, transparent);
93
+ --stuic-color-ring-hover: color-mix(in srgb, #facc15 20%, transparent);
94
+ --stuic-color-ring-active: color-mix(in srgb, #facc15 20%, transparent);
95
+ }
96
+
97
+ /* prettier-ignore */
98
+ :root.dark {
99
+ --stuic-color-primary: #facc15;
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
+ --stuic-color-primary-foreground: #000000;
103
+ --stuic-color-primary-foreground-hover: #000000;
104
+ --stuic-color-primary-foreground-active: #000000;
105
+
106
+ --stuic-color-accent: #f472b6;
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
+ --stuic-color-accent-foreground: #ffffff;
110
+ --stuic-color-accent-foreground-hover: #ffffff;
111
+ --stuic-color-accent-foreground-active: #ffffff;
112
+
113
+ --stuic-color-destructive: #f43f5e;
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
+ --stuic-color-destructive-foreground: #ffffff;
117
+ --stuic-color-destructive-foreground-hover: #ffffff;
118
+ --stuic-color-destructive-foreground-active: #ffffff;
119
+
120
+ --stuic-color-warning: #fb923c;
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
+ --stuic-color-warning-foreground: #000000;
124
+ --stuic-color-warning-foreground-hover: #000000;
125
+ --stuic-color-warning-foreground-active: #000000;
126
+
127
+ --stuic-color-success: #10b981;
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
+ --stuic-color-success-foreground: #ffffff;
131
+ --stuic-color-success-foreground-hover: #ffffff;
132
+ --stuic-color-success-foreground-active: #ffffff;
133
+
134
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
135
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 50%);
136
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
137
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
138
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 50%);
139
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
140
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
141
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 50%);
142
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
143
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
144
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 50%);
145
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
146
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
147
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
+ --stuic-color-surface: #5b21b6;
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
+ --stuic-color-surface-foreground: #ddd6fe;
153
+ --stuic-color-surface-foreground-hover: #ddd6fe;
154
+ --stuic-color-surface-foreground-active: #ddd6fe;
155
+ --stuic-color-surface-1: #6d28d9;
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
+ --stuic-color-surface-1-foreground: #ede9fe;
159
+ --stuic-color-surface-1-foreground-hover: #ede9fe;
160
+ --stuic-color-surface-1-foreground-active: #ede9fe;
161
+
162
+ --stuic-color-background: #2e1065;
163
+ --stuic-color-background-hover: #2e1065;
164
+ --stuic-color-background-active: #2e1065;
165
+ --stuic-color-background-foreground: #f5f3ff;
166
+ --stuic-color-background-foreground-hover: #f5f3ff;
167
+ --stuic-color-background-foreground-active: #f5f3ff;
168
+
169
+ --stuic-color-muted: #4c1d95;
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
+ --stuic-color-muted-foreground: #c4b5fd;
173
+ --stuic-color-muted-foreground-hover: #c4b5fd;
174
+ --stuic-color-muted-foreground-active: #c4b5fd;
175
+
176
+ --stuic-color-foreground: #f5f3ff;
177
+ --stuic-color-foreground-hover: #f5f3ff;
178
+ --stuic-color-foreground-active: #f5f3ff;
179
+
180
+ --stuic-color-border: #5b21b6;
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
+
184
+ --stuic-color-input: #2e1065;
185
+ --stuic-color-input-hover: #4c1d95;
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
+
188
+ --stuic-color-ring: color-mix(in srgb, #facc15 25%, transparent);
189
+ --stuic-color-ring-hover: color-mix(in srgb, #facc15 25%, transparent);
190
+ --stuic-color-ring-active: color-mix(in srgb, #facc15 25%, transparent);
191
+ }
package/dist/css/electric-lemonade.css ADDED
@@ -0,0 +1,191 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #2563eb;
4
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #a3e635;
11
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 20%);
13
+ --stuic-color-accent-foreground: #000000;
14
+ --stuic-color-accent-foreground-hover: #000000;
15
+ --stuic-color-accent-foreground-active: #000000;
16
+
17
+ --stuic-color-destructive: #dc2626;
18
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 20%);
20
+ --stuic-color-destructive-foreground: #ffffff;
21
+ --stuic-color-destructive-foreground-hover: #ffffff;
22
+ --stuic-color-destructive-foreground-active: #ffffff;
23
+
24
+ --stuic-color-warning: #f97316;
25
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 20%);
27
+ --stuic-color-warning-foreground: #ffffff;
28
+ --stuic-color-warning-foreground-hover: #ffffff;
29
+ --stuic-color-warning-foreground-active: #ffffff;
30
+
31
+ --stuic-color-success: #059669;
32
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 20%);
34
+ --stuic-color-success-foreground: #ffffff;
35
+ --stuic-color-success-foreground-hover: #ffffff;
36
+ --stuic-color-success-foreground-active: #ffffff;
37
+
38
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
39
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 50%);
40
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
41
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
42
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 50%);
43
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
44
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
45
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 50%);
46
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
47
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
48
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 50%);
49
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
50
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
51
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
+ --stuic-color-surface: #fef08a;
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
+ --stuic-color-surface-foreground: #422006;
57
+ --stuic-color-surface-foreground-hover: #422006;
58
+ --stuic-color-surface-foreground-active: #422006;
59
+ --stuic-color-surface-1: #fde047;
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
+ --stuic-color-surface-1-foreground: #422006;
63
+ --stuic-color-surface-1-foreground-hover: #422006;
64
+ --stuic-color-surface-1-foreground-active: #422006;
65
+
66
+ --stuic-color-background: #fefce8;
67
+ --stuic-color-background-hover: #fefce8;
68
+ --stuic-color-background-active: #fefce8;
69
+ --stuic-color-background-foreground: #422006;
70
+ --stuic-color-background-foreground-hover: #422006;
71
+ --stuic-color-background-foreground-active: #422006;
72
+
73
+ --stuic-color-muted: #fef9c3;
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
+ --stuic-color-muted-foreground: #a16207;
77
+ --stuic-color-muted-foreground-hover: #a16207;
78
+ --stuic-color-muted-foreground-active: #a16207;
79
+
80
+ --stuic-color-foreground: #422006;
81
+ --stuic-color-foreground-hover: #422006;
82
+ --stuic-color-foreground-active: #422006;
83
+
84
+ --stuic-color-border: #fde047;
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
+
88
+ --stuic-color-input: #ffffff;
89
+ --stuic-color-input-hover: #fefce8;
90
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
+
92
+ --stuic-color-ring: color-mix(in srgb, #2563eb 20%, transparent);
93
+ --stuic-color-ring-hover: color-mix(in srgb, #2563eb 20%, transparent);
94
+ --stuic-color-ring-active: color-mix(in srgb, #2563eb 20%, transparent);
95
+ }
96
+
97
+ /* prettier-ignore */
98
+ :root.dark {
99
+ --stuic-color-primary: #3b82f6;
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
+ --stuic-color-primary-foreground: #ffffff;
103
+ --stuic-color-primary-foreground-hover: #ffffff;
104
+ --stuic-color-primary-foreground-active: #ffffff;
105
+
106
+ --stuic-color-accent: #a3e635;
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
+ --stuic-color-accent-foreground: #000000;
110
+ --stuic-color-accent-foreground-hover: #000000;
111
+ --stuic-color-accent-foreground-active: #000000;
112
+
113
+ --stuic-color-destructive: #ef4444;
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
+ --stuic-color-destructive-foreground: #ffffff;
117
+ --stuic-color-destructive-foreground-hover: #ffffff;
118
+ --stuic-color-destructive-foreground-active: #ffffff;
119
+
120
+ --stuic-color-warning: #fb923c;
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
+ --stuic-color-warning-foreground: #000000;
124
+ --stuic-color-warning-foreground-hover: #000000;
125
+ --stuic-color-warning-foreground-active: #000000;
126
+
127
+ --stuic-color-success: #10b981;
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
+ --stuic-color-success-foreground: #ffffff;
131
+ --stuic-color-success-foreground-hover: #ffffff;
132
+ --stuic-color-success-foreground-active: #ffffff;
133
+
134
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
135
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 50%);
136
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
137
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
138
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 50%);
139
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
140
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
141
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 50%);
142
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
143
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
144
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 50%);
145
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
146
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
147
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
+ --stuic-color-surface: #075985;
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
+ --stuic-color-surface-foreground: #bae6fd;
153
+ --stuic-color-surface-foreground-hover: #bae6fd;
154
+ --stuic-color-surface-foreground-active: #bae6fd;
155
+ --stuic-color-surface-1: #0369a1;
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
+ --stuic-color-surface-1-foreground: #e0f2fe;
159
+ --stuic-color-surface-1-foreground-hover: #e0f2fe;
160
+ --stuic-color-surface-1-foreground-active: #e0f2fe;
161
+
162
+ --stuic-color-background: #082f49;
163
+ --stuic-color-background-hover: #082f49;
164
+ --stuic-color-background-active: #082f49;
165
+ --stuic-color-background-foreground: #f0f9ff;
166
+ --stuic-color-background-foreground-hover: #f0f9ff;
167
+ --stuic-color-background-foreground-active: #f0f9ff;
168
+
169
+ --stuic-color-muted: #0c4a6e;
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
+ --stuic-color-muted-foreground: #38bdf8;
173
+ --stuic-color-muted-foreground-hover: #38bdf8;
174
+ --stuic-color-muted-foreground-active: #38bdf8;
175
+
176
+ --stuic-color-foreground: #f0f9ff;
177
+ --stuic-color-foreground-hover: #f0f9ff;
178
+ --stuic-color-foreground-active: #f0f9ff;
179
+
180
+ --stuic-color-border: #075985;
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
+
184
+ --stuic-color-input: #082f49;
185
+ --stuic-color-input-hover: #0c4a6e;
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
+
188
+ --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
189
+ --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
190
+ --stuic-color-ring-active: color-mix(in srgb, #60a5fa 25%, transparent);
191
+ }
package/dist/css/hummingbird.css ADDED
@@ -0,0 +1,191 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #f6329b;
4
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #5deab5;
11
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 20%);
13
+ --stuic-color-accent-foreground: #022c22;
14
+ --stuic-color-accent-foreground-hover: #022c22;
15
+ --stuic-color-accent-foreground-active: #022c22;
16
+
17
+ --stuic-color-destructive: #dc2626;
18
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 20%);
20
+ --stuic-color-destructive-foreground: #ffffff;
21
+ --stuic-color-destructive-foreground-hover: #ffffff;
22
+ --stuic-color-destructive-foreground-active: #ffffff;
23
+
24
+ --stuic-color-warning: #f59e0b;
25
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 20%);
27
+ --stuic-color-warning-foreground: #ffffff;
28
+ --stuic-color-warning-foreground-hover: #ffffff;
29
+ --stuic-color-warning-foreground-active: #ffffff;
30
+
31
+ --stuic-color-success: #059669;
32
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 20%);
34
+ --stuic-color-success-foreground: #ffffff;
35
+ --stuic-color-success-foreground-hover: #ffffff;
36
+ --stuic-color-success-foreground-active: #ffffff;
37
+
38
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
39
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 50%);
40
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
41
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
42
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 50%);
43
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
44
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
45
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 50%);
46
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
47
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
48
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 50%);
49
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
50
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
51
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
+ --stuic-color-surface: #99f6e4;
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
+ --stuic-color-surface-foreground: #042f2e;
57
+ --stuic-color-surface-foreground-hover: #042f2e;
58
+ --stuic-color-surface-foreground-active: #042f2e;
59
+ --stuic-color-surface-1: #5eead4;
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
+ --stuic-color-surface-1-foreground: #042f2e;
63
+ --stuic-color-surface-1-foreground-hover: #042f2e;
64
+ --stuic-color-surface-1-foreground-active: #042f2e;
65
+
66
+ --stuic-color-background: #f0fdfa;
67
+ --stuic-color-background-hover: #f0fdfa;
68
+ --stuic-color-background-active: #f0fdfa;
69
+ --stuic-color-background-foreground: #042f2e;
70
+ --stuic-color-background-foreground-hover: #042f2e;
71
+ --stuic-color-background-foreground-active: #042f2e;
72
+
73
+ --stuic-color-muted: #ccfbf1;
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
+ --stuic-color-muted-foreground: #0f766e;
77
+ --stuic-color-muted-foreground-hover: #0f766e;
78
+ --stuic-color-muted-foreground-active: #0f766e;
79
+
80
+ --stuic-color-foreground: #042f2e;
81
+ --stuic-color-foreground-hover: #042f2e;
82
+ --stuic-color-foreground-active: #042f2e;
83
+
84
+ --stuic-color-border: #5eead4;
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
+
88
+ --stuic-color-input: #ffffff;
89
+ --stuic-color-input-hover: #f0fdfa;
90
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
+
92
+ --stuic-color-ring: color-mix(in srgb, #f6329b 20%, transparent);
93
+ --stuic-color-ring-hover: color-mix(in srgb, #f6329b 20%, transparent);
94
+ --stuic-color-ring-active: color-mix(in srgb, #f6329b 20%, transparent);
95
+ }
96
+
97
+ /* prettier-ignore */
98
+ :root.dark {
99
+ --stuic-color-primary: #f6329b;
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
+ --stuic-color-primary-foreground: #ffffff;
103
+ --stuic-color-primary-foreground-hover: #ffffff;
104
+ --stuic-color-primary-foreground-active: #ffffff;
105
+
106
+ --stuic-color-accent: #5deab5;
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
+ --stuic-color-accent-foreground: #022c22;
110
+ --stuic-color-accent-foreground-hover: #022c22;
111
+ --stuic-color-accent-foreground-active: #022c22;
112
+
113
+ --stuic-color-destructive: #ef4444;
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
+ --stuic-color-destructive-foreground: #ffffff;
117
+ --stuic-color-destructive-foreground-hover: #ffffff;
118
+ --stuic-color-destructive-foreground-active: #ffffff;
119
+
120
+ --stuic-color-warning: #fbbf24;
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
+ --stuic-color-warning-foreground: #000000;
124
+ --stuic-color-warning-foreground-hover: #000000;
125
+ --stuic-color-warning-foreground-active: #000000;
126
+
127
+ --stuic-color-success: #10b981;
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
+ --stuic-color-success-foreground: #ffffff;
131
+ --stuic-color-success-foreground-hover: #ffffff;
132
+ --stuic-color-success-foreground-active: #ffffff;
133
+
134
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
135
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 50%);
136
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
137
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
138
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 50%);
139
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
140
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
141
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 50%);
142
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
143
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
144
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 50%);
145
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
146
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
147
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
+ --stuic-color-surface: #115e59;
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
+ --stuic-color-surface-foreground: #99f6e4;
153
+ --stuic-color-surface-foreground-hover: #99f6e4;
154
+ --stuic-color-surface-foreground-active: #99f6e4;
155
+ --stuic-color-surface-1: #0f766e;
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
+ --stuic-color-surface-1-foreground: #ccfbf1;
159
+ --stuic-color-surface-1-foreground-hover: #ccfbf1;
160
+ --stuic-color-surface-1-foreground-active: #ccfbf1;
161
+
162
+ --stuic-color-background: #042f2e;
163
+ --stuic-color-background-hover: #042f2e;
164
+ --stuic-color-background-active: #042f2e;
165
+ --stuic-color-background-foreground: #f0fdfa;
166
+ --stuic-color-background-foreground-hover: #f0fdfa;
167
+ --stuic-color-background-foreground-active: #f0fdfa;
168
+
169
+ --stuic-color-muted: #134e4a;
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
+ --stuic-color-muted-foreground: #2dd4bf;
173
+ --stuic-color-muted-foreground-hover: #2dd4bf;
174
+ --stuic-color-muted-foreground-active: #2dd4bf;
175
+
176
+ --stuic-color-foreground: #f0fdfa;
177
+ --stuic-color-foreground-hover: #f0fdfa;
178
+ --stuic-color-foreground-active: #f0fdfa;
179
+
180
+ --stuic-color-border: #115e59;
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
+
184
+ --stuic-color-input: #042f2e;
185
+ --stuic-color-input-hover: #134e4a;
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
+
188
+ --stuic-color-ring: color-mix(in srgb, #f6329b 25%, transparent);
189
+ --stuic-color-ring-hover: color-mix(in srgb, #f6329b 25%, transparent);
190
+ --stuic-color-ring-active: color-mix(in srgb, #f6329b 25%, transparent);
191
+ }