@umami/react-zen 0.237.0 → 0.239.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 (9) hide show
  1. package/dist/index.d.mts +13 -51
  2. package/dist/index.d.ts +13 -51
  3. package/dist/index.js +84 -173
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +84 -167
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/styles.css +145 -49
  9. package/styles.full.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/react-zen",
3
- "version": "0.237.0",
3
+ "version": "0.239.0",
4
4
  "description": "Modern, minimalist React component library",
5
5
  "homepage": "https://zen.umami.is",
6
6
  "repository": {
package/styles.css CHANGED
@@ -19,35 +19,48 @@
19
19
  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
20
20
  monospace;
21
21
 
22
+ /* === GRAY SCALE (base palette - defaults to neutral) === */
23
+ --gray-50: oklch(0.985 0 0);
24
+ --gray-100: oklch(0.97 0 0);
25
+ --gray-200: oklch(0.922 0 0);
26
+ --gray-300: oklch(0.87 0 0);
27
+ --gray-400: oklch(0.708 0 0);
28
+ --gray-500: oklch(0.556 0 0);
29
+ --gray-600: oklch(0.439 0 0);
30
+ --gray-700: oklch(0.371 0 0);
31
+ --gray-800: oklch(0.269 0 0);
32
+ --gray-900: oklch(0.205 0 0);
33
+ --gray-950: oklch(0.145 0 0);
34
+
22
35
  /* === PRIMARY (accent/brand color) === */
23
- --primary: oklch(0.205 0 0); /* neutral-900 */
36
+ --primary: var(--gray-900);
24
37
  --primary-foreground: #ffffff;
25
38
 
26
39
  /* === SURFACES (backgrounds) === */
27
40
  --surface-base: #ffffff;
28
- --surface-raised: oklch(0.985 0 0); /* neutral-50 */
29
- --surface-sunken: oklch(0.97 0 0); /* neutral-100 */
41
+ --surface-raised: var(--gray-50);
42
+ --surface-sunken: var(--gray-100);
30
43
  --surface-overlay: #ffffff;
31
- --surface-inverted: oklch(0.205 0 0); /* neutral-900 */
32
- --surface-disabled: oklch(0.985 0 0); /* neutral-50 */
44
+ --surface-inverted: var(--gray-900);
45
+ --surface-disabled: var(--gray-50);
33
46
 
34
47
  /* === TEXT === */
35
- --text-primary: oklch(0.205 0 0); /* neutral-900 */
36
- --text-muted: oklch(0.556 0 0); /* neutral-500 */
37
- --text-disabled: oklch(0.708 0 0); /* neutral-400 */
48
+ --text-primary: var(--gray-900);
49
+ --text-muted: var(--gray-500);
50
+ --text-disabled: var(--gray-400);
38
51
 
39
52
  /* === BORDERS === */
40
- --border-default: oklch(0.87 0 0); /* neutral-300 */
41
- --border-muted: oklch(0.922 0 0); /* neutral-200 */
42
- --border-strong: oklch(0.708 0 0); /* neutral-400 */
53
+ --border-default: var(--gray-300);
54
+ --border-muted: var(--gray-200);
55
+ --border-strong: var(--gray-400);
43
56
 
44
57
  /* === INTERACTIVE STATES === */
45
- --interactive-bg: oklch(0.97 0 0); /* neutral-100 */
46
- --interactive-bg-hover: oklch(0.922 0 0); /* neutral-200 */
47
- --interactive-bg-pressed: oklch(0.87 0 0); /* neutral-300 */
58
+ --interactive-bg: var(--gray-100);
59
+ --interactive-bg-hover: var(--gray-200);
60
+ --interactive-bg-pressed: var(--gray-300);
48
61
 
49
62
  /* === FOCUS === */
50
- --focus-ring: oklch(0.708 0 0); /* neutral-400 */
63
+ --focus-ring: var(--gray-400);
51
64
  --focus-ring-offset: #ffffff;
52
65
 
53
66
  /* === STATUS COLORS === */
@@ -68,40 +81,123 @@
68
81
  --status-error-text: oklch(0.396 0.141 25.723); /* red-900 */
69
82
  }
70
83
 
