@ntmats/hc-tokens 0.3.0 → 0.5.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 (8) hide show
  1. package/dist/_hcui-theme.scss +24 -0
  2. package/dist/_hcui-tokens.scss +27 -0
  3. package/dist/_tokens.scss +27 -0
  4. package/dist/index.js +54 -3
  5. package/dist/tailwind.js +30 -1
  6. package/dist/tokens.css +86 -0
  7. package/dist/tokens.json +54 -3
  8. package/package.json +1 -1
package/dist/_hcui-theme.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  --color-bg-muted: rgba(31, 30, 29, 0.06);
14
14
  --color-bg-muted-2: rgba(31, 30, 29, 0.03);
15
15
  --color-bg-overlay: rgba(20, 20, 19, 0.34);
16
+ --color-bg-scrim: rgba(0, 0, 0, 0.28);
16
17
  --color-text-primary: #141413;
17
18
  --color-text-secondary: #3d3d3a;
18
19
  --color-text-muted: #63625c;
@@ -42,6 +43,17 @@
42
43
  --shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
43
44
  --shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
44
45
  --shadow-float: 0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
46
+ --color-card-paper: var(--color-bg-main);
47
+ --color-card-ink: #000000;
48
+ --color-card-ink-soft: #1a1a1a;
49
+ --color-card-shine: rgba(255, 255, 255, 0.45);
50
+ --color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
51
+ --filter-card-background: sepia(0.05);
52
+ --blend-card-shine: overlay;
53
+ --opacity-card-grain: 0.14;
54
+ --opacity-card-grain-flat: 0.05;
55
+ --blend-card-grain: multiply;
56
+ --filter-map-environment-icon: none;
45
57
  --shadow-fab: 0 0 0 1px rgba(31, 30, 29, 0.07), 0 10px 30px -8px rgba(20, 20, 19, 0.22);
46
58
  --dock-track: rgba(31, 30, 29, 0.07);
47
59
  --shadow-navigation-mobile: 0 1px 3px rgba(20, 20, 19, 0.07), 0 5px 18px -6px rgba(20, 20, 19, 0.20);
@@ -56,6 +68,7 @@
56
68
  --color-bg-muted: rgba(250, 249, 245, 0.07);
57
69
  --color-bg-muted-2: rgba(250, 249, 245, 0.035);
58
70
  --color-bg-overlay: rgba(0, 0, 0, 0.55);
71
+ --color-bg-scrim: rgba(0, 0, 0, 0.28);
59
72
  --color-text-primary: #faf9f5;
60
73
  --color-text-secondary: #dedcd1;
61
74
  --color-text-muted: #a8a59b;
@@ -85,6 +98,17 @@
85
98
  --shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
86
99
  --shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
87
100
  --shadow-float: 0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
101
+ --color-card-paper: var(--color-bg-elevated);
102
+ --color-card-ink: #f4f4f4;
103
+ --color-card-ink-soft: #e2e2e2;
104
+ --color-card-shine: rgba(255, 255, 255, 0.16);
105
+ --color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
106
+ --filter-card-background: brightness(0.19) sepia(0.08);
107
+ --blend-card-shine: screen;
108
+ --opacity-card-grain: 0.5;
109
+ --opacity-card-grain-flat: 0.07;
110
+ --blend-card-grain: soft-light;
111
+ --filter-map-environment-icon: invert(1);
88
112
  --shadow-fab: 0 0 0 1px var(--color-border-strong), 0 10px 30px -8px rgba(0, 0, 0, 0.7);
89
113
  --dock-track: rgba(0, 0, 0, 0.28);
90
114
  --shadow-navigation-mobile: 0 2px 5px rgba(0, 0, 0, 0.22), 0 6px 20px -6px rgba(0, 0, 0, 0.42);
package/dist/_hcui-tokens.scss CHANGED
@@ -6,6 +6,7 @@ $color-bg-glass: var(--color-bg-glass);
6
6
  $color-bg-muted: var(--color-bg-muted);
7
7
  $color-bg-muted-2: var(--color-bg-muted-2);
8
8
  $color-bg-overlay: var(--color-bg-overlay);
9
+ $color-bg-scrim: var(--color-bg-scrim);
9
10
  $color-text-primary: var(--color-text-primary);
