@orange-halo/tokens 1.0.0 → 2.1.0

package/contrast-pairs.json

@@ -0,0 +1,36 @@
+{
+  "$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.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

@@ -0,0 +1,59 @@
+/**
+ * WCAG 2.x contrast helpers, shared by scripts/check-contrast.mjs and the
+ * Storybook Tokens page. No dependencies.
+ */
+
+/** Parse #rgb, #rrggbb, #rrggbbaa or rgb()/rgba() into [r, g, b, a]. */
+export function parseColor(value) {
+  const v = String(value).trim().toLowerCase();
+  let m = v.match(/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/);
+  if (m) {
+    const h = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+    const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+    const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+    return [r, g, b, a];
+  }
+  m = v.match(/^rgba?\(([^)]+)\)$/);
+  if (m) {
+    const [r, g, b, a = "1"] = m[1].split(/[\s,/]+/).filter(Boolean);
+    return [Number(r), Number(g), Number(b), Number(a)];
+  }
+  throw new Error(`Can't parse colour: ${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];
+}
+
+function luminance([r, g, b]) {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** Contrast ratio between two opaque colours. */
+export function ratio(a, b) {
+  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (l1 + 0.05) / (l2 + 0.05);
+}
+
+/** Look up a dotted token path (e.g. "color.brand.primary") in dist/tokens.json. */
+export function resolve(tokens, path) {
+  const value = path.split(".").reduce((node, key) => node?.[key], tokens);
+  if (typeof value !== "string") throw new Error(`Token not found: ${path}`);
+  return value;
+}
+
+/** Evaluate one pair from contrast-pairs.json. */
+export function checkPair(tokens, pair) {
+  let bg = parseColor(resolve(tokens, pair.bg));
+  if (pair.over) bg = composite(bg, parseColor(resolve(tokens, pair.over)));
+  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 };
+}

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 */
+}