@phcdevworks/spectre-tokens 4.0.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +32 -29
  2. package/dist/index.cjs +33 -0
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +18 -0
  5. package/dist/index.d.cts +33 -0
  6. package/dist/index.d.ts +33 -0
  7. package/dist/index.js +33 -0
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +114 -0
  10. package/package.json +9 -8
  11. package/tokens/components.json +47 -0
  12. package/tokens/modes.json +100 -0
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.0.0 |
20
+ | Current version/status | 4.2.0 |
21
21
 
22
22
  ## Standard Workflow
23
23
 
@@ -30,17 +30,18 @@ contracts for specific frameworks and runtimes.
30
30
 
31
31
  ## Documentation Map
32
32
 
33
- | Guide | Path |
34
- | ----------- | ---------------------------- |
35
- | Agent rules | [AGENTS.md](AGENTS.md) |
36
- | Claude Code | [CLAUDE.md](CLAUDE.md) |
37
- | Codex | [CODEX.md](CODEX.md) |
38
- | Copilot | [COPILOT.md](COPILOT.md) |
39
- | Jules | [JULES.md](JULES.md) |
40
- | Roadmap | [ROADMAP.md](ROADMAP.md) |
41
- | Todo | [TODO.md](TODO.md) |
42
- | Changelog | [CHANGELOG.md](CHANGELOG.md) |
43
- | Security | [SECURITY.md](SECURITY.md) |
33
+ | Guide | Path |
34
+ | --------------- | ---------------------------------------- |
35
+ | Agent rules | [AGENTS.md](AGENTS.md) |
36
+ | Claude Code | [CLAUDE.md](CLAUDE.md) |
37
+ | Codex | [CODEX.md](CODEX.md) |
38
+ | Copilot | [COPILOT.md](COPILOT.md) |
39
+ | Jules | [JULES.md](JULES.md) |
40
+ | Roadmap | [ROADMAP.md](ROADMAP.md) |
41
+ | Todo | [TODO.md](TODO.md) |
42
+ | Token reference | [TOKEN_REFERENCE.md](TOKEN_REFERENCE.md) |
43
+ | Changelog | [CHANGELOG.md](CHANGELOG.md) |
44
+ | Security | [SECURITY.md](SECURITY.md) |
44
45
 
45
46
  [![npm version](https://img.shields.io/npm/v/@phcdevworks/spectre-tokens)](https://www.npmjs.com/package/@phcdevworks/spectre-tokens)
46
47
  [![CI](https://github.com/phcdevworks/spectre-tokens/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/phcdevworks/spectre-tokens/actions/workflows/ci.yml)
@@ -159,15 +160,15 @@ mode-aware styling.
159
160
 
160
161
  ### Semantic namespaces (prefer for all UI work)
161
162
 
162
- | Namespace | What it expresses |
163
- | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
164
- | `surface` | Background roles: page, card, input, overlay, subtle, hero (gradient, hero sections only), hover, selected, active, divider |
165
- | `text` | Foreground roles: default, muted, subtle, meta, on-surface, on-page |
166
- | `component` | Role-specific tokens for icon boxes, badges, ratings, testimonials, pricing cards, nav, modal, toast, tooltip, dropdown |
167
- | `buttons` | Button state tokens: default, hover, active, disabled, CTA |
168
- | `forms` | Form state tokens: default, focused, error, disabled |
169
- | `link` | Inline link color roles: default, hover, active, visited |
170
- | `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` |
171
172
 
172
173
  ```ts
173
174
  import tokens from '@phcdevworks/spectre-tokens'
@@ -305,6 +306,9 @@ The exported runtime token object is a flattened string-based tree generated
305
306
  from `tokens/`. Source-only wrapper fields such as `value` and `metadata` are
306
307
  internal generation details and are not part of the public package contract.
307
308
 
309
+ See [TOKEN_REFERENCE.md](TOKEN_REFERENCE.md) for the exhaustive, generated list
310
+ of every token path, resolved value, and usage note.
311
+
308
312
  The `layout` namespace includes section, stack, and container spacing tokens,
309
313
  plus fixed layout width tokens for common consumer shells:
310
314
  `layout.container.maxWidth`, `layout.container.maxWidthProse`, and
@@ -514,14 +518,13 @@ treated as downstream UI primitives.
514
518
 
515
519
  Claude Code (`claude-sonnet-4-6`) is the primary development agent for this
516
520
  repository. Codex handles releases and production stabilization, including
517
- cutting tagged releases and GitHub Releases. Jules handles small automated
518
- fixes and generated-output sync. GitHub Copilot provides development
519
- support.
520
-
521
- All AI agents with repository access (Claude Code, Codex, Copilot, Jules)
522
- have commit, push, and tag authority in this repository. Publishing to npm
523
- remains Bradley Potts's sole authority. See [AGENTS.md](AGENTS.md) for the
524
- full commit-policy and release-authority grant.
521
+ cutting tagged releases and GitHub Releases. Jules handles small automated fixes
522
+ and generated-output sync. GitHub Copilot provides development support.
523
+
524
+ All AI agents with repository access (Claude Code, Codex, Copilot, Jules) have
525
+ commit, push, and tag authority in this repository. Publishing to npm remains
526
+ Bradley Potts's sole authority. See [AGENTS.md](AGENTS.md) for the full
527
+ commit-policy and release-authority grant.
525
528
 
526
529
  **Protected from automated change:** locked color families (`success`,
527
530
  `warning`, `danger`, CTA/brand-action), `contract.manifest.json`, and
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",