@phcdevworks/spectre-tokens 4.1.0 → 4.3.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/README.md +12 -12
- package/dist/index.cjs +35 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +19 -0
- package/dist/index.d.cts +34 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.js +35 -1
- package/dist/index.js.map +1 -1
- package/dist/tokens.dtcg.json +118 -0
- package/package.json +5 -5
- package/tokens/components.json +47 -0
- package/tokens/modes.json +100 -0
- package/tokens/primitives.json +2 -1
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ contracts for specific frameworks and runtimes.
|
|
|
17
17
|
| Project team | `project-design` |
|
|
18
18
|
| Repository role | Spectre L1 design-token contract |
|
|
19
19
|
| Package/artifact | `@phcdevworks/spectre-tokens` |
|
|
20
|
-
| Current version/status | 4.
|
|
20
|
+
| Current version/status | 4.3.0 |
|
|
21
21
|
|
|
22
22
|
## Standard Workflow
|
|
23
23
|
|
|
@@ -160,15 +160,15 @@ mode-aware styling.
|
|
|
160
160
|
|
|
161
161
|
### Semantic namespaces (prefer for all UI work)
|
|
162
162
|
|
|
163
|
-
| Namespace | What it expresses
|
|
164
|
-
| ----------- |
|
|
165
|
-
| `surface` | Background roles: page, card, input, overlay, subtle, hero (gradient, hero sections only), hover, selected, active, divider
|
|
166
|
-
| `text` | Foreground roles: default, muted, subtle, meta, on-surface, on-page
|
|
167
|
-
| `component` | Role-specific tokens for icon boxes, badges, ratings, testimonials, pricing cards, nav, modal, toast, tooltip, dropdown
|
|
168
|
-
| `buttons` | Button state tokens: default, hover, active, disabled, CTA
|
|
169
|
-
| `forms` | Form state tokens: default, focused, error, disabled
|
|
170
|
-
| `link` | Inline link color roles: default, hover, active, visited
|
|
171
|
-
| `modes` | Mode-aware overrides under `modes.default` and `modes.dark`
|
|
163
|
+
| Namespace | What it expresses |
|
|
164
|
+
| ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
165
|
+
| `surface` | Background roles: page, card, input, overlay, subtle, hero (gradient, hero sections only), hover, selected, active, divider |
|
|
166
|
+
| `text` | Foreground roles: default, muted, subtle, meta, on-surface, on-page |
|
|
167
|
+
| `component` | Role-specific tokens for icon boxes, badges, ratings, testimonials, pricing cards, nav, footer, modal, toast, tooltip, dropdown |
|
|
168
|
+
| `buttons` | Button state tokens: default, hover, active, disabled, CTA |
|
|
169
|
+
| `forms` | Form state tokens: default, focused, error, disabled |
|
|
170
|
+
| `link` | Inline link color roles: default, hover, active, visited |
|
|
171
|
+
| `modes` | Mode-aware overrides under `modes.default` and `modes.dark` |
|
|
172
172
|
|
|
173
173
|
```ts
|
|
174
174
|
import tokens from '@phcdevworks/spectre-tokens'
|
|
@@ -306,8 +306,8 @@ The exported runtime token object is a flattened string-based tree generated
|
|
|
306
306
|
from `tokens/`. Source-only wrapper fields such as `value` and `metadata` are
|
|
307
307
|
internal generation details and are not part of the public package contract.
|
|
308
308
|
|
|
309
|
-
See [TOKEN_REFERENCE.md](TOKEN_REFERENCE.md) for the exhaustive, generated
|
|
310
|
-
|
|
309
|
+
See [TOKEN_REFERENCE.md](TOKEN_REFERENCE.md) for the exhaustive, generated list
|
|
310
|
+
of every token path, resolved value, and usage note.
|
|
311
311
|
|
|
312
312
|
The `layout` namespace includes section, stack, and container spacing tokens,
|
|
313
313
|
plus fixed layout width tokens for common consumer shells:
|
package/dist/index.cjs
CHANGED
|
@@ -99,6 +99,17 @@ var coreTokens = {
|
|
|
99
99
|
"linkActive": "{colors.brand.700}",
|
|
100
100
|
"border": "{colors.neutral.200}"
|
|
101
101
|
},
|
|
102
|
+
"footer": {
|
|
103
|
+
"bg": "{colors.neutral.900}",
|
|
104
|
+
"text": "{colors.neutral.50}",
|
|
105
|
+
"heading": "{colors.white}",
|
|
106
|
+
"muted": "{colors.neutral.400}",
|
|
107
|
+
"link": "{colors.neutral.300}",
|
|
108
|
+
"linkHover": "{colors.brand.400}",
|
|
109
|
+
"border": "{colors.neutral.700}",
|
|
110
|
+
"divider": "{colors.neutral.800}",
|
|
111
|
+
"chipBg": "{colors.neutral.800}"
|
|
112
|
+
},
|
|
102
113
|
"modal": {
|
|
103
114
|
"bg": "{colors.white}",
|
|
104
115
|
"shadow": "0 20px 48px -12px {colors.black} / 0.20",
|
|
@@ -406,6 +417,17 @@ var coreTokens = {
|
|
|
406
417
|
"linkActive": "{colors.brand.700}",
|
|
407
418
|
"border": "{colors.neutral.200}"
|
|
408
419
|
},
|
|
420
|
+
"footer": {
|
|
421
|
+
"bg": "{colors.neutral.900}",
|
|
422
|
+
"text": "{colors.neutral.50}",
|
|
423
|
+
"heading": "{colors.white}",
|
|
424
|
+
"muted": "{colors.neutral.400}",
|
|
425
|
+
"link": "{colors.neutral.300}",
|
|
426
|
+
"linkHover": "{colors.brand.400}",
|
|
427
|
+
"border": "{colors.neutral.700}",
|
|
428
|
+
"divider": "{colors.neutral.800}",
|
|
429
|
+
"chipBg": "{colors.neutral.800}"
|
|
430
|
+
},
|
|
409
431
|
"modal": {
|
|
410
432
|
"bg": "{colors.white}",
|
|
411
433
|
"shadow": "0 20px 48px -12px {colors.black} / 0.20",
|
|
@@ -600,6 +622,17 @@ var coreTokens = {
|
|
|
600
622
|
"linkActive": "{colors.brand.300}",
|
|
601
623
|
"border": "{colors.neutral.700}"
|
|
602
624
|
},
|
|
625
|
+
"footer": {
|
|
626
|
+
"bg": "{colors.black}",
|
|
627
|
+
"text": "{colors.neutral.50}",
|
|
628
|
+
"heading": "{colors.white}",
|
|
629
|
+
"muted": "{colors.neutral.400}",
|
|
630
|
+
"link": "{colors.neutral.300}",
|
|
631
|
+
"linkHover": "{colors.brand.300}",
|
|
632
|
+
"border": "{colors.neutral.800}",
|
|
633
|
+
"divider": "{colors.neutral.900}",
|
|
634
|
+
"chipBg": "{colors.neutral.900}"
|
|
635
|
+
},
|
|
603
636
|
"modal": {
|
|
604
637
|
"bg": "{colors.neutral.800}",
|
|
605
638
|
"shadow": "0 20px 48px -12px {colors.black} / 0.20",
|
|
@@ -1156,7 +1189,8 @@ var coreTokens = {
|
|
|
1156
1189
|
"64": "4rem",
|
|
1157
1190
|
"72": "4.5rem",
|
|
1158
1191
|
"80": "5rem",
|
|
1159
|
-
"96": "6rem"
|
|
1192
|
+
"96": "6rem",
|
|
1193
|
+
"240": "15rem"
|
|
1160
1194
|
},
|
|
1161
1195
|
"radii": {
|
|
1162
1196
|
"none": "0",
|