@orange-halo/tokens 1.0.0 → 2.1.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 (31) hide show
  1. package/contrast-pairs.json +36 -0
  2. package/contrast.js +59 -0
  3. package/dist/brands/hood-dark.css +74 -0
  4. package/dist/brands/hood-dark.json +719 -0
  5. package/dist/brands/hood.css +433 -0
  6. package/dist/brands/hood.json +719 -0
  7. package/dist/brands/orange-halo-dark.css +78 -0
  8. package/dist/brands/orange-halo-dark.json +853 -0
  9. package/dist/brands/orange-halo.css +511 -0
  10. package/dist/brands/orange-halo.json +853 -0
  11. package/dist/themes/dark.css +70 -119
  12. package/dist/themes/dark.json +853 -0
  13. package/dist/tokens.css +213 -101
  14. package/dist/tokens.js +212 -82
  15. package/dist/tokens.json +273 -87
  16. package/package.json +9 -4
  17. package/tokens/brands/hood/brand.json +5 -0
  18. package/tokens/brands/hood/dark.tokens.json +295 -0
  19. package/tokens/brands/hood/light.tokens.json +875 -0
  20. package/tokens/brands/hood/palette.tokens.json +130 -0
  21. package/tokens/brands/orange-halo/brand.json +5 -0
  22. package/tokens/brands/orange-halo/dark.tokens.json +99 -0
  23. package/tokens/brands/orange-halo/light.tokens.json +880 -0
  24. package/tokens/brands/orange-halo/palette.tokens.json +800 -0
  25. package/tokens/{component.tokens.json → core/component.tokens.json} +89 -41
  26. package/tokens/core/scales.tokens.json +170 -0
  27. package/dist/themes/light.css +0 -46
  28. package/tokens/global.tokens.json +0 -230
  29. package/tokens/semantic.tokens.json +0 -219
  30. package/tokens/themes/dark.tokens.json +0 -73
  31. package/tokens/themes/light.tokens.json +0 -57
package/dist/themes/dark.css CHANGED
@@ -1,127 +1,78 @@
1
1
  /**
2
- * Orange Halo Dark Theme
3
- * Auto-generated - do not edit directly
4
- * WCAG AA compliant color contrast ratios
2
+ * Do not edit directly, this file was auto-generated.
5
3
  */
6
4
 