84
+ /* ============================================
85
+ PALETTE VARIANTS
86
+ ============================================ */
87
+
88
+ /* Slate - cool blue-gray */
89
+ [data-palette="slate"] {
90
+ --gray-50: oklch(0.984 0.003 247.858);
91
+ --gray-100: oklch(0.968 0.007 247.896);
92
+ --gray-200: oklch(0.929 0.013 255.508);
93
+ --gray-300: oklch(0.869 0.022 252.894);
94
+ --gray-400: oklch(0.704 0.04 256.788);
95
+ --gray-500: oklch(0.554 0.046 257.417);
96
+ --gray-600: oklch(0.446 0.043 257.281);
97
+ --gray-700: oklch(0.372 0.044 257.287);
98
+ --gray-800: oklch(0.279 0.041 260.031);
99
+ --gray-900: oklch(0.208 0.042 265.755);
100
+ --gray-950: oklch(0.129 0.042 264.695);
101
+ }
102
+
103
+ /* Gray - subtle cool tint (less saturated than slate) */
104
+ [data-palette="gray"] {
105
+ --gray-50: oklch(0.985 0.002 247.839);
106
+ --gray-100: oklch(0.967 0.003 264.542);
107
+ --gray-200: oklch(0.928 0.006 264.531);
108
+ --gray-300: oklch(0.872 0.01 258.338);
109
+ --gray-400: oklch(0.707 0.022 261.325);
110
+ --gray-500: oklch(0.551 0.027 264.364);
111
+ --gray-600: oklch(0.446 0.03 256.802);
112
+ --gray-700: oklch(0.373 0.034 259.733);
113
+ --gray-800: oklch(0.278 0.033 256.848);
114
+ --gray-900: oklch(0.21 0.034 264.665);
115
+ --gray-950: oklch(0.13 0.028 261.692);
116
+ }
117
+
118
+ /* Zinc - subtle blue */
119
+ [data-palette="zinc"] {
120
+ --gray-50: oklch(0.985 0 0);
121
+ --gray-100: oklch(0.967 0.001 286.375);
122
+ --gray-200: oklch(0.92 0.004 286.32);
123
+ --gray-300: oklch(0.871 0.006 286.286);
124
+ --gray-400: oklch(0.705 0.015 286.067);
125
+ --gray-500: oklch(0.552 0.016 285.938);
126
+ --gray-600: oklch(0.442 0.017 285.786);
127
+ --gray-700: oklch(0.37 0.013 285.805);
128
+ --gray-800: oklch(0.274 0.006 286.033);
129
+ --gray-900: oklch(0.21 0.006 285.885);
130
+ --gray-950: oklch(0.141 0.005 285.823);
131
+ }
132
+
133
+ /* Stone - warm tan */
134
+ [data-palette="stone"] {
135
+ --gray-50: oklch(0.985 0.001 106.423);
136
+ --gray-100: oklch(0.97 0.001 106.424);
137
+ --gray-200: oklch(0.923 0.003 48.717);
138
+ --gray-300: oklch(0.869 0.005 56.366);
139
+ --gray-400: oklch(0.709 0.01 56.259);
140
+ --gray-500: oklch(0.553 0.013 58.071);
141
+ --gray-600: oklch(0.444 0.011 73.639);
142
+ --gray-700: oklch(0.374 0.01 67.558);
143
+ --gray-800: oklch(0.268 0.007 34.298);
144
+ --gray-900: oklch(0.216 0.006 56.043);
145
+ --gray-950: oklch(0.147 0.004 49.25);
146
+ }
147
+
148
+ /* Neutral - pure gray (explicit, same as default) */
149
+ [data-palette="neutral"] {
150
+ --gray-50: oklch(0.985 0 0);
151
+ --gray-100: oklch(0.97 0 0);
152
+ --gray-200: oklch(0.922 0 0);
153
+ --gray-300: oklch(0.87 0 0);
154
+ --gray-400: oklch(0.708 0 0);
155
+ --gray-500: oklch(0.556 0 0);
156
+ --gray-600: oklch(0.439 0 0);
157
+ --gray-700: oklch(0.371 0 0);
158
+ --gray-800: oklch(0.269 0 0);
159
+ --gray-900: oklch(0.205 0 0);
160
+ --gray-950: oklch(0.145 0 0);
161
+ }
162
+
163
+ /* ============================================
164
+ DARK THEME
165
+ ============================================ */
166
+
71
167
  [data-theme="dark"],
