@orange-halo/tokens 2.0.0 → 2.2.0

package/dist/themes/dark.css

@@ -4,7 +4,11 @@
 
 [data-theme='dark'] {
   --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
+  --oh-color-surface-sheen: rgba(255, 255, 255, 0.5);
+  --oh-color-surface-backdrop: rgba(61, 50, 41, 0.6);
   --oh-color-border-brand: rgba(232, 168, 56, 0.3);
+  --oh-color-border-brand-hover: rgba(197, 67, 0, 0.35); /** Same as light for now: the dark theme hasn't been designed */
+  --oh-color-border-divider: rgba(226, 213, 200, 0.6);
   --oh-elevation-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
   --oh-elevation-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
   --oh-elevation-strong: 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -39,6 +43,9 @@
   --oh-color-surface-disabled: var(--oh-color-warm-mocha);
   --oh-color-surface-hover: var(--oh-color-warm-hickory);
   --oh-color-surface-active-pressed: var(--oh-color-warm-mocha);
+  --oh-color-surface-featured-start: var(--oh-color-warm-dawn); /** Same as light for now: the dark theme hasn't been designed */
+  --oh-color-surface-featured-mid: var(--oh-color-warm-shell);
+  --oh-color-surface-featured-end: var(--oh-color-warm-biscuit);
   --oh-color-border-default: var(--oh-color-warm-taupe);
   --oh-color-border-subtle: var(--oh-color-warm-driftwood); /** Decorative dividers only — below 3:1 */
   --oh-color-border-emphasis: var(--oh-color-warm-stone);
@@ -63,5 +70,9 @@
   --oh-shadow-secondary: var(--oh-color-warm-espresso);
   --oh-shadow-accent: var(--oh-color-blue-800);
   --oh-shadow-error: var(--oh-color-red-900);
+  --oh-shadow-neutral: var(--oh-shadow-chunky-driftwood); /** As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design */
+  --oh-shadow-neutral-hover: var(--oh-shadow-chunky-driftwood-hover); /** As in light; review with the dark design */
+  --oh-shadow-overlay: var(--oh-shadow-chunky-driftwood-deep); /** As in light; review with the dark design */
+  --oh-shadow-field: var(--oh-shadow-chunky-walnut); /** As in light; review with the dark design */
   --oh-focus-ring-color: var(--oh-color-honey-400); /** Opaque, as in light */
 }

package/dist/themes/dark.json

@@ -1,5 +1,9 @@
 {
   "$description": "Dark Theme — warm cocoa base, cozy evening Orange Halo. Overrides tier 2 only; every colour references the palette. Applies when data-theme=\"dark\" is set.",
+  "grid": {
+    "$description": "The brand's layout grid. Spacing is multiples of half a unit; type sizes and line heights sit on it (see style-dictionary.config.js)",
+    "unit": "8px"
+  },
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -149,7 +153,12 @@
       "overlay": "#0f0c0ab3",
       "disabled": "#352e28",
       "hover": "#4a3f33",
-      "activePressed": "#352e28"
+      "activePressed": "#352e28",
+      "featuredStart": "#fffbf5",
+      "featuredMid": "#fdf6ee",
+      "featuredEnd": "#f8efe4",
+      "sheen": "#ffffff80",
+      "backdrop": "#3d322999"
     },
     "border": {
       "$description": "Border colors — visible and intentional",
@@ -159,7 +168,9 @@
       "strong": "#a09080",
       "hover": "#c9c1b4",
       "disabled": "#4a3f33",
-      "brand": "#e8a8384d"
+      "brand": "#e8a8384d",
+      "brandHover": "#c5430059",
+      "divider": "#e2d5c899"
     },
     "text": {
       "$description": "Text colors — calm and readable, not stark",
@@ -187,16 +198,16 @@
       "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
     },
     "size": {
-      "$description": "Slightly expressive type scale",
+      "$description": "Type scale on the brand's grid (grid.unit): every size is a multiple of half a unit. Strict: no size between xs and base",
       "xs": "0.75rem",
-      "sm": "0.875rem",
+      "sm": "0.75rem",
       "base": "1rem",
-      "lg": "1.125rem",
-      "xl": "1.25rem",
-      "2xl": "1.625rem",
+      "lg": "1.25rem",
+      "xl": "1.5rem",
+      "2xl": "1.75rem",
       "3xl": "2rem",
-      "4xl": "2.625rem",
-      "5xl": "3.25rem"
+      "4xl": "2.5rem",
+      "5xl": "3rem"
     },
     "weight": {
       "$description": "Font weights for hierarchy",
@@ -224,42 +235,6 @@
       "widest": "0.05em"
     }
   },
