@orange-halo/tokens 2.0.0 → 2.2.0

package/tokens/{component.tokens.json → core/component.tokens.json}

@@ -3,32 +3,56 @@
   "button": {
     "$description": "Button — chunky, tactile, playful with offset shadows",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{typography.control.fontFamily}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{typography.control.fontWeight}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{typography.control.letterSpacing}" },
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{typography.control.fontFamily}"
+      },
+      "fontWeight": {
+        "$type": "fontWeight",
+        "$value": "{typography.control.fontWeight}"
+      },
+      "letterSpacing": {
+        "$type": "dimension",
+        "$value": "{typography.control.letterSpacing}"
+      },
       "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
-      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
-      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easePlayful}" }
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.control}" },
+      "transitionDuration": {
+        "$type": "duration",
+        "$value": "{motion.snappy}"
+      },
+      "transitionEasing": {
+        "$type": "cubicBezier",
+        "$value": "{motion.easePlayful}"
+      }
     },
     "size": {
       "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
       "sm": {
-        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.sm}" },
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{typography.control.fontSize.sm}"
+        },
         "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
         "paddingY": { "$type": "dimension", "$value": "{spacing.2}" },
         "minHeight": { "$type": "dimension", "$value": "40px" },
         "gap": { "$type": "dimension", "$value": "{spacing.2}" }
       },
       "md": {
-        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.md}" },
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{typography.control.fontSize.md}"
+        },
         "paddingX": { "$type": "dimension", "$value": "{spacing.6}" },
         "paddingY": { "$type": "dimension", "$value": "{spacing.3}" },
         "minHeight": { "$type": "dimension", "$value": "48px" },
         "gap": { "$type": "dimension", "$value": "{spacing.2}" }
       },
       "lg": {
-        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.lg}" },
+        "fontSize": {
+          "$type": "dimension",
+          "$value": "{typography.control.fontSize.lg}"
+        },
         "paddingX": { "$type": "dimension", "$value": "{spacing.8}" },
         "paddingY": { "$type": "dimension", "$value": "{spacing.4}" },
         "minHeight": { "$type": "dimension", "$value": "56px" },
@@ -39,8 +63,14 @@
       "primary": {
         "$description": "Primary — warm orange, chunky tactile shadow",
         "background": { "$type": "color", "$value": "{color.brand.primary}" },
-        "backgroundHover": { "$type": "color", "$value": "{color.brand.primaryHover}" },
-        "backgroundActive": { "$type": "color", "$value": "{color.brand.primaryActive}" },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.brand.primaryHover}"
+        },
+        "backgroundActive": {
+          "$type": "color",
+          "$value": "{color.brand.primaryActive}"
+        },
         "color": { "$type": "color", "$value": "{color.text.onBrand}" },
         "borderColor": { "$type": "color", "$value": "{color.brand.primary}" },
         "shadowColor": { "$type": "color", "$value": "{shadow.primary}" }
@@ -48,17 +78,32 @@
       "secondary": {
         "$description": "Secondary — cream surface with emphasis border",
         "background": { "$type": "color", "$value": "{color.surface.base}" },
-        "backgroundHover": { "$type": "color", "$value": "{color.surface.hover}" },
-        "backgroundActive": { "$type": "color", "$value": "{color.surface.activePressed}" },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.surface.hover}"
+        },
+        "backgroundActive": {
+          "$type": "color",
+          "$value": "{color.surface.activePressed}"
+        },
         "color": { "$type": "color", "$value": "{color.text.primary}" },
-        "borderColor": { "$type": "color", "$value": "{color.border.emphasis}" },
+        "borderColor": {
+          "$type": "color",
+          "$value": "{color.border.emphasis}"
+        },
         "shadowColor": { "$type": "color", "$value": "{shadow.secondary}" }
       },
       "accent": {
         "$description": "Accent — blue, modern counterbalance",
         "background": { "$type": "color", "$value": "{color.accent.default}" },
-        "backgroundHover": { "$type": "color", "$value": "{color.accent.hover}" },
-        "backgroundActive": { "$type": "color", "$value": "{color.accent.active}" },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.accent.hover}"
+        },
+        "backgroundActive": {
+          "$type": "color",
+          "$value": "{color.accent.active}"
+        },
         "color": { "$type": "color", "$value": "{color.text.onAccent}" },
         "borderColor": { "$type": "color", "$value": "{color.accent.default}" },
         "shadowColor": { "$type": "color", "$value": "{color.accent.shadow}" }
