@orange-halo/tokens 2.0.0 → 2.2.0

package/contrast-pairs.json

@@ -1,35 +1,192 @@
 {
   "$description": "Token pairs that must meet WCAG contrast. Used by `pnpm check:contrast` and the Storybook Tokens page. Paths are token paths in dist/tokens.json. `over` composites a translucent background onto a solid one. `knownIssue` reports a failure as a warning until it's resolved.",
   "pairs": [
-    { "fg": "color.text.primary", "bg": "color.surface.base", "min": 4.5, "use": "Body text on page" },
-    { "fg": "color.text.primary", "bg": "color.surface.raised", "min": 4.5, "use": "Body text on cards" },
-    { "fg": "color.text.secondary", "bg": "color.surface.base", "min": 4.5, "use": "Secondary text on page" },
-    { "fg": "color.text.secondary", "bg": "color.surface.inset", "min": 4.5, "use": "Placeholder / helper text in wells" },
-    { "fg": "color.text.primary", "bg": "color.surface.highlight", "min": 4.5, "use": "Text in a focused input" },
-    { "fg": "color.text.link", "bg": "color.surface.base", "min": 4.5, "use": "Links on page" },
-    { "fg": "color.text.linkRaised", "bg": "color.surface.raised", "min": 4.5, "use": "Links on raised surfaces (cards, skip link)" },
-    { "fg": "color.text.onBrand", "bg": "color.brand.primary", "min": 4.5, "use": "Primary button, hero text" },
-    { "fg": "color.text.onBrand", "bg": "color.brand.primaryHover", "min": 4.5, "use": "Primary button hover" },
-    { "fg": "color.text.onAccent", "bg": "color.accent.default", "min": 4.5, "use": "Accent button, footer text" },
-    { "fg": "color.text.onAccent", "bg": "color.accent.hover", "min": 4.5, "use": "Accent button hover" },
-    { "fg": "color.brand.primary", "bg": "color.brand.primarySubtle", "min": 4.5, "use": "Brand badge" },
-    { "fg": "color.accent.default", "bg": "color.accent.subtle", "min": 4.5, "use": "Accent badge" },
-    { "fg": "color.feedback.success", "bg": "color.feedback.successSubtle", "min": 4.5, "use": "Success badge / alert text" },
-    { "fg": "color.feedback.error", "bg": "color.feedback.errorSubtle", "min": 4.5, "use": "Error text on error background" },
-    { "fg": "color.feedback.error", "bg": "color.surface.base", "min": 4.5, "use": "Error messages" },
-    { "fg": "color.feedback.warning", "bg": "color.feedback.warningSubtle", "min": 4.5, "use": "Warning badge / alert text" },
-    { "fg": "color.feedback.info", "bg": "color.feedback.infoSubtle", "min": 4.5, "use": "Info badge / alert text" },
-    { "fg": "color.text.onSuccess", "bg": "color.feedback.success", "min": 4.5, "use": "Filled success badge" },
-    { "fg": "color.text.onError", "bg": "color.feedback.error", "min": 4.5, "use": "Filled error badge" },
-    { "fg": "color.text.onWarning", "bg": "color.feedback.warning", "min": 4.5, "use": "Filled warning badge" },
-    { "fg": "color.text.onInfo", "bg": "color.feedback.info", "min": 4.5, "use": "Filled info badge" },
-    { "fg": "color.border.emphasis", "bg": "color.surface.base", "min": 3, "use": "Control borders at rest" },
-    { "fg": "color.border.hover", "bg": "color.surface.base", "min": 3, "use": "Control borders on hover" },
-    { "fg": "focus.ringColor", "bg": "color.surface.highlight", "min": 3, "use": "Focused input border" },
-    { "fg": "focus.ringColor", "bg": "color.surface.base", "min": 3, "use": "Focus outline" },
-    { "fg": "color.brand.primary", "bg": "color.surface.base", "min": 3, "use": "Checked controls, link underlines" },
-    { "fg": "color.feedback.success", "bg": "color.surface.inset", "min": 3, "use": "Progress fill (success)" },
-    { "fg": "color.brand.primary", "bg": "color.surface.inset", "min": 3, "use": "Progress fill (brand)" },
-    { "fg": "progress.inverse.fill", "bg": "progress.inverse.trackBackground", "over": "color.brand.primary", "min": 3, "use": "Inverse progress fill in the hero" }
+    {
+      "fg": "color.text.primary",
+      "bg": "color.surface.base",
+      "min": 4.5,
+      "use": "Body text on page"
+    },
+    {
+      "fg": "color.text.primary",
+      "bg": "color.surface.raised",
+      "min": 4.5,
+      "use": "Body text on cards"
+    },
+    {
+      "fg": "color.text.secondary",
+      "bg": "color.surface.base",
+      "min": 4.5,
+      "use": "Secondary text on page"
+    },
+    {
+      "fg": "color.text.secondary",
+      "bg": "color.surface.inset",
+      "min": 4.5,
+      "use": "Placeholder / helper text in wells"
+    },
+    {
+      "fg": "color.text.secondary",
+      "bg": "color.surface.raised",
+      "min": 4.5,
+      "use": "Secondary text on raised surfaces (cards, panels, keyboard hints)"
+    },
+    {
+      "fg": "color.text.primary",
+      "bg": "color.surface.highlight",
+      "min": 4.5,
+      "use": "Text in a focused input"
+    },
+    {
+      "fg": "color.text.link",
+      "bg": "color.surface.base",
+      "min": 4.5,
+      "use": "Links on page"
+    },
+    {
+      "fg": "color.text.linkRaised",
+      "bg": "color.surface.raised",
+      "min": 4.5,
+      "use": "Links on raised surfaces (cards, skip link)"
+    },
+    {
+      "fg": "color.text.onBrand",
+      "bg": "color.brand.primary",
+      "min": 4.5,
+      "use": "Primary button, hero text"
+    },
+    {
+      "fg": "color.text.onBrand",
+      "bg": "color.brand.primaryHover",
+      "min": 4.5,
+      "use": "Primary button hover"
+    },
+    {
+      "fg": "color.text.onAccent",
+      "bg": "color.accent.default",
+      "min": 4.5,
+      "use": "Accent button, footer text"
+    },
+    {
+      "fg": "color.text.onAccent",
+      "bg": "color.accent.hover",
+      "min": 4.5,
+      "use": "Accent button hover"
+    },
+    {
+      "fg": "color.brand.primary",
+      "bg": "color.brand.primarySubtle",
+      "min": 4.5,
+      "use": "Brand badge"
+    },
+    {
+      "fg": "color.accent.default",
+      "bg": "color.accent.subtle",
+      "min": 4.5,
+      "use": "Accent badge"
+    },
+    {
+      "fg": "color.feedback.success",
+      "bg": "color.feedback.successSubtle",
+      "min": 4.5,
+      "use": "Success badge / alert text"
+    },
+    {
+      "fg": "color.feedback.error",
+      "bg": "color.feedback.errorSubtle",
+      "min": 4.5,
+      "use": "Error text on error background"
+    },
+    {
+      "fg": "color.feedback.error",
+      "bg": "color.surface.base",
+      "min": 4.5,
+      "use": "Error messages"
+    },
+    {
+      "fg": "color.feedback.warning",
+      "bg": "color.feedback.warningSubtle",
+      "min": 4.5,
+      "use": "Warning badge / alert text"
+    },
+    {
+      "fg": "color.feedback.info",
+      "bg": "color.feedback.infoSubtle",
+      "min": 4.5,
+      "use": "Info badge / alert text"
+    },
+    {
+      "fg": "color.text.onSuccess",
+      "bg": "color.feedback.success",
+      "min": 4.5,
+      "use": "Filled success badge"
+    },
+    {
+      "fg": "color.text.onError",
+      "bg": "color.feedback.error",
+      "min": 4.5,
+      "use": "Filled error badge"
+    },
+    {
+      "fg": "color.text.onWarning",
+      "bg": "color.feedback.warning",
+      "min": 4.5,
+      "use": "Filled warning badge"
+    },
+    {
+      "fg": "color.text.onInfo",
+      "bg": "color.feedback.info",
+      "min": 4.5,
+      "use": "Filled info badge"
+    },
+    {
+      "fg": "color.border.emphasis",
+      "bg": "color.surface.base",
+      "min": 3,
+      "use": "Control borders at rest"
+    },
+    {
+      "fg": "color.border.hover",
+      "bg": "color.surface.base",
+      "min": 3,
+      "use": "Control borders on hover"
+    },
+    {
+      "fg": "focus.ringColor",
+      "bg": "color.surface.highlight",
+      "min": 3,
+      "use": "Focused input border"
+    },
+    {
+      "fg": "focus.ringColor",
+      "bg": "color.surface.base",
+      "min": 3,
+      "use": "Focus outline"
+    },
+    {
+      "fg": "color.brand.primary",
+      "bg": "color.surface.base",
+      "min": 3,
+      "use": "Checked controls, link underlines"
+    },
+    {
+      "fg": "color.feedback.success",
+      "bg": "color.surface.inset",
+      "min": 3,
+      "use": "Progress fill (success)"
+    },
+    {
+      "fg": "color.brand.primary",
+      "bg": "color.surface.inset",
+      "min": 3,
+      "use": "Progress fill (brand)"
+    },
+    {
+      "fg": "progress.inverse.fill",
+      "bg": "progress.inverse.trackBackground",
+      "over": "color.brand.primary",
+      "min": 3,
+      "use": "Inverse progress fill in the hero"
+    }
   ]
 }