10
11
  $color-text-secondary: var(--color-text-secondary);
11
12
  $color-text-muted: var(--color-text-muted);
@@ -86,6 +87,7 @@ $radius-lg: 20px;
86
87
  $radius-xl: 24px;
87
88
  $radius-sheet: 28px;
88
89
  $radius-full: 9999px;
90
+ $focus-ring-width: 2px;
89
91
  $shadow-outline: var(--shadow-outline);
90
92
  $shadow-soft: var(--shadow-soft);
91
93
  $shadow-card: var(--shadow-card);
@@ -140,3 +142,28 @@ $power-purple: #9d57ad;
140
142
  $power-gray: #a5a5a5;
141
143
  $power-brown: #a0522d;
142
144
  $color-gold: #f5b700;
145
+ $color-dial-paper: #ffffff;
146
+ $color-dial-outline: #161616;
147
+ $color-dial-outline-printed: #000000;
148
+ $color-dial-number-printed: $power-red;
149
+ $color-dial-legend-printed: #ffffff;
150
+ $color-symbol-outline: rgba(0, 0, 0, 0.12);
151
+ $color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
152
+ $color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
153
+ $color-symbol-light: #ffffff;
154
+ $filter-symbol-light: invert(100%);
155
+ $filter-symbol-muted: invert(56%);
156
+ $color-card-print-black: #000000;
157
+ $color-card-print-white: #ffffff;
158
+ $color-card-team-up: #0060ff80;
159
+ $color-card-token-placeholder: #d3d3d3;
160
+ $color-card-edge: rgba(0, 0, 0, 0.8);
161
+ $color-card-lift: rgba(0, 0, 0, 0.35);
162
+ $color-card-terrain-panel: #f2f2f2;
163
+ $color-card-terrain-panel-groove: #d6d6d6;
164
+ $color-map-board: #ffffff;
165
+ $color-map-selection: rgba(0, 0, 0, 0.16);
166
+ $color-map-selection-edge: rgba(0, 0, 0, 0.55);
167
+ $color-map-selection-line: rgba(0, 0, 0, 0.5);
168
+ $color-map-swatch-text: #1a1a1a;
169
+ $color-map-swatch-text-light: #ffffff;
package/dist/_tokens.scss CHANGED
@@ -6,6 +6,7 @@ $color-bg-glass: var(--hc-color-bg-glass);
6
6
  $color-bg-muted: var(--hc-color-bg-muted);
7
7
  $color-bg-muted-2: var(--hc-color-bg-muted-2);
8
8
  $color-bg-overlay: var(--hc-color-bg-overlay);
9
+ $color-bg-scrim: var(--hc-color-bg-scrim);
9
10
  $color-text-primary: var(--hc-color-text-primary);
10
11
  $color-text-secondary: var(--hc-color-text-secondary);
11
12
  $color-text-muted: var(--hc-color-text-muted);
@@ -86,6 +87,7 @@ $radius-lg: 20px;
86
87
  $radius-xl: 24px;
87
88
  $radius-sheet: 28px;
88
89
  $radius-full: 9999px;
90
+ $focus-ring-width: 2px;
89
91
  $shadow-outline: var(--hc-shadow-outline);
90
92
  $shadow-soft: var(--hc-shadow-soft);
91
93
  $shadow-card: var(--hc-shadow-card);
@@ -136,3 +138,28 @@ $power-purple: #9d57ad;
136
138
  $power-gray: #a5a5a5;
137
139
  $power-brown: #a0522d;
138
140
  $color-gold: #f5b700;
