@ntmats/hc-tokens 0.2.0 → 0.4.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 +22 -0
  2. package/dist/_hcui-tokens.scss +25 -0
  3. package/dist/_tokens.scss +25 -0
  4. package/dist/index.js +50 -3
  5. package/dist/tailwind.js +29 -1
  6. package/dist/tokens.css +80 -0
  7. package/dist/tokens.json +50 -3
  8. package/package.json +1 -1
package/dist/_hcui-theme.scss CHANGED
@@ -42,6 +42,17 @@
42
42
  --shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
43
43
  --shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
44
44
  --shadow-float: 0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
45
+ --color-card-paper: var(--color-bg-main);
46
+ --color-card-ink: #000000;
47
+ --color-card-ink-soft: #1a1a1a;
48
+ --color-card-shine: rgba(255, 255, 255, 0.45);
49
+ --color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
50
+ --filter-card-background: sepia(0.05);
51
+ --blend-card-shine: overlay;
52
+ --opacity-card-grain: 0.14;
53
+ --opacity-card-grain-flat: 0.05;
54
+ --blend-card-grain: multiply;
55
+ --filter-map-environment-icon: none;
45
56
  --shadow-fab: 0 0 0 1px rgba(31, 30, 29, 0.07), 0 10px 30px -8px rgba(20, 20, 19, 0.22);
46
57
  --dock-track: rgba(31, 30, 29, 0.07);
47
58
  --shadow-navigation-mobile: 0 1px 3px rgba(20, 20, 19, 0.07), 0 5px 18px -6px rgba(20, 20, 19, 0.20);
@@ -85,6 +96,17 @@
85
96
  --shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
86
97
  --shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
87
98
  --shadow-float: 0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
99
+ --color-card-paper: var(--color-bg-elevated);
100
+ --color-card-ink: #f4f4f4;
101
+ --color-card-ink-soft: #e2e2e2;
102
+ --color-card-shine: rgba(255, 255, 255, 0.16);
103
+ --color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
104
+ --filter-card-background: brightness(0.19) sepia(0.08);
105
+ --blend-card-shine: screen;
106
+ --opacity-card-grain: 0.5;
107
+ --opacity-card-grain-flat: 0.07;
108
+ --blend-card-grain: soft-light;
109
+ --filter-map-environment-icon: invert(1);
88
110
  --shadow-fab: 0 0 0 1px var(--color-border-strong), 0 10px 30px -8px rgba(0, 0, 0, 0.7);
89
111
  --dock-track: rgba(0, 0, 0, 0.28);
90
112
  --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
@@ -140,3 +140,28 @@ $power-purple: #9d57ad;
140
140
  $power-gray: #a5a5a5;
141
141
  $power-brown: #a0522d;
142
142
  $color-gold: #f5b700;
143
+ $color-dial-paper: #ffffff;
144
+ $color-dial-outline: #161616;
145
+ $color-dial-outline-printed: #000000;
146
+ $color-dial-number-printed: $power-red;
147
+ $color-dial-legend-printed: #ffffff;
148
+ $color-symbol-outline: rgba(0, 0, 0, 0.12);
149
+ $color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
150
+ $color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
151
+ $color-symbol-light: #ffffff;
152
+ $filter-symbol-light: invert(100%);
153
+ $filter-symbol-muted: invert(56%);
154
+ $color-card-print-black: #000000;
155
+ $color-card-print-white: #ffffff;
156
+ $color-card-team-up: #0060ff80;
157
+ $color-card-token-placeholder: #d3d3d3;
158
+ $color-card-edge: rgba(0, 0, 0, 0.8);
159
+ $color-card-lift: rgba(0, 0, 0, 0.35);
160
+ $color-card-terrain-panel: #f2f2f2;
161
+ $color-card-terrain-panel-groove: #d6d6d6;
162
+ $color-map-board: #ffffff;
163
+ $color-map-selection: rgba(0, 0, 0, 0.16);
164
+ $color-map-selection-edge: rgba(0, 0, 0, 0.55);
165
+ $color-map-selection-line: rgba(0, 0, 0, 0.5);
166
+ $color-map-swatch-text: #1a1a1a;
167
+ $color-map-swatch-text-light: #ffffff;
package/dist/_tokens.scss CHANGED
@@ -136,3 +136,28 @@ $power-purple: #9d57ad;
136
136
  $power-gray: #a5a5a5;
