@ntmats/hc-tokens 0.1.0 → 0.2.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.
- package/dist/tokens.css +85 -2
- package/package.json +5 -3
package/dist/tokens.css
CHANGED
|
@@ -141,8 +141,9 @@
|
|
|
141
141
|
--hc-color-bg-main: #faf9f4;
|
|
142
142
|
--hc-focus-ring: #141413;
|
|
143
143
|
--hc-shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
|
|
144
|
+
color-scheme: light;
|
|
144
145
|
}
|
|
145
|
-
|
|
146
|
+
.dark [data-hc-ds], [data-theme="dark"] [data-hc-ds] {
|
|
146
147
|
--hc-color-bg-page: #1b1a19;
|
|
147
148
|
--hc-color-bg-main: #262624;
|
|
148
149
|
--hc-color-bg-surface: #262624;
|
|
@@ -180,8 +181,9 @@
|
|
|
180
181
|
--hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
|
|
181
182
|
--hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
|
|
182
183
|
--hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
|
|
184
|
+
color-scheme: dark;
|
|
183
185
|
}
|
|
184
|
-
[data-hc-ds][data-theme="light"]
|
|
186
|
+
.light [data-hc-ds], [data-theme="light"] [data-hc-ds] {
|
|
185
187
|
--hc-color-bg-page: #efeee7;
|
|
186
188
|
--hc-color-bg-main: #faf9f4;
|
|
187
189
|
--hc-color-bg-surface: #fffefb;
|
|
@@ -219,4 +221,85 @@
|
|
|
219
221
|
--hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
|
|
220
222
|
--hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
|
|
221
223
|
--hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
|
|
224
|
+
color-scheme: light;
|
|
225
|
+
}
|
|
226
|
+
[data-hc-ds][data-theme="dark"], .dark[data-hc-ds] {
|
|
227
|
+
--hc-color-bg-page: #1b1a19;
|
|
228
|
+
--hc-color-bg-main: #262624;
|
|
229
|
+
--hc-color-bg-surface: #262624;
|
|
230
|
+
--hc-color-bg-elevated: #30302e;
|
|
231
|
+
--hc-color-bg-glass: rgba(48, 48, 46, 0.6);
|
|
232
|
+
--hc-color-bg-muted: rgba(250, 249, 245, 0.07);
|
|
233
|
+
--hc-color-bg-muted-2: rgba(250, 249, 245, 0.035);
|
|
234
|
+
--hc-color-bg-overlay: rgba(0, 0, 0, 0.55);
|
|
235
|
+
--hc-color-text-primary: #faf9f5;
|
|
236
|
+
--hc-color-text-secondary: #dedcd1;
|
|
237
|
+
--hc-color-text-muted: #a8a59b;
|
|
238
|
+
--hc-color-placeholder: #7a776f;
|
|
239
|
+
--hc-color-text-disabled: #45443f;
|
|
240
|
+
--hc-color-text-inverse: #1f1e1d;
|
|
241
|
+
--hc-color-outline: rgba(250, 249, 245, 0.14);
|
|
242
|
+
--hc-color-border: rgba(250, 249, 245, 0.09);
|
|
243
|
+
--hc-color-border-strong: rgba(250, 249, 245, 0.17);
|
|
244
|
+
--hc-color-accent: #faf9f5;
|
|
245
|
+
--hc-color-bg-contrast: #faf9f5;
|
|
246
|
+
--hc-color-text-on-contrast: #1f1e1d;
|
|
247
|
+
--hc-color-brand: #faf9f5;
|
|
248
|
+
--hc-color-brand-soft: rgba(250, 249, 245, 0.07);
|
|
249
|
+
--hc-color-bg-warning: #3a2b0c;
|
|
250
|
+
--hc-color-text-on-warning: #f5d38a;
|
|
251
|
+
--hc-color-bg-success: #1c2e1f;
|
|
252
|
+
--hc-color-text-on-success: #8fd69d;
|
|
253
|
+
--hc-color-bg-danger: #3a1a16;
|
|
254
|
+
--hc-color-text-on-danger: #ffb4a6;
|
|
255
|
+
--hc-focus-ring: #faf9f5;
|
|
256
|
+
--hc-shadow-outline: 0 0 0 1px var(--hc-color-border-strong);
|
|
257
|
+
--hc-shadow-soft: 0 0 0 1px var(--hc-color-border-strong);
|
|
258
|
+
--hc-shadow-card: 0 0 0 1px var(--hc-color-border-strong);
|
|
259
|
+
--hc-shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--hc-color-border-strong);
|
|
260
|
+
--hc-shadow-modal: 0 0 0 1px var(--hc-color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
|
|
261
|
+
--hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
|
|
262
|
+
--hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
|
|
263
|
+
--hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
|
|
264
|
+
color-scheme: dark;
|
|
265
|
+
}
|
|
266
|
+
[data-hc-ds][data-theme="light"], .light[data-hc-ds] {
|
|
267
|
+
--hc-color-bg-page: #efeee7;
|
|
268
|
+
--hc-color-bg-main: #faf9f4;
|
|
269
|
+
--hc-color-bg-surface: #fffefb;
|
|
270
|
+
--hc-color-bg-elevated: #fffefb;
|
|
271
|
+
--hc-color-bg-glass: rgba(250, 249, 245, 0.62);
|
|
272
|
+
--hc-color-bg-muted: rgba(31, 30, 29, 0.06);
|
|
273
|
+
--hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
|
|
274
|
+
--hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
|
|
275
|
+
--hc-color-text-primary: #141413;
|
|
276
|
+
--hc-color-text-secondary: #3d3d3a;
|
|
277
|
+
--hc-color-text-muted: #63625c;
|
|
278
|
+
--hc-color-placeholder: #8f8d85;
|
|
279
|
+
--hc-color-text-disabled: #c8c5bb;
|
|
280
|
+
--hc-color-text-inverse: #ffffff;
|
|
281
|
+
--hc-color-outline: rgba(31, 30, 29, 0.12);
|
|
282
|
+
--hc-color-border: rgba(31, 30, 29, 0.1);
|
|
283
|
+
--hc-color-border-strong: rgba(31, 30, 29, 0.18);
|
|
284
|
+
--hc-color-accent: #141413;
|
|
285
|
+
--hc-color-bg-contrast: #141413;
|
|
286
|
+
--hc-color-text-on-contrast: #faf9f5;
|
|
287
|
+
--hc-color-brand: #141413;
|
|
288
|
+
--hc-color-brand-soft: rgba(31, 30, 29, 0.055);
|
|
289
|
+
--hc-color-bg-warning: #fbefd2;
|
|
290
|
+
--hc-color-text-on-warning: #7a4100;
|
|
291
|
+
--hc-color-bg-success: #e4f2e4;
|
|
292
|
+
--hc-color-text-on-success: #1f6b2c;
|
|
293
|
+
--hc-color-bg-danger: #fbe9e5;
|
|
294
|
+
--hc-color-text-on-danger: #b42318;
|
|
295
|
+
--hc-focus-ring: #141413;
|
|
296
|
+
--hc-shadow-outline: 0 0 0 1px var(--hc-color-border);
|
|
297
|
+
--hc-shadow-soft: 0 0 0 1px var(--hc-color-border), 0 1px 2px rgba(20, 20, 19, 0.04);
|
|
298
|
+
--hc-shadow-card: 0 0 0 1px var(--hc-color-border), 0 1px 3px rgba(20, 20, 19, 0.04);
|
|
299
|
+
--hc-shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
|
|
300
|
+
--hc-shadow-modal: 0 0 0 1px var(--hc-color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26);
|
|
301
|
+
--hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
|
|
302
|
+
--hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
|
|
303
|
+
--hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
|
|
304
|
+
color-scheme: light;
|
|
222
305
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ntmats/hc-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared HCUI/Arena design tokens: CSS custom properties, Sass, Tailwind 3 preset and ESM values.",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -12,13 +12,15 @@
|
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"types": "./dist/index.d.ts",
|
|
15
|
-
"import": "./dist/index.js"
|
|
15
|
+
"import": "./dist/index.js",
|
|
16
|
+
"default": "./dist/index.js"
|
|
16
17
|
},
|
|
17
18
|
"./css": "./dist/tokens.css",
|
|
18
19
|
"./scss": "./dist/_tokens.scss",
|
|
19
20
|
"./tailwind": {
|
|
20
21
|
"types": "./dist/tailwind.d.ts",
|
|
21
|
-
"import": "./dist/tailwind.js"
|
|
22
|
+
"import": "./dist/tailwind.js",
|
|
23
|
+
"default": "./dist/tailwind.js"
|
|
22
24
|
},
|
|
23
25
|
"./hcui/theme": "./dist/_hcui-theme.scss",
|
|
24
26
|
"./hcui/tokens": "./dist/_hcui-tokens.scss",
|