@@ -73,13 +118,28 @@
   "input": {
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{typography.control.fontFamily}" },
-      "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.md}" },
-      "lineHeight": { "$type": "number", "$value": "{typography.body.base.lineHeight}" },
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{typography.control.fontFamily}"
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$value": "{typography.control.fontSize.md}"
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": "{typography.body.base.lineHeight}"
+      },
       "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
-      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
-      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.control}" },
+      "transitionDuration": {
+        "$type": "duration",
+        "$value": "{motion.snappy}"
+      },
+      "transitionEasing": {
+        "$type": "cubicBezier",
+        "$value": "{motion.easeGentle}"
+      }
     },
     "size": {
       "md": {
@@ -91,22 +151,36 @@
     "state": {
       "default": {
         "background": { "$type": "color", "$value": "{color.surface.base}" },
-        "borderColor": { "$type": "color", "$value": "{color.border.emphasis}", "$description": "WCAG 3:1 contrast for UI elements" },
+        "borderColor": {
+          "$type": "color",
+          "$value": "{color.border.emphasis}",
+          "$description": "WCAG 3:1 contrast for UI elements"
+        },
         "color": { "$type": "color", "$value": "{color.text.primary}" },
-        "placeholderColor": { "$type": "color", "$value": "{color.text.secondary}", "$description": "WCAG readable placeholder" },
+        "placeholderColor": {
+          "$type": "color",
+          "$value": "{color.text.secondary}",
+          "$description": "WCAG readable placeholder"
+        },
         "shadowColor": { "$type": "color", "$value": "{shadow.secondary}" }
       },
       "hover": {
         "borderColor": { "$type": "color", "$value": "{color.border.hover}" }
       },
       "focus": {
-        "background": { "$type": "color", "$value": "{color.surface.highlight}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.highlight}"
+        },
         "borderColor": { "$type": "color", "$value": "{focus.ringColor}" },
         "focusRingColor": { "$type": "color", "$value": "{focus.ringColor}" }
       },
       "error": {
         "borderColor": { "$type": "color", "$value": "{color.feedback.error}" },
-        "background": { "$type": "color", "$value": "{color.feedback.errorSubtle}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.feedback.errorSubtle}"
+        },
         "shadowColor": { "$type": "color", "$value": "{shadow.error}" }
       }
     }
@@ -116,22 +190,34 @@
     "base": {
       "background": { "$type": "color", "$value": "{color.surface.raised}" },
       "borderRadius": { "$type": "dimension", "$value": "{shape.large}" },
-      "borderWidth": { "$type": "dimension", "$value": "{border.width.1}" },
+      "borderWidth": { "$type": "dimension", "$value": "{stroke.surface}" },
       "borderColor": { "$type": "color", "$value": "{color.border.default}" },
       "shadow": { "$type": "shadow", "$value": "{elevation.soft}" },
       "padding": { "$type": "dimension", "$value": "{spacing.5}" }
     },
     "interactive": {
       "$description": "Interactive card — gentle warmth on hover",
-      "transitionDuration": { "$type": "duration", "$value": "{motion.gentle}" },
-      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" },
+      "transitionDuration": {
+        "$type": "duration",
+        "$value": "{motion.gentle}"
+      },
+      "transitionEasing": {
+        "$type": "cubicBezier",
+        "$value": "{motion.easeGentle}"
+      },
       "backgroundHover": { "$type": "color", "$value": "{color.surface.base}" },
-      "borderColorHover": { "$type": "color", "$value": "{color.border.brand}" },
+      "borderColorHover": {
+        "$type": "color",
+        "$value": "{color.border.brand}"
+      },
       "shadowHover": { "$type": "shadow", "$value": "{elevation.medium}" }
     },
     "raised": {
       "$description": "Raised card (default) — subtle top-lit gradient",
-      "gradientStart": { "$type": "color", "$value": "{color.surface.highlight}" },
+      "gradientStart": {
+        "$type": "color",
+        "$value": "{color.surface.highlight}"
+      },
       "gradientMid": { "$type": "color", "$value": "{color.surface.base}" },
       "gradientEnd": { "$type": "color", "$value": "{color.surface.raised}" },
       "borderColor": { "$type": "color", "$value": "{color.border.default}" }
@@ -144,26 +230,57 @@
     },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "background": { "$type": "string", "$value": "{gradient.sunlit}" },
-      "gradientStart": { "$type": "color", "$value": "{color.warm.dawn}" },
-      "gradientMid": { "$type": "color", "$value": "{color.warm.shell}" },
-      "gradientEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
+      "background": {
+        "$type": "string",
+        "$value": "linear-gradient(180deg, {color.surface.featuredStart} 0%, {color.surface.featuredMid} 30%, {color.surface.featuredEnd} 100%)"
+      },
+      "gradientStart": {
+        "$type": "color",
+        "$value": "{color.surface.featuredStart}"
+      },
+      "gradientMid": {
+        "$type": "color",
+        "$value": "{color.surface.featuredMid}"
+      },
+      "gradientEnd": {
+        "$type": "color",
+        "$value": "{color.surface.featuredEnd}"
+      },
       "borderColor": { "$type": "color", "$value": "{color.border.brand}" },
-      "borderColorHover": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)", "$description": "Decorative container edge — not a focus or control border" },
+      "borderColorHover": {
+        "$type": "color",
+        "$value": "{color.border.brandHover}"
+      },
       "shadow": { "$type": "shadow", "$value": "{elevation.medium}" }
     },
     "section": {
       "$description": "Card header and footer",
-      "dividerColor": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)", "$description": "Decorative divider" },
-      "headerGradientStart": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
-      "headerGradientEnd": { "$type": "color", "$value": "rgba(255, 255, 255, 0)" }
+      "dividerColor": { "$type": "color", "$value": "{color.border.divider}" },
+      "headerGradientStart": {
+        "$type": "color",
+        "$value": "{color.surface.sheen}"
+      },
+      "headerGradientEnd": {
+        "$type": "color",
+        "$value": "rgba(255, 255, 255, 0)"
+      }
     }
   },
   "progress": {
     "$description": "Progress — chunky pill track",
+    "track": {
+      "insetShadow": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.06)",
+        "$description": "Neutral, so it works on every track colour"
+      }
+    },
     "inverse": {
       "$description": "On brand/accent backgrounds (e.g. journey hero). Fill is cream so it reads at 3.7:1 against the track.",
-      "trackBackground": { "$type": "color", "$value": "rgba(255, 255, 255, 0.15)" },
+      "trackBackground": {
+        "$type": "color",
+        "$value": "rgba(255, 255, 255, 0.15)"
+      },
       "trackBorder": { "$type": "color", "$value": "rgba(255, 255, 255, 0.3)" },
       "fill": { "$type": "color", "$value": "{color.text.inverse}" }
     }