137
137
  $power-brown: #a0522d;
138
138
  $color-gold: #f5b700;
139
+ $color-dial-paper: #ffffff;
140
+ $color-dial-outline: #161616;
141
+ $color-dial-outline-printed: #000000;
142
+ $color-dial-number-printed: $power-red;
143
+ $color-dial-legend-printed: #ffffff;
144
+ $color-symbol-outline: rgba(0, 0, 0, 0.12);
145
+ $color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
146
+ $color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
147
+ $color-symbol-light: #ffffff;
148
+ $filter-symbol-light: invert(100%);
149
+ $filter-symbol-muted: invert(56%);
150
+ $color-card-print-black: #000000;
151
+ $color-card-print-white: #ffffff;
152
+ $color-card-team-up: #0060ff80;
153
+ $color-card-token-placeholder: #d3d3d3;
154
+ $color-card-edge: rgba(0, 0, 0, 0.8);
155
+ $color-card-lift: rgba(0, 0, 0, 0.35);
156
+ $color-card-terrain-panel: #f2f2f2;
157
+ $color-card-terrain-panel-groove: #d6d6d6;
158
+ $color-map-board: #ffffff;
159
+ $color-map-selection: rgba(0, 0, 0, 0.16);
160
+ $color-map-selection-edge: rgba(0, 0, 0, 0.55);
161
+ $color-map-selection-line: rgba(0, 0, 0, 0.5);
162
+ $color-map-swatch-text: #1a1a1a;
163
+ $color-map-swatch-text-light: #ffffff;
package/dist/index.js CHANGED
@@ -45,7 +45,18 @@ export const tokens = {
45
45
  "shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
46
46
  "shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
47
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)"
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"
49
60
  },
50
61
  "dark": {
51
62
  "color-bg-page": "#1b1a19",
@@ -84,7 +95,18 @@ export const tokens = {
84
95
  "shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
85
96
  "shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
86
97
  "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)"
98
+ "shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)",
99
+ "color-card-paper": "var(--color-bg-elevated)",
100
+ "color-card-ink": "#f4f4f4",
101
+ "color-card-ink-soft": "#e2e2e2",
102
+ "color-card-shine": "rgba(255, 255, 255, 0.16)",
103
+ "color-card-focus-backdrop": "rgba(0, 0, 0, 0.6)",
104
+ "filter-card-background": "brightness(0.19) sepia(0.08)",
105
+ "blend-card-shine": "screen",
106
+ "opacity-card-grain": "0.5",
107
+ "opacity-card-grain-flat": "0.07",
108
+ "blend-card-grain": "soft-light",
109
+ "filter-map-environment-icon": "invert(1)"
88
110
  }
89
111
  },
