@orange-halo/tokens 2.1.0 → 2.2.0

package/dist/brands/hood.json

@@ -1,5 +1,9 @@
 {
   "$description": "Component Design Tokens — Orange Halo Visual DNA applied. Each component has personality knobs.",
+  "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/orange-halo-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": {
@@ -194,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",
@@ -368,7 +372,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",
@@ -423,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": {
@@ -435,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",
@@ -461,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",
@@ -476,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"
@@ -499,7 +503,7 @@
       "sm": {
         "fontSize": "0.75rem",
         "fontWeight": "500",
-        "lineHeight": 1.5,
+        "lineHeight": 1.6667,
         "letterSpacing": "0.01em"
       }
     },
@@ -517,8 +521,8 @@
       "letterSpacing": "0.01em",
       "fontSize": {
         "sm": "1rem",
-        "md": "1.125rem",
-        "lg": "1.25rem"
+        "md": "1.25rem",
+        "lg": "1.5rem"
       }
     },
     "emphasis": {
@@ -527,7 +531,7 @@
     },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
-      "fontSize": "0.875rem",
+      "fontSize": "1rem",
       "lineHeight": 1.5
     }
   },
@@ -632,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",
@@ -685,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",

package/dist/brands/orange-halo.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --oh-grid-unit: 8px; /** 8px grid with 4px half-steps */
   --oh-color-orange-50: #fff3e0;
   --oh-color-orange-100: #ffe0b2;
   --oh-color-orange-200: #ffcc80;
@@ -98,14 +99,13 @@
   --oh-font-family-display: 'Bricolage Grotesque', 'General Sans', sans-serif;
   --oh-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
   --oh-font-size-xs: 0.75rem; /** 12px */
-  --oh-font-size-sm: 0.875rem; /** 14px */
   --oh-font-size-base: 1rem; /** 16px */
-  --oh-font-size-lg: 1.125rem; /** 18px */
-  --oh-font-size-xl: 1.25rem; /** 20px */
-  --oh-font-size-2xl: 1.625rem; /** 26px */
+  --oh-font-size-lg: 1.25rem; /** 20px */
+  --oh-font-size-xl: 1.5rem; /** 24px */
+  --oh-font-size-2xl: 1.75rem; /** 28px */
   --oh-font-size-3xl: 2rem; /** 32px */
-  --oh-font-size-4xl: 2.625rem; /** 42px */
-  --oh-font-size-5xl: 3.25rem; /** 52px */
+  --oh-font-size-4xl: 2.5rem; /** 40px */
+  --oh-font-size-5xl: 3rem; /** 48px */
   --oh-font-weight-normal: 400;
   --oh-font-weight-medium: 500;
   --oh-font-weight-semibold: 600;
@@ -200,6 +200,20 @@
   --oh-z-index-modal: 1200;
   --oh-z-index-popover: 1300;
   --oh-z-index-tooltip: 1400;
+  --oh-typography-heading-h1-line-height: 1.2; /** 48px at 40px: 40px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h2-line-height: 1.25; /** 40px at 32px: 32px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h3-line-height: 1.4286; /** 40px at 28px: 28px × 1.35, rounded to the 8px grid */
+  --oh-typography-heading-h4-line-height: 1.3333; /** 32px at 24px: 24px × 1.35, 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.65, 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: 1px;
   --oh-elevation-offset-sm: 2px;
   --oh-elevation-offset-md: 3px;
@@ -280,6 +294,7 @@
   --oh-color-text-on-error: var(--oh-color-white); /** Text on filled color.feedback.error */
   --oh-color-text-on-warning: var(--oh-color-white); /** Text on filled color.feedback.warning */
   --oh-color-text-on-info: var(--oh-color-white); /** Text on filled color.feedback.info */
+  --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-primary: var(--oh-shadow-chunky-primary); /** Primary buttons */
   --oh-shadow-secondary: var(--oh-shadow-chunky-secondary); /** Secondary/form elements */
   --oh-shadow-accent: var(--oh-shadow-chunky-accent); /** Accent buttons */
@@ -309,52 +324,39 @@
   --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-bold);
-  --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-bold);
-  --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-semibold);
-  --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-semibold);
-  --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-medium);
-  --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-medium);
-  --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-wide);
   --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-medium);
-  --oh-typography-label-base-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
   --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-medium);
-  --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
   --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
   --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
   --oh-typography-eyebrow-font-size: var(--oh-font-size-base);
@@ -368,8 +370,7 @@
   --oh-typography-control-font-size-lg: var(--oh-font-size-xl); /** Large buttons */
   --oh-typography-emphasis-font-weight: var(--oh-font-weight-semibold);
   --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);
@@ -410,6 +411,7 @@
   --oh-button-variant-secondary-background-hover: var(--oh-color-surface-hover);
   --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
   --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);
@@ -450,7 +452,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);