-  "spacing": {
-    "0": "0",
-    "1": "0.25rem",
-    "2": "0.5rem",
-    "3": "0.75rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "7": "1.75rem",
-    "8": "2rem",
-    "10": "2.5rem",
-    "12": "3rem",
-    "16": "4rem",
-    "20": "5rem",
-    "$description": "Generous spacing — breathing room, not dense",
-    "px": "1px",
-    "0-5": "0.125rem",
-    "1-5": "0.375rem",
-    "2-5": "0.625rem",
-    "3-5": "0.875rem",
-    "layout": {
-      "$description": "Generous layout spacing",
-      "page": "1.5rem",
-      "section": "3rem",
-      "stack": "1.25rem",
-      "inline": "1rem"
-    },
-    "component": {
-      "$description": "Component-level spacing",
-      "xs": "0.375rem",
-      "sm": "0.625rem",
-      "md": "0.875rem",
-      "lg": "1.25rem",
-      "xl": "1.75rem"
-    }
-  },
   "radius": {
     "$description": "Friendly and soft — not sharp, not overly pill-shaped",
     "none": "0",
@@ -283,12 +258,31 @@
       "primary": "#e8c4a0",
       "secondary": "#d4c4b0",
       "accent": "#a0b4c8",
-      "error": "#b545404d"
+      "error": "#b545404d",
+      "driftwood": "#6b5d4d26",
+      "driftwoodHover": "#6b5d4d33",
+      "driftwoodDeep": "#6b5d4d40",
+      "walnut": "#3d322926"
+    },
+    "layered": {
+      "$description": "Layered surface shadows: soft drop shadows with a top highlight, so cards feel like physical objects",
+      "flat": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+      "raised": "0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "lifted": "0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+      "pressed": "0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04)",
+      "focused": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "sunlit": "0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+      "sunlitLifted": "0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1)",
+      "sunlitFocused": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
     },
     "primary": "#6b4815",
     "secondary": "#1f1a17",
     "accent": "#253850",
-    "error": "#3d2a29"
+    "error": "#3d2a29",
+    "neutral": "#6b5d4d26",
+    "neutralHover": "#6b5d4d33",
+    "overlay": "#6b5d4d40",
+    "field": "#3d322926"
   },
   "gradient": {
     "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
@@ -364,6 +358,42 @@
       "chunky": "2.5px"
     }
   },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "$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",