90
112
  "sass": {
@@ -226,6 +248,31 @@ export const tokens = {
226
248
  "power-purple": "#9d57ad",
227
249
  "power-gray": "#a5a5a5",
228
250
  "power-brown": "#a0522d",
229
- "color-gold": "#f5b700"
251
+ "color-gold": "#f5b700",
252
+ "color-dial-paper": "#ffffff",
253
+ "color-dial-outline": "#161616",
254
+ "color-dial-outline-printed": "#000000",
255
+ "color-dial-number-printed": "$power-red",
256
+ "color-dial-legend-printed": "#ffffff",
257
+ "color-symbol-outline": "rgba(0, 0, 0, 0.12)",
258
+ "color-symbol-outline-soft": "rgba(0, 0, 0, 0.15)",
259
+ "color-symbol-outline-strong": "rgba(0, 0, 0, 0.85)",
260
+ "color-symbol-light": "#ffffff",
261
+ "filter-symbol-light": "invert(100%)",
262
+ "filter-symbol-muted": "invert(56%)",
263
+ "color-card-print-black": "#000000",
264
+ "color-card-print-white": "#ffffff",
265
+ "color-card-team-up": "#0060ff80",
266
+ "color-card-token-placeholder": "#d3d3d3",
267
+ "color-card-edge": "rgba(0, 0, 0, 0.8)",
268
+ "color-card-lift": "rgba(0, 0, 0, 0.35)",
269
+ "color-card-terrain-panel": "#f2f2f2",
270
+ "color-card-terrain-panel-groove": "#d6d6d6",
271
+ "color-map-board": "#ffffff",
272
+ "color-map-selection": "rgba(0, 0, 0, 0.16)",
273
+ "color-map-selection-edge": "rgba(0, 0, 0, 0.55)",
274
+ "color-map-selection-line": "rgba(0, 0, 0, 0.5)",
275
+ "color-map-swatch-text": "#1a1a1a",
276
+ "color-map-swatch-text-light": "#ffffff"
230
277
  }
231
278
  };
package/dist/tailwind.js CHANGED
@@ -53,7 +53,35 @@ export default {
53
53
  "hc-power-gray": "var(--hc-power-gray)",
54
54
  "hc-power-brown": "var(--hc-power-brown)",
55
55
  "hc-gold": "var(--hc-color-gold)",
56
- "hc-bg-main": "var(--hc-color-bg-main)"
56
+ "hc-dial-paper": "var(--hc-color-dial-paper)",
57
+ "hc-dial-outline": "var(--hc-color-dial-outline)",
58
+ "hc-dial-outline-printed": "var(--hc-color-dial-outline-printed)",
59
+ "hc-dial-number-printed": "var(--hc-color-dial-number-printed)",
60
+ "hc-dial-legend-printed": "var(--hc-color-dial-legend-printed)",
61
+ "hc-symbol-outline": "var(--hc-color-symbol-outline)",
62
+ "hc-symbol-outline-soft": "var(--hc-color-symbol-outline-soft)",
63
+ "hc-symbol-outline-strong": "var(--hc-color-symbol-outline-strong)",
64
+ "hc-symbol-light": "var(--hc-color-symbol-light)",
65
+ "hc-card-print-black": "var(--hc-color-card-print-black)",
66
+ "hc-card-print-white": "var(--hc-color-card-print-white)",
67
+ "hc-card-team-up": "var(--hc-color-card-team-up)",
68
+ "hc-card-token-placeholder": "var(--hc-color-card-token-placeholder)",
69
+ "hc-card-edge": "var(--hc-color-card-edge)",
70
+ "hc-card-lift": "var(--hc-color-card-lift)",
71
+ "hc-card-terrain-panel": "var(--hc-color-card-terrain-panel)",
72
+ "hc-card-terrain-panel-groove": "var(--hc-color-card-terrain-panel-groove)",
73
+ "hc-map-board": "var(--hc-color-map-board)",
74
+ "hc-map-selection": "var(--hc-color-map-selection)",
75
+ "hc-map-selection-edge": "var(--hc-color-map-selection-edge)",
76
+ "hc-map-selection-line": "var(--hc-color-map-selection-line)",
77
+ "hc-map-swatch-text": "var(--hc-color-map-swatch-text)",
78
+ "hc-map-swatch-text-light": "var(--hc-color-map-swatch-text-light)",
79
+ "hc-bg-main": "var(--hc-color-bg-main)",
80
+ "hc-card-paper": "var(--hc-color-card-paper)",
81
+ "hc-card-ink": "var(--hc-color-card-ink)",
82
+ "hc-card-ink-soft": "var(--hc-color-card-ink-soft)",
83
+ "hc-card-shine": "var(--hc-color-card-shine)",
84
+ "hc-card-focus-backdrop": "var(--hc-color-card-focus-backdrop)"
57
85
  },