7
5
  [data-theme='dark'] {
8
- /* Honey gold (5.2:1 on walnut) */
9
- --oh-color-brand-primary: #e8a838;
10
- --oh-color-brand-primary-hover: #f0b848;
11
- --oh-color-brand-primary-active: #d4922c;
12
- --oh-color-brand-primary-subtle: #3d3229;
13
- --oh-color-brand-primary-muted: #4a3d32;
14
- --oh-color-brand-highlight: #f0c860;
15
- --oh-color-brand-highlight-subtle: #3d3829;
16
- /* Light teal (4.8:1) */
17
- --oh-color-accent-default: #7aa3a4;
18
- --oh-color-accent-hover: #8fb4b5;
19
- --oh-color-accent-subtle: #2a3636;
20
- --oh-color-accent-muted: #344242;
21
- /* Light green (5.0:1) */
22
- --oh-color-feedback-success: #7ab87c;
23
- --oh-color-feedback-success-subtle: #2a3629;
24
- /* Light red (5.0:1 on base, 5.0:1 on raised) */
25
- --oh-color-feedback-error: #e08f8d;
26
- --oh-color-feedback-error-subtle: #3d2a29;
27
- /* Light amber (5.4:1) */
28
- --oh-color-feedback-warning: #e8b050;
29
- --oh-color-feedback-warning-subtle: #3d3529;
30
- --oh-color-feedback-info: #7aa3a4;
31
- --oh-color-feedback-info-subtle: #2a3636;
32
- /* Deep walnut */
33
- --oh-color-surface-base: #2a2420;
34
- /* Warm dark card */
35
- --oh-color-surface-raised: #3d3229;
36
- /* Slightly warmer than raised — use with gradient overlay */
37
- --oh-color-surface-sunlit: #44382c;
38
- /* Darker inset */
39
- --oh-color-surface-inset: #1f1a17;
40
- /* Flips to warm white in dark */
41
- --oh-color-surface-white: #f5f0e8;
42
6
  --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
43
- /* Distinct hover — lighter than raised */
44
- --oh-color-surface-hover: #4a3f33;
45
- --oh-color-surface-active-pressed: #352e28;
46
- --oh-color-surface-disabled: #352e28;
47
- /* 3.7:1 on base, 3.0:1 on raised — passes WCAG 1.4.11 */
48
- --oh-color-border-default: #8a7a68;
49
- /* Decorative dividers only — below 3:1, not for UI component boundaries */
50
- --oh-color-border-subtle: #6b5d4d;
51
- /* 4.9:1 on base, 4.0:1 on raised — inputs, secondary buttons */
52
- --oh-color-border-emphasis: #a09080;
53
- --oh-color-border-focus: #e8a838;
7
+ --oh-color-surface-sheen: rgba(255, 255, 255, 0.5);
8
+ --oh-color-surface-backdrop: rgba(61, 50, 41, 0.6);
54
9
  --oh-color-border-brand: rgba(232, 168, 56, 0.3);
55
- /* Warm white (12.4:1) */
56
- --oh-color-text-primary: #f5f0e8;
57
- /* Dune (6.8:1) */
58
- --oh-color-text-secondary: #c9c1b4;
59
- --oh-color-text-disabled: #6b5d4d;
60
- --oh-color-text-inverse: #2a2420;
61
- --oh-color-text-link: #e8a838;
62
- --oh-color-text-link-hover: #f0b848;
63
- /* Dark text on light brand bg (7.5:1) */
64
- --oh-color-text-on-brand: #2a2420;
65
- /* Dark text on light accent bg (5.8:1) */
66
- --oh-color-text-on-accent: #2a2420;
67
- --oh-focus-ring-color: rgba(232, 168, 56, 0.4);
10
+ --oh-color-border-brand-hover: rgba(197, 67, 0, 0.35); /** Same as light for now: the dark theme hasn't been designed */
11
+ --oh-color-border-divider: rgba(226, 213, 200, 0.6);
12
+ --oh-elevation-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
13
+ --oh-elevation-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
14
+ --oh-elevation-strong: 0 8px 24px rgba(0, 0, 0, 0.4);
15
+ --oh-elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
68
16
  --oh-focus-glow-color: rgba(232, 168, 56, 0.2);
69
- --oh-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
70
- --oh-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
71
- --oh-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
72
- /* Chunky input shadow */
73
- --oh-shadow-chunky-inset: inset 3px 3px 0 0 rgba(0, 0, 0, 0.2);
74
- }
75
-
76
- /* Automatic dark mode based on system preference */
77
- @media (prefers-color-scheme: dark) {
78
- :root:not([data-theme='light']) {
79
- --oh-color-brand-primary: #e8a838;
80
- --oh-color-brand-primary-hover: #f0b848;
81
- --oh-color-brand-primary-active: #d4922c;
82
- --oh-color-brand-primary-subtle: #3d3229;
83
- --oh-color-brand-primary-muted: #4a3d32;
84
- --oh-color-brand-highlight: #f0c860;
85
- --oh-color-brand-highlight-subtle: #3d3829;
86
- --oh-color-accent-default: #7aa3a4;
87
- --oh-color-accent-hover: #8fb4b5;
88
- --oh-color-accent-subtle: #2a3636;
89
- --oh-color-accent-muted: #344242;
90
- --oh-color-feedback-success: #7ab87c;
91
- --oh-color-feedback-success-subtle: #2a3629;
92
- --oh-color-feedback-error: #e08f8d;
93
- --oh-color-feedback-error-subtle: #3d2a29;
94
- --oh-color-feedback-warning: #e8b050;
95
- --oh-color-feedback-warning-subtle: #3d3529;
96
- --oh-color-feedback-info: #7aa3a4;
97
- --oh-color-feedback-info-subtle: #2a3636;
98
- --oh-color-surface-base: #2a2420;
99
- --oh-color-surface-raised: #3d3229;
100
- --oh-color-surface-sunlit: #44382c;
101
- --oh-color-surface-inset: #1f1a17;
102
- --oh-color-surface-white: #f5f0e8;
103
- --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
104
- --oh-color-surface-hover: #4a3f33;
105
- --oh-color-surface-active-pressed: #352e28;
106
- --oh-color-surface-disabled: #352e28;
107
- --oh-color-border-default: #8a7a68;
108
- --oh-color-border-subtle: #6b5d4d;
109
- --oh-color-border-emphasis: #a09080;
110
- --oh-color-border-focus: #e8a838;
111
- --oh-color-border-brand: rgba(232, 168, 56, 0.3);
112
- --oh-color-text-primary: #f5f0e8;
113
- --oh-color-text-secondary: #c9c1b4;
114
- --oh-color-text-disabled: #6b5d4d;
115
- --oh-color-text-inverse: #2a2420;
116
- --oh-color-text-link: #e8a838;
117
- --oh-color-text-link-hover: #f0b848;
118
- --oh-color-text-on-brand: #2a2420;
119
- --oh-color-text-on-accent: #2a2420;
120
- --oh-focus-ring-color: rgba(232, 168, 56, 0.4);
121
- --oh-focus-glow-color: rgba(232, 168, 56, 0.2);
122
- --oh-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
123
- --oh-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
124
- --oh-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
125
- --oh-shadow-chunky-inset: inset 3px 3px 0 0 rgba(0, 0, 0, 0.2);
126
- }
17
+ --oh-color-brand-primary: var(--oh-color-honey-400);
18
+ --oh-color-brand-primary-hover: var(--oh-color-honey-300);
19
+ --oh-color-brand-primary-active: var(--oh-color-honey-500);
20
+ --oh-color-brand-primary-subtle: var(--oh-color-warm-walnut);
21
+ --oh-color-brand-highlight: var(--oh-color-honey-300);
22
+ --oh-color-brand-highlight-subtle: var(--oh-color-honey-900);
23
+ --oh-color-accent-default: var(--oh-color-blue-200);
24
+ --oh-color-accent-hover: var(--oh-color-blue-100);
25
+ --oh-color-accent-active: var(--oh-color-blue-300);
26
+ --oh-color-accent-subtle: var(--oh-color-blue-800);
27
+ --oh-color-accent-shadow: var(--oh-color-blue-800);
28
+ --oh-color-feedback-success: var(--oh-color-green-300);
29
+ --oh-color-feedback-success-subtle: var(--oh-color-green-900);
30
+ --oh-color-feedback-error: var(--oh-color-red-300);
31
+ --oh-color-feedback-error-hover: var(--oh-color-red-100);
32
+ --oh-color-feedback-error-subtle: var(--oh-color-red-900);
33
+ --oh-color-feedback-error-shadow: var(--oh-color-red-900);
34
+ --oh-color-feedback-warning: var(--oh-color-honey-300);
35
+ --oh-color-feedback-warning-subtle: var(--oh-color-honey-900);
36
+ --oh-color-feedback-info: var(--oh-color-blue-200);
37
+ --oh-color-feedback-info-subtle: var(--oh-color-blue-800);
38
+ --oh-color-surface-base: var(--oh-color-warm-cocoa);
39
+ --oh-color-surface-raised: var(--oh-color-warm-walnut);
40
+ --oh-color-surface-sunlit: var(--oh-color-warm-chestnut);
41
+ --oh-color-surface-inset: var(--oh-color-warm-espresso);
42
+ --oh-color-surface-highlight: var(--oh-color-warm-hickory); /** Lighter than raised; text.primary stays readable on it */
43
+ --oh-color-surface-disabled: var(--oh-color-warm-mocha);
44
+ --oh-color-surface-hover: var(--oh-color-warm-hickory);
45
+ --oh-color-surface-active-pressed: var(--oh-color-warm-mocha);
46
+ --oh-color-surface-featured-start: var(--oh-color-warm-dawn); /** Same as light for now: the dark theme hasn't been designed */
47
+ --oh-color-surface-featured-mid: var(--oh-color-warm-shell);
48
+ --oh-color-surface-featured-end: var(--oh-color-warm-biscuit);
49
+ --oh-color-border-default: var(--oh-color-warm-taupe);
50
+ --oh-color-border-subtle: var(--oh-color-warm-driftwood); /** Decorative dividers only — below 3:1 */
51
+ --oh-color-border-emphasis: var(--oh-color-warm-stone);
52
+ --oh-color-border-strong: var(--oh-color-warm-stone);
53
+ --oh-color-border-hover: var(--oh-color-warm-dune);
54
+ --oh-color-border-disabled: var(--oh-color-warm-hickory);
55
+ --oh-color-text-primary: var(--oh-color-warm-linen);
56
+ --oh-color-text-secondary: var(--oh-color-warm-dune);
57
+ --oh-color-text-disabled: var(--oh-color-warm-driftwood);
58
+ --oh-color-text-inverse: var(--oh-color-warm-cocoa);
59
+ --oh-color-text-link: var(--oh-color-honey-400);
60
+ --oh-color-text-link-hover: var(--oh-color-honey-300);
61
+ --oh-color-text-link-raised: var(--oh-color-honey-400);
62
+ --oh-color-text-brand: var(--oh-color-honey-400);
63
+ --oh-color-text-on-brand: var(--oh-color-warm-cocoa);
64
+ --oh-color-text-on-accent: var(--oh-color-warm-cocoa);
65
+ --oh-color-text-on-success: var(--oh-color-warm-cocoa);
66
+ --oh-color-text-on-error: var(--oh-color-warm-cocoa);
67
+ --oh-color-text-on-warning: var(--oh-color-warm-cocoa);
68
+ --oh-color-text-on-info: var(--oh-color-warm-cocoa);
69
+ --oh-shadow-primary: var(--oh-color-honey-800);
70
+ --oh-shadow-secondary: var(--oh-color-warm-espresso);
71
+ --oh-shadow-accent: var(--oh-color-blue-800);
72
+ --oh-shadow-error: var(--oh-color-red-900);
73
+ --oh-shadow-neutral: var(--oh-shadow-chunky-driftwood); /** As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design */
74
+ --oh-shadow-neutral-hover: var(--oh-shadow-chunky-driftwood-hover); /** As in light; review with the dark design */
75
+ --oh-shadow-overlay: var(--oh-shadow-chunky-driftwood-deep); /** As in light; review with the dark design */
76
+ --oh-shadow-field: var(--oh-shadow-chunky-walnut); /** As in light; review with the dark design */
77
+ --oh-focus-ring-color: var(--oh-color-honey-400); /** Opaque, as in light */
127
78
  }