141
+ $color-dial-paper: #ffffff;
142
+ $color-dial-outline: #161616;
143
+ $color-dial-outline-printed: #000000;
144
+ $color-dial-number-printed: $power-red;
145
+ $color-dial-legend-printed: #ffffff;
146
+ $color-symbol-outline: rgba(0, 0, 0, 0.12);
147
+ $color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
148
+ $color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
149
+ $color-symbol-light: #ffffff;
150
+ $filter-symbol-light: invert(100%);
151
+ $filter-symbol-muted: invert(56%);
152
+ $color-card-print-black: #000000;
153
+ $color-card-print-white: #ffffff;
154
+ $color-card-team-up: #0060ff80;
155
+ $color-card-token-placeholder: #d3d3d3;
156
+ $color-card-edge: rgba(0, 0, 0, 0.8);
157
+ $color-card-lift: rgba(0, 0, 0, 0.35);
158
+ $color-card-terrain-panel: #f2f2f2;
159
+ $color-card-terrain-panel-groove: #d6d6d6;
160
+ $color-map-board: #ffffff;
161
+ $color-map-selection: rgba(0, 0, 0, 0.16);
162
+ $color-map-selection-edge: rgba(0, 0, 0, 0.55);
163
+ $color-map-selection-line: rgba(0, 0, 0, 0.5);
164
+ $color-map-swatch-text: #1a1a1a;
165
+ $color-map-swatch-text-light: #ffffff;
package/dist/index.js CHANGED
@@ -17,6 +17,7 @@ export const tokens = {
17
17
  "color-bg-muted": "rgba(31, 30, 29, 0.06)",
18
18
  "color-bg-muted-2": "rgba(31, 30, 29, 0.03)",
19
19
  "color-bg-overlay": "rgba(20, 20, 19, 0.34)",
20
+ "color-bg-scrim": "rgba(0, 0, 0, 0.28)",
20
21
  "color-text-primary": "#141413",
21
22
  "color-text-secondary": "#3d3d3a",
22
23
  "color-text-muted": "#63625c",
@@ -45,7 +46,18 @@ export const tokens = {
45
46
  "shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
46
47
  "shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
47
48
  "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
+ "shadow-float": "0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2)",
50
+ "color-card-paper": "var(--color-bg-main)",
51
+ "color-card-ink": "#000000",
52
+ "color-card-ink-soft": "#1a1a1a",
53
+ "color-card-shine": "rgba(255, 255, 255, 0.45)",
54
+ "color-card-focus-backdrop": "rgba(20, 20, 19, 0.55)",
55
+ "filter-card-background": "sepia(0.05)",
56
+ "blend-card-shine": "overlay",
57
+ "opacity-card-grain": "0.14",
58
+ "opacity-card-grain-flat": "0.05",
59
+ "blend-card-grain": "multiply",
60
+ "filter-map-environment-icon": "none"
49
61
  },
50
62
  "dark": {
51
63
  "color-bg-page": "#1b1a19",
@@ -56,6 +68,7 @@ export const tokens = {
56
68
  "color-bg-muted": "rgba(250, 249, 245, 0.07)",
57
69
  "color-bg-muted-2": "rgba(250, 249, 245, 0.035)",
58
70
  "color-bg-overlay": "rgba(0, 0, 0, 0.55)",
71
+ "color-bg-scrim": "rgba(0, 0, 0, 0.28)",
59
72
  "color-text-primary": "#faf9f5",
60
73
  "color-text-secondary": "#dedcd1",
61
74
  "color-text-muted": "#a8a59b",
@@ -84,7 +97,18 @@ export const tokens = {
84
97
  "shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
85
98
  "shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
86
99
  "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)"
100
+ "shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)",
101
+ "color-card-paper": "var(--color-bg-elevated)",
102
+ "color-card-ink": "#f4f4f4",
103
+ "color-card-ink-soft": "#e2e2e2",
104
+ "color-card-shine": "rgba(255, 255, 255, 0.16)",
105
+ "color-card-focus-backdrop": "rgba(0, 0, 0, 0.6)",
106
+ "filter-card-background": "brightness(0.19) sepia(0.08)",
107
+ "blend-card-shine": "screen",
108
+ "opacity-card-grain": "0.5",
109
+ "opacity-card-grain-flat": "0.07",
110
+ "blend-card-grain": "soft-light",
111
+ "filter-map-environment-icon": "invert(1)"
88
112
  }
89
113
  },
90
114
  "sass": {
@@ -95,6 +119,7 @@ export const tokens = {
95
119
  "color-bg-muted": "var(--color-bg-muted)",
96
120
  "color-bg-muted-2": "var(--color-bg-muted-2)",
97
121
  "color-bg-overlay": "var(--color-bg-overlay)",
122
+ "color-bg-scrim": "var(--color-bg-scrim)",
98
123
  "color-text-primary": "var(--color-text-primary)",
99
124
  "color-text-secondary": "var(--color-text-secondary)",
100
125
  "color-text-muted": "var(--color-text-muted)",
@@ -175,6 +200,7 @@ export const tokens = {
175
200
  "radius-xl": "24px",
176
201
  "radius-sheet": "28px",
177
202
  "radius-full": "9999px",
203
+ "focus-ring-width": "2px",
178
204
  "shadow-outline": "var(--shadow-outline)",
179
205
  "shadow-soft": "var(--shadow-soft)",
180
206
  "shadow-card": "var(--shadow-card)",
@@ -226,6 +252,31 @@ export const tokens = {
226
252
  "power-purple": "#9d57ad",
227
253
  "power-gray": "#a5a5a5",
228
254
  "power-brown": "#a0522d",
229
- "color-gold": "#f5b700"
255
+ "color-gold": "#f5b700",
256
+ "color-dial-paper": "#ffffff",
257
+ "color-dial-outline": "#161616",
258
+ "color-dial-outline-printed": "#000000",
259
+ "color-dial-number-printed": "$power-red",
260
+ "color-dial-legend-printed": "#ffffff",
261
+ "color-symbol-outline": "rgba(0, 0, 0, 0.12)",
262
+ "color-symbol-outline-soft": "rgba(0, 0, 0, 0.15)",
263
+ "color-symbol-outline-strong": "rgba(0, 0, 0, 0.85)",
264
+ "color-symbol-light": "#ffffff",
265
+ "filter-symbol-light": "invert(100%)",
266
+ "filter-symbol-muted": "invert(56%)",
267
+ "color-card-print-black": "#000000",
268
+ "color-card-print-white": "#ffffff",
269
+ "color-card-team-up": "#0060ff80",
270
+ "color-card-token-placeholder": "#d3d3d3",
271
+ "color-card-edge": "rgba(0, 0, 0, 0.8)",
272
+ "color-card-lift": "rgba(0, 0, 0, 0.35)",
273
+ "color-card-terrain-panel": "#f2f2f2",
274
+ "color-card-terrain-panel-groove": "#d6d6d6",
275
+ "color-map-board": "#ffffff",
276
+ "color-map-selection": "rgba(0, 0, 0, 0.16)",
277
+ "color-map-selection-edge": "rgba(0, 0, 0, 0.55)",
278
+ "color-map-selection-line": "rgba(0, 0, 0, 0.5)",
279
+ "color-map-swatch-text": "#1a1a1a",
280
+ "color-map-swatch-text-light": "#ffffff"
230
281
  }
231
282
  };
package/dist/tailwind.js CHANGED
@@ -10,6 +10,7 @@ export default {
10
10
  "hc-bg-muted": "var(--hc-color-bg-muted)",
11
11
  "hc-bg-muted-2": "var(--hc-color-bg-muted-2)",
12
12
  "hc-bg-overlay": "var(--hc-color-bg-overlay)",
13
+ "hc-bg-scrim": "var(--hc-color-bg-scrim)",
13
14
  "hc-text-primary": "var(--hc-color-text-primary)",
14
15
  "hc-text-secondary": "var(--hc-color-text-secondary)",
15
16
  "hc-text-muted": "var(--hc-color-text-muted)",
@@ -53,7 +54,35 @@ export default {
53
54
  "hc-power-gray": "var(--hc-power-gray)",
54
55
  "hc-power-brown": "var(--hc-power-brown)",
55
56
  "hc-gold": "var(--hc-color-gold)",
56
- "hc-bg-main": "var(--hc-color-bg-main)"
57
+ "hc-dial-paper": "var(--hc-color-dial-paper)",
58
+ "hc-dial-outline": "var(--hc-color-dial-outline)",
59
+ "hc-dial-outline-printed": "var(--hc-color-dial-outline-printed)",
60
+ "hc-dial-number-printed": "var(--hc-color-dial-number-printed)",
61
+ "hc-dial-legend-printed": "var(--hc-color-dial-legend-printed)",
62
+ "hc-symbol-outline": "var(--hc-color-symbol-outline)",
63
+ "hc-symbol-outline-soft": "var(--hc-color-symbol-outline-soft)",
64
+ "hc-symbol-outline-strong": "var(--hc-color-symbol-outline-strong)",
65
+ "hc-symbol-light": "var(--hc-color-symbol-light)",
66
+ "hc-card-print-black": "var(--hc-color-card-print-black)",
67
+ "hc-card-print-white": "var(--hc-color-card-print-white)",
68
+ "hc-card-team-up": "var(--hc-color-card-team-up)",
69
+ "hc-card-token-placeholder": "var(--hc-color-card-token-placeholder)",
70
+ "hc-card-edge": "var(--hc-color-card-edge)",
71
+ "hc-card-lift": "var(--hc-color-card-lift)",
72
+ "hc-card-terrain-panel": "var(--hc-color-card-terrain-panel)",
73
+ "hc-card-terrain-panel-groove": "var(--hc-color-card-terrain-panel-groove)",
74
+ "hc-map-board": "var(--hc-color-map-board)",
75
+ "hc-map-selection": "var(--hc-color-map-selection)",
76
+ "hc-map-selection-edge": "var(--hc-color-map-selection-edge)",
77
+ "hc-map-selection-line": "var(--hc-color-map-selection-line)",
78
+ "hc-map-swatch-text": "var(--hc-color-map-swatch-text)",
79
+ "hc-map-swatch-text-light": "var(--hc-color-map-swatch-text-light)",
80
+ "hc-bg-main": "var(--hc-color-bg-main)",
81
+ "hc-card-paper": "var(--hc-color-card-paper)",
82
+ "hc-card-ink": "var(--hc-color-card-ink)",
83
+ "hc-card-ink-soft": "var(--hc-color-card-ink-soft)",
84
+ "hc-card-shine": "var(--hc-color-card-shine)",
85
+ "hc-card-focus-backdrop": "var(--hc-color-card-focus-backdrop)"
57
86
  },
58
87
  "borderRadius": {
59
88
  "hc-xs": "var(--hc-radius-xs)",
package/dist/tokens.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --hc-color-bg-muted: rgba(31, 30, 29, 0.06);
8
8
  --hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
9
9
  --hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
10
+ --hc-color-bg-scrim: rgba(0, 0, 0, 0.28);
10
11
  --hc-color-text-primary: #141413;
11
12
  --hc-color-text-secondary: #3d3d3a;
12
13
  --hc-color-text-muted: #63625c;
@@ -87,6 +88,7 @@
87
88
  --hc-radius-xl: 24px;
88
89
  --hc-radius-sheet: 28px;
89
90
  --hc-radius-full: 9999px;
91
+ --hc-focus-ring-width: 2px;
90
92
  --hc-shadow-outline: 0 0 0 1px var(--hc-color-border);
91
93
  --hc-shadow-soft: 0 0 0 1px var(--hc-color-border), 0 1px 2px rgba(20, 20, 19, 0.04);
92
94
  --hc-shadow-card: 0 0 0 1px var(--hc-color-border), 0 1px 3px rgba(20, 20, 19, 0.04);
@@ -137,10 +139,46 @@
137
139
  --hc-power-gray: #a5a5a5;
138
140
  --hc-power-brown: #a0522d;
139
141
  --hc-color-gold: #f5b700;
142
+ --hc-color-dial-paper: #ffffff;
143
+ --hc-color-dial-outline: #161616;
144
+ --hc-color-dial-outline-printed: #000000;
145
+ --hc-color-dial-number-printed: #ec2e2c;
146
+ --hc-color-dial-legend-printed: #ffffff;
147
+ --hc-color-symbol-outline: rgba(0, 0, 0, 0.12);
148
+ --hc-color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
149
+ --hc-color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
150
+ --hc-color-symbol-light: #ffffff;
151
+ --hc-filter-symbol-light: invert(100%);
152
+ --hc-filter-symbol-muted: invert(56%);
153
+ --hc-color-card-print-black: #000000;
154
+ --hc-color-card-print-white: #ffffff;
155
+ --hc-color-card-team-up: #0060ff80;
156
+ --hc-color-card-token-placeholder: #d3d3d3;
157
+ --hc-color-card-edge: rgba(0, 0, 0, 0.8);
158
+ --hc-color-card-lift: rgba(0, 0, 0, 0.35);
159
+ --hc-color-card-terrain-panel: #f2f2f2;
160
+ --hc-color-card-terrain-panel-groove: #d6d6d6;
161
+ --hc-color-map-board: #ffffff;
162
+ --hc-color-map-selection: rgba(0, 0, 0, 0.16);
163
+ --hc-color-map-selection-edge: rgba(0, 0, 0, 0.55);
164
+ --hc-color-map-selection-line: rgba(0, 0, 0, 0.5);
165
+ --hc-color-map-swatch-text: #1a1a1a;
166
+ --hc-color-map-swatch-text-light: #ffffff;
140
167
  --hc-rond: 50;
141
168
  --hc-color-bg-main: #faf9f4;
142
169
  --hc-focus-ring: #141413;
143
170
  --hc-shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
171
+ --hc-color-card-paper: var(--hc-color-bg-main);
172
+ --hc-color-card-ink: #000000;
173
+ --hc-color-card-ink-soft: #1a1a1a;
174
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
175
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
176
+ --hc-filter-card-background: sepia(0.05);
177
+ --hc-blend-card-shine: overlay;
178
+ --hc-opacity-card-grain: 0.14;
179
+ --hc-opacity-card-grain-flat: 0.05;
180
+ --hc-blend-card-grain: multiply;
181
+ --hc-filter-map-environment-icon: none;
144
182
  color-scheme: light;
145
183
  }
146
184
  .dark [data-hc-ds], [data-theme="dark"] [data-hc-ds] {
@@ -152,6 +190,7 @@
152
190
  --hc-color-bg-muted: rgba(250, 249, 245, 0.07);
153
191
  --hc-color-bg-muted-2: rgba(250, 249, 245, 0.035);
154
192
  --hc-color-bg-overlay: rgba(0, 0, 0, 0.55);
193
+ --hc-color-bg-scrim: rgba(0, 0, 0, 0.28);
155
194
  --hc-color-text-primary: #faf9f5;
156
195
  --hc-color-text-secondary: #dedcd1;
157
196
  --hc-color-text-muted: #a8a59b;
@@ -181,6 +220,17 @@
181
220
  --hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
182
221
  --hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
183
222
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
223
+ --hc-color-card-paper: var(--hc-color-bg-elevated);
224
+ --hc-color-card-ink: #f4f4f4;
225
+ --hc-color-card-ink-soft: #e2e2e2;
226
+ --hc-color-card-shine: rgba(255, 255, 255, 0.16);
227
+ --hc-color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
228
+ --hc-filter-card-background: brightness(0.19) sepia(0.08);
229
+ --hc-blend-card-shine: screen;
230
+ --hc-opacity-card-grain: 0.5;
231
+ --hc-opacity-card-grain-flat: 0.07;
232
+ --hc-blend-card-grain: soft-light;
233
+ --hc-filter-map-environment-icon: invert(1);
184
234
  color-scheme: dark;
185
235
  }
186
236
  .light [data-hc-ds], [data-theme="light"] [data-hc-ds] {
@@ -192,6 +242,7 @@
192
242
  --hc-color-bg-muted: rgba(31, 30, 29, 0.06);
193
243
  --hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
194
244
  --hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
245
+ --hc-color-bg-scrim: rgba(0, 0, 0, 0.28);
195
246
  --hc-color-text-primary: #141413;
196
247
  --hc-color-text-secondary: #3d3d3a;
197
248
  --hc-color-text-muted: #63625c;
@@ -221,6 +272,17 @@
221
272
  --hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
222
273
  --hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
223
274
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
275
+ --hc-color-card-paper: var(--hc-color-bg-main);
276
+ --hc-color-card-ink: #000000;
277
+ --hc-color-card-ink-soft: #1a1a1a;
278
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
279
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
280
+ --hc-filter-card-background: sepia(0.05);
281
+ --hc-blend-card-shine: overlay;
282
+ --hc-opacity-card-grain: 0.14;
283
+ --hc-opacity-card-grain-flat: 0.05;
284
+ --hc-blend-card-grain: multiply;
285
+ --hc-filter-map-environment-icon: none;
224
286
  color-scheme: light;
225
287
  }
226
288
  [data-hc-ds][data-theme="dark"], .dark[data-hc-ds] {
@@ -232,6 +294,7 @@
232
294
  --hc-color-bg-muted: rgba(250, 249, 245, 0.07);
233
295
  --hc-color-bg-muted-2: rgba(250, 249, 245, 0.035);
234
296
  --hc-color-bg-overlay: rgba(0, 0, 0, 0.55);
297
+ --hc-color-bg-scrim: rgba(0, 0, 0, 0.28);
235
298
  --hc-color-text-primary: #faf9f5;
236
299
  --hc-color-text-secondary: #dedcd1;
237
300
  --hc-color-text-muted: #a8a59b;
@@ -261,6 +324,17 @@
261
324
  --hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
262
325
  --hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
263
326
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
327
+ --hc-color-card-paper: var(--hc-color-bg-elevated);
328
+ --hc-color-card-ink: #f4f4f4;
329
+ --hc-color-card-ink-soft: #e2e2e2;
330
+ --hc-color-card-shine: rgba(255, 255, 255, 0.16);
331
+ --hc-color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
332
+ --hc-filter-card-background: brightness(0.19) sepia(0.08);
333
+ --hc-blend-card-shine: screen;
334
+ --hc-opacity-card-grain: 0.5;
335
+ --hc-opacity-card-grain-flat: 0.07;
336
+ --hc-blend-card-grain: soft-light;
337
+ --hc-filter-map-environment-icon: invert(1);
264
338
  color-scheme: dark;
265
339
  }
266
340
  [data-hc-ds][data-theme="light"], .light[data-hc-ds] {
@@ -272,6 +346,7 @@
272
346
  --hc-color-bg-muted: rgba(31, 30, 29, 0.06);
273
347
  --hc-color-bg-muted-2: rgba(31, 30, 29, 0.03);
274
348
  --hc-color-bg-overlay: rgba(20, 20, 19, 0.34);
349
+ --hc-color-bg-scrim: rgba(0, 0, 0, 0.28);
275
350
  --hc-color-text-primary: #141413;
276
351
  --hc-color-text-secondary: #3d3d3a;
277
352
  --hc-color-text-muted: #63625c;
@@ -301,5 +376,16 @@
301
376
  --hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
302
377
  --hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
303
378
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
379
+ --hc-color-card-paper: var(--hc-color-bg-main);
380
+ --hc-color-card-ink: #000000;
381
+ --hc-color-card-ink-soft: #1a1a1a;
382
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
383
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
384
+ --hc-filter-card-background: sepia(0.05);
385
+ --hc-blend-card-shine: overlay;
386
+ --hc-opacity-card-grain: 0.14;
387
+ --hc-opacity-card-grain-flat: 0.05;
388
+ --hc-blend-card-grain: multiply;
389
+ --hc-filter-map-environment-icon: none;
304
390
  color-scheme: light;
305
391
  }
package/dist/tokens.json CHANGED
@@ -16,6 +16,7 @@
16
16
  "color-bg-muted": "rgba(31, 30, 29, 0.06)",
17
17
  "color-bg-muted-2": "rgba(31, 30, 29, 0.03)",
18
18
  "color-bg-overlay": "rgba(20, 20, 19, 0.34)",
19
+ "color-bg-scrim": "rgba(0, 0, 0, 0.28)",
19
20
  "color-text-primary": "#141413",
20
21
  "color-text-secondary": "#3d3d3a",
21
22
  "color-text-muted": "#63625c",
@@ -44,7 +45,18 @@
44
45
  "shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
45
46
  "shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
46
47
  "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
+ "shadow-float": "0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2)",
49
+ "color-card-paper": "var(--color-bg-main)",
50
+ "color-card-ink": "#000000",
51
+ "color-card-ink-soft": "#1a1a1a",
52
+ "color-card-shine": "rgba(255, 255, 255, 0.45)",
53
+ "color-card-focus-backdrop": "rgba(20, 20, 19, 0.55)",
54
+ "filter-card-background": "sepia(0.05)",
55
+ "blend-card-shine": "overlay",
56
+ "opacity-card-grain": "0.14",
57
+ "opacity-card-grain-flat": "0.05",
58
+ "blend-card-grain": "multiply",
59
+ "filter-map-environment-icon": "none"
48
60
  },
49
61
  "dark": {
50
62
  "color-bg-page": "#1b1a19",
@@ -55,6 +67,7 @@
55
67
  "color-bg-muted": "rgba(250, 249, 245, 0.07)",
56
68
  "color-bg-muted-2": "rgba(250, 249, 245, 0.035)",
57
69
  "color-bg-overlay": "rgba(0, 0, 0, 0.55)",
70
+ "color-bg-scrim": "rgba(0, 0, 0, 0.28)",
58
71
  "color-text-primary": "#faf9f5",
59
72
  "color-text-secondary": "#dedcd1",
60
73
  "color-text-muted": "#a8a59b",
@@ -83,7 +96,18 @@
83
96
  "shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
84
97
  "shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
85
98
  "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)"
99
+ "shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)",
100
+ "color-card-paper": "var(--color-bg-elevated)",
101
+ "color-card-ink": "#f4f4f4",
102
+ "color-card-ink-soft": "#e2e2e2",
103
+ "color-card-shine": "rgba(255, 255, 255, 0.16)",
104
+ "color-card-focus-backdrop": "rgba(0, 0, 0, 0.6)",
105
+ "filter-card-background": "brightness(0.19) sepia(0.08)",
106
+ "blend-card-shine": "screen",
107
+ "opacity-card-grain": "0.5",
108
+ "opacity-card-grain-flat": "0.07",
109
+ "blend-card-grain": "soft-light",
110
+ "filter-map-environment-icon": "invert(1)"
87
111
  }
88
112
  },
89
113
  "sass": {
@@ -94,6 +118,7 @@
94
118
  "color-bg-muted": "var(--color-bg-muted)",
95
119
  "color-bg-muted-2": "var(--color-bg-muted-2)",
96
120
  "color-bg-overlay": "var(--color-bg-overlay)",
121
+ "color-bg-scrim": "var(--color-bg-scrim)",
97
122
  "color-text-primary": "var(--color-text-primary)",
98
123
  "color-text-secondary": "var(--color-text-secondary)",
99
124
  "color-text-muted": "var(--color-text-muted)",
@@ -174,6 +199,7 @@
174
199
  "radius-xl": "24px",
175
200
  "radius-sheet": "28px",
176
201
  "radius-full": "9999px",
202
+ "focus-ring-width": "2px",
177
203
  "shadow-outline": "var(--shadow-outline)",
178
204
  "shadow-soft": "var(--shadow-soft)",
179
205
  "shadow-card": "var(--shadow-card)",
@@ -225,6 +251,31 @@
225
251
  "power-purple": "#9d57ad",
226
252
  "power-gray": "#a5a5a5",
227
253
  "power-brown": "#a0522d",
228
- "color-gold": "#f5b700"
254
+ "color-gold": "#f5b700",
255
+ "color-dial-paper": "#ffffff",
256
+ "color-dial-outline": "#161616",
257
+ "color-dial-outline-printed": "#000000",
258
+ "color-dial-number-printed": "$power-red",
259
+ "color-dial-legend-printed": "#ffffff",
260
+ "color-symbol-outline": "rgba(0, 0, 0, 0.12)",
261
+ "color-symbol-outline-soft": "rgba(0, 0, 0, 0.15)",
262
+ "color-symbol-outline-strong": "rgba(0, 0, 0, 0.85)",
263
+ "color-symbol-light": "#ffffff",
264
+ "filter-symbol-light": "invert(100%)",
265
+ "filter-symbol-muted": "invert(56%)",
266
+ "color-card-print-black": "#000000",
267
+ "color-card-print-white": "#ffffff",
268
+ "color-card-team-up": "#0060ff80",
269
+ "color-card-token-placeholder": "#d3d3d3",
270
+ "color-card-edge": "rgba(0, 0, 0, 0.8)",
271
+ "color-card-lift": "rgba(0, 0, 0, 0.35)",
272
+ "color-card-terrain-panel": "#f2f2f2",
273
+ "color-card-terrain-panel-groove": "#d6d6d6",
274
+ "color-map-board": "#ffffff",
275
+ "color-map-selection": "rgba(0, 0, 0, 0.16)",
276
+ "color-map-selection-edge": "rgba(0, 0, 0, 0.55)",
277
+ "color-map-selection-line": "rgba(0, 0, 0, 0.5)",
278
+ "color-map-swatch-text": "#1a1a1a",
279
+ "color-map-swatch-text-light": "#ffffff"
229
280
  }
230
281
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntmats/hc-tokens",
3
- "version": "0.3.0",
3
+ "version": "0.5.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",