72
168
  .dark {
73
169
  color-scheme: dark;
74
170
 
75
171
  /* === PRIMARY (accent/brand color) === */
76
- --primary: oklch(0.97 0 0); /* neutral-100 - inverted for dark */
77
- --primary-foreground: oklch(0.205 0 0); /* neutral-900 - inverted for dark */
172
+ --primary: var(--gray-100);
173
+ --primary-foreground: var(--gray-900);
78
174
 
79
175
  /* === SURFACES === */
80
- --surface-base: oklch(0.205 0 0); /* neutral-900 */
81
- --surface-raised: oklch(0.269 0 0); /* neutral-800 */
82
- --surface-sunken: oklch(0.269 0 0); /* neutral-800 */
83
- --surface-overlay: oklch(0.205 0 0); /* neutral-900 */
84
- --surface-inverted: oklch(0.97 0 0); /* neutral-100 */
85
- --surface-disabled: oklch(0.269 0 0); /* neutral-800 */
176
+ --surface-base: var(--gray-900);
177
+ --surface-raised: var(--gray-800);
178
+ --surface-sunken: var(--gray-800);
179
+ --surface-overlay: var(--gray-900);
180
+ --surface-inverted: var(--gray-100);
181
+ --surface-disabled: var(--gray-800);
86
182
 
87
183
  /* === TEXT === */
88
- --text-primary: oklch(0.97 0 0); /* neutral-100 */
89
- --text-muted: oklch(0.708 0 0); /* neutral-400 */
90
- --text-disabled: oklch(0.556 0 0); /* neutral-500 */
184
+ --text-primary: var(--gray-100);
185
+ --text-muted: var(--gray-400);
186
+ --text-disabled: var(--gray-500);
91
187
 
92
188
  /* === BORDERS === */
93
- --border-default: oklch(0.371 0 0); /* neutral-700 */
94
- --border-muted: oklch(0.309 0 0); /* ~neutral-750 */
95
- --border-strong: oklch(0.439 0 0); /* neutral-600 */
189
+ --border-default: var(--gray-700);
190
+ --border-muted: oklch(0.309 0 0); /* ~gray-750 - interpolated */
191
+ --border-strong: var(--gray-600);
96
192
 
97
193
  /* === INTERACTIVE STATES === */
98
- --interactive-bg: oklch(0.269 0 0); /* neutral-800 */
99
- --interactive-bg-hover: oklch(0.371 0 0); /* neutral-700 */
100
- --interactive-bg-pressed: oklch(0.439 0 0); /* neutral-600 */
194
+ --interactive-bg: var(--gray-800);
195
+ --interactive-bg-hover: var(--gray-700);
196
+ --interactive-bg-pressed: var(--gray-600);
101
197
 
102
198
  /* === FOCUS === */
103
- --focus-ring: oklch(0.556 0 0); /* neutral-500 */
104
- --focus-ring-offset: oklch(0.205 0 0); /* neutral-900 */
199
+ --focus-ring: var(--gray-500);
200
+ --focus-ring-offset: var(--gray-900);
105
201
 
106
202
  /* === STATUS COLORS (dark variants) === */
107
203
  --status-info-bg: oklch(0.623 0.214 259.815 / 0.2); /* blue-500 at 20% */
@@ -122,34 +218,34 @@
122
218
  color-scheme: light;
123
219
 
124
220
  /* === PRIMARY (accent/brand color) === */
125
- --primary: oklch(0.205 0 0); /* neutral-900 */
221
+ --primary: var(--gray-900);
126
222
  --primary-foreground: #ffffff;
127
223
 
128
224
  /* === SURFACES (backgrounds) === */
129
225
  --surface-base: #ffffff;
130
- --surface-raised: oklch(0.985 0 0); /* neutral-50 */
131
- --surface-sunken: oklch(0.97 0 0); /* neutral-100 */
226
+ --surface-raised: var(--gray-50);
227
+ --surface-sunken: var(--gray-100);
132
228
  --surface-overlay: #ffffff;
133
- --surface-inverted: oklch(0.205 0 0); /* neutral-900 */
134
- --surface-disabled: oklch(0.985 0 0); /* neutral-50 */
229
+ --surface-inverted: var(--gray-900);
230
+ --surface-disabled: var(--gray-50);
135
231
 
136
232
  /* === TEXT === */
137
- --text-primary: oklch(0.205 0 0); /* neutral-900 */
138
- --text-muted: oklch(0.556 0 0); /* neutral-500 */
139
- --text-disabled: oklch(0.708 0 0); /* neutral-400 */
233
+ --text-primary: var(--gray-900);
234
+ --text-muted: var(--gray-500);
235
+ --text-disabled: var(--gray-400);
140
236
 
141
237
  /* === BORDERS === */
142
- --border-default: oklch(0.87 0 0); /* neutral-300 */
143
- --border-muted: oklch(0.922 0 0); /* neutral-200 */
144
- --border-strong: oklch(0.708 0 0); /* neutral-400 */
238
+ --border-default: var(--gray-300);
239
+ --border-muted: var(--gray-200);
240
+ --border-strong: var(--gray-400);
145
241
 
146
242
  /* === INTERACTIVE STATES === */
147
- --interactive-bg: oklch(0.97 0 0); /* neutral-100 */
148
- --interactive-bg-hover: oklch(0.922 0 0); /* neutral-200 */
149
- --interactive-bg-pressed: oklch(0.87 0 0); /* neutral-300 */
243
+ --interactive-bg: var(--gray-100);
244
+ --interactive-bg-hover: var(--gray-200);
245
+ --interactive-bg-pressed: var(--gray-300);
150
246
 
151
247
  /* === FOCUS === */
152
- --focus-ring: oklch(0.708 0 0); /* neutral-400 */
248
+ --focus-ring: var(--gray-400);
153
249
  --focus-ring-offset: #ffffff;
154
250
 
155
251
  /* === STATUS COLORS === */