@orange-halo/tokens 1.0.0 → 2.1.0

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

@@ -3,34 +3,35 @@
   "button": {
     "$description": "Button — chunky, tactile, playful with offset shadows",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{typography.label.fontFamily}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" },
-      "borderRadius": { "$type": "dimension", "$value": "{radius.md}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "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": "{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": "{font.size.sm}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.3}" },
+        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.sm}" },
+        "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
         "paddingY": { "$type": "dimension", "$value": "{spacing.2}" },
-        "minHeight": { "$type": "dimension", "$value": "36px" },
-        "gap": { "$type": "dimension", "$value": "{spacing.1-5}" }
+        "minHeight": { "$type": "dimension", "$value": "40px" },
+        "gap": { "$type": "dimension", "$value": "{spacing.2}" }
       },
       "md": {
-        "fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
-        "paddingY": { "$type": "dimension", "$value": "{spacing.2-5}" },
-        "minHeight": { "$type": "dimension", "$value": "44px" },
+        "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": "{font.size.base}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.6}" },
-        "paddingY": { "$type": "dimension", "$value": "{spacing.3-5}" },
-        "minHeight": { "$type": "dimension", "$value": "52px" },
+        "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" },
         "gap": { "$type": "dimension", "$value": "{spacing.2-5}" }
       }
     },
@@ -40,14 +41,14 @@
         "background": { "$type": "color", "$value": "{color.brand.primary}" },
         "backgroundHover": { "$type": "color", "$value": "{color.brand.primaryHover}" },
         "backgroundActive": { "$type": "color", "$value": "{color.brand.primaryActive}" },
-        "color": { "$type": "color", "$value": "{color.surface.white}" },
+        "color": { "$type": "color", "$value": "{color.text.onBrand}" },
         "borderColor": { "$type": "color", "$value": "{color.brand.primary}" },
         "shadowColor": { "$type": "color", "$value": "{shadow.primary}" }
       },
       "secondary": {
         "$description": "Secondary — cream surface with emphasis border",
         "background": { "$type": "color", "$value": "{color.surface.base}" },
-        "backgroundHover": { "$type": "color", "$value": "{color.surface.white}" },
+        "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}" },
@@ -58,14 +59,13 @@
         "background": { "$type": "color", "$value": "{color.accent.default}" },
         "backgroundHover": { "$type": "color", "$value": "{color.accent.hover}" },
         "backgroundActive": { "$type": "color", "$value": "{color.accent.active}" },
-        "color": { "$type": "color", "$value": "{color.surface.white}" },
+        "color": { "$type": "color", "$value": "{color.text.onAccent}" },
         "borderColor": { "$type": "color", "$value": "{color.accent.default}" },
         "shadowColor": { "$type": "color", "$value": "{color.accent.shadow}" }
       }
     },
     "focus": {
-      "$description": "Warm, friendly focus ring",
-      "ringWidth": { "$type": "dimension", "$value": "3px" },
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
       "ringColor": { "$type": "color", "$value": "{focus.ringColor}" },
       "glowColor": { "$type": "color", "$value": "{focus.glowColor}" }
     }
@@ -73,11 +73,11 @@
   "input": {
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
-      "fontSize": { "$type": "dimension", "$value": "{font.size.lg}" },
-      "lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" },
-      "borderRadius": { "$type": "dimension", "$value": "{radius.md}" },
-      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "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": "{stroke.control}" },
       "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
     },
@@ -100,9 +100,9 @@
         "borderColor": { "$type": "color", "$value": "{color.border.hover}" }
       },
       "focus": {
-        "background": { "$type": "color", "$value": "{color.surface.white}" },
-        "borderColor": { "$type": "color", "$value": "{color.border.focus}" },
-        "focusRingColor": { "$type": "color", "$value": "{color.border.focusInner}" }
+        "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}" },
@@ -115,8 +115,8 @@
     "$description": "Card — raised surface with visible frame",
     "base": {
       "background": { "$type": "color", "$value": "{color.surface.raised}" },
-      "borderRadius": { "$type": "dimension", "$value": "{shape.container}" },
-      "borderWidth": { "$type": "dimension", "$value": "{border.width.1}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.large}" },
+      "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}" }
@@ -125,25 +125,60 @@
       "$description": "Interactive card — gentle warmth on hover",
       "transitionDuration": { "$type": "duration", "$value": "{motion.gentle}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" },
-      "backgroundHover": { "$type": "color", "$value": "{color.warm.cream}" },
+      "backgroundHover": { "$type": "color", "$value": "{color.surface.base}" },
       "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}" },
+      "gradientMid": { "$type": "color", "$value": "{color.surface.base}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.surface.raised}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.default}" }
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": { "$type": "color", "$value": "{color.surface.base}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.surface.raised}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.default}" }
+    },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "background": { "$type": "string", "$value": "{gradient.sunlit}" },
+      "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": "{color.border.brandHover}" },
       "shadow": { "$type": "shadow", "$value": "{elevation.medium}" }
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "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)" },
+      "trackBorder": { "$type": "color", "$value": "rgba(255, 255, 255, 0.3)" },
+      "fill": { "$type": "color", "$value": "{color.text.inverse}" }
     }
   },
   "badge": {
     "$description": "Badge — small status indicators",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
-      "fontSize": { "$type": "dimension", "$value": "{font.size.xs}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" },
-      "borderRadius": { "$type": "dimension", "$value": "{shape.pill}" },
+      "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}" }
     },
@@ -169,7 +204,7 @@
         "color": { "$type": "color", "$value": "{color.feedback.warning}" }
       },
       "neutral": {
-        "background": { "$type": "color", "$value": "{color.warm.parchment}" },
+        "background": { "$type": "color", "$value": "{color.surface.inset}" },
         "color": { "$type": "color", "$value": "{color.text.secondary}" }
       }
     }
@@ -179,6 +214,19 @@
     "color": { "$type": "color", "$value": "{color.text.link}" },
     "colorHover": { "$type": "color", "$value": "{color.text.linkHover}" },
     "textDecoration": { "$type": "string", "$value": "underline" },
-    "textDecorationHover": { "$type": "string", "$value": "none" }
+    "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" }
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "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" },
+    "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",
+    "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,46 +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: #5f8a8b;
-  --oh-color-accent-hover: #4d7172;
-  --oh-color-accent-subtle: #f0f6f6;
-  --oh-color-accent-muted: #e0ebeb;
-  --oh-color-feedback-success: #4a8a4c;
-  --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: #4d7172;
-  --oh-color-feedback-info-subtle: #f0f6f6;
-  --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: #c9c1b4;
-  --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-focus-ring-color: rgba(197, 67, 0, 0.35);
-  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
-}