58
86
  "borderRadius": {
59
87
  "hc-xs": "var(--hc-radius-xs)",
package/dist/tokens.css CHANGED
@@ -137,10 +137,46 @@
137
137
  --hc-power-gray: #a5a5a5;
138
138
  --hc-power-brown: #a0522d;
139
139
  --hc-color-gold: #f5b700;
140
+ --hc-color-dial-paper: #ffffff;
141
+ --hc-color-dial-outline: #161616;
142
+ --hc-color-dial-outline-printed: #000000;
143
+ --hc-color-dial-number-printed: #ec2e2c;
144
+ --hc-color-dial-legend-printed: #ffffff;
145
+ --hc-color-symbol-outline: rgba(0, 0, 0, 0.12);
146
+ --hc-color-symbol-outline-soft: rgba(0, 0, 0, 0.15);
147
+ --hc-color-symbol-outline-strong: rgba(0, 0, 0, 0.85);
148
+ --hc-color-symbol-light: #ffffff;
149
+ --hc-filter-symbol-light: invert(100%);
150
+ --hc-filter-symbol-muted: invert(56%);
151
+ --hc-color-card-print-black: #000000;
152
+ --hc-color-card-print-white: #ffffff;
153
+ --hc-color-card-team-up: #0060ff80;
154
+ --hc-color-card-token-placeholder: #d3d3d3;
155
+ --hc-color-card-edge: rgba(0, 0, 0, 0.8);
156
+ --hc-color-card-lift: rgba(0, 0, 0, 0.35);
157
+ --hc-color-card-terrain-panel: #f2f2f2;
158
+ --hc-color-card-terrain-panel-groove: #d6d6d6;
159
+ --hc-color-map-board: #ffffff;
160
+ --hc-color-map-selection: rgba(0, 0, 0, 0.16);
161
+ --hc-color-map-selection-edge: rgba(0, 0, 0, 0.55);
162
+ --hc-color-map-selection-line: rgba(0, 0, 0, 0.5);
163
+ --hc-color-map-swatch-text: #1a1a1a;
164
+ --hc-color-map-swatch-text-light: #ffffff;
140
165
  --hc-rond: 50;
141
166
  --hc-color-bg-main: #faf9f4;
142
167
  --hc-focus-ring: #141413;
143
168
  --hc-shadow-knob: 0 1px 3px rgba(20, 20, 19, 0.12), 0 0 0 0.5px rgba(20, 20, 19, 0.06);
169
+ --hc-color-card-paper: var(--hc-color-bg-main);
170
+ --hc-color-card-ink: #000000;
171
+ --hc-color-card-ink-soft: #1a1a1a;
172
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
173
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
174
+ --hc-filter-card-background: sepia(0.05);
175
+ --hc-blend-card-shine: overlay;
176
+ --hc-opacity-card-grain: 0.14;
177
+ --hc-opacity-card-grain-flat: 0.05;
178
+ --hc-blend-card-grain: multiply;
179
+ --hc-filter-map-environment-icon: none;
144
180
  color-scheme: light;
145
181
  }
146
182
  .dark [data-hc-ds], [data-theme="dark"] [data-hc-ds] {
@@ -181,6 +217,17 @@
181
217
  --hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
182
218
  --hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
183
219
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
220
+ --hc-color-card-paper: var(--hc-color-bg-elevated);
221
+ --hc-color-card-ink: #f4f4f4;
222
+ --hc-color-card-ink-soft: #e2e2e2;
223
+ --hc-color-card-shine: rgba(255, 255, 255, 0.16);
224
+ --hc-color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
225
+ --hc-filter-card-background: brightness(0.19) sepia(0.08);
226
+ --hc-blend-card-shine: screen;
227
+ --hc-opacity-card-grain: 0.5;
228
+ --hc-opacity-card-grain-flat: 0.07;
229
+ --hc-blend-card-grain: soft-light;
230
+ --hc-filter-map-environment-icon: invert(1);
184
231
  color-scheme: dark;
185
232
  }