@@ -171,17 +288,32 @@
   "badge": {
     "$description": "Badge — small status indicators",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{typography.label.fontFamily}" },
-      "fontSize": { "$type": "dimension", "$value": "{typography.body.base.fontSize}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{typography.label.base.fontWeight}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{typography.label.base.letterSpacing}" },
+      "fontFamily": {
+        "$type": "fontFamily",
+        "$value": "{typography.label.fontFamily}"
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$value": "{typography.body.base.fontSize}"
+      },
+      "fontWeight": {
+        "$type": "fontWeight",
+        "$value": "{typography.label.base.fontWeight}"
+      },
+      "letterSpacing": {
+        "$type": "dimension",
+        "$value": "{typography.label.base.letterSpacing}"
+      },
       "borderRadius": { "$type": "dimension", "$value": "{shape.compact}" },
       "paddingX": { "$type": "dimension", "$value": "{spacing.2-5}" },
       "paddingY": { "$type": "dimension", "$value": "{spacing.1}" }
     },
     "variant": {
       "brand": {
-        "background": { "$type": "color", "$value": "{color.brand.primarySubtle}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.brand.primarySubtle}"
+        },
         "color": { "$type": "color", "$value": "{color.brand.primary}" }
       },
       "accent": {
@@ -189,15 +321,24 @@
         "color": { "$type": "color", "$value": "{color.accent.default}" }
       },
       "success": {
-        "background": { "$type": "color", "$value": "{color.feedback.successSubtle}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.feedback.successSubtle}"
+        },
         "color": { "$type": "color", "$value": "{color.feedback.success}" }
       },
       "error": {
-        "background": { "$type": "color", "$value": "{color.feedback.errorSubtle}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.feedback.errorSubtle}"
+        },
         "color": { "$type": "color", "$value": "{color.feedback.error}" }
       },
       "warning": {
-        "background": { "$type": "color", "$value": "{color.feedback.warningSubtle}" },
+        "background": {
+          "$type": "color",
+          "$value": "{color.feedback.warningSubtle}"
+        },
         "color": { "$type": "color", "$value": "{color.feedback.warning}" }
       },
       "neutral": {
@@ -214,15 +355,28 @@
     "textDecorationHover": { "$type": "string", "$value": "none" },
     "inverse": {
       "$description": "On brand/accent backgrounds",
-      "focusBackground": { "$type": "color", "$value": "rgba(0, 0, 0, 0.1)", "$description": "Focus tint — paired with the underline, which is the indicator" }
+      "focusBackground": {
+        "$type": "color",
+        "$value": "rgba(0, 0, 0, 0.1)",
+        "$description": "Focus tint — paired with the underline, which is the indicator"
+      }
     }
   },
   "modal": {
     "$description": "Modal dialog",
-    "overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.6)", "$description": "Backdrop — darker than color.surface.overlay so the dialog stands out" }
+    "overlay": { "$type": "color", "$value": "{color.surface.backdrop}" }
   },
   "closeButton": {
     "$description": "Icon-only close buttons in alerts and modals",
-    "backgroundHover": { "$type": "color", "$value": "rgba(0, 0, 0, 0.08)", "$description": "Neutral tint that works on every alert variant" }
+    "backgroundHover": {
+      "$type": "color",
+      "$value": "rgba(0, 0, 0, 0.08)",
+      "$description": "Neutral tint that works on every alert variant"
+    },
+    "shadowHover": {
+      "$type": "color",
+      "$value": "rgba(0, 0, 0, 0.15)",
+      "$description": "Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant"
+    }
   }
 }