+    "px": "1px",
+    "0-5": "0.125rem",
+    "1-5": "0.375rem",
+    "2-5": "0.625rem",
+    "3-5": "0.875rem",
+    "layout": {
+      "$description": "Generous layout spacing",
+      "page": "1.5rem",
+      "section": "3rem",
+      "stack": "1.25rem",
+      "inline": "1rem"
+    },
+    "component": {
+      "$description": "Component-level spacing",
+      "xs": "0.375rem",
+      "sm": "0.625rem",
+      "md": "0.875rem",
+      "lg": "1.25rem",
+      "xl": "1.75rem"
+    }
+  },
   "size": {
     "$description": "Fixed layout sizes: content widths and viewport breakpoints",
     "container": {
@@ -397,9 +427,9 @@
     "heading": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', sans-serif",
       "h1": {
-        "fontSize": "2.625rem",
+        "fontSize": "2.5rem",
         "fontWeight": "700",
-        "lineHeight": 1.25,
+        "lineHeight": 1.2,
         "letterSpacing": "-0.02em"
       },
       "h2": {
@@ -409,21 +439,21 @@
         "letterSpacing": "-0.01em"
       },
       "h3": {
-        "fontSize": "1.625rem",
+        "fontSize": "1.75rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.4286,
         "letterSpacing": "-0.01em"
       },
       "h4": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "600",
-        "lineHeight": 1.35,
+        "lineHeight": 1.3333,
         "letterSpacing": "0"
       },
       "h5": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "500",
-        "lineHeight": 1.5
+        "lineHeight": 1.6
       },
       "h6": {
         "fontSize": "1rem",
@@ -435,14 +465,14 @@
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "xl": {
         "$description": "Lead paragraphs and hero subtitles",
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "fontWeight": "400",
-        "lineHeight": 1.5
+        "lineHeight": 1.6667
       },
       "lg": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "fontWeight": "400",
-        "lineHeight": 1.65
+        "lineHeight": 1.6
       },
       "base": {
         "fontSize": "1rem",
@@ -450,22 +480,22 @@
         "lineHeight": 1.5
       },
       "sm": {
-        "fontSize": "0.875rem",
+        "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       },
       "xs": {
         "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
     "label": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
       "base": {
-        "fontSize": "0.875rem",
+        "fontSize": "1rem",
         "fontWeight": "500",
         "lineHeight": 1.5,
         "letterSpacing": "0.01em"
@@ -473,7 +503,7 @@
       "sm": {
         "fontSize": "0.75rem",
         "fontWeight": "500",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
@@ -491,8 +521,8 @@
       "letterSpacing": "0.01em",
       "fontSize": {
         "sm": "1rem",
-        "md": "1.125rem",
-        "lg": "1.25rem"
+        "md": "1.25rem",
+        "lg": "1.5rem"
       }
     },
     "emphasis": {
@@ -501,7 +531,7 @@
     },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
-      "fontSize": "0.875rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5
     }
   },
@@ -531,7 +561,47 @@
     "medium": "0 4px 16px rgba(0, 0, 0, 0.3)",
     "strong": "0 8px 24px rgba(0, 0, 0, 0.4)",
     "glow": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
-    "inset": "inset 0 1px 3px rgba(0, 0, 0, 0.3)"
+    "inset": "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
+    "surface": {
+      "$description": "Card surfaces, by state. Featured is the sunlit card",
+      "flat": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+      "raised": "0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "lifted": "0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+      "pressed": "0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04)",
+      "focused": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "featured": "0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+      "featuredLifted": "0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1)",
+      "featuredFocused": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+    },
+    "offset": {
+      "$description": "How far solid offset shadows sit from the element, from pressed (xs) to dialogs (2xl). The colour comes from shadow.*. A flat brand sets every step to 0",
+      "xs": "1px",
+      "sm": "2px",
+      "md": "3px",
+      "lg": "4px",
+      "xl": "5px",
+      "2xl": "6px"
+    }
+  },
+  "lift": {
+    "$description": "How far elements move on hover (negative: up and left, towards the viewer) and when pressed (positive: into the page). A still brand sets every step to 0",
+    "hoverSm": "-1px",
+    "hoverMd": "-2px",
+    "pressSm": "1px",
+    "pressMd": "2px"
+  },
+  "stroke": {
+    "$description": "Border widths by role",
+    "control": "2.5px",
+    "surface": "1px",
+    "divider": "1px"
+  },
+  "decoration": {
+    "$description": "Link underlines. Orange Halo's are dashed: a dash, then a gap, repeating every period. A solid underline sets dash and period to the same value",
+    "underlineThickness": "2px",
+    "underlineFocusThickness": "3px",
+    "underlineDash": "4px",
+    "underlinePeriod": "8px"
   },
   "focus": {
     "$description": "Warm, friendly focus ring",
@@ -566,14 +636,14 @@
         "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "1.125rem",
+        "fontSize": "1.25rem",
         "paddingX": "1.5rem",
         "paddingY": "0.75rem",
         "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1.25rem",
+        "fontSize": "1.5rem",
         "paddingX": "2rem",
         "paddingY": "1rem",
         "minHeight": "56px",
@@ -619,7 +689,7 @@
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontSize": "1.125rem",
+      "fontSize": "1.25rem",
       "lineHeight": 1.5,
       "borderRadius": "10px",
       "borderWidth": "2.5px",
@@ -716,6 +786,9 @@
   },
   "progress": {
     "$description": "Progress — chunky pill track",
+    "track": {
+      "insetShadow": "#0000000f"
+    },
     "inverse": {
       "$description": "On brand/accent backgrounds (e.g. journey hero). Fill is cream so it reads at 3.7:1 against the track.",
       "trackBackground": "#ffffff26",
@@ -778,6 +851,7 @@
   },
   "closeButton": {
     "$description": "Icon-only close buttons in alerts and modals",
-    "backgroundHover": "#00000014"
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
   }
 }