186
233
  .light [data-hc-ds], [data-theme="light"] [data-hc-ds] {
@@ -221,6 +268,17 @@
221
268
  --hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
222
269
  --hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
223
270
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
271
+ --hc-color-card-paper: var(--hc-color-bg-main);
272
+ --hc-color-card-ink: #000000;
273
+ --hc-color-card-ink-soft: #1a1a1a;
274
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
275
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
276
+ --hc-filter-card-background: sepia(0.05);
277
+ --hc-blend-card-shine: overlay;
278
+ --hc-opacity-card-grain: 0.14;
279
+ --hc-opacity-card-grain-flat: 0.05;
280
+ --hc-blend-card-grain: multiply;
281
+ --hc-filter-map-environment-icon: none;
224
282
  color-scheme: light;
225
283
  }
226
284
  [data-hc-ds][data-theme="dark"], .dark[data-hc-ds] {
@@ -261,6 +319,17 @@
261
319
  --hc-shadow-main: 0 -4px 14px -6px rgba(0, 0, 0, 0.28);
262
320
  --hc-shadow-navigation: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 18px -6px rgba(0, 0, 0, 0.28);
263
321
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6);
322
+ --hc-color-card-paper: var(--hc-color-bg-elevated);
323
+ --hc-color-card-ink: #f4f4f4;
324
+ --hc-color-card-ink-soft: #e2e2e2;
325
+ --hc-color-card-shine: rgba(255, 255, 255, 0.16);
326
+ --hc-color-card-focus-backdrop: rgba(0, 0, 0, 0.6);
327
+ --hc-filter-card-background: brightness(0.19) sepia(0.08);
328
+ --hc-blend-card-shine: screen;
329
+ --hc-opacity-card-grain: 0.5;
330
+ --hc-opacity-card-grain-flat: 0.07;
331
+ --hc-blend-card-grain: soft-light;
332
+ --hc-filter-map-environment-icon: invert(1);
264
333
  color-scheme: dark;
265
334
  }
266
335
  [data-hc-ds][data-theme="light"], .light[data-hc-ds] {
@@ -301,5 +370,16 @@
301
370
  --hc-shadow-main: 0 -4px 14px -6px rgba(20, 20, 19, 0.10);
302
371
  --hc-shadow-navigation: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -6px rgba(20, 20, 19, 0.12);
303
372
  --hc-shadow-float: 0 0 0 1px var(--hc-color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2);
373
+ --hc-color-card-paper: var(--hc-color-bg-main);
374
+ --hc-color-card-ink: #000000;
375
+ --hc-color-card-ink-soft: #1a1a1a;
376
+ --hc-color-card-shine: rgba(255, 255, 255, 0.45);
377
+ --hc-color-card-focus-backdrop: rgba(20, 20, 19, 0.55);
378
+ --hc-filter-card-background: sepia(0.05);
379
+ --hc-blend-card-shine: overlay;
380
+ --hc-opacity-card-grain: 0.14;
381
+ --hc-opacity-card-grain-flat: 0.05;
382
+ --hc-blend-card-grain: multiply;
383
+ --hc-filter-map-environment-icon: none;
304
384
  color-scheme: light;
305
385
  }
package/dist/tokens.json CHANGED
@@ -44,7 +44,18 @@
44
44
  "shadow-modal": "0 0 0 1px var(--color-border), 0 24px 64px -16px rgba(20, 20, 19, 0.26)",
45
45
  "shadow-main": "0 -4px 14px -6px rgba(20, 20, 19, 0.10)",