package/tokens/core/scales.tokens.json

@@ -0,0 +1,170 @@
+{
+  "$description": "Core scales shared by every brand: spacing, fixed sizes (content widths and breakpoints) and stacking order. Structural, so layouts behave the same in every brand.",
+  "spacing": {
+    "$description": "Generous spacing — breathing room, not dense. Multiples of half the brand's grid.unit (spacing.1 = half a unit, spacing.2 = one unit), computed per brand at build time by style-dictionary.config.js; the values written here are what an 8px grid gives. The x-5 steps fall between half-units: avoid them in new work",
+    "0": {
+      "$type": "dimension",
+      "$value": "0"
+    },
+    "px": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "0-5": {
+      "$type": "dimension",
+      "$value": "0.125rem",
+      "$description": "2px"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "0.25rem",
+      "$description": "4px"
+    },
+    "1-5": {
+      "$type": "dimension",
+      "$value": "0.375rem",
+      "$description": "6px"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "0.5rem",
+      "$description": "8px"
+    },
+    "2-5": {
+      "$type": "dimension",
+      "$value": "0.625rem",
+      "$description": "10px"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "0.75rem",
+      "$description": "12px"
+    },
+    "3-5": {
+      "$type": "dimension",
+      "$value": "0.875rem",
+      "$description": "14px"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "1rem",
+      "$description": "16px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "1.25rem",
+      "$description": "20px"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "1.5rem",
+      "$description": "24px"
+    },
+    "7": {
+      "$type": "dimension",
+      "$value": "1.75rem",
+      "$description": "28px"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "2rem",
+      "$description": "32px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "2.5rem",
+      "$description": "40px"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "3rem",
+      "$description": "48px"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "4rem",
+      "$description": "64px"
+    },
+    "20": {
+      "$type": "dimension",
+      "$value": "5rem",
+      "$description": "80px"
+    }
+  },
+  "size": {
+    "$description": "Fixed layout sizes: content widths and viewport breakpoints",
+    "container": {
+      "$description": "Content max-widths",
+      "sm": {
+        "$type": "dimension",
+        "$value": "640px"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "768px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1024px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "1280px"
+      }
+    },
+    "breakpoint": {
+      "$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
+      "xs": {
+        "$type": "dimension",
+        "$value": "480px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "640px"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "768px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1024px"
+      }
+    }
+  },
+  "zIndex": {
+    "$description": "Z-index layering",
+    "0": {
+      "$type": "number",
+      "$value": 0
+    },
+    "10": {
+      "$type": "number",
+      "$value": 10
+    },
+    "20": {
+      "$type": "number",
+      "$value": 20
+    },
+    "dropdown": {
+      "$type": "number",
+      "$value": 1000
+    },
+    "sticky": {
+      "$type": "number",
+      "$value": 1100
+    },
+    "modal": {
+      "$type": "number",
+      "$value": 1200
+    },
+    "popover": {
+      "$type": "number",
+      "$value": 1300
+    },
+    "tooltip": {
+      "$type": "number",
+      "$value": 1400
+    }
+  }
+}

