@orange-halo/tokens 2.1.0 → 2.2.0

package/contrast-pairs.json

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

@@ -24,7 +24,12 @@ export function parseColor(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];
+  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]) {
@@ -55,5 +60,9 @@ export function checkPair(tokens, pair) {
   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 };
+  return {
+    ...pair,
+    ratio: Math.round(value * 100) / 100,
+    pass: value >= pair.min,
+  };
 }

package/dist/brands/hood-dark.json

@@ -1,5 +1,9 @@
 {
   "$description": "Hood tier 2, dark mode: the default look, after fraser-hood.co.uk/gig-history. Sets every tier 2 colour.",
+  "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": {
     "grey": {
       "50": "#f7f7f7",
@@ -131,16 +135,16 @@
       "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
     },
     "size": {
-      "$description": "The site's scale: 15px body, large bold headings",
-      "xs": "0.6875rem",
-      "sm": "0.8125rem",
-      "base": "0.9375rem",
-      "lg": "1.0625rem",
-      "xl": "1.35rem",
-      "2xl": "1.8rem",
-      "3xl": "2.6rem",
+      "$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.75rem",
+      "base": "1rem",
+      "lg": "1.25rem",
+      "xl": "1.5rem",
+      "2xl": "2rem",
+      "3xl": "2.5rem",
       "4xl": "3.5rem",
-      "5xl": "4.2rem"
+      "5xl": "4rem"
     },
     "weight": {
       "normal": "400",
@@ -251,7 +255,7 @@
     "12": "3rem",
     "16": "4rem",
     "20": "5rem",
-    "$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",
     "px": "1px",
     "0-5": "0.125rem",
     "1-5": "0.375rem",
@@ -305,34 +309,34 @@
       "h1": {
         "fontSize": "3.5rem",
         "fontWeight": "800",
-        "lineHeight": 1.1,
+        "lineHeight": 1.1429,
         "letterSpacing": "-0.02em"
       },
       "h2": {
-        "fontSize": "2.6rem",
+        "fontSize": "2.5rem",
         "fontWeight": "800",
-        "lineHeight": 1.1,
+        "lineHeight": 1.2,
         "letterSpacing": "-0.01em"
       },
       "h3": {
-        "fontSize": "1.8rem",
+        "fontSize": "2rem",
         "fontWeight": "700",
-        "lineHeight": 1.3,
+        "lineHeight": 1.25,
         "letterSpacing": "-0.01em"
       },
       "h4": {
-        "fontSize": "1.35rem",
+        "fontSize": "1.5rem",
         "fontWeight": "700",
-        "lineHeight": 1.3,
+        "lineHeight": 1.3333,
         "letterSpacing": "0"
       },
       "h5": {
-        "fontSize": "1.0625rem",
+        "fontSize": "1.25rem",
         "fontWeight": "700",
-        "lineHeight": 1.5
+        "lineHeight": 1.6
       },
       "h6": {
-        "fontSize": "0.9375rem",
+        "fontSize": "1rem",
         "fontWeight": "700",
         "lineHeight": 1.5
       }
@@ -340,51 +344,51 @@
     "body": {
       "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
       "xl": {
-        "fontSize": "1.35rem",
+        "fontSize": "1.5rem",
         "fontWeight": "400",
-        "lineHeight": 1.5
+        "lineHeight": 1.6667
       },
       "lg": {
-        "fontSize": "1.0625rem",
+        "fontSize": "1.25rem",
         "fontWeight": "400",
         "lineHeight": 1.6
       },
       "base": {
-        "fontSize": "0.9375rem",
+        "fontSize": "1rem",
         "fontWeight": "400",
         "lineHeight": 1.5
       },
       "sm": {
-        "fontSize": "0.8125rem",
+        "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0"
       },
       "xs": {
-        "fontSize": "0.6875rem",
+        "fontSize": "0.75rem",
         "fontWeight": "400",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.02em"
       }
     },
     "label": {
       "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
       "base": {
-        "fontSize": "0.8125rem",
+        "fontSize": "1rem",
         "fontWeight": "600",
         "lineHeight": 1.5,
         "letterSpacing": "0.02em"
       },
       "sm": {
-        "fontSize": "0.6875rem",
+        "fontSize": "0.75rem",
         "fontWeight": "600",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.08em"
       }
     },
     "eyebrow": {
       "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
-      "fontSize": "0.8125rem",
+      "fontSize": "0.75rem",
       "fontWeight": "600",
       "letterSpacing": "0.08em"
     },
@@ -393,9 +397,9 @@
       "fontWeight": "600",
       "letterSpacing": "0.02em",
       "fontSize": {
-        "sm": "0.9375rem",
-        "md": "0.9375rem",
-        "lg": "1.0625rem"
+        "sm": "1rem",
+        "md": "1rem",
+        "lg": "1.25rem"
       }
     },
     "emphasis": {
@@ -403,7 +407,7 @@
     },
     "code": {
       "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-      "fontSize": "0.8125rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5
     }
   },
@@ -491,21 +495,21 @@
     "size": {
       "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
       "sm": {
-        "fontSize": "0.9375rem",
+        "fontSize": "1rem",
         "paddingX": "1rem",
         "paddingY": "0.5rem",
         "minHeight": "40px",
         "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "0.9375rem",
+        "fontSize": "1rem",
         "paddingX": "1.5rem",
         "paddingY": "0.75rem",
         "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1.0625rem",
+        "fontSize": "1.25rem",
         "paddingX": "2rem",
         "paddingY": "1rem",
         "minHeight": "56px",
@@ -551,7 +555,7 @@
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
       "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
-      "fontSize": "0.9375rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5,
       "borderRadius": "4px",
       "borderWidth": "1px",
@@ -662,7 +666,7 @@
     "$description": "Badge — small status indicators",
     "base": {
       "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
-      "fontSize": "0.9375rem",
+      "fontSize": "1rem",
       "fontWeight": "600",
       "letterSpacing": "0.02em",
       "borderRadius": "2px",

package/dist/brands/hood.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --oh-grid-unit: 8px; /** 8px grid with 4px half-steps */
   --oh-color-grey-50: #f7f7f7;
   --oh-color-grey-100: #ededed;
   --oh-color-grey-200: #dedede;
@@ -47,15 +48,14 @@
   --oh-font-family-sans: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
   --oh-font-family-display: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
   --oh-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --oh-font-size-xs: 0.6875rem;
-  --oh-font-size-sm: 0.8125rem;
-  --oh-font-size-base: 0.9375rem;
-  --oh-font-size-lg: 1.0625rem;
-  --oh-font-size-xl: 1.35rem;
-  --oh-font-size-2xl: 1.8rem;
-  --oh-font-size-3xl: 2.6rem;
-  --oh-font-size-4xl: 3.5rem;
-  --oh-font-size-5xl: 4.2rem;
+  --oh-font-size-xs: 0.75rem; /** 12px */
+  --oh-font-size-base: 1rem; /** 16px */
+  --oh-font-size-lg: 1.25rem; /** 20px */
+  --oh-font-size-xl: 1.5rem; /** 24px */
+  --oh-font-size-2xl: 2rem; /** 32px */
+  --oh-font-size-3xl: 2.5rem; /** 40px */
+  --oh-font-size-4xl: 3.5rem; /** 56px */
+  --oh-font-size-5xl: 4rem; /** 64px */
   --oh-font-weight-normal: 400;
   --oh-font-weight-medium: 500;
   --oh-font-weight-semibold: 600;
@@ -120,6 +120,20 @@
   --oh-z-index-modal: 1200;
   --oh-z-index-popover: 1300;
   --oh-z-index-tooltip: 1400;
+  --oh-typography-heading-h1-line-height: 1.1429; /** 64px at 56px: 56px × 1.1, rounded to the 8px grid */
+  --oh-typography-heading-h2-line-height: 1.2; /** 48px at 40px: 40px × 1.1, rounded to the 8px grid */
+  --oh-typography-heading-h3-line-height: 1.25; /** 40px at 32px: 32px × 1.3, rounded to the 8px grid */
+  --oh-typography-heading-h4-line-height: 1.3333; /** 32px at 24px: 24px × 1.3, rounded to the 8px grid */
+  --oh-typography-heading-h5-line-height: 1.6; /** 32px at 20px: 20px × 1.5, rounded to the 8px grid */
+  --oh-typography-heading-h6-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-xl-line-height: 1.6667; /** 40px at 24px: 24px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-lg-line-height: 1.6; /** 32px at 20px: 20px × 1.6, rounded to the 8px grid */
+  --oh-typography-body-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-body-xs-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-label-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-label-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-code-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
   --oh-elevation-offset-xs: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
   --oh-elevation-offset-sm: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
   --oh-elevation-offset-md: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
@@ -203,6 +217,7 @@
   --oh-color-text-on-error: var(--oh-color-white);
   --oh-color-text-on-warning: var(--oh-color-white);
   --oh-color-text-on-info: var(--oh-color-white);
+  --oh-font-size-sm: var(--oh-font-size-xs); /** Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role */
   --oh-shadow-overlay: var(--oh-color-grey-400);
   --oh-shadow-primary: var(--oh-color-grey-300);
   --oh-shadow-secondary: var(--oh-color-grey-200);
@@ -231,55 +246,42 @@
   --oh-typography-heading-font-family: var(--oh-font-family-display);
   --oh-typography-heading-h1-font-size: var(--oh-font-size-4xl);
   --oh-typography-heading-h1-font-weight: var(--oh-font-weight-extrabold);
-  --oh-typography-heading-h1-line-height: var(--oh-font-line-height-tight);
   --oh-typography-heading-h1-letter-spacing: var(--oh-font-letter-spacing-tighter);
   --oh-typography-heading-h2-font-size: var(--oh-font-size-3xl);
   --oh-typography-heading-h2-font-weight: var(--oh-font-weight-extrabold);
-  --oh-typography-heading-h2-line-height: var(--oh-font-line-height-tight);
   --oh-typography-heading-h2-letter-spacing: var(--oh-font-letter-spacing-tight);
   --oh-typography-heading-h3-font-size: var(--oh-font-size-2xl);
   --oh-typography-heading-h3-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h3-line-height: var(--oh-font-line-height-snug);
   --oh-typography-heading-h3-letter-spacing: var(--oh-font-letter-spacing-tight);
   --oh-typography-heading-h4-font-size: var(--oh-font-size-xl);
   --oh-typography-heading-h4-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h4-line-height: var(--oh-font-line-height-snug);
   --oh-typography-heading-h4-letter-spacing: var(--oh-font-letter-spacing-normal);
   --oh-typography-heading-h5-font-size: var(--oh-font-size-lg);
   --oh-typography-heading-h5-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h5-line-height: var(--oh-font-line-height-normal);
   --oh-typography-heading-h6-font-size: var(--oh-font-size-base);
   --oh-typography-heading-h6-font-weight: var(--oh-font-weight-bold);
-  --oh-typography-heading-h6-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-font-family: var(--oh-font-family-sans);
   --oh-typography-body-xl-font-size: var(--oh-font-size-xl);
   --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-xl-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-lg-font-size: var(--oh-font-size-lg);
   --oh-typography-body-lg-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-lg-line-height: var(--oh-font-line-height-relaxed);
   --oh-typography-body-base-font-size: var(--oh-font-size-base);
   --oh-typography-body-base-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-base-line-height: var(--oh-font-line-height-normal);
-  --oh-typography-body-sm-font-size: var(--oh-font-size-sm);
+  --oh-typography-body-sm-font-size: var(--oh-font-size-xs);
   --oh-typography-body-sm-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-sm-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-sm-letter-spacing: var(--oh-font-letter-spacing-normal);
   --oh-typography-body-xs-font-size: var(--oh-font-size-xs);
   --oh-typography-body-xs-font-weight: var(--oh-font-weight-normal);
-  --oh-typography-body-xs-line-height: var(--oh-font-line-height-normal);
   --oh-typography-body-xs-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-label-font-family: var(--oh-font-family-sans);
-  --oh-typography-label-base-font-size: var(--oh-font-size-sm);
+  --oh-typography-label-base-font-size: var(--oh-font-size-base);
   --oh-typography-label-base-font-weight: var(--oh-font-weight-semibold);
-  --oh-typography-label-base-line-height: var(--oh-font-line-height-normal);
   --oh-typography-label-base-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-label-sm-font-size: var(--oh-font-size-xs);
   --oh-typography-label-sm-font-weight: var(--oh-font-weight-semibold);
-  --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal);
   --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-widest);
   --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
-  --oh-typography-eyebrow-font-size: var(--oh-font-size-sm);
+  --oh-typography-eyebrow-font-size: var(--oh-font-size-xs);
   --oh-typography-eyebrow-font-weight: var(--oh-font-weight-semibold);
   --oh-typography-eyebrow-letter-spacing: var(--oh-font-letter-spacing-widest);
   --oh-typography-control-font-family: var(--oh-font-family-sans);
@@ -290,8 +292,7 @@
   --oh-typography-control-font-size-lg: var(--oh-font-size-lg);
   --oh-typography-emphasis-font-weight: var(--oh-font-weight-bold);
   --oh-typography-code-font-family: var(--oh-font-family-mono);
-  --oh-typography-code-font-size: var(--oh-font-size-sm);
-  --oh-typography-code-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-code-font-size: var(--oh-font-size-base);
   --oh-layout-container-sm: var(--oh-size-container-sm);
   --oh-layout-container-md: var(--oh-size-container-md);
   --oh-layout-container-lg: var(--oh-size-container-lg);
@@ -329,6 +330,7 @@
   --oh-button-size-lg-padding-y: var(--oh-spacing-4);
   --oh-button-size-lg-gap: var(--oh-spacing-2-5);
   --oh-button-focus-glow-color: var(--oh-focus-glow-color);
+  --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
   --oh-input-size-md-padding-x: var(--oh-spacing-4);
   --oh-input-size-md-padding-y: var(--oh-spacing-3);
   --oh-card-base-padding: var(--oh-spacing-5);
@@ -371,7 +373,6 @@
   --oh-button-focus-ring-color: var(--oh-focus-ring-color);
   --oh-input-base-font-family: var(--oh-typography-control-font-family);
   --oh-input-base-font-size: var(--oh-typography-control-font-size-md);
-  --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
   --oh-input-base-border-radius: var(--oh-shape-control);
   --oh-input-base-border-width: var(--oh-stroke-control);
   --oh-input-base-transition-duration: var(--oh-motion-snappy);