@orange-halo/tokens 2.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 (26) hide show
  1. package/contrast-pairs.json +1 -0
  2. package/dist/brands/hood-dark.css +74 -0
  3. package/dist/brands/hood-dark.json +719 -0
  4. package/dist/brands/hood.css +433 -0
  5. package/dist/brands/hood.json +719 -0
  6. package/dist/brands/orange-halo-dark.css +78 -0
  7. package/dist/brands/orange-halo-dark.json +853 -0
  8. package/dist/brands/orange-halo.css +511 -0
  9. package/dist/brands/orange-halo.json +853 -0
  10. package/dist/themes/dark.css +11 -0
  11. package/dist/themes/dark.json +112 -42
  12. package/dist/tokens.css +88 -38
  13. package/dist/tokens.js +96 -30
  14. package/dist/tokens.json +112 -42
  15. package/package.json +2 -1
  16. package/tokens/brands/hood/brand.json +5 -0
  17. package/tokens/brands/hood/dark.tokens.json +295 -0
  18. package/tokens/brands/hood/light.tokens.json +875 -0
  19. package/tokens/brands/hood/palette.tokens.json +130 -0
  20. package/tokens/brands/orange-halo/brand.json +5 -0
  21. package/tokens/{themes → brands/orange-halo}/dark.tokens.json +14 -3
  22. package/tokens/{semantic.tokens.json → brands/orange-halo/light.tokens.json} +95 -0
  23. package/tokens/{global.tokens.json → brands/orange-halo/palette.tokens.json} +58 -168
  24. package/tokens/{component.tokens.json → core/component.tokens.json} +16 -12
  25. package/tokens/core/scales.tokens.json +170 -0
  26. package/dist/themes/light.css +0 -47
package/contrast-pairs.json CHANGED
@@ -5,6 +5,7 @@
5
5
  { "fg": "color.text.primary", "bg": "color.surface.raised", "min": 4.5, "use": "Body text on cards" },
6
6
  { "fg": "color.text.secondary", "bg": "color.surface.base", "min": 4.5, "use": "Secondary text on page" },
7
7
  { "fg": "color.text.secondary", "bg": "color.surface.inset", "min": 4.5, "use": "Placeholder / helper text in wells" },
8
+ { "fg": "color.text.secondary", "bg": "color.surface.raised", "min": 4.5, "use": "Secondary text on raised surfaces (cards, panels, keyboard hints)" },
8
9
  { "fg": "color.text.primary", "bg": "color.surface.highlight", "min": 4.5, "use": "Text in a focused input" },
9
10
  { "fg": "color.text.link", "bg": "color.surface.base", "min": 4.5, "use": "Links on page" },
10
11
  { "fg": "color.text.linkRaised", "bg": "color.surface.raised", "min": 4.5, "use": "Links on raised surfaces (cards, skip link)" },
