@orange-halo/tokens 2.1.0 → 2.2.0

package/tokens/brands/orange-halo/palette.tokens.json

@@ -1,5 +1,13 @@
 {
   "$description": "Orange Halo palette (tier 1): colours, fonts, radii, shadows, gradients, motion and borders. Warm, playful, personal. Other brands provide their own palette with the same groups.",
+  "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": {
+      "$type": "dimension",
+      "$value": "8px",
+      "$description": "8px grid with 4px half-steps"
+    }
+  },
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -414,7 +422,7 @@
       }
     },
     "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": {
         "$type": "dimension",
         "$value": "0.75rem",
@@ -422,8 +430,8 @@
       },
       "sm": {
         "$type": "dimension",
-        "$value": "0.875rem",
-        "$description": "14px"
+        "$value": "{font.size.xs}",
+        "$description": "Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role"
       },
       "base": {
         "$type": "dimension",
@@ -432,18 +440,18 @@
       },
       "lg": {
         "$type": "dimension",
-        "$value": "1.125rem",
-        "$description": "18px"
+        "$value": "1.25rem",
+        "$description": "20px"
       },
       "xl": {
         "$type": "dimension",
-        "$value": "1.25rem",
-        "$description": "20px"
+        "$value": "1.5rem",
+        "$description": "24px"
       },
       "2xl": {
         "$type": "dimension",
-        "$value": "1.625rem",
-        "$description": "26px"
+        "$value": "1.75rem",
+        "$description": "28px"
       },
       "3xl": {
         "$type": "dimension",
@@ -452,13 +460,13 @@
       },
       "4xl": {
         "$type": "dimension",
-        "$value": "2.625rem",
-        "$description": "42px"
+        "$value": "2.5rem",
+        "$description": "40px"
       },
       "5xl": {
         "$type": "dimension",
-        "$value": "3.25rem",
-        "$description": "52px"
+        "$value": "3rem",
+        "$description": "48px"
       }
     },
     "weight": {
@@ -735,42 +743,22 @@
     "easing": {
       "gentle": {
         "$type": "cubicBezier",
-        "$value": [
-          0.4,
-          0,
-          0.2,
-          1
-        ],
+        "$value": [0.4, 0, 0.2, 1],
         "$description": "Default — smooth and natural"
       },
       "out": {
         "$type": "cubicBezier",
-        "$value": [
-          0,
-          0,
-          0.2,
-          1
-        ],
+        "$value": [0, 0, 0.2, 1],
         "$description": "Enters and reveals"
       },
       "in": {
         "$type": "cubicBezier",
-        "$value": [
-          0.4,
-          0,
-          1,
-          1
-        ],
+        "$value": [0.4, 0, 1, 1],
         "$description": "Exits"
       },
       "playful": {
         "$type": "cubicBezier",
-        "$value": [
-          0.34,
-          1.3,
-          0.64,
-          1
-        ],
+        "$value": [0.34, 1.3, 0.64, 1],
         "$description": "Celebrations — slight overshoot"
       }
     }

package/tokens/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": "{stroke.control}" },
-      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
-      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easePlayful}" }
+      "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": "{stroke.control}" },
-      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
-      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
+      "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}" }
       }
     }
@@ -123,15 +197,27 @@
     },
     "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,29 +230,57 @@
     },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "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}" },
+      "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}" },
+      "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)" }
+      "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" }
+      "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}" }
     }
@@ -174,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": {
@@ -192,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": {
@@ -217,7 +355,11 @@
     "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": {
@@ -226,7 +368,15 @@
   },
   "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" }
+    "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

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