package/dist/themes/light.css

@@ -1,47 +0,0 @@
-/**
- * Orange Halo Light Theme
- * Auto-generated - do not edit directly
- * WCAG AA compliant color contrast ratios
- */
-
-:root, [data-theme='light'] {
-  --oh-color-brand-primary: #c54300;
-  --oh-color-brand-primary-hover: #9e3500;
-  --oh-color-brand-primary-active: #9e3500;
-  --oh-color-brand-primary-subtle: #fff3e0;
-  --oh-color-brand-primary-muted: #ffe0b2;
-  --oh-color-brand-highlight: #e8a838;
-  --oh-color-brand-highlight-subtle: #fdf3d4;
-  --oh-color-accent-default: #3d5a80;
-  --oh-color-accent-hover: #354f70;
-  --oh-color-accent-subtle: #eef4f9;
-  --oh-color-accent-muted: #d6e4f0;
-  --oh-color-feedback-success: #3d7340;
-  --oh-color-feedback-success-subtle: #f0f7f1;
-  --oh-color-feedback-error: #b54540;
-  --oh-color-feedback-error-subtle: #fdf4f3;
-  --oh-color-feedback-warning: #8c5e1c;
-  --oh-color-feedback-warning-subtle: #fefaee;
-  --oh-color-feedback-info: #3d5a80;
-  --oh-color-feedback-info-subtle: #eef4f9;
-  --oh-color-surface-base: #faf7f2;
-  --oh-color-surface-raised: #f5f0e8;
-  --oh-color-surface-sunlit: #faf7f2;
-  --oh-color-surface-inset: #ede8df;
-  --oh-color-surface-overlay: rgba(61, 50, 41, 0.4);
-  --oh-color-surface-disabled: #e2dcd2;
-  --oh-color-border-default: #e2dcd2;
-  --oh-color-border-subtle: #ede8df;
-  --oh-color-border-emphasis: #6b5d4d;
-  --oh-color-border-focus: #c54300;
-  --oh-color-border-brand: rgba(197, 67, 0, 0.25);
-  --oh-color-text-primary: #3d3229;
-  --oh-color-text-secondary: #6b5d4d;
-  --oh-color-text-disabled: #c9c1b4;
-  --oh-color-text-inverse: #faf7f2;
-  --oh-color-text-link: #c54300;
-  --oh-color-text-link-hover: #9e3500;
-  --oh-color-text-link-raised: #9e3500;
-  --oh-focus-ring-color: #c54300;
-  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
-}