@orange-halo/tokens 1.0.0 → 2.0.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 (14) hide show
  1. package/contrast-pairs.json +35 -0
  2. package/contrast.js +59 -0
  3. package/dist/themes/dark.css +59 -119
  4. package/dist/themes/dark.json +783 -0
  5. package/dist/themes/light.css +10 -9
  6. package/dist/tokens.css +133 -71
  7. package/dist/tokens.js +119 -55
  8. package/dist/tokens.json +162 -46
  9. package/package.json +8 -4
  10. package/tokens/component.tokens.json +81 -37
  11. package/tokens/global.tokens.json +836 -156
  12. package/tokens/semantic.tokens.json +704 -138
  13. package/tokens/themes/dark.tokens.json +66 -51
  14. package/tokens/themes/light.tokens.json +0 -57
package/tokens/themes/dark.tokens.json CHANGED
@@ -1,73 +1,88 @@
1
1
  {
2
- "$description": "Dark Theme — warm walnut base, cozy evening Orange Halo",
2
+ "$description": "Dark Theme — warm cocoa base, cozy evening Orange Halo. Overrides tier 2 only; every colour references the palette. Applies when data-theme=\"dark\" is set.",
3
3
  "color": {
4
4
  "brand": {
5
- "$description": "Lighter orange for dark backgrounds",
6
- "primary": { "$type": "color", "$value": "#E8A838", "$description": "Honey gold (5.2:1 on walnut)" },
7
- "primaryHover": { "$type": "color", "$value": "#F0B848" },
8
- "primaryActive": { "$type": "color", "$value": "#D4922C" },
9
- "primarySubtle": { "$type": "color", "$value": "#3D3229" },
10
- "primaryMuted": { "$type": "color", "$value": "#4A3D32" },
11
- "highlight": { "$type": "color", "$value": "#F0C860" },
12
- "highlightSubtle": { "$type": "color", "$value": "#3D3829" }
5
+ "$description": "Honey replaces orange on dark — orange.900 is too dark to read on cocoa",
6
+ "primary": { "$type": "color", "$value": "{color.honey.400}" },
7
+ "primaryHover": { "$type": "color", "$value": "{color.honey.300}" },
8
+ "primaryActive": { "$type": "color", "$value": "{color.honey.500}" },
9
+ "primarySubtle": { "$type": "color", "$value": "{color.warm.walnut}" },
10
+ "highlight": { "$type": "color", "$value": "{color.honey.300}" },
11
+ "highlightSubtle": { "$type": "color", "$value": "{color.honey.900}" }
13
12
  },
14
13
  "accent": {
15
- "$description": "Lighter eucalyptus for dark backgrounds",
16
- "default": { "$type": "color", "$value": "#7AA3A4", "$description": "Light teal (4.8:1)" },
17
- "hover": { "$type": "color", "$value": "#8FB4B5" },
18
- "subtle": { "$type": "color", "$value": "#2A3636" },
19
- "muted": { "$type": "color", "$value": "#344242" }
14
+ "$description": "Blue, as in light — lighter steps so it reads on cocoa",
15
+ "default": { "$type": "color", "$value": "{color.blue.200}" },
16
+ "hover": { "$type": "color", "$value": "{color.blue.100}" },
17
+ "active": { "$type": "color", "$value": "{color.blue.300}" },
18
+ "subtle": { "$type": "color", "$value": "{color.blue.800}" },
19
+ "shadow": { "$type": "color", "$value": "{color.blue.800}" }
20
20
  },
21
21
  "feedback": {
22
- "success": { "$type": "color", "$value": "#7AB87C", "$description": "Light green (5.0:1)" },
23
- "successSubtle": { "$type": "color", "$value": "#2A3629" },
24
- "error": { "$type": "color", "$value": "#E08F8D", "$description": "Light red (5.0:1 on base, 5.0:1 on raised)" },
25
- "errorSubtle": { "$type": "color", "$value": "#3D2A29" },
26
- "warning": { "$type": "color", "$value": "#E8B050", "$description": "Light amber (5.4:1)" },
27
- "warningSubtle": { "$type": "color", "$value": "#3D3529" },
28
- "info": { "$type": "color", "$value": "#7AA3A4" },
29
- "infoSubtle": { "$type": "color", "$value": "#2A3636" }
22
+ "success": { "$type": "color", "$value": "{color.green.300}" },
23
+ "successSubtle": { "$type": "color", "$value": "{color.green.900}" },
24
+ "error": { "$type": "color", "$value": "{color.red.300}" },
25
+ "errorHover": { "$type": "color", "$value": "{color.red.100}" },
26
+ "errorSubtle": { "$type": "color", "$value": "{color.red.900}" },
27
+ "errorShadow": { "$type": "color", "$value": "{color.red.900}" },
28
+ "warning": { "$type": "color", "$value": "{color.honey.300}" },
29
+ "warningSubtle": { "$type": "color", "$value": "{color.honey.900}" },
30
+ "info": { "$type": "color", "$value": "{color.blue.200}" },
31
+ "infoSubtle": { "$type": "color", "$value": "{color.blue.800}" }
30
32
  },
31
33
  "surface": {
32
- "$description": "Warm dark surfaces",
33
- "base": { "$type": "color", "$value": "#2A2420", "$description": "Deep walnut" },
34
- "raised": { "$type": "color", "$value": "#3D3229", "$description": "Warm dark card" },
35
- "sunlit": { "$type": "color", "$value": "#44382C", "$description": "Slightly warmer than raised — use with gradient overlay" },
36
- "inset": { "$type": "color", "$value": "#1F1A17", "$description": "Darker inset" },
37
- "white": { "$type": "color", "$value": "#F5F0E8", "$description": "Flips to warm white in dark" },
34
+ "base": { "$type": "color", "$value": "{color.warm.cocoa}" },
35
+ "raised": { "$type": "color", "$value": "{color.warm.walnut}" },
36
+ "sunlit": { "$type": "color", "$value": "{color.warm.chestnut}" },
37
+ "inset": { "$type": "color", "$value": "{color.warm.espresso}" },
38
+ "highlight": { "$type": "color", "$value": "{color.warm.hickory}", "$description": "Lighter than raised; text.primary stays readable on it" },
38
39
  "overlay": { "$type": "color", "$value": "rgba(15, 12, 10, 0.7)" },
39
- "hover": { "$type": "color", "$value": "#4A3F33", "$description": "Distinct hover — lighter than raised" },
40
- "activePressed": { "$type": "color", "$value": "#352E28" },
41
- "disabled": { "$type": "color", "$value": "#352E28" }
40
+ "disabled": { "$type": "color", "$value": "{color.warm.mocha}" },
41
+ "hover": { "$type": "color", "$value": "{color.warm.hickory}" },
42
+ "activePressed": { "$type": "color", "$value": "{color.warm.mocha}" }
42
43
  },
43
44
  "border": {
44
- "default": { "$type": "color", "$value": "#8A7A68", "$description": "3.7:1 on base, 3.0:1 on raised — passes WCAG 1.4.11" },
45
- "subtle": { "$type": "color", "$value": "#6B5D4D", "$description": "Decorative dividers only — below 3:1, not for UI component boundaries" },
46
- "emphasis": { "$type": "color", "$value": "#A09080", "$description": "4.9:1 on base, 4.0:1 on raised — inputs, secondary buttons" },
47
- "focus": { "$type": "color", "$value": "#E8A838" },
45
+ "default": { "$type": "color", "$value": "{color.warm.taupe}" },
46
+ "subtle": { "$type": "color", "$value": "{color.warm.driftwood}", "$description": "Decorative dividers only — below 3:1" },
47
+ "emphasis": { "$type": "color", "$value": "{color.warm.stone}" },
48
+ "strong": { "$type": "color", "$value": "{color.warm.stone}" },
49
+ "hover": { "$type": "color", "$value": "{color.warm.dune}" },
50
+ "disabled": { "$type": "color", "$value": "{color.warm.hickory}" },
48
51
  "brand": { "$type": "color", "$value": "rgba(232, 168, 56, 0.3)" }
49
52
  },
50
53
  "text": {
51
- "$description": "Warm light text on dark",
52
- "primary": { "$type": "color", "$value": "#F5F0E8", "$description": "Warm white (12.4:1)" },
53
- "secondary": { "$type": "color", "$value": "#C9C1B4", "$description": "Dune (6.8:1)" },
54
- "disabled": { "$type": "color", "$value": "#6B5D4D" },
55
- "inverse": { "$type": "color", "$value": "#2A2420" },
56
- "link": { "$type": "color", "$value": "#E8A838" },
57
- "linkHover": { "$type": "color", "$value": "#F0B848" },
58
- "onBrand": { "$type": "color", "$value": "#2A2420", "$description": "Dark text on light brand bg (7.5:1)" },
59
- "onAccent": { "$type": "color", "$value": "#2A2420", "$description": "Dark text on light accent bg (5.8:1)" }
54
+ "primary": { "$type": "color", "$value": "{color.warm.linen}" },
55
+ "secondary": { "$type": "color", "$value": "{color.warm.dune}" },
56
+ "disabled": { "$type": "color", "$value": "{color.warm.driftwood}" },
57
+ "inverse": { "$type": "color", "$value": "{color.warm.cocoa}" },
58
+ "link": { "$type": "color", "$value": "{color.honey.400}" },
59
+ "linkHover": { "$type": "color", "$value": "{color.honey.300}" },
60
+ "linkRaised": { "$type": "color", "$value": "{color.honey.400}" },
61
+ "brand": { "$type": "color", "$value": "{color.honey.400}" },
62
+ "onBrand": { "$type": "color", "$value": "{color.warm.cocoa}" },
63
+ "onAccent": { "$type": "color", "$value": "{color.warm.cocoa}" },
64
+ "onSuccess": { "$type": "color", "$value": "{color.warm.cocoa}" },
65
+ "onError": { "$type": "color", "$value": "{color.warm.cocoa}" },
66
+ "onWarning": { "$type": "color", "$value": "{color.warm.cocoa}" },
67
+ "onInfo": { "$type": "color", "$value": "{color.warm.cocoa}" }
60
68
  }
61
69
  },
62
- "focus": {
63
- "ringColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.4)" },
64
- "glowColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.2)" }
65
- },
66
70
  "shadow": {
67
- "$description": "Dark mode shadows - lighter for visibility",
68
- "inset": { "$type": "shadow", "$value": "inset 0 1px 3px rgba(0, 0, 0, 0.3)" },
71
+ "$description": "Chunky offset shadow colours — darker than the surface, so they read as shadow on dark",
72
+ "primary": { "$type": "color", "$value": "{color.honey.800}" },
73
+ "secondary": { "$type": "color", "$value": "{color.warm.espresso}" },
74
+ "accent": { "$type": "color", "$value": "{color.blue.800}" },
75
+ "error": { "$type": "color", "$value": "{color.red.900}" }
76
+ },
77
+ "elevation": {
78
+ "$description": "Black-based shadows — warm-brown shadows vanish on cocoa",
69
79
  "soft": { "$type": "shadow", "$value": "0 2px 8px rgba(0, 0, 0, 0.25)" },
70
80
  "medium": { "$type": "shadow", "$value": "0 4px 16px rgba(0, 0, 0, 0.3)" },
71
- "chunkyInset": { "$type": "shadow", "$value": "inset 3px 3px 0 0 rgba(0, 0, 0, 0.2)", "$description": "Chunky input shadow" }
81
+ "strong": { "$type": "shadow", "$value": "0 8px 24px rgba(0, 0, 0, 0.4)" },
82
+ "inset": { "$type": "shadow", "$value": "inset 0 1px 3px rgba(0, 0, 0, 0.3)" }
83
+ },
84
+ "focus": {
85
+ "ringColor": { "$type": "color", "$value": "{color.honey.400}", "$description": "Opaque, as in light" },
86
+ "glowColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.2)" }
72
87
  }