package/contrast.js

@@ -24,7 +24,12 @@ export function parseColor(value) {
 /** Alpha-composite a colour onto an opaque background. */
 export function composite(fg, bg) {
   const [r, g, b, a] = fg;
-  return [r * a + bg[0] * (1 - a), g * a + bg[1] * (1 - a), b * a + bg[2] * (1 - a), 1];
+  return [
+    r * a + bg[0] * (1 - a),
+    g * a + bg[1] * (1 - a),
+    b * a + bg[2] * (1 - a),
+    1,
+  ];
 }
 
 function luminance([r, g, b]) {
@@ -55,5 +60,9 @@ export function checkPair(tokens, pair) {
   let fg = parseColor(resolve(tokens, pair.fg));
   if (fg[3] < 1) fg = composite(fg, bg);
   const value = ratio(fg, bg);
-  return { ...pair, ratio: Math.round(value * 100) / 100, pass: value >= pair.min };
+  return {
+    ...pair,
+    ratio: Math.round(value * 100) / 100,
+    pass: value >= pair.min,
+  };
 }

package/dist/brands/hood-dark.css

@@ -0,0 +1,74 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme='dark'] {
+  --oh-color-surface-overlay: rgba(0, 0, 0, 0.7);
+  --oh-color-surface-sheen: rgba(255, 255, 255, 0.03);
+  --oh-color-surface-backdrop: rgba(0, 0, 0, 0.75);
+  --oh-color-border-brand: rgba(255, 255, 255, 0.25);
+  --oh-color-border-brand-hover: rgba(255, 255, 255, 0.45);
+  --oh-focus-glow-color: rgba(255, 255, 255, 0); /** No glow: the outline is the indicator */
+  --oh-color-brand-primary: var(--oh-color-white);
+  --oh-color-brand-primary-hover: var(--oh-color-grey-200);
+  --oh-color-brand-primary-active: var(--oh-color-grey-300);
+  --oh-color-brand-primary-subtle: var(--oh-color-grey-800);
+  --oh-color-brand-highlight: var(--oh-color-grey-100);
+  --oh-color-brand-highlight-subtle: var(--oh-color-grey-750);
+  --oh-color-accent-default: var(--oh-color-blue-300);
+  --oh-color-accent-hover: var(--oh-color-blue-200);
+  --oh-color-accent-active: var(--oh-color-blue-300);
+  --oh-color-accent-subtle: var(--oh-color-blue-900);
+  --oh-color-accent-shadow: var(--oh-color-blue-900);
+  --oh-color-feedback-success: var(--oh-color-green-300);
+  --oh-color-feedback-success-subtle: var(--oh-color-green-900);
+  --oh-color-feedback-error: var(--oh-color-red-300);
+  --oh-color-feedback-error-hover: var(--oh-color-red-100);
+  --oh-color-feedback-error-subtle: var(--oh-color-red-900);
+  --oh-color-feedback-error-shadow: var(--oh-color-red-900);
+  --oh-color-feedback-warning: var(--oh-color-amber-300);
+  --oh-color-feedback-warning-subtle: var(--oh-color-amber-900);
+  --oh-color-feedback-info: var(--oh-color-blue-300);
+  --oh-color-feedback-info-subtle: var(--oh-color-blue-900);
+  --oh-color-surface-base: var(--oh-color-grey-850);
+  --oh-color-surface-raised: var(--oh-color-grey-800);
+  --oh-color-surface-sunlit: var(--oh-color-grey-800);
+  --oh-color-surface-inset: var(--oh-color-grey-900);
+  --oh-color-surface-highlight: var(--oh-color-grey-750);
+  --oh-color-surface-disabled: var(--oh-color-grey-800);
+  --oh-color-surface-hover: var(--oh-color-grey-750);
+  --oh-color-surface-active-pressed: var(--oh-color-grey-700);
+  --oh-color-surface-featured-start: var(--oh-color-grey-750);
+  --oh-color-surface-featured-mid: var(--oh-color-grey-800);
+  --oh-color-surface-featured-end: var(--oh-color-grey-800);
+  --oh-color-border-default: var(--oh-color-grey-750);
+  --oh-color-border-subtle: var(--oh-color-grey-800);
+  --oh-color-border-emphasis: var(--oh-color-grey-500);
+  --oh-color-border-strong: var(--oh-color-grey-650);
+  --oh-color-border-hover: var(--oh-color-grey-100);
+  --oh-color-border-disabled: var(--oh-color-grey-800);
+  --oh-color-border-divider: var(--oh-color-grey-750);
+  --oh-color-text-primary: var(--oh-color-grey-100);
+  --oh-color-text-secondary: var(--oh-color-grey-500);
+  --oh-color-text-disabled: var(--oh-color-grey-650);
+  --oh-color-text-inverse: var(--oh-color-grey-850);
+  --oh-color-text-link: var(--oh-color-white);
+  --oh-color-text-link-hover: var(--oh-color-grey-300);
+  --oh-color-text-link-raised: var(--oh-color-white);
+  --oh-color-text-brand: var(--oh-color-white);
+  --oh-color-text-on-brand: var(--oh-color-grey-850);
+  --oh-color-text-on-accent: var(--oh-color-grey-850);
+  --oh-color-text-on-success: var(--oh-color-grey-850);
+  --oh-color-text-on-error: var(--oh-color-grey-850);
+  --oh-color-text-on-warning: var(--oh-color-grey-850);
+  --oh-color-text-on-info: var(--oh-color-grey-850);
+  --oh-shadow-overlay: var(--oh-color-black);
+  --oh-shadow-primary: var(--oh-color-black);
+  --oh-shadow-secondary: var(--oh-color-black);
+  --oh-shadow-accent: var(--oh-color-black);
+  --oh-shadow-error: var(--oh-color-black);
+  --oh-shadow-neutral: var(--oh-color-black);
+  --oh-shadow-neutral-hover: var(--oh-color-black);
+  --oh-shadow-field: var(--oh-color-black);
+  --oh-focus-ring-color: var(--oh-color-white); /** Solid focus outline, as on the site: white on dark, near-black on light */
+}