package/dist/brands/hood-dark.css ADDED
@@ -0,0 +1,74 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ [data-theme='dark'] {
6
+ --oh-color-surface-overlay: rgba(0, 0, 0, 0.7);
7
+ --oh-color-surface-sheen: rgba(255, 255, 255, 0.03);
8
+ --oh-color-surface-backdrop: rgba(0, 0, 0, 0.75);
9
+ --oh-color-border-brand: rgba(255, 255, 255, 0.25);
10
+ --oh-color-border-brand-hover: rgba(255, 255, 255, 0.45);
11
+ --oh-focus-glow-color: rgba(255, 255, 255, 0); /** No glow: the outline is the indicator */
12
+ --oh-color-brand-primary: var(--oh-color-white);
13
+ --oh-color-brand-primary-hover: var(--oh-color-grey-200);
14
+ --oh-color-brand-primary-active: var(--oh-color-grey-300);
15
+ --oh-color-brand-primary-subtle: var(--oh-color-grey-800);
16
+ --oh-color-brand-highlight: var(--oh-color-grey-100);
17
+ --oh-color-brand-highlight-subtle: var(--oh-color-grey-750);
18
+ --oh-color-accent-default: var(--oh-color-blue-300);
19
+ --oh-color-accent-hover: var(--oh-color-blue-200);
20
+ --oh-color-accent-active: var(--oh-color-blue-300);
21
+ --oh-color-accent-subtle: var(--oh-color-blue-900);
22
+ --oh-color-accent-shadow: var(--oh-color-blue-900);
23
+ --oh-color-feedback-success: var(--oh-color-green-300);
24
+ --oh-color-feedback-success-subtle: var(--oh-color-green-900);
25
+ --oh-color-feedback-error: var(--oh-color-red-300);
26
+ --oh-color-feedback-error-hover: var(--oh-color-red-100);
27
+ --oh-color-feedback-error-subtle: var(--oh-color-red-900);
28
+ --oh-color-feedback-error-shadow: var(--oh-color-red-900);
29
+ --oh-color-feedback-warning: var(--oh-color-amber-300);
30
+ --oh-color-feedback-warning-subtle: var(--oh-color-amber-900);
31
+ --oh-color-feedback-info: var(--oh-color-blue-300);
32
+ --oh-color-feedback-info-subtle: var(--oh-color-blue-900);
33
+ --oh-color-surface-base: var(--oh-color-grey-850);
34
+ --oh-color-surface-raised: var(--oh-color-grey-800);
35
+ --oh-color-surface-sunlit: var(--oh-color-grey-800);
36
+ --oh-color-surface-inset: var(--oh-color-grey-900);
37
+ --oh-color-surface-highlight: var(--oh-color-grey-750);
38
+ --oh-color-surface-disabled: var(--oh-color-grey-800);
39
+ --oh-color-surface-hover: var(--oh-color-grey-750);
40
+ --oh-color-surface-active-pressed: var(--oh-color-grey-700);
41
+ --oh-color-surface-featured-start: var(--oh-color-grey-750);
42
+ --oh-color-surface-featured-mid: var(--oh-color-grey-800);
43
+ --oh-color-surface-featured-end: var(--oh-color-grey-800);
44
+ --oh-color-border-default: var(--oh-color-grey-750);
45
+ --oh-color-border-subtle: var(--oh-color-grey-800);
46
+ --oh-color-border-emphasis: var(--oh-color-grey-500);
47
+ --oh-color-border-strong: var(--oh-color-grey-650);
48
+ --oh-color-border-hover: var(--oh-color-grey-100);
49
+ --oh-color-border-disabled: var(--oh-color-grey-800);
50
+ --oh-color-border-divider: var(--oh-color-grey-750);
51
+ --oh-color-text-primary: var(--oh-color-grey-100);
52
+ --oh-color-text-secondary: var(--oh-color-grey-500);
53
+ --oh-color-text-disabled: var(--oh-color-grey-650);
54
+ --oh-color-text-inverse: var(--oh-color-grey-850);
55
+ --oh-color-text-link: var(--oh-color-white);
56
+ --oh-color-text-link-hover: var(--oh-color-grey-300);
57
+ --oh-color-text-link-raised: var(--oh-color-white);
58
+ --oh-color-text-brand: var(--oh-color-white);
59
+ --oh-color-text-on-brand: var(--oh-color-grey-850);
60
+ --oh-color-text-on-accent: var(--oh-color-grey-850);
61
+ --oh-color-text-on-success: var(--oh-color-grey-850);
62
+ --oh-color-text-on-error: var(--oh-color-grey-850);
63
+ --oh-color-text-on-warning: var(--oh-color-grey-850);
64
+ --oh-color-text-on-info: var(--oh-color-grey-850);
65
+ --oh-shadow-overlay: var(--oh-color-black);
66
+ --oh-shadow-primary: var(--oh-color-black);
67
+ --oh-shadow-secondary: var(--oh-color-black);
68
+ --oh-shadow-accent: var(--oh-color-black);
69
+ --oh-shadow-error: var(--oh-color-black);
70
+ --oh-shadow-neutral: var(--oh-color-black);
71
+ --oh-shadow-neutral-hover: var(--oh-color-black);
72
+ --oh-shadow-field: var(--oh-color-black);
73
+ --oh-focus-ring-color: var(--oh-color-white); /** Solid focus outline, as on the site: white on dark, near-black on light */
74
+ }