@ntmats/hc-tokens 0.0.0-stage → 0.1.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/LICENSE +5 -0
- package/README.md +28 -2
- package/dist/_hcui-theme.scss +92 -0
- package/dist/_hcui-tokens.scss +142 -0
- package/dist/_tokens.scss +138 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +231 -0
- package/dist/tailwind.d.ts +2 -0
- package/dist/tailwind.js +145 -0
- package/dist/tokens.css +222 -0
- package/dist/tokens.json +230 -0
- package/package.json +36 -4
package/LICENSE
ADDED
package/README.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @ntmats/hc-tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Imported as `@hc/tokens`: `npm install --save-exact @hc/tokens@npm:@ntmats/hc-tokens@<version>`.
|
|
4
|
+
|
|
5
|
+
No fonts, images, icon binaries, React, reset, services or product layout are included.
|
|
6
|
+
|
|
7
|
+
License: `UNLICENSED` (HCUI and Arena only). Do not import another application's source.
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
import '@hc/tokens/css';
|
|
11
|
+
import { tokens } from '@hc/tokens';
|
|
12
|
+
import preset from '@hc/tokens/tailwind';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
CSS is opt-in: put `data-hc-ds` on the application or component scope. Use `data-theme="light|dark"` on that scope. Arena's `.dark` ancestor is supported. Portals must be under the opted-in root or receive their own scope/theme. Do not mix conflicting nested class/attribute theme controllers.
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<main data-hc-ds data-theme="dark">
|
|
19
|
+
<div style="background:var(--hc-color-bg-surface);color:var(--hc-color-text-primary)">...</div>
|
|
20
|
+
</main>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The Tailwind 3 preset extends the consumer configuration, without enabling/disabling preflight. Example utilities: `bg-hc-bg-surface`, `text-hc-text-primary`, `p-hc-4`, `rounded-hc-md`, `shadow-hc-navigation`. Colors use complete CSS values, including existing alpha values; slash-opacity modifiers are not part of this initial contract.
|
|
24
|
+
|
|
25
|
+
For Sass, use the `./scss` export with a package importer (`@use 'pkg:@hc/tokens/scss' as ds`). Scalars remain compile-time values to preserve arithmetic; themed aliases reference namespaced CSS variables. Import CSS once at the consumer entry point.
|
|
26
|
+
|
|
27
|
+
`./hcui/theme` and `./hcui/tokens` are explicit legacy adapters. They also carry the source's HCUI-only `hcui` group, which no shared export includes. They preserve HCUI's existing global selectors/custom-property names and must not be imported into Arena. They are a migration bridge, not the default shared CSS.
|
|
28
|
+
|
|
29
|
+
Only token values are exported. Consumers retain theme persistence, responsive layout, fonts loading, accessibility behavior and reduced-motion enforcement. HeroClix/power/player values have a separate source group; they are not UI status colors.
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* Generated from @hc/tokens src/tokens.json. Do not edit. */
|
|
2
|
+
:root {
|
|
3
|
+
--font-display: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
4
|
+
--font-body: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
5
|
+
--font-mono: 'Google Sans Code', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
6
|
+
--rond: 50;
|
|
7
|
+
--glass-blur: saturate(1.6) blur(24px);
|
|
8
|
+
--color-bg-page: #efeee7;
|
|
9
|
+
--color-bg-main: #faf9f4;
|
|
10
|
+
--color-bg-surface: #fffefb;
|
|
11
|
+
--color-bg-elevated: #fffefb;
|
|
12
|
+
--color-bg-glass: rgba(250, 249, 245, 0.62);
|
|
13
|
+
--color-bg-muted: rgba(31, 30, 29, 0.06);
|
|
14
|
+
--color-bg-muted-2: rgba(31, 30, 29, 0.03);
|
|
15
|
+
--color-bg-overlay: rgba(20, 20, 19, 0.34);
|
|
16
|
+
--color-text-primary: #141413;
|
|
17
|
+
--color-text-secondary: #3d3d3a;
|
|
18
|
+
--color-text-muted: #63625c;
|
|
19
|
+
--color-placeholder: #8f8d85;
|
|
20
|
+
--color-text-disabled: #c8c5bb;
|
|
21
|
+
--color-text-inverse: #ffffff;
|
|
22
|
+
--color-outline: rgba(31, 30, 29, 0.12);
|
|
23
|
+
--color-border: rgba(31, 30, 29, 0.1);
|
|
24
|
+
--color-border-strong: rgba(31, 30, 29, 0.18);
|
|
25
|
+
--color-accent: #141413;
|
|
26
|
+
--color-bg-contrast: #141413;
|
|
27
|
+
--color-text-on-contrast: #faf9f5;
|
|
28
|
+
--color-brand: #141413;
|
|
29
|
+
--color-brand-soft: rgba(31, 30, 29, 0.055);
|
|
30
|
+
--color-bg-warning: #fbefd2;
|
|
31
|
+
--color-text-on-warning: #7a4100;
|
|
32
|
+
--color-bg-success: #e4f2e4;
|
|
33
|
+
--color-text-on-success: #1f6b2c;
|
|
34
|
+
--color-bg-danger: #fbe9e5;
|
|
35
|
+
--color-text-on-danger: #b42318;
|
|
36
|
+
--focus-ring: #141413;
|
|
37
|
+
--shadow-outline: 0 0 0 1px var(--color-border);
|
|
38
|
+
--shadow-soft: 0 0 0 1px var(--color-border), 0 1px 2px rgba(20, 20, 19, 0.04);
|
|
39
|
+
--shadow-card: 0 0 0 1px var(--color-border), 0 1px 3px rgba(20, 20, 19, 0.04);
|
|
40
|
+
--shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
|
|
41
|
+
--shadow-modal: 0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26);
|
|
42
|
+
--shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
|
|
43
|
+
--shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
|
|
44
|
+
--shadow-float: 0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
|
|
45
|
+
--shadow-fab: 0 0 0 1px rgba(31, 30, 29, 0.07), 0 10px 30px -8px rgba(20, 20, 19, 0.22);
|
|
46
|
+
--dock-track: rgba(31, 30, 29, 0.07);
|
|
47
|
+
--shadow-navigation-mobile: 0 1px 3px rgba(20, 20, 19, 0.07), 0 5px 18px -6px rgba(20, 20, 19, 0.20);
|
|
48
|
+
color-scheme: light;
|
|
49
|
+
}
|
|
50
|
+
[data-theme="dark"] {
|
|
51
|
+
--color-bg-page: #1b1a19;
|
|
52
|
+
--color-bg-main: #262624;
|
|
53
|
+
--color-bg-surface: #262624;
|
|
54
|
+
--color-bg-elevated: #30302e;
|
|
55
|
+
--color-bg-glass: rgba(48, 48, 46, 0.6);
|
|
56
|
+
--color-bg-muted: rgba(250, 249, 245, 0.07);
|
|
57
|
+
--color-bg-muted-2: rgba(250, 249, 245, 0.035);
|
|
58
|
+
--color-bg-overlay: rgba(0, 0, 0, 0.55);
|
|
59
|
+
--color-text-primary: #faf9f5;
|
|
60
|
+
--color-text-secondary: #dedcd1;
|
|
61
|
+
--color-text-muted: #a8a59b;
|
|
62
|
+
--color-placeholder: #7a776f;
|
|
63
|
+
--color-text-disabled: #45443f;
|
|
64
|
+
--color-text-inverse: #1f1e1d;
|
|
65
|
+
--color-outline: rgba(250, 249, 245, 0.14);
|
|
66
|
+
--color-border: rgba(250, 249, 245, 0.09);
|
|
67
|
+
--color-border-strong: rgba(250, 249, 245, 0.17);
|
|
68
|
+
--color-accent: #faf9f5;
|
|
69
|
+
--color-bg-contrast: #faf9f5;
|
|
70
|
+
--color-text-on-contrast: #1f1e1d;
|
|
71
|
+
--color-brand: #faf9f5;
|
|
72
|
+
--color-brand-soft: rgba(250, 249, 245, 0.07);
|
|
73
|
+
--color-bg-warning: #3a2b0c;
|
|
74
|
+
--color-text-on-warning: #f5d38a;
|
|
75
|
+
--color-bg-success: #1c2e1f;
|
|
76
|
+
--color-text-on-success: #8fd69d;
|
|
77
|
+
--color-bg-danger: #3a1a16;
|
|
78
|
+
--color-text-on-danger: #ffb4a6;
|
|
79
|
+
--focus-ring: #faf9f5;
|
|
80
|
+
--shadow-outline: 0 0 0 1px var(--color-border-strong);
|
|
81
|
+
--shadow-soft: 0 0 0 1px var(--color-border-strong);
|
|
82
|
+
--shadow-card: 0 0 0 1px var(--color-border-strong);
|
|
83
|
+
--shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border-strong);
|
|
84
|
+
--shadow-modal: 0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
|
|
85
|
+
--shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
|
|
86
|
+
--shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
|
|
87
|
+
--shadow-float: 0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
|
|
88
|
+
--shadow-fab: 0 0 0 1px var(--color-border-strong), 0 10px 30px -8px rgba(0, 0, 0, 0.7);
|
|
89
|
+
--dock-track: rgba(0, 0, 0, 0.28);
|
|
90
|
+
--shadow-navigation-mobile: 0 2px 5px rgba(0, 0, 0, 0.22), 0 6px 20px -6px rgba(0, 0, 0, 0.42);
|
|
91
|
+
color-scheme: dark;
|
|
92
|
+
}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* Generated from @hc/tokens src/tokens.json. Do not edit. */
|
|
2
|
+
$color-bg-page: var(--color-bg-page);
|
|
3
|
+
$color-bg-surface: var(--color-bg-surface);
|
|
4
|
+
$color-bg-elevated: var(--color-bg-elevated);
|
|
5
|
+
$color-bg-glass: var(--color-bg-glass);
|
|
6
|
+
$color-bg-muted: var(--color-bg-muted);
|
|
7
|
+
$color-bg-muted-2: var(--color-bg-muted-2);
|
|
8
|
+
$color-bg-overlay: var(--color-bg-overlay);
|
|
9
|
+
$color-text-primary: var(--color-text-primary);
|
|
10
|
+
$color-text-secondary: var(--color-text-secondary);
|
|
11
|
+
$color-text-muted: var(--color-text-muted);
|
|
12
|
+
$color-placeholder: var(--color-placeholder);
|
|
13
|
+
$color-text-disabled: var(--color-text-disabled);
|
|
14
|
+
$color-text-inverse: var(--color-text-inverse);
|
|
15
|
+
$color-outline: var(--color-outline);
|
|
16
|
+
$color-border: var(--color-border);
|
|
17
|
+
$color-border-strong: var(--color-border-strong);
|
|
18
|
+
$color-accent: var(--color-accent);
|
|
19
|
+
$color-bg-contrast: var(--color-bg-contrast);
|
|
20
|
+
$color-text-on-contrast: var(--color-text-on-contrast);
|
|
21
|
+
$color-brand: var(--color-brand);
|
|
22
|
+
$color-brand-soft: var(--color-brand-soft);
|
|
23
|
+
$color-danger: #e5383b;
|
|
24
|
+
$color-success: #12a150;
|
|
25
|
+
$color-warning: #f08c00;
|
|
26
|
+
$color-bg-warning: var(--color-bg-warning);
|
|
27
|
+
$color-text-on-warning: var(--color-text-on-warning);
|
|
28
|
+
$color-bg-success: var(--color-bg-success);
|
|
29
|
+
$color-text-on-success: var(--color-text-on-success);
|
|
30
|
+
$color-bg-danger: var(--color-bg-danger);
|
|
31
|
+
$color-text-on-danger: var(--color-text-on-danger);
|
|
32
|
+
$font-display: var(--font-display);
|
|
33
|
+
$font-body: var(--font-body);
|
|
34
|
+
$font-mono: var(--font-mono);
|
|
35
|
+
$font-italic: var(--font-body);
|
|
36
|
+
$font-size-2xs: 11px;
|
|
37
|
+
$font-size-xs: 12px;
|
|
38
|
+
$font-size-sm: 13px;
|
|
39
|
+
$font-size-md: 15px;
|
|
40
|
+
$font-size-base: 16px;
|
|
41
|
+
$font-size-lg: 17px;
|
|
42
|
+
$font-size-xl: 20px;
|
|
43
|
+
$font-size-2xl: 28px;
|
|
44
|
+
$font-size-3xl: 34px;
|
|
45
|
+
$line-height-2xs: 14px;
|
|
46
|
+
$line-height-xs: 16px;
|
|
47
|
+
$line-height-sm: 18px;
|
|
48
|
+
$line-height-md: 20px;
|
|
49
|
+
$line-height-base: 24px;
|
|
50
|
+
$line-height-lg: 24px;
|
|
51
|
+
$line-height-xl: 26px;
|
|
52
|
+
$line-height-2xl: 34px;
|
|
53
|
+
$line-height-3xl: 40px;
|
|
54
|
+
$font-weight-regular: 400;
|
|
55
|
+
$font-weight-medium: 500;
|
|
56
|
+
$font-weight-semibold: 600;
|
|
57
|
+
$font-weight-bold: 700;
|
|
58
|
+
$font-weight-control: 540;
|
|
59
|
+
$letter-spacing-tight: -0.02em;
|
|
60
|
+
$letter-spacing-snug: -0.01em;
|
|
61
|
+
$letter-spacing-wide: 0.02em;
|
|
62
|
+
$letter-spacing-wider: 0.06em;
|
|
63
|
+
$font-stretch-condensed: 92%;
|
|
64
|
+
$font-stretch-button: 96%;
|
|
65
|
+
$font-stretch-pressed: 90%;
|
|
66
|
+
$space-0: 0;
|
|
67
|
+
$space-1: 4px;
|
|
68
|
+
$space-2: 8px;
|
|
69
|
+
$space-3: 12px;
|
|
70
|
+
$space-4: 16px;
|
|
71
|
+
$space-5: 20px;
|
|
72
|
+
$space-6: 24px;
|
|
73
|
+
$space-7: 32px;
|
|
74
|
+
$space-8: 40px;
|
|
75
|
+
$space-9: 48px;
|
|
76
|
+
$space-10: 64px;
|
|
77
|
+
$control-height-xs: 32px;
|
|
78
|
+
$control-height-chip: 36px;
|
|
79
|
+
$control-height-sm: 40px;
|
|
80
|
+
$control-height-md: 44px;
|
|
81
|
+
$control-height-lg: 52px;
|
|
82
|
+
$radius-xs: 8px;
|
|
83
|
+
$radius-sm: 12px;
|
|
84
|
+
$radius-md: 16px;
|
|
85
|
+
$radius-lg: 20px;
|
|
86
|
+
$radius-xl: 24px;
|
|
87
|
+
$radius-sheet: 28px;
|
|
88
|
+
$radius-full: 9999px;
|
|
89
|
+
$shadow-outline: var(--shadow-outline);
|
|
90
|
+
$shadow-soft: var(--shadow-soft);
|
|
91
|
+
$shadow-card: var(--shadow-card);
|
|
92
|
+
$shadow-modal: var(--shadow-modal);
|
|
93
|
+
$shadow-float: var(--shadow-float);
|
|
94
|
+
$shadow-navigation: var(--shadow-navigation);
|
|
95
|
+
$shadow-main: var(--shadow-main);
|
|
96
|
+
$ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
97
|
+
$ease-pop: cubic-bezier(0.32, 1.25, 0.6, 1);
|
|
98
|
+
$ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
99
|
+
$ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
100
|
+
$ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
|
|
101
|
+
$ease-bounce: cubic-bezier(0.3, 0, 0, 1.25);
|
|
102
|
+
$ease-linear: linear;
|
|
103
|
+
$dur-short: 120ms;
|
|
104
|
+
$dur-medium: 240ms;
|
|
105
|
+
$dur-large: 380ms;
|
|
106
|
+
$dur-xlarge: 480ms;
|
|
107
|
+
$transition-fast: 140ms $ease-standard;
|
|
108
|
+
$transition-base: 200ms $ease-standard;
|
|
109
|
+
$transition-slow: 300ms $ease-standard;
|
|
110
|
+
$z-tabs: 10;
|
|
111
|
+
$z-modal: 50;
|
|
112
|
+
$z-sticky: 9;
|
|
113
|
+
$z-header: 19;
|
|
114
|
+
$z-drag: 40;
|
|
115
|
+
$z-tooltip: 60;
|
|
116
|
+
$z-toast: 70;
|
|
117
|
+
$z-loading: 80;
|
|
118
|
+
$shadow-fab: var(--shadow-fab);
|
|
119
|
+
$z-fab: 20;
|
|
120
|
+
$z-tabbar: 30;
|
|
121
|
+
$shadow-navigation-mobile: var(--shadow-navigation-mobile);
|
|
122
|
+
$color-marvel: #ec1d24;
|
|
123
|
+
$color-dc: #0476f2;
|
|
124
|
+
$color-teamup: #2bb3c0;
|
|
125
|
+
$player-accent-1: #1b9a94;
|
|
126
|
+
$player-accent-2: #c44572;
|
|
127
|
+
$player-accent-3: #7167d9;
|
|
128
|
+
$player-accent-4: #a8782a;
|
|
129
|
+
$gradient-foil: linear-gradient(125deg, #ff5f6d, #ffc371, #47e0a0, #5b8cff, #c86dd7, #ff5f6d);
|
|
130
|
+
$power-black: #000000;
|
|
131
|
+
$power-red: #ec2e2c;
|
|
132
|
+
$power-light-green: #9ee204;
|
|
133
|
+
$power-light-blue: #70cff7;
|
|
134
|
+
$power-yellow: #ffc000;
|
|
135
|
+
$power-dark-blue: #0068b5;
|
|
136
|
+
$power-green: #00af50;
|
|
137
|
+
$power-orange: #ff8c00;
|
|
138
|
+
$power-pink: #fed6f0;
|
|
139
|
+
$power-purple: #9d57ad;
|
|
140
|
+
$power-gray: #a5a5a5;
|
|
141
|
+
$power-brown: #a0522d;
|
|
142
|
+
$color-gold: #f5b700;
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
/* Generated from @hc/tokens src/tokens.json. Do not edit. */
|
|
2
|
+
$color-bg-page: var(--hc-color-bg-page);
|
|
3
|
+
$color-bg-surface: var(--hc-color-bg-surface);
|
|
4
|
+
$color-bg-elevated: var(--hc-color-bg-elevated);
|
|
5
|
+
$color-bg-glass: var(--hc-color-bg-glass);
|
|
6
|
+
$color-bg-muted: var(--hc-color-bg-muted);
|
|
7
|
+
$color-bg-muted-2: var(--hc-color-bg-muted-2);
|
|
8
|
+
$color-bg-overlay: var(--hc-color-bg-overlay);
|
|
9
|
+
$color-text-primary: var(--hc-color-text-primary);
|
|
10
|
+
$color-text-secondary: var(--hc-color-text-secondary);
|
|
11
|
+
$color-text-muted: var(--hc-color-text-muted);
|
|
12
|
+
$color-placeholder: var(--hc-color-placeholder);
|
|
13
|
+
$color-text-disabled: var(--hc-color-text-disabled);
|
|
14
|
+
$color-text-inverse: var(--hc-color-text-inverse);
|
|
15
|
+
$color-outline: var(--hc-color-outline);
|
|
16
|
+
$color-border: var(--hc-color-border);
|
|
17
|
+
$color-border-strong: var(--hc-color-border-strong);
|
|
18
|
+
$color-accent: var(--hc-color-accent);
|
|
19
|
+
$color-bg-contrast: var(--hc-color-bg-contrast);
|
|
20
|
+
$color-text-on-contrast: var(--hc-color-text-on-contrast);
|
|
21
|
+
$color-brand: var(--hc-color-brand);
|
|
22
|
+
$color-brand-soft: var(--hc-color-brand-soft);
|
|
23
|
+
$color-danger: #e5383b;
|
|
24
|
+
$color-success: #12a150;
|
|
25
|
+
$color-warning: #f08c00;
|
|
26
|
+
$color-bg-warning: var(--hc-color-bg-warning);
|
|
27
|
+
$color-text-on-warning: var(--hc-color-text-on-warning);
|
|
28
|
+
$color-bg-success: var(--hc-color-bg-success);
|
|
29
|
+
$color-text-on-success: var(--hc-color-text-on-success);
|
|
30
|
+
$color-bg-danger: var(--hc-color-bg-danger);
|
|
31
|
+
$color-text-on-danger: var(--hc-color-text-on-danger);
|
|
32
|
+
$font-display: var(--hc-font-display);
|
|
33
|
+
$font-body: var(--hc-font-body);
|
|
34
|
+
$font-mono: var(--hc-font-mono);
|
|
35
|
+
$font-italic: var(--hc-font-body);
|
|
36
|
+
$font-size-2xs: 11px;
|
|
37
|
+
$font-size-xs: 12px;
|
|
38
|
+
$font-size-sm: 13px;
|
|
39
|
+
$font-size-md: 15px;
|
|
40
|
+
$font-size-base: 16px;
|
|
41
|
+
$font-size-lg: 17px;
|
|
42
|
+
$font-size-xl: 20px;
|
|
43
|
+
$font-size-2xl: 28px;
|
|
44
|
+
$font-size-3xl: 34px;
|
|
45
|
+
$line-height-2xs: 14px;
|
|
46
|
+
$line-height-xs: 16px;
|
|
47
|
+
$line-height-sm: 18px;
|
|
48
|
+
$line-height-md: 20px;
|
|
49
|
+
$line-height-base: 24px;
|
|
50
|
+
$line-height-lg: 24px;
|
|
51
|
+
$line-height-xl: 26px;
|
|
52
|
+
$line-height-2xl: 34px;
|
|
53
|
+
$line-height-3xl: 40px;
|
|
54
|
+
$font-weight-regular: 400;
|
|
55
|
+
$font-weight-medium: 500;
|
|
56
|
+
$font-weight-semibold: 600;
|
|
57
|
+
$font-weight-bold: 700;
|
|
58
|
+
$font-weight-control: 540;
|
|
59
|
+
$letter-spacing-tight: -0.02em;
|
|
60
|
+
$letter-spacing-snug: -0.01em;
|
|
61
|
+
$letter-spacing-wide: 0.02em;
|
|
62
|
+
$letter-spacing-wider: 0.06em;
|
|
63
|
+
$font-stretch-condensed: 92%;
|
|
64
|
+
$font-stretch-button: 96%;
|
|
65
|
+
$font-stretch-pressed: 90%;
|
|
66
|
+
$space-0: 0;
|
|
67
|
+
$space-1: 4px;
|
|
68
|
+
$space-2: 8px;
|
|
69
|
+
$space-3: 12px;
|
|
70
|
+
$space-4: 16px;
|
|
71
|
+
$space-5: 20px;
|
|
72
|
+
$space-6: 24px;
|
|
73
|
+
$space-7: 32px;
|
|
74
|
+
$space-8: 40px;
|
|
75
|
+
$space-9: 48px;
|
|
76
|
+
$space-10: 64px;
|
|
77
|
+
$control-height-xs: 32px;
|
|
78
|
+
$control-height-chip: 36px;
|
|
79
|
+
$control-height-sm: 40px;
|
|
80
|
+
$control-height-md: 44px;
|
|
81
|
+
$control-height-lg: 52px;
|
|
82
|
+
$radius-xs: 8px;
|
|
83
|
+
$radius-sm: 12px;
|
|
84
|
+
$radius-md: 16px;
|
|
85
|
+
$radius-lg: 20px;
|
|
86
|
+
$radius-xl: 24px;
|
|
87
|
+
$radius-sheet: 28px;
|
|
88
|
+
$radius-full: 9999px;
|
|
89
|
+
$shadow-outline: var(--hc-shadow-outline);
|
|
90
|
+
$shadow-soft: var(--hc-shadow-soft);
|
|
91
|
+
$shadow-card: var(--hc-shadow-card);
|
|
92
|
+
$shadow-modal: var(--hc-shadow-modal);
|
|
93
|
+
$shadow-float: var(--hc-shadow-float);
|
|
94
|
+
$shadow-navigation: var(--hc-shadow-navigation);
|
|
95
|
+
$shadow-main: var(--hc-shadow-main);
|
|
96
|
+
$ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
97
|
+
$ease-pop: cubic-bezier(0.32, 1.25, 0.6, 1);
|
|
98
|
+
$ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
99
|
+
$ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
100
|
+
$ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
|
|
101
|
+
$ease-bounce: cubic-bezier(0.3, 0, 0, 1.25);
|
|
102
|
+
$ease-linear: linear;
|
|
103
|
+
$dur-short: 120ms;
|
|
104
|
+
$dur-medium: 240ms;
|
|
105
|
+
$dur-large: 380ms;
|
|
106
|
+
$dur-xlarge: 480ms;
|
|
107
|
+
$transition-fast: 140ms $ease-standard;
|
|
108
|
+
$transition-base: 200ms $ease-standard;
|
|
109
|
+
$transition-slow: 300ms $ease-standard;
|
|
110
|
+
$z-tabs: 10;
|
|
111
|
+
$z-modal: 50;
|
|
112
|
+
$z-sticky: 9;
|
|
113
|
+
$z-header: 19;
|
|
114
|
+
$z-drag: 40;
|
|
115
|
+
$z-tooltip: 60;
|
|
116
|
+
$z-toast: 70;
|
|
117
|
+
$z-loading: 80;
|
|
118
|
+
$color-marvel: #ec1d24;
|
|
119
|
+
$color-dc: #0476f2;
|
|
120
|
+
$color-teamup: #2bb3c0;
|
|
121
|
+
$player-accent-1: #1b9a94;
|
|
122
|
+
$player-accent-2: #c44572;
|
|
123
|
+
$player-accent-3: #7167d9;
|
|
124
|
+
$player-accent-4: #a8782a;
|
|
125
|
+
$gradient-foil: linear-gradient(125deg, #ff5f6d, #ffc371, #47e0a0, #5b8cff, #c86dd7, #ff5f6d);
|
|
126
|
+
$power-black: #000000;
|
|
127
|
+
$power-red: #ec2e2c;
|
|
128
|
+
$power-light-green: #9ee204;
|
|
129
|
+
$power-light-blue: #70cff7;
|
|
130
|
+
$power-yellow: #ffc000;
|
|
131
|
+
$power-dark-blue: #0068b5;
|
|
132
|
+
$power-green: #00af50;
|
|
133
|
+
$power-orange: #ff8c00;
|
|
134
|
+
$power-pink: #fed6f0;
|
|
135
|
+
$power-purple: #9d57ad;
|
|
136
|
+
$power-gray: #a5a5a5;
|
|
137
|
+
$power-brown: #a0522d;
|
|
138
|
+
$color-gold: #f5b700;
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
// Generated.
|
|
2
|
+
export const tokens = {
|
|
3
|
+
"schemaVersion": 1,
|
|
4
|
+
"common": {
|
|
5
|
+
"font-display": "'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
6
|
+
"font-body": "'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
7
|
+
"font-mono": "'Google Sans Code', ui-monospace, 'SF Mono', Menlo, monospace",
|
|
8
|
+
"rond": "50"
|
|
9
|
+
},
|
|
10
|
+
"themes": {
|
|
11
|
+
"light": {
|
|
12
|
+
"color-bg-page": "#efeee7",
|
|
13
|
+
"color-bg-main": "#faf9f4",
|
|
14
|
+
"color-bg-surface": "#fffefb",
|
|
15
|
+
"color-bg-elevated": "#fffefb",
|
|
16
|
+
"color-bg-glass": "rgba(250, 249, 245, 0.62)",
|
|
17
|
+
"color-bg-muted": "rgba(31, 30, 29, 0.06)",
|
|
18
|
+
"color-bg-muted-2": "rgba(31, 30, 29, 0.03)",
|
|
19
|
+
"color-bg-overlay": "rgba(20, 20, 19, 0.34)",
|
|
20
|
+
"color-text-primary": "#141413",
|
|
21
|
+
"color-text-secondary": "#3d3d3a",
|
|
22
|
+
"color-text-muted": "#63625c",
|
|
23
|
+
"color-placeholder": "#8f8d85",
|
|
24
|
+
"color-text-disabled": "#c8c5bb",
|
|
25
|
+
"color-text-inverse": "#ffffff",
|
|
26
|
+
"color-outline": "rgba(31, 30, 29, 0.12)",
|
|
27
|
+
"color-border": "rgba(31, 30, 29, 0.1)",
|
|
28
|
+
"color-border-strong": "rgba(31, 30, 29, 0.18)",
|
|
29
|
+
"color-accent": "#141413",
|
|
30
|
+
"color-bg-contrast": "#141413",
|
|
31
|
+
"color-text-on-contrast": "#faf9f5",
|
|
32
|
+
"color-brand": "#141413",
|
|
33
|
+
"color-brand-soft": "rgba(31, 30, 29, 0.055)",
|
|
34
|
+
"color-bg-warning": "#fbefd2",
|
|
35
|
+
"color-text-on-warning": "#7a4100",
|
|
36
|
+
"color-bg-success": "#e4f2e4",
|
|
37
|
+
"color-text-on-success": "#1f6b2c",
|
|
38
|
+
"color-bg-danger": "#fbe9e5",
|
|
39
|
+
"color-text-on-danger": "#b42318",
|
|
40
|
+
"focus-ring": "#141413",
|
|
41
|
+
"shadow-outline": "0 0 0 1px var(--color-border)",
|
|
42
|
+
"shadow-soft": "0 0 0 1px var(--color-border), 0 1px 2px rgba(20, 20, 19, 0.04)",
|
|
43
|
+
"shadow-card": "0 0 0 1px var(--color-border), 0 1px 3px rgba(20, 20, 19, 0.04)",
|
|
44
|
+
"shadow-knob": "0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06)",
|
|
45
|
+
"shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
|
|
46
|
+
"shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
|
|
47
|
+
"shadow-navigation": "0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12)",
|
|
48
|
+
"shadow-float": "0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2)"
|
|
49
|
+
},
|
|
50
|
+
"dark": {
|
|
51
|
+
"color-bg-page": "#1b1a19",
|
|
52
|
+
"color-bg-main": "#262624",
|
|
53
|
+
"color-bg-surface": "#262624",
|
|
54
|
+
"color-bg-elevated": "#30302e",
|
|
55
|
+
"color-bg-glass": "rgba(48, 48, 46, 0.6)",
|
|
56
|
+
"color-bg-muted": "rgba(250, 249, 245, 0.07)",
|
|
57
|
+
"color-bg-muted-2": "rgba(250, 249, 245, 0.035)",
|
|
58
|
+
"color-bg-overlay": "rgba(0, 0, 0, 0.55)",
|
|
59
|
+
"color-text-primary": "#faf9f5",
|
|
60
|
+
"color-text-secondary": "#dedcd1",
|
|
61
|
+
"color-text-muted": "#a8a59b",
|
|
62
|
+
"color-placeholder": "#7a776f",
|
|
63
|
+
"color-text-disabled": "#45443f",
|
|
64
|
+
"color-text-inverse": "#1f1e1d",
|
|
65
|
+
"color-outline": "rgba(250, 249, 245, 0.14)",
|
|
66
|
+
"color-border": "rgba(250, 249, 245, 0.09)",
|
|
67
|
+
"color-border-strong": "rgba(250, 249, 245, 0.17)",
|
|
68
|
+
"color-accent": "#faf9f5",
|
|
69
|
+
"color-bg-contrast": "#faf9f5",
|
|
70
|
+
"color-text-on-contrast": "#1f1e1d",
|
|
71
|
+
"color-brand": "#faf9f5",
|
|
72
|
+
"color-brand-soft": "rgba(250, 249, 245, 0.07)",
|
|
73
|
+
"color-bg-warning": "#3a2b0c",
|
|
74
|
+
"color-text-on-warning": "#f5d38a",
|
|
75
|
+
"color-bg-success": "#1c2e1f",
|
|
76
|
+
"color-text-on-success": "#8fd69d",
|
|
77
|
+
"color-bg-danger": "#3a1a16",
|
|
78
|
+
"color-text-on-danger": "#ffb4a6",
|
|
79
|
+
"focus-ring": "#faf9f5",
|
|
80
|
+
"shadow-outline": "0 0 0 1px var(--color-border-strong)",
|
|
81
|
+
"shadow-soft": "0 0 0 1px var(--color-border-strong)",
|
|
82
|
+
"shadow-card": "0 0 0 1px var(--color-border-strong)",
|
|
83
|
+
"shadow-knob": "0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border-strong)",
|
|
84
|
+
"shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
|
|
85
|
+
"shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
|
|
86
|
+
"shadow-navigation": "0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28)",
|
|
87
|
+
"shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"sass": {
|
|
91
|
+
"color-bg-page": "var(--color-bg-page)",
|
|
92
|
+
"color-bg-surface": "var(--color-bg-surface)",
|
|
93
|
+
"color-bg-elevated": "var(--color-bg-elevated)",
|
|
94
|
+
"color-bg-glass": "var(--color-bg-glass)",
|
|
95
|
+
"color-bg-muted": "var(--color-bg-muted)",
|
|
96
|
+
"color-bg-muted-2": "var(--color-bg-muted-2)",
|
|
97
|
+
"color-bg-overlay": "var(--color-bg-overlay)",
|
|
98
|
+
"color-text-primary": "var(--color-text-primary)",
|
|
99
|
+
"color-text-secondary": "var(--color-text-secondary)",
|
|
100
|
+
"color-text-muted": "var(--color-text-muted)",
|
|
101
|
+
"color-placeholder": "var(--color-placeholder)",
|
|
102
|
+
"color-text-disabled": "var(--color-text-disabled)",
|
|
103
|
+
"color-text-inverse": "var(--color-text-inverse)",
|
|
104
|
+
"color-outline": "var(--color-outline)",
|
|
105
|
+
"color-border": "var(--color-border)",
|
|
106
|
+
"color-border-strong": "var(--color-border-strong)",
|
|
107
|
+
"color-accent": "var(--color-accent)",
|
|
108
|
+
"color-bg-contrast": "var(--color-bg-contrast)",
|
|
109
|
+
"color-text-on-contrast": "var(--color-text-on-contrast)",
|
|
110
|
+
"color-brand": "var(--color-brand)",
|
|
111
|
+
"color-brand-soft": "var(--color-brand-soft)",
|
|
112
|
+
"color-danger": "#e5383b",
|
|
113
|
+
"color-success": "#12a150",
|
|
114
|
+
"color-warning": "#f08c00",
|
|
115
|
+
"color-bg-warning": "var(--color-bg-warning)",
|
|
116
|
+
"color-text-on-warning": "var(--color-text-on-warning)",
|
|
117
|
+
"color-bg-success": "var(--color-bg-success)",
|
|
118
|
+
"color-text-on-success": "var(--color-text-on-success)",
|
|
119
|
+
"color-bg-danger": "var(--color-bg-danger)",
|
|
120
|
+
"color-text-on-danger": "var(--color-text-on-danger)",
|
|
121
|
+
"font-display": "var(--font-display)",
|
|
122
|
+
"font-body": "var(--font-body)",
|
|
123
|
+
"font-mono": "var(--font-mono)",
|
|
124
|
+
"font-italic": "var(--font-body)",
|
|
125
|
+
"font-size-2xs": "11px",
|
|
126
|
+
"font-size-xs": "12px",
|
|
127
|
+
"font-size-sm": "13px",
|
|
128
|
+
"font-size-md": "15px",
|
|
129
|
+
"font-size-base": "16px",
|
|
130
|
+
"font-size-lg": "17px",
|
|
131
|
+
"font-size-xl": "20px",
|
|
132
|
+
"font-size-2xl": "28px",
|
|
133
|
+
"font-size-3xl": "34px",
|
|
134
|
+
"line-height-2xs": "14px",
|
|
135
|
+
"line-height-xs": "16px",
|
|
136
|
+
"line-height-sm": "18px",
|
|
137
|
+
"line-height-md": "20px",
|
|
138
|
+
"line-height-base": "24px",
|
|
139
|
+
"line-height-lg": "24px",
|
|
140
|
+
"line-height-xl": "26px",
|
|
141
|
+
"line-height-2xl": "34px",
|
|
142
|
+
"line-height-3xl": "40px",
|
|
143
|
+
"font-weight-regular": "400",
|
|
144
|
+
"font-weight-medium": "500",
|
|
145
|
+
"font-weight-semibold": "600",
|
|
146
|
+
"font-weight-bold": "700",
|
|
147
|
+
"font-weight-control": "540",
|
|
148
|
+
"letter-spacing-tight": "-0.02em",
|
|
149
|
+
"letter-spacing-snug": "-0.01em",
|
|
150
|
+
"letter-spacing-wide": "0.02em",
|
|
151
|
+
"letter-spacing-wider": "0.06em",
|
|
152
|
+
"font-stretch-condensed": "92%",
|
|
153
|
+
"font-stretch-button": "96%",
|
|
154
|
+
"font-stretch-pressed": "90%",
|
|
155
|
+
"space-0": "0",
|
|
156
|
+
"space-1": "4px",
|
|
157
|
+
"space-2": "8px",
|
|
158
|
+
"space-3": "12px",
|
|
159
|
+
"space-4": "16px",
|
|
160
|
+
"space-5": "20px",
|
|
161
|
+
"space-6": "24px",
|
|
162
|
+
"space-7": "32px",
|
|
163
|
+
"space-8": "40px",
|
|
164
|
+
"space-9": "48px",
|
|
165
|
+
"space-10": "64px",
|
|
166
|
+
"control-height-xs": "32px",
|
|
167
|
+
"control-height-chip": "36px",
|
|
168
|
+
"control-height-sm": "40px",
|
|
169
|
+
"control-height-md": "44px",
|
|
170
|
+
"control-height-lg": "52px",
|
|
171
|
+
"radius-xs": "8px",
|
|
172
|
+
"radius-sm": "12px",
|
|
173
|
+
"radius-md": "16px",
|
|
174
|
+
"radius-lg": "20px",
|
|
175
|
+
"radius-xl": "24px",
|
|
176
|
+
"radius-sheet": "28px",
|
|
177
|
+
"radius-full": "9999px",
|
|
178
|
+
"shadow-outline": "var(--shadow-outline)",
|
|
179
|
+
"shadow-soft": "var(--shadow-soft)",
|
|
180
|
+
"shadow-card": "var(--shadow-card)",
|
|
181
|
+
"shadow-modal": "var(--shadow-modal)",
|
|
182
|
+
"shadow-float": "var(--shadow-float)",
|
|
183
|
+
"shadow-navigation": "var(--shadow-navigation)",
|
|
184
|
+
"shadow-main": "var(--shadow-main)",
|
|
185
|
+
"ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
|
|
186
|
+
"ease-pop": "cubic-bezier(0.32, 1.25, 0.6, 1)",
|
|
187
|
+
"ease-emphasized-decel": "cubic-bezier(0.05, 0.7, 0.1, 1)",
|
|
188
|
+
"ease-emphasized-accel": "cubic-bezier(0.3, 0, 0.8, 0.15)",
|
|
189
|
+
"ease-sheet": "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
190
|
+
"ease-bounce": "cubic-bezier(0.3, 0, 0, 1.25)",
|
|
191
|
+
"ease-linear": "linear",
|
|
192
|
+
"dur-short": "120ms",
|
|
193
|
+
"dur-medium": "240ms",
|
|
194
|
+
"dur-large": "380ms",
|
|
195
|
+
"dur-xlarge": "480ms",
|
|
196
|
+
"transition-fast": "140ms $ease-standard",
|
|
197
|
+
"transition-base": "200ms $ease-standard",
|
|
198
|
+
"transition-slow": "300ms $ease-standard",
|
|
199
|
+
"z-tabs": "10",
|
|
200
|
+
"z-modal": "50",
|
|
201
|
+
"z-sticky": "9",
|
|
202
|
+
"z-header": "19",
|
|
203
|
+
"z-drag": "40",
|
|
204
|
+
"z-tooltip": "60",
|
|
205
|
+
"z-toast": "70",
|
|
206
|
+
"z-loading": "80"
|
|
207
|
+
},
|
|
208
|
+
"heroclix": {
|
|
209
|
+
"color-marvel": "#ec1d24",
|
|
210
|
+
"color-dc": "#0476f2",
|
|
211
|
+
"color-teamup": "#2bb3c0",
|
|
212
|
+
"player-accent-1": "#1b9a94",
|
|
213
|
+
"player-accent-2": "#c44572",
|
|
214
|
+
"player-accent-3": "#7167d9",
|
|
215
|
+
"player-accent-4": "#a8782a",
|
|
216
|
+
"gradient-foil": "linear-gradient(125deg, #ff5f6d, #ffc371, #47e0a0, #5b8cff, #c86dd7, #ff5f6d)",
|
|
217
|
+
"power-black": "#000000",
|
|
218
|
+
"power-red": "#ec2e2c",
|
|
219
|
+
"power-light-green": "#9ee204",
|
|
220
|
+
"power-light-blue": "#70cff7",
|
|
221
|
+
"power-yellow": "#ffc000",
|
|
222
|
+
"power-dark-blue": "#0068b5",
|
|
223
|
+
"power-green": "#00af50",
|
|
224
|
+
"power-orange": "#ff8c00",
|
|
225
|
+
"power-pink": "#fed6f0",
|
|
226
|
+
"power-purple": "#9d57ad",
|
|
227
|
+
"power-gray": "#a5a5a5",
|
|
228
|
+
"power-brown": "#a0522d",
|
|
229
|
+
"color-gold": "#f5b700"
|
|
230
|
+
}
|
|
231
|
+
};
|
package/dist/tailwind.js
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
// Generated. Tailwind 3 extend preset; no reset or plugin dependencies.
|
|
2
|
+
export default {
|
|
3
|
+
"theme": {
|
|
4
|
+
"extend": {
|
|
5
|
+
"colors": {
|
|
6
|
+
"hc-bg-page": "var(--hc-color-bg-page)",
|
|
7
|
+
"hc-bg-surface": "var(--hc-color-bg-surface)",
|
|
8
|
+
"hc-bg-elevated": "var(--hc-color-bg-elevated)",
|
|
9
|
+
"hc-bg-glass": "var(--hc-color-bg-glass)",
|
|
10
|
+
"hc-bg-muted": "var(--hc-color-bg-muted)",
|
|
11
|
+
"hc-bg-muted-2": "var(--hc-color-bg-muted-2)",
|
|
12
|
+
"hc-bg-overlay": "var(--hc-color-bg-overlay)",
|
|
13
|
+
"hc-text-primary": "var(--hc-color-text-primary)",
|
|
14
|
+
"hc-text-secondary": "var(--hc-color-text-secondary)",
|
|
15
|
+
"hc-text-muted": "var(--hc-color-text-muted)",
|
|
16
|
+
"hc-placeholder": "var(--hc-color-placeholder)",
|
|
17
|
+
"hc-text-disabled": "var(--hc-color-text-disabled)",
|
|
18
|
+
"hc-text-inverse": "var(--hc-color-text-inverse)",
|
|
19
|
+
"hc-outline": "var(--hc-color-outline)",
|
|
20
|
+
"hc-border": "var(--hc-color-border)",
|
|
21
|
+
"hc-border-strong": "var(--hc-color-border-strong)",
|
|
22
|
+
"hc-accent": "var(--hc-color-accent)",
|
|
23
|
+
"hc-bg-contrast": "var(--hc-color-bg-contrast)",
|
|
24
|
+
"hc-text-on-contrast": "var(--hc-color-text-on-contrast)",
|
|
25
|
+
"hc-brand": "var(--hc-color-brand)",
|
|
26
|
+
"hc-brand-soft": "var(--hc-color-brand-soft)",
|
|
27
|
+
"hc-danger": "var(--hc-color-danger)",
|
|
28
|
+
"hc-success": "var(--hc-color-success)",
|
|
29
|
+
"hc-warning": "var(--hc-color-warning)",
|
|
30
|
+
"hc-bg-warning": "var(--hc-color-bg-warning)",
|
|
31
|
+
"hc-text-on-warning": "var(--hc-color-text-on-warning)",
|
|
32
|
+
"hc-bg-success": "var(--hc-color-bg-success)",
|
|
33
|
+
"hc-text-on-success": "var(--hc-color-text-on-success)",
|
|
34
|
+
"hc-bg-danger": "var(--hc-color-bg-danger)",
|
|
35
|
+
"hc-text-on-danger": "var(--hc-color-text-on-danger)",
|
|
36
|
+
"hc-marvel": "var(--hc-color-marvel)",
|
|
37
|
+
"hc-dc": "var(--hc-color-dc)",
|
|
38
|
+
"hc-teamup": "var(--hc-color-teamup)",
|
|
39
|
+
"hc-player-accent-1": "var(--hc-player-accent-1)",
|
|
40
|
+
"hc-player-accent-2": "var(--hc-player-accent-2)",
|
|
41
|
+
"hc-player-accent-3": "var(--hc-player-accent-3)",
|
|
42
|
+
"hc-player-accent-4": "var(--hc-player-accent-4)",
|
|
43
|
+
"hc-power-black": "var(--hc-power-black)",
|
|
44
|
+
"hc-power-red": "var(--hc-power-red)",
|
|
45
|
+
"hc-power-light-green": "var(--hc-power-light-green)",
|
|
46
|
+
"hc-power-light-blue": "var(--hc-power-light-blue)",
|
|
47
|
+
"hc-power-yellow": "var(--hc-power-yellow)",
|
|
48
|
+
"hc-power-dark-blue": "var(--hc-power-dark-blue)",
|
|
49
|
+
"hc-power-green": "var(--hc-power-green)",
|
|
50
|
+
"hc-power-orange": "var(--hc-power-orange)",
|
|
51
|
+
"hc-power-pink": "var(--hc-power-pink)",
|
|
52
|
+
"hc-power-purple": "var(--hc-power-purple)",
|
|
53
|
+
"hc-power-gray": "var(--hc-power-gray)",
|
|
54
|
+
"hc-power-brown": "var(--hc-power-brown)",
|
|
55
|
+
"hc-gold": "var(--hc-color-gold)",
|
|
56
|
+
"hc-bg-main": "var(--hc-color-bg-main)"
|
|
57
|
+
},
|
|
58
|
+
"borderRadius": {
|
|
59
|
+
"hc-xs": "var(--hc-radius-xs)",
|
|
60
|
+
"hc-sm": "var(--hc-radius-sm)",
|
|
61
|
+
"hc-md": "var(--hc-radius-md)",
|
|
62
|
+
"hc-lg": "var(--hc-radius-lg)",
|
|
63
|
+
"hc-xl": "var(--hc-radius-xl)",
|
|
64
|
+
"hc-sheet": "var(--hc-radius-sheet)",
|
|
65
|
+
"hc-full": "var(--hc-radius-full)"
|
|
66
|
+
},
|
|
67
|
+
"spacing": {
|
|
68
|
+
"hc-0": "var(--hc-space-0)",
|
|
69
|
+
"hc-1": "var(--hc-space-1)",
|
|
70
|
+
"hc-2": "var(--hc-space-2)",
|
|
71
|
+
"hc-3": "var(--hc-space-3)",
|
|
72
|
+
"hc-4": "var(--hc-space-4)",
|
|
73
|
+
"hc-5": "var(--hc-space-5)",
|
|
74
|
+
"hc-6": "var(--hc-space-6)",
|
|
75
|
+
"hc-7": "var(--hc-space-7)",
|
|
76
|
+
"hc-8": "var(--hc-space-8)",
|
|
77
|
+
"hc-9": "var(--hc-space-9)",
|
|
78
|
+
"hc-10": "var(--hc-space-10)"
|
|
79
|
+
},
|
|
80
|
+
"fontFamily": {
|
|
81
|
+
"hc-display": "var(--hc-font-display)",
|
|
82
|
+
"hc-body": "var(--hc-font-body)",
|
|
83
|
+
"hc-mono": "var(--hc-font-mono)",
|
|
84
|
+
"hc-italic": "var(--hc-font-italic)",
|
|
85
|
+
"hc-stretch-condensed": "var(--hc-font-stretch-condensed)",
|
|
86
|
+
"hc-stretch-button": "var(--hc-font-stretch-button)",
|
|
87
|
+
"hc-stretch-pressed": "var(--hc-font-stretch-pressed)"
|
|
88
|
+
},
|
|
89
|
+
"fontSize": {
|
|
90
|
+
"hc-2xs": "var(--hc-font-size-2xs)",
|
|
91
|
+
"hc-xs": "var(--hc-font-size-xs)",
|
|
92
|
+
"hc-sm": "var(--hc-font-size-sm)",
|
|
93
|
+
"hc-md": "var(--hc-font-size-md)",
|
|
94
|
+
"hc-base": "var(--hc-font-size-base)",
|
|
95
|
+
"hc-lg": "var(--hc-font-size-lg)",
|
|
96
|
+
"hc-xl": "var(--hc-font-size-xl)",
|
|
97
|
+
"hc-2xl": "var(--hc-font-size-2xl)",
|
|
98
|
+
"hc-3xl": "var(--hc-font-size-3xl)"
|
|
99
|
+
},
|
|
100
|
+
"lineHeight": {
|
|
101
|
+
"hc-2xs": "var(--hc-line-height-2xs)",
|
|
102
|
+
"hc-xs": "var(--hc-line-height-xs)",
|
|
103
|
+
"hc-sm": "var(--hc-line-height-sm)",
|
|
104
|
+
"hc-md": "var(--hc-line-height-md)",
|
|
105
|
+
"hc-base": "var(--hc-line-height-base)",
|
|
106
|
+
"hc-lg": "var(--hc-line-height-lg)",
|
|
107
|
+
"hc-xl": "var(--hc-line-height-xl)",
|
|
108
|
+
"hc-2xl": "var(--hc-line-height-2xl)",
|
|
109
|
+
"hc-3xl": "var(--hc-line-height-3xl)"
|
|
110
|
+
},
|
|
111
|
+
"fontWeight": {
|
|
112
|
+
"hc-regular": "var(--hc-font-weight-regular)",
|
|
113
|
+
"hc-medium": "var(--hc-font-weight-medium)",
|
|
114
|
+
"hc-semibold": "var(--hc-font-weight-semibold)",
|
|
115
|
+
"hc-bold": "var(--hc-font-weight-bold)",
|
|
116
|
+
"hc-control": "var(--hc-font-weight-control)"
|
|
117
|
+
},
|
|
118
|
+
"boxShadow": {
|
|
119
|
+
"hc-outline": "var(--hc-shadow-outline)",
|
|
120
|
+
"hc-soft": "var(--hc-shadow-soft)",
|
|
121
|
+
"hc-card": "var(--hc-shadow-card)",
|
|
122
|
+
"hc-modal": "var(--hc-shadow-modal)",
|
|
123
|
+
"hc-float": "var(--hc-shadow-float)",
|
|
124
|
+
"hc-navigation": "var(--hc-shadow-navigation)",
|
|
125
|
+
"hc-main": "var(--hc-shadow-main)",
|
|
126
|
+
"hc-knob": "var(--hc-shadow-knob)"
|
|
127
|
+
},
|
|
128
|
+
"transitionDuration": {
|
|
129
|
+
"hc-short": "var(--hc-dur-short)",
|
|
130
|
+
"hc-medium": "var(--hc-dur-medium)",
|
|
131
|
+
"hc-large": "var(--hc-dur-large)",
|
|
132
|
+
"hc-xlarge": "var(--hc-dur-xlarge)"
|
|
133
|
+
},
|
|
134
|
+
"transitionTimingFunction": {
|
|
135
|
+
"hc-standard": "var(--hc-ease-standard)",
|
|
136
|
+
"hc-pop": "var(--hc-ease-pop)",
|
|
137
|
+
"hc-emphasized-decel": "var(--hc-ease-emphasized-decel)",
|
|
138
|
+
"hc-emphasized-accel": "var(--hc-ease-emphasized-accel)",
|
|
139
|
+
"hc-sheet": "var(--hc-ease-sheet)",
|
|
140
|
+
"hc-bounce": "var(--hc-ease-bounce)",
|
|
141
|
+
"hc-linear": "var(--hc-ease-linear)"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
};
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
/* Generated from @hc/tokens src/tokens.json. Do not edit. */
|
|
2
|
+
[data-hc-ds] {
|
|
3
|
+
--hc-color-bg-page: #efeee7;
|
|
4
|
+
--hc-color-bg-surface: #fffefb;
|
|
5
|
+
--hc-color-bg-elevated: #fffefb;
|
|
6
|
+
--hc-color-bg-glass: rgba(250, 249, 245, 0.62);
|
|
7
|
+
--hc-color-bg-muted: rgba(31, 30, 29, 0.06);
|
|
8
|
+
--hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
|
|
9
|
+
--hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
|
|
10
|
+
--hc-color-text-primary: #141413;
|
|
11
|
+
--hc-color-text-secondary: #3d3d3a;
|
|
12
|
+
--hc-color-text-muted: #63625c;
|
|
13
|
+
--hc-color-placeholder: #8f8d85;
|
|
14
|
+
--hc-color-text-disabled: #c8c5bb;
|
|
15
|
+
--hc-color-text-inverse: #ffffff;
|
|
16
|
+
--hc-color-outline: rgba(31, 30, 29, 0.12);
|
|
17
|
+
--hc-color-border: rgba(31, 30, 29, 0.1);
|
|
18
|
+
--hc-color-border-strong: rgba(31, 30, 29, 0.18);
|
|
19
|
+
--hc-color-accent: #141413;
|
|
20
|
+
--hc-color-bg-contrast: #141413;
|
|
21
|
+
--hc-color-text-on-contrast: #faf9f5;
|
|
22
|
+
--hc-color-brand: #141413;
|
|
23
|
+
--hc-color-brand-soft: rgba(31, 30, 29, 0.055);
|
|
24
|
+
--hc-color-danger: #e5383b;
|
|
25
|
+
--hc-color-success: #12a150;
|
|
26
|
+
--hc-color-warning: #f08c00;
|
|
27
|
+
--hc-color-bg-warning: #fbefd2;
|
|
28
|
+
--hc-color-text-on-warning: #7a4100;
|
|
29
|
+
--hc-color-bg-success: #e4f2e4;
|
|
30
|
+
--hc-color-text-on-success: #1f6b2c;
|
|
31
|
+
--hc-color-bg-danger: #fbe9e5;
|
|
32
|
+
--hc-color-text-on-danger: #b42318;
|
|
33
|
+
--hc-font-display: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
34
|
+
--hc-font-body: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
35
|
+
--hc-font-mono: 'Google Sans Code', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
36
|
+
--hc-font-italic: var(--hc-font-body);
|
|
37
|
+
--hc-font-size-2xs: 11px;
|
|
38
|
+
--hc-font-size-xs: 12px;
|
|
39
|
+
--hc-font-size-sm: 13px;
|
|
40
|
+
--hc-font-size-md: 15px;
|
|
41
|
+
--hc-font-size-base: 16px;
|
|
42
|
+
--hc-font-size-lg: 17px;
|
|
43
|
+
--hc-font-size-xl: 20px;
|
|
44
|
+
--hc-font-size-2xl: 28px;
|
|
45
|
+
--hc-font-size-3xl: 34px;
|
|
46
|
+
--hc-line-height-2xs: 14px;
|
|
47
|
+
--hc-line-height-xs: 16px;
|
|
48
|
+
--hc-line-height-sm: 18px;
|
|
49
|
+
--hc-line-height-md: 20px;
|
|
50
|
+
--hc-line-height-base: 24px;
|
|
51
|
+
--hc-line-height-lg: 24px;
|
|
52
|
+
--hc-line-height-xl: 26px;
|
|
53
|
+
--hc-line-height-2xl: 34px;
|
|
54
|
+
--hc-line-height-3xl: 40px;
|
|
55
|
+
--hc-font-weight-regular: 400;
|
|
56
|
+
--hc-font-weight-medium: 500;
|
|
57
|
+
--hc-font-weight-semibold: 600;
|
|
58
|
+
--hc-font-weight-bold: 700;
|
|
59
|
+
--hc-font-weight-control: 540;
|
|
60
|
+
--hc-letter-spacing-tight: -0.02em;
|
|
61
|
+
--hc-letter-spacing-snug: -0.01em;
|
|
62
|
+
--hc-letter-spacing-wide: 0.02em;
|
|
63
|
+
--hc-letter-spacing-wider: 0.06em;
|
|
64
|
+
--hc-font-stretch-condensed: 92%;
|
|
65
|
+
--hc-font-stretch-button: 96%;
|
|
66
|
+
--hc-font-stretch-pressed: 90%;
|
|
67
|
+
--hc-space-0: 0;
|
|
68
|
+
--hc-space-1: 4px;
|
|
69
|
+
--hc-space-2: 8px;
|
|
70
|
+
--hc-space-3: 12px;
|
|
71
|
+
--hc-space-4: 16px;
|
|
72
|
+
--hc-space-5: 20px;
|
|
73
|
+
--hc-space-6: 24px;
|
|
74
|
+
--hc-space-7: 32px;
|
|
75
|
+
--hc-space-8: 40px;
|
|
76
|
+
--hc-space-9: 48px;
|
|
77
|
+
--hc-space-10: 64px;
|
|
78
|
+
--hc-control-height-xs: 32px;
|
|
79
|
+
--hc-control-height-chip: 36px;
|
|
80
|
+
--hc-control-height-sm: 40px;
|
|
81
|
+
--hc-control-height-md: 44px;
|
|
82
|
+
--hc-control-height-lg: 52px;
|
|
83
|
+
--hc-radius-xs: 8px;
|
|
84
|
+
--hc-radius-sm: 12px;
|
|
85
|
+
--hc-radius-md: 16px;
|
|
86
|
+
--hc-radius-lg: 20px;
|
|
87
|
+
--hc-radius-xl: 24px;
|
|
88
|
+
--hc-radius-sheet: 28px;
|
|
89
|
+
--hc-radius-full: 9999px;
|
|
90
|
+
--hc-shadow-outline: 0 0 0 1px var(--hc-color-border);
|
|
91
|
+
--hc-shadow-soft: 0 0 0 1px var(--hc-color-border), 0 1px 2px rgba(20, 20, 19, 0.04);
|
|
92
|
+
--hc-shadow-card: 0 0 0 1px var(--hc-color-border), 0 1px 3px rgba(20, 20, 19, 0.04);
|
|
93
|
+
--hc-shadow-modal: 0 0 0 1px var(--hc-color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26);
|
|
94
|
+
--hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
|
|
95
|
+
--hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
|
|
96
|
+
--hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
|
|
97
|
+
--hc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
98
|
+
--hc-ease-pop: cubic-bezier(0.32, 1.25, 0.6, 1);
|
|
99
|
+
--hc-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
100
|
+
--hc-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
101
|
+
--hc-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
|
|
102
|
+
--hc-ease-bounce: cubic-bezier(0.3, 0, 0, 1.25);
|
|
103
|
+
--hc-ease-linear: linear;
|
|
104
|
+
--hc-dur-short: 120ms;
|
|
105
|
+
--hc-dur-medium: 240ms;
|
|
106
|
+
--hc-dur-large: 380ms;
|
|
107
|
+
--hc-dur-xlarge: 480ms;
|
|
108
|
+
--hc-transition-fast: 140ms cubic-bezier(0.2, 0, 0, 1);
|
|
109
|
+
--hc-transition-base: 200ms cubic-bezier(0.2, 0, 0, 1);
|
|
110
|
+
--hc-transition-slow: 300ms cubic-bezier(0.2, 0, 0, 1);
|
|
111
|
+
--hc-z-tabs: 10;
|
|
112
|
+
--hc-z-modal: 50;
|
|
113
|
+
--hc-z-sticky: 9;
|
|
114
|
+
--hc-z-header: 19;
|
|
115
|
+
--hc-z-drag: 40;
|
|
116
|
+
--hc-z-tooltip: 60;
|
|
117
|
+
--hc-z-toast: 70;
|
|
118
|
+
--hc-z-loading: 80;
|
|
119
|
+
--hc-color-marvel: #ec1d24;
|
|
120
|
+
--hc-color-dc: #0476f2;
|
|
121
|
+
--hc-color-teamup: #2bb3c0;
|
|
122
|
+
--hc-player-accent-1: #1b9a94;
|
|
123
|
+
--hc-player-accent-2: #c44572;
|
|
124
|
+
--hc-player-accent-3: #7167d9;
|
|
125
|
+
--hc-player-accent-4: #a8782a;
|
|
126
|
+
--hc-gradient-foil: linear-gradient(125deg, #ff5f6d, #ffc371, #47e0a0, #5b8cff, #c86dd7, #ff5f6d);
|
|
127
|
+
--hc-power-black: #000000;
|
|
128
|
+
--hc-power-red: #ec2e2c;
|
|
129
|
+
--hc-power-light-green: #9ee204;
|
|
130
|
+
--hc-power-light-blue: #70cff7;
|
|
131
|
+
--hc-power-yellow: #ffc000;
|
|
132
|
+
--hc-power-dark-blue: #0068b5;
|
|
133
|
+
--hc-power-green: #00af50;
|
|
134
|
+
--hc-power-orange: #ff8c00;
|
|
135
|
+
--hc-power-pink: #fed6f0;
|
|
136
|
+
--hc-power-purple: #9d57ad;
|
|
137
|
+
--hc-power-gray: #a5a5a5;
|
|
138
|
+
--hc-power-brown: #a0522d;
|
|
139
|
+
--hc-color-gold: #f5b700;
|
|
140
|
+
--hc-rond: 50;
|
|
141
|
+
--hc-color-bg-main: #faf9f4;
|
|
142
|
+
--hc-focus-ring: #141413;
|
|
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
|
+
}
|
|
145
|
+
[data-hc-ds][data-theme="dark"], .dark [data-hc-ds], .dark[data-hc-ds], [data-theme="dark"] [data-hc-ds] {
|
|
146
|
+
--hc-color-bg-page: #1b1a19;
|
|
147
|
+
--hc-color-bg-main: #262624;
|
|
148
|
+
--hc-color-bg-surface: #262624;
|
|
149
|
+
--hc-color-bg-elevated: #30302e;
|
|
150
|
+
--hc-color-bg-glass: rgba(48, 48, 46, 0.6);
|
|
151
|
+
--hc-color-bg-muted: rgba(250, 249, 245, 0.07);
|
|
152
|
+
--hc-color-bg-muted-2: rgba(250, 249, 245, 0.035);
|
|
153
|
+
--hc-color-bg-overlay: rgba(0, 0, 0, 0.55);
|
|
154
|
+
--hc-color-text-primary: #faf9f5;
|
|
155
|
+
--hc-color-text-secondary: #dedcd1;
|
|
156
|
+
--hc-color-text-muted: #a8a59b;
|
|
157
|
+
--hc-color-placeholder: #7a776f;
|
|
158
|
+
--hc-color-text-disabled: #45443f;
|
|
159
|
+
--hc-color-text-inverse: #1f1e1d;
|
|
160
|
+
--hc-color-outline: rgba(250, 249, 245, 0.14);
|
|
161
|
+
--hc-color-border: rgba(250, 249, 245, 0.09);
|
|
162
|
+
--hc-color-border-strong: rgba(250, 249, 245, 0.17);
|
|
163
|
+
--hc-color-accent: #faf9f5;
|
|
164
|
+
--hc-color-bg-contrast: #faf9f5;
|
|
165
|
+
--hc-color-text-on-contrast: #1f1e1d;
|
|
166
|
+
--hc-color-brand: #faf9f5;
|
|
167
|
+
--hc-color-brand-soft: rgba(250, 249, 245, 0.07);
|
|
168
|
+
--hc-color-bg-warning: #3a2b0c;
|
|
169
|
+
--hc-color-text-on-warning: #f5d38a;
|
|
170
|
+
--hc-color-bg-success: #1c2e1f;
|
|
171
|
+
--hc-color-text-on-success: #8fd69d;
|
|
172
|
+
--hc-color-bg-danger: #3a1a16;
|
|
173
|
+
--hc-color-text-on-danger: #ffb4a6;
|
|
174
|
+
--hc-focus-ring: #faf9f5;
|
|
175
|
+
--hc-shadow-outline: 0 0 0 1px var(--hc-color-border-strong);
|
|
176
|
+
--hc-shadow-soft: 0 0 0 1px var(--hc-color-border-strong);
|
|
177
|
+
--hc-shadow-card: 0 0 0 1px var(--hc-color-border-strong);
|
|
178
|
+
--hc-shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--hc-color-border-strong);
|
|
179
|
+
--hc-shadow-modal: 0 0 0 1px var(--hc-color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
|
|
180
|
+
--hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
|
|
181
|
+
--hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
|
|
182
|
+
--hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
|
|
183
|
+
}
|
|
184
|
+
[data-hc-ds][data-theme="light"], .light [data-hc-ds], .light[data-hc-ds] {
|
|
185
|
+
--hc-color-bg-page: #efeee7;
|
|
186
|
+
--hc-color-bg-main: #faf9f4;
|
|
187
|
+
--hc-color-bg-surface: #fffefb;
|
|
188
|
+
--hc-color-bg-elevated: #fffefb;
|
|
189
|
+
--hc-color-bg-glass: rgba(250, 249, 245, 0.62);
|
|
190
|
+
--hc-color-bg-muted: rgba(31, 30, 29, 0.06);
|
|
191
|
+
--hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
|
|
192
|
+
--hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
|
|
193
|
+
--hc-color-text-primary: #141413;
|
|
194
|
+
--hc-color-text-secondary: #3d3d3a;
|
|
195
|
+
--hc-color-text-muted: #63625c;
|
|
196
|
+
--hc-color-placeholder: #8f8d85;
|
|
197
|
+
--hc-color-text-disabled: #c8c5bb;
|
|
198
|
+
--hc-color-text-inverse: #ffffff;
|
|
199
|
+
--hc-color-outline: rgba(31, 30, 29, 0.12);
|
|
200
|
+
--hc-color-border: rgba(31, 30, 29, 0.1);
|
|
201
|
+
--hc-color-border-strong: rgba(31, 30, 29, 0.18);
|
|
202
|
+
--hc-color-accent: #141413;
|
|
203
|
+
--hc-color-bg-contrast: #141413;
|
|
204
|
+
--hc-color-text-on-contrast: #faf9f5;
|
|
205
|
+
--hc-color-brand: #141413;
|
|
206
|
+
--hc-color-brand-soft: rgba(31, 30, 29, 0.055);
|
|
207
|
+
--hc-color-bg-warning: #fbefd2;
|
|
208
|
+
--hc-color-text-on-warning: #7a4100;
|
|
209
|
+
--hc-color-bg-success: #e4f2e4;
|
|
210
|
+
--hc-color-text-on-success: #1f6b2c;
|
|
211
|
+
--hc-color-bg-danger: #fbe9e5;
|
|
212
|
+
--hc-color-text-on-danger: #b42318;
|
|
213
|
+
--hc-focus-ring: #141413;
|
|
214
|
+
--hc-shadow-outline: 0 0 0 1px var(--hc-color-border);
|
|
215
|
+
--hc-shadow-soft: 0 0 0 1px var(--hc-color-border), 0 1px 2px rgba(20, 20, 19, 0.04);
|
|
216
|
+
--hc-shadow-card: 0 0 0 1px var(--hc-color-border), 0 1px 3px rgba(20, 20, 19, 0.04);
|
|
217
|
+
--hc-shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
|
|
218
|
+
--hc-shadow-modal: 0 0 0 1px var(--hc-color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26);
|
|
219
|
+
--hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
|
|
220
|
+
--hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
|
|
221
|
+
--hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
|
|
222
|
+
}
|
package/dist/tokens.json
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"common": {
|
|
4
|
+
"font-display": "'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
5
|
+
"font-body": "'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
6
|
+
"font-mono": "'Google Sans Code', ui-monospace, 'SF Mono', Menlo, monospace",
|
|
7
|
+
"rond": "50"
|
|
8
|
+
},
|
|
9
|
+
"themes": {
|
|
10
|
+
"light": {
|
|
11
|
+
"color-bg-page": "#efeee7",
|
|
12
|
+
"color-bg-main": "#faf9f4",
|
|
13
|
+
"color-bg-surface": "#fffefb",
|
|
14
|
+
"color-bg-elevated": "#fffefb",
|
|
15
|
+
"color-bg-glass": "rgba(250, 249, 245, 0.62)",
|
|
16
|
+
"color-bg-muted": "rgba(31, 30, 29, 0.06)",
|
|
17
|
+
"color-bg-muted-2": "rgba(31, 30, 29, 0.03)",
|
|
18
|
+
"color-bg-overlay": "rgba(20, 20, 19, 0.34)",
|
|
19
|
+
"color-text-primary": "#141413",
|
|
20
|
+
"color-text-secondary": "#3d3d3a",
|
|
21
|
+
"color-text-muted": "#63625c",
|
|
22
|
+
"color-placeholder": "#8f8d85",
|
|
23
|
+
"color-text-disabled": "#c8c5bb",
|
|
24
|
+
"color-text-inverse": "#ffffff",
|
|
25
|
+
"color-outline": "rgba(31, 30, 29, 0.12)",
|
|
26
|
+
"color-border": "rgba(31, 30, 29, 0.1)",
|
|
27
|
+
"color-border-strong": "rgba(31, 30, 29, 0.18)",
|
|
28
|
+
"color-accent": "#141413",
|
|
29
|
+
"color-bg-contrast": "#141413",
|
|
30
|
+
"color-text-on-contrast": "#faf9f5",
|
|
31
|
+
"color-brand": "#141413",
|
|
32
|
+
"color-brand-soft": "rgba(31, 30, 29, 0.055)",
|
|
33
|
+
"color-bg-warning": "#fbefd2",
|
|
34
|
+
"color-text-on-warning": "#7a4100",
|
|
35
|
+
"color-bg-success": "#e4f2e4",
|
|
36
|
+
"color-text-on-success": "#1f6b2c",
|
|
37
|
+
"color-bg-danger": "#fbe9e5",
|
|
38
|
+
"color-text-on-danger": "#b42318",
|
|
39
|
+
"focus-ring": "#141413",
|
|
40
|
+
"shadow-outline": "0 0 0 1px var(--color-border)",
|
|
41
|
+
"shadow-soft": "0 0 0 1px var(--color-border), 0 1px 2px rgba(20, 20, 19, 0.04)",
|
|
42
|
+
"shadow-card": "0 0 0 1px var(--color-border), 0 1px 3px rgba(20, 20, 19, 0.04)",
|
|
43
|
+
"shadow-knob": "0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06)",
|
|
44
|
+
"shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
|
|
45
|
+
"shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
|
|
46
|
+
"shadow-navigation": "0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12)",
|
|
47
|
+
"shadow-float": "0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2)"
|
|
48
|
+
},
|
|
49
|
+
"dark": {
|
|
50
|
+
"color-bg-page": "#1b1a19",
|
|
51
|
+
"color-bg-main": "#262624",
|
|
52
|
+
"color-bg-surface": "#262624",
|
|
53
|
+
"color-bg-elevated": "#30302e",
|
|
54
|
+
"color-bg-glass": "rgba(48, 48, 46, 0.6)",
|
|
55
|
+
"color-bg-muted": "rgba(250, 249, 245, 0.07)",
|
|
56
|
+
"color-bg-muted-2": "rgba(250, 249, 245, 0.035)",
|
|
57
|
+
"color-bg-overlay": "rgba(0, 0, 0, 0.55)",
|
|
58
|
+
"color-text-primary": "#faf9f5",
|
|
59
|
+
"color-text-secondary": "#dedcd1",
|
|
60
|
+
"color-text-muted": "#a8a59b",
|
|
61
|
+
"color-placeholder": "#7a776f",
|
|
62
|
+
"color-text-disabled": "#45443f",
|
|
63
|
+
"color-text-inverse": "#1f1e1d",
|
|
64
|
+
"color-outline": "rgba(250, 249, 245, 0.14)",
|
|
65
|
+
"color-border": "rgba(250, 249, 245, 0.09)",
|
|
66
|
+
"color-border-strong": "rgba(250, 249, 245, 0.17)",
|
|
67
|
+
"color-accent": "#faf9f5",
|
|
68
|
+
"color-bg-contrast": "#faf9f5",
|
|
69
|
+
"color-text-on-contrast": "#1f1e1d",
|
|
70
|
+
"color-brand": "#faf9f5",
|
|
71
|
+
"color-brand-soft": "rgba(250, 249, 245, 0.07)",
|
|
72
|
+
"color-bg-warning": "#3a2b0c",
|
|
73
|
+
"color-text-on-warning": "#f5d38a",
|
|
74
|
+
"color-bg-success": "#1c2e1f",
|
|
75
|
+
"color-text-on-success": "#8fd69d",
|
|
76
|
+
"color-bg-danger": "#3a1a16",
|
|
77
|
+
"color-text-on-danger": "#ffb4a6",
|
|
78
|
+
"focus-ring": "#faf9f5",
|
|
79
|
+
"shadow-outline": "0 0 0 1px var(--color-border-strong)",
|
|
80
|
+
"shadow-soft": "0 0 0 1px var(--color-border-strong)",
|
|
81
|
+
"shadow-card": "0 0 0 1px var(--color-border-strong)",
|
|
82
|
+
"shadow-knob": "0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-border-strong)",
|
|
83
|
+
"shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
|
|
84
|
+
"shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
|
|
85
|
+
"shadow-navigation": "0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28)",
|
|
86
|
+
"shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"sass": {
|
|
90
|
+
"color-bg-page": "var(--color-bg-page)",
|
|
91
|
+
"color-bg-surface": "var(--color-bg-surface)",
|
|
92
|
+
"color-bg-elevated": "var(--color-bg-elevated)",
|
|
93
|
+
"color-bg-glass": "var(--color-bg-glass)",
|
|
94
|
+
"color-bg-muted": "var(--color-bg-muted)",
|
|
95
|
+
"color-bg-muted-2": "var(--color-bg-muted-2)",
|
|
96
|
+
"color-bg-overlay": "var(--color-bg-overlay)",
|
|
97
|
+
"color-text-primary": "var(--color-text-primary)",
|
|
98
|
+
"color-text-secondary": "var(--color-text-secondary)",
|
|
99
|
+
"color-text-muted": "var(--color-text-muted)",
|
|
100
|
+
"color-placeholder": "var(--color-placeholder)",
|
|
101
|
+
"color-text-disabled": "var(--color-text-disabled)",
|
|
102
|
+
"color-text-inverse": "var(--color-text-inverse)",
|
|
103
|
+
"color-outline": "var(--color-outline)",
|
|
104
|
+
"color-border": "var(--color-border)",
|
|
105
|
+
"color-border-strong": "var(--color-border-strong)",
|
|
106
|
+
"color-accent": "var(--color-accent)",
|
|
107
|
+
"color-bg-contrast": "var(--color-bg-contrast)",
|
|
108
|
+
"color-text-on-contrast": "var(--color-text-on-contrast)",
|
|
109
|
+
"color-brand": "var(--color-brand)",
|
|
110
|
+
"color-brand-soft": "var(--color-brand-soft)",
|
|
111
|
+
"color-danger": "#e5383b",
|
|
112
|
+
"color-success": "#12a150",
|
|
113
|
+
"color-warning": "#f08c00",
|
|
114
|
+
"color-bg-warning": "var(--color-bg-warning)",
|
|
115
|
+
"color-text-on-warning": "var(--color-text-on-warning)",
|
|
116
|
+
"color-bg-success": "var(--color-bg-success)",
|
|
117
|
+
"color-text-on-success": "var(--color-text-on-success)",
|
|
118
|
+
"color-bg-danger": "var(--color-bg-danger)",
|
|
119
|
+
"color-text-on-danger": "var(--color-text-on-danger)",
|
|
120
|
+
"font-display": "var(--font-display)",
|
|
121
|
+
"font-body": "var(--font-body)",
|
|
122
|
+
"font-mono": "var(--font-mono)",
|
|
123
|
+
"font-italic": "var(--font-body)",
|
|
124
|
+
"font-size-2xs": "11px",
|
|
125
|
+
"font-size-xs": "12px",
|
|
126
|
+
"font-size-sm": "13px",
|
|
127
|
+
"font-size-md": "15px",
|
|
128
|
+
"font-size-base": "16px",
|
|
129
|
+
"font-size-lg": "17px",
|
|
130
|
+
"font-size-xl": "20px",
|
|
131
|
+
"font-size-2xl": "28px",
|
|
132
|
+
"font-size-3xl": "34px",
|
|
133
|
+
"line-height-2xs": "14px",
|
|
134
|
+
"line-height-xs": "16px",
|
|
135
|
+
"line-height-sm": "18px",
|
|
136
|
+
"line-height-md": "20px",
|
|
137
|
+
"line-height-base": "24px",
|
|
138
|
+
"line-height-lg": "24px",
|
|
139
|
+
"line-height-xl": "26px",
|
|
140
|
+
"line-height-2xl": "34px",
|
|
141
|
+
"line-height-3xl": "40px",
|
|
142
|
+
"font-weight-regular": "400",
|
|
143
|
+
"font-weight-medium": "500",
|
|
144
|
+
"font-weight-semibold": "600",
|
|
145
|
+
"font-weight-bold": "700",
|
|
146
|
+
"font-weight-control": "540",
|
|
147
|
+
"letter-spacing-tight": "-0.02em",
|
|
148
|
+
"letter-spacing-snug": "-0.01em",
|
|
149
|
+
"letter-spacing-wide": "0.02em",
|
|
150
|
+
"letter-spacing-wider": "0.06em",
|
|
151
|
+
"font-stretch-condensed": "92%",
|
|
152
|
+
"font-stretch-button": "96%",
|
|
153
|
+
"font-stretch-pressed": "90%",
|
|
154
|
+
"space-0": "0",
|
|
155
|
+
"space-1": "4px",
|
|
156
|
+
"space-2": "8px",
|
|
157
|
+
"space-3": "12px",
|
|
158
|
+
"space-4": "16px",
|
|
159
|
+
"space-5": "20px",
|
|
160
|
+
"space-6": "24px",
|
|
161
|
+
"space-7": "32px",
|
|
162
|
+
"space-8": "40px",
|
|
163
|
+
"space-9": "48px",
|
|
164
|
+
"space-10": "64px",
|
|
165
|
+
"control-height-xs": "32px",
|
|
166
|
+
"control-height-chip": "36px",
|
|
167
|
+
"control-height-sm": "40px",
|
|
168
|
+
"control-height-md": "44px",
|
|
169
|
+
"control-height-lg": "52px",
|
|
170
|
+
"radius-xs": "8px",
|
|
171
|
+
"radius-sm": "12px",
|
|
172
|
+
"radius-md": "16px",
|
|
173
|
+
"radius-lg": "20px",
|
|
174
|
+
"radius-xl": "24px",
|
|
175
|
+
"radius-sheet": "28px",
|
|
176
|
+
"radius-full": "9999px",
|
|
177
|
+
"shadow-outline": "var(--shadow-outline)",
|
|
178
|
+
"shadow-soft": "var(--shadow-soft)",
|
|
179
|
+
"shadow-card": "var(--shadow-card)",
|
|
180
|
+
"shadow-modal": "var(--shadow-modal)",
|
|
181
|
+
"shadow-float": "var(--shadow-float)",
|
|
182
|
+
"shadow-navigation": "var(--shadow-navigation)",
|
|
183
|
+
"shadow-main": "var(--shadow-main)",
|
|
184
|
+
"ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
|
|
185
|
+
"ease-pop": "cubic-bezier(0.32, 1.25, 0.6, 1)",
|
|
186
|
+
"ease-emphasized-decel": "cubic-bezier(0.05, 0.7, 0.1, 1)",
|
|
187
|
+
"ease-emphasized-accel": "cubic-bezier(0.3, 0, 0.8, 0.15)",
|
|
188
|
+
"ease-sheet": "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
189
|
+
"ease-bounce": "cubic-bezier(0.3, 0, 0, 1.25)",
|
|
190
|
+
"ease-linear": "linear",
|
|
191
|
+
"dur-short": "120ms",
|
|
192
|
+
"dur-medium": "240ms",
|
|
193
|
+
"dur-large": "380ms",
|
|
194
|
+
"dur-xlarge": "480ms",
|
|
195
|
+
"transition-fast": "140ms $ease-standard",
|
|
196
|
+
"transition-base": "200ms $ease-standard",
|
|
197
|
+
"transition-slow": "300ms $ease-standard",
|
|
198
|
+
"z-tabs": "10",
|
|
199
|
+
"z-modal": "50",
|
|
200
|
+
"z-sticky": "9",
|
|
201
|
+
"z-header": "19",
|
|
202
|
+
"z-drag": "40",
|
|
203
|
+
"z-tooltip": "60",
|
|
204
|
+
"z-toast": "70",
|
|
205
|
+
"z-loading": "80"
|
|
206
|
+
},
|
|
207
|
+
"heroclix": {
|
|
208
|
+
"color-marvel": "#ec1d24",
|
|
209
|
+
"color-dc": "#0476f2",
|
|
210
|
+
"color-teamup": "#2bb3c0",
|
|
211
|
+
"player-accent-1": "#1b9a94",
|
|
212
|
+
"player-accent-2": "#c44572",
|
|
213
|
+
"player-accent-3": "#7167d9",
|
|
214
|
+
"player-accent-4": "#a8782a",
|
|
215
|
+
"gradient-foil": "linear-gradient(125deg, #ff5f6d, #ffc371, #47e0a0, #5b8cff, #c86dd7, #ff5f6d)",
|
|
216
|
+
"power-black": "#000000",
|
|
217
|
+
"power-red": "#ec2e2c",
|
|
218
|
+
"power-light-green": "#9ee204",
|
|
219
|
+
"power-light-blue": "#70cff7",
|
|
220
|
+
"power-yellow": "#ffc000",
|
|
221
|
+
"power-dark-blue": "#0068b5",
|
|
222
|
+
"power-green": "#00af50",
|
|
223
|
+
"power-orange": "#ff8c00",
|
|
224
|
+
"power-pink": "#fed6f0",
|
|
225
|
+
"power-purple": "#9d57ad",
|
|
226
|
+
"power-gray": "#a5a5a5",
|
|
227
|
+
"power-brown": "#a0522d",
|
|
228
|
+
"color-gold": "#f5b700"
|
|
229
|
+
}
|
|
230
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ntmats/hc-tokens",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"description": "
|
|
6
|
-
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Shared HCUI/Arena design tokens: CSS custom properties, Sass, Tailwind 3 preset and ESM values.",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist",
|
|
9
|
+
"README.md",
|
|
10
|
+
"LICENSE"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./css": "./dist/tokens.css",
|
|
18
|
+
"./scss": "./dist/_tokens.scss",
|
|
19
|
+
"./tailwind": {
|
|
20
|
+
"types": "./dist/tailwind.d.ts",
|
|
21
|
+
"import": "./dist/tailwind.js"
|
|
22
|
+
},
|
|
23
|
+
"./hcui/theme": "./dist/_hcui-theme.scss",
|
|
24
|
+
"./hcui/tokens": "./dist/_hcui-tokens.scss",
|
|
25
|
+
"./tokens.json": "./dist/tokens.json"
|
|
26
|
+
},
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"**/*.css",
|
|
29
|
+
"**/*.scss"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"prepack": "node ../../scripts/build.mjs"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"registry": "https://registry.npmjs.org/",
|
|
36
|
+
"access": "public"
|
|
37
|
+
}
|
|
38
|
+
}
|