46
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)"
47
+ "shadow-float": "0 0 0 1px var(--color-border), 0 12px 32px -10px rgba(20, 20, 19, 0.2)",
48
+ "color-card-paper": "var(--color-bg-main)",
49
+ "color-card-ink": "#000000",
50
+ "color-card-ink-soft": "#1a1a1a",
51
+ "color-card-shine": "rgba(255, 255, 255, 0.45)",
52
+ "color-card-focus-backdrop": "rgba(20, 20, 19, 0.55)",
53
+ "filter-card-background": "sepia(0.05)",
54
+ "blend-card-shine": "overlay",
55
+ "opacity-card-grain": "0.14",
56
+ "opacity-card-grain-flat": "0.05",
57
+ "blend-card-grain": "multiply",
58
+ "filter-map-environment-icon": "none"
48
59
  },
49
60
  "dark": {
50
61
  "color-bg-page": "#1b1a19",
@@ -83,7 +94,18 @@
83
94
  "shadow-modal": "0 0 0 1px var(--color-border-strong), 0 24px 64px -16px rgba(0, 0, 0, 0.7)",
84
95
  "shadow-main": "0 -4px 14px -6px rgba(0, 0, 0, 0.28)",
85
96
  "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)"
97
+ "shadow-float": "0 0 0 1px var(--color-border-strong), 0 12px 32px -10px rgba(0, 0, 0, 0.6)",
98
+ "color-card-paper": "var(--color-bg-elevated)",
99
+ "color-card-ink": "#f4f4f4",
100
+ "color-card-ink-soft": "#e2e2e2",
101
+ "color-card-shine": "rgba(255, 255, 255, 0.16)",
102
+ "color-card-focus-backdrop": "rgba(0, 0, 0, 0.6)",
103
+ "filter-card-background": "brightness(0.19) sepia(0.08)",
104
+ "blend-card-shine": "screen",
105
+ "opacity-card-grain": "0.5",
106
+ "opacity-card-grain-flat": "0.07",
107
+ "blend-card-grain": "soft-light",
108
+ "filter-map-environment-icon": "invert(1)"
87
109
  }
88
110
  },
89
111
  "sass": {
@@ -225,6 +247,31 @@
225
247
  "power-purple": "#9d57ad",
226
248
  "power-gray": "#a5a5a5",
227
249
  "power-brown": "#a0522d",
228
- "color-gold": "#f5b700"
250
+ "color-gold": "#f5b700",
251
+ "color-dial-paper": "#ffffff",
252
+ "color-dial-outline": "#161616",
253
+ "color-dial-outline-printed": "#000000",
254
+ "color-dial-number-printed": "$power-red",
255
+ "color-dial-legend-printed": "#ffffff",
256
+ "color-symbol-outline": "rgba(0, 0, 0, 0.12)",
257
+ "color-symbol-outline-soft": "rgba(0, 0, 0, 0.15)",
258
+ "color-symbol-outline-strong": "rgba(0, 0, 0, 0.85)",
259
+ "color-symbol-light": "#ffffff",
260
+ "filter-symbol-light": "invert(100%)",
261
+ "filter-symbol-muted": "invert(56%)",
262
+ "color-card-print-black": "#000000",
263
+ "color-card-print-white": "#ffffff",
264
+ "color-card-team-up": "#0060ff80",
265
+ "color-card-token-placeholder": "#d3d3d3",
266
+ "color-card-edge": "rgba(0, 0, 0, 0.8)",
267
+ "color-card-lift": "rgba(0, 0, 0, 0.35)",
268
+ "color-card-terrain-panel": "#f2f2f2",
269
+ "color-card-terrain-panel-groove": "#d6d6d6",
270
+ "color-map-board": "#ffffff",
271
+ "color-map-selection": "rgba(0, 0, 0, 0.16)",
272
+ "color-map-selection-edge": "rgba(0, 0, 0, 0.55)",
273
+ "color-map-selection-line": "rgba(0, 0, 0, 0.5)",
274
+ "color-map-swatch-text": "#1a1a1a",
275
+ "color-map-swatch-text-light": "#ffffff"
229
276
  }
230
277
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntmats/hc-tokens",
3
- "version": "0.2.0",
3
+ "version": "0.4.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",