73
88
  }
package/tokens/themes/light.tokens.json DELETED
@@ -1,57 +0,0 @@
1
- {
2
- "$description": "Light Theme — warm cream base, the default Orange Halo experience",
3
- "color": {
4
- "brand": {
5
- "primary": { "$type": "color", "$value": "{color.orange.900}" },
6
- "primaryHover": { "$type": "color", "$value": "{color.orange.950}" },
7
- "primaryActive": { "$type": "color", "$value": "{color.orange.950}" },
8
- "primarySubtle": { "$type": "color", "$value": "{color.orange.50}" },
9
- "primaryMuted": { "$type": "color", "$value": "{color.orange.100}" },
10
- "highlight": { "$type": "color", "$value": "{color.honey.400}" },
11
- "highlightSubtle": { "$type": "color", "$value": "{color.honey.100}" }
12
- },
13
- "accent": {
14
- "default": { "$type": "color", "$value": "{color.eucalyptus.500}" },
15
- "hover": { "$type": "color", "$value": "{color.eucalyptus.600}" },
16
- "subtle": { "$type": "color", "$value": "{color.eucalyptus.50}" },
17
- "muted": { "$type": "color", "$value": "{color.eucalyptus.100}" }
18
- },
19
- "feedback": {
20
- "success": { "$type": "color", "$value": "{color.green.600}" },
21
- "successSubtle": { "$type": "color", "$value": "{color.green.50}" },
22
- "error": { "$type": "color", "$value": "{color.red.600}" },
23
- "errorSubtle": { "$type": "color", "$value": "{color.red.50}" },
24
- "warning": { "$type": "color", "$value": "{color.honey.700}" },
25
- "warningSubtle": { "$type": "color", "$value": "{color.honey.50}" },
26
- "info": { "$type": "color", "$value": "{color.eucalyptus.600}" },
27
- "infoSubtle": { "$type": "color", "$value": "{color.eucalyptus.50}" }
28
- },
29
- "surface": {
30
- "base": { "$type": "color", "$value": "{color.warm.cream}" },
31
- "raised": { "$type": "color", "$value": "{color.warm.linen}" },
32
- "sunlit": { "$type": "color", "$value": "{color.warm.cream}" },
33
- "inset": { "$type": "color", "$value": "{color.warm.parchment}" },
34
- "overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.4)" },
35
- "disabled": { "$type": "color", "$value": "{color.warm.sand}" }
36
- },
37
- "border": {
38
- "default": { "$type": "color", "$value": "{color.warm.sand}" },
39
- "subtle": { "$type": "color", "$value": "{color.warm.parchment}" },
40
- "emphasis": { "$type": "color", "$value": "{color.warm.dune}" },
41
- "focus": { "$type": "color", "$value": "{color.orange.900}" },
42
- "brand": { "$type": "color", "$value": "rgba(197, 67, 0, 0.25)" }
43
- },
44
- "text": {
45
- "primary": { "$type": "color", "$value": "{color.warm.walnut}" },
46
- "secondary": { "$type": "color", "$value": "{color.warm.driftwood}" },
47
- "disabled": { "$type": "color", "$value": "{color.warm.dune}" },
48
- "inverse": { "$type": "color", "$value": "{color.warm.cream}" },
49
- "link": { "$type": "color", "$value": "{color.orange.900}" },
50
- "linkHover": { "$type": "color", "$value": "{color.orange.950}" }
51
- }
52
- },
53
- "focus": {
54
- "ringColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)" },
55
- "glowColor": { "$type": "color", "$value": "rgba(197, 67, 0, 0.15)" }
56
- }
57
- }