@orange-halo/tokens 2.0.0 → 2.2.0

package/dist/tokens.js

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
+export const OhGridUnit = "8px"; // 8px grid with 4px half-steps
 export const OhColorOrange50 = "#fff3e0";
 export const OhColorOrange100 = "#ffe0b2";
 export const OhColorOrange200 = "#ffcc80";
@@ -115,6 +116,11 @@ export const OhColorSurfaceOverlay = "#3d322966"; // Modal backdrop — warm
 export const OhColorSurfaceDisabled = "#e2dcd2"; // Quiet disabled
 export const OhColorSurfaceHover = "#fff4e6"; // Warm hover tint
 export const OhColorSurfaceActivePressed = "#f0ebe3"; // Active/pressed surface
+export const OhColorSurfaceFeaturedStart = "#fffbf5"; // Featured (sunlit) card gradient: top
+export const OhColorSurfaceFeaturedMid = "#fdf6ee"; // Featured (sunlit) card gradient: 30%
+export const OhColorSurfaceFeaturedEnd = "#f8efe4"; // Featured (sunlit) card gradient: bottom
+export const OhColorSurfaceSheen = "#ffffff80"; // Light glaze at the top of card headers, fading to transparent
+export const OhColorSurfaceBackdrop = "#3d322999"; // Modal backdrop — darker than surface.overlay so the dialog stands out
 export const OhColorBorderDefault = "#e2dcd2"; // Standard border
 export const OhColorBorderSubtle = "#ede8df"; // Subtle dividers
 export const OhColorBorderEmphasis = "#6b5d4d"; // Strong border for form elements
@@ -122,6 +128,8 @@ export const OhColorBorderStrong = "#c9c1b4"; // Neutral edge between default an
 export const OhColorBorderHover = "#8b4726"; // Hover border — darker for feedback
 export const OhColorBorderDisabled = "#ede8df";
 export const OhColorBorderBrand = "#c5430040"; // Brand-tinted border
+export const OhColorBorderBrandHover = "#c5430059"; // Brand-tinted border on hover. Decorative container edge — not a focus or control border
+export const OhColorBorderDivider = "#e2d5c899"; // Decorative divider inside a container, such as a card's header and footer
 export const OhColorTextPrimary = "#3d3229"; // Primary text — warm brown
 export const OhColorTextSecondary = "#6b5d4d"; // Secondary text
 export const OhColorTextDisabled = "#c9c1b4"; // Disabled text
@@ -143,14 +151,14 @@ export const OhFontFamilyDisplay =
 export const OhFontFamilyMono =
   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
 export const OhFontSizeXs = "0.75rem"; // 12px
-export const OhFontSizeSm = "0.875rem"; // 14px
+export const OhFontSizeSm = "0.75rem"; // Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role
 export const OhFontSizeBase = "1rem"; // 16px
-export const OhFontSizeLg = "1.125rem"; // 18px
-export const OhFontSizeXl = "1.25rem"; // 20px
-export const OhFontSize2xl = "1.625rem"; // 26px
+export const OhFontSizeLg = "1.25rem"; // 20px
+export const OhFontSizeXl = "1.5rem"; // 24px
+export const OhFontSize2xl = "1.75rem"; // 28px
 export const OhFontSize3xl = "2rem"; // 32px
-export const OhFontSize4xl = "2.625rem"; // 42px
-export const OhFontSize5xl = "3.25rem"; // 52px
+export const OhFontSize4xl = "2.5rem"; // 40px
+export const OhFontSize5xl = "3rem"; // 48px
 export const OhFontWeightNormal = "400";
 export const OhFontWeightMedium = "500";
 export const OhFontWeightSemibold = "600";
@@ -167,33 +175,6 @@ export const OhFontLetterSpacingNormal = "0";
 export const OhFontLetterSpacingWide = "0.01em";
 export const OhFontLetterSpacingWider = "0.02em";
 export const OhFontLetterSpacingWidest = "0.05em"; // Uppercase labels: hero eyebrows, footer headings
-export const OhSpacing0 = "0";
-export const OhSpacing1 = "0.25rem"; // 4px
-export const OhSpacing2 = "0.5rem"; // 8px
-export const OhSpacing3 = "0.75rem"; // 12px
-export const OhSpacing4 = "1rem"; // 16px
-export const OhSpacing5 = "1.25rem"; // 20px
-export const OhSpacing6 = "1.5rem"; // 24px
-export const OhSpacing7 = "1.75rem"; // 28px
-export const OhSpacing8 = "2rem"; // 32px
-export const OhSpacing10 = "2.5rem"; // 40px
-export const OhSpacing12 = "3rem"; // 48px
-export const OhSpacing16 = "4rem"; // 64px
-export const OhSpacing20 = "5rem"; // 80px
-export const OhSpacingPx = "1px";
-export const OhSpacing05 = "0.125rem"; // 2px
-export const OhSpacing15 = "0.375rem"; // 6px
-export const OhSpacing25 = "0.625rem"; // 10px
-export const OhSpacing35 = "0.875rem"; // 14px
-export const OhSpacingLayoutPage = "1.5rem";
-export const OhSpacingLayoutSection = "3rem";
-export const OhSpacingLayoutStack = "1.25rem";
-export const OhSpacingLayoutInline = "1rem";
-export const OhSpacingComponentXs = "0.375rem";
-export const OhSpacingComponentSm = "0.625rem";
-export const OhSpacingComponentMd = "0.875rem";
-export const OhSpacingComponentLg = "1.25rem";
-export const OhSpacingComponentXl = "1.75rem";
 export const OhRadiusNone = "0";
 export const OhRadiusXs = "4px"; // Small details, chips
 export const OhRadiusSm = "6px"; // Buttons, inputs
@@ -215,10 +196,34 @@ export const OhShadowChunkyPrimary = "#e8c4a0"; // Warm peach for primary button
 export const OhShadowChunkySecondary = "#d4c4b0"; // Neutral tan for secondary/form elements
 export const OhShadowChunkyAccent = "#a0b4c8"; // Blue offset shadow for accent buttons — decorative
 export const OhShadowChunkyError = "#b545404d"; // Error state shadow
+export const OhShadowChunkyDriftwood = "#6b5d4d26"; // Translucent driftwood, for offset shadows on cream
+export const OhShadowChunkyDriftwoodHover = "#6b5d4d33"; // A step darker, for the lifted state
+export const OhShadowChunkyDriftwoodDeep = "#6b5d4d40"; // For dialogs, which sit above everything
+export const OhShadowChunkyWalnut = "#3d322926"; // Translucent walnut, for the inset shadow inside fields
+export const OhShadowLayeredFlat =
+  "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)";
+export const OhShadowLayeredRaised =
+  "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)";
+export const OhShadowLayeredLifted =
+  "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)";
+export const OhShadowLayeredPressed =
+  "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)";
+export const OhShadowLayeredFocused =
+  "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)"; // Sits under the focus glow
+export const OhShadowLayeredSunlit =
+  "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)";
+export const OhShadowLayeredSunlitLifted =
+  "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)";
+export const OhShadowLayeredSunlitFocused =
+  "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"; // Sits under the focus glow
 export const OhShadowPrimary = "#e8c4a0"; // Primary buttons
 export const OhShadowSecondary = "#d4c4b0"; // Secondary/form elements
 export const OhShadowAccent = "#a0b4c8"; // Accent buttons
 export const OhShadowError = "#b545404d"; // Error state
+export const OhShadowNeutral = "#6b5d4d26"; // Containers and the skip link
+export const OhShadowNeutralHover = "#6b5d4d33"; // Lifted containers
+export const OhShadowOverlay = "#6b5d4d40"; // Dialogs
+export const OhShadowField = "#3d322926"; // The inset shadow inside text fields
 export const OhGradientSunlit =
   "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)"; // Gentle warmth for surfaces — same stops as the sunlit card
 export const OhGradientWarm =
@@ -246,6 +251,33 @@ export const OhBorderWidth0 = "0";
 export const OhBorderWidth1 = "1px";
 export const OhBorderWidth2 = "2px";
 export const OhBorderWidthChunky = "2.5px"; // Signature chunky frame for controls and feedback
+export const OhSpacing0 = "0";
+export const OhSpacing1 = "0.25rem"; // 4px
+export const OhSpacing2 = "0.5rem"; // 8px
+export const OhSpacing3 = "0.75rem"; // 12px
+export const OhSpacing4 = "1rem"; // 16px
+export const OhSpacing5 = "1.25rem"; // 20px
+export const OhSpacing6 = "1.5rem"; // 24px
+export const OhSpacing7 = "1.75rem"; // 28px
+export const OhSpacing8 = "2rem"; // 32px
+export const OhSpacing10 = "2.5rem"; // 40px
+export const OhSpacing12 = "3rem"; // 48px
+export const OhSpacing16 = "4rem"; // 64px
+export const OhSpacing20 = "5rem"; // 80px
+export const OhSpacingPx = "1px";
+export const OhSpacing05 = "0.125rem"; // 2px
+export const OhSpacing15 = "0.375rem"; // 6px
+export const OhSpacing25 = "0.625rem"; // 10px
+export const OhSpacing35 = "0.875rem"; // 14px
+export const OhSpacingLayoutPage = "1.5rem";
+export const OhSpacingLayoutSection = "3rem";
+export const OhSpacingLayoutStack = "1.25rem";
+export const OhSpacingLayoutInline = "1rem";
+export const OhSpacingComponentXs = "0.375rem";
+export const OhSpacingComponentSm = "0.625rem";
+export const OhSpacingComponentMd = "0.875rem";
+export const OhSpacingComponentLg = "1.25rem";
+export const OhSpacingComponentXl = "1.75rem";
 export const OhSizeContainerSm = "640px";
 export const OhSizeContainerMd = "768px";
 export const OhSizeContainerLg = "1024px";
@@ -264,56 +296,56 @@ export const OhZIndexPopover = 1300;
 export const OhZIndexTooltip = 1400;
 export const OhTypographyHeadingFontFamily =
   "'Bricolage Grotesque', 'General Sans', sans-serif";
-export const OhTypographyHeadingH1FontSize = "2.625rem";
+export const OhTypographyHeadingH1FontSize = "2.5rem";
 export const OhTypographyHeadingH1FontWeight = "700";
-export const OhTypographyHeadingH1LineHeight = 1.25;
+export const OhTypographyHeadingH1LineHeight = 1.2; // 48px at 40px: 40px × 1.25, rounded to the 8px grid
 export const OhTypographyHeadingH1LetterSpacing = "-0.02em";
 export const OhTypographyHeadingH2FontSize = "2rem";
 export const OhTypographyHeadingH2FontWeight = "700";
-export const OhTypographyHeadingH2LineHeight = 1.25;
+export const OhTypographyHeadingH2LineHeight = 1.25; // 40px at 32px: 32px × 1.25, rounded to the 8px grid
 export const OhTypographyHeadingH2LetterSpacing = "-0.01em";
-export const OhTypographyHeadingH3FontSize = "1.625rem";
+export const OhTypographyHeadingH3FontSize = "1.75rem";
 export const OhTypographyHeadingH3FontWeight = "600";
-export const OhTypographyHeadingH3LineHeight = 1.35;
+export const OhTypographyHeadingH3LineHeight = 1.4286; // 40px at 28px: 28px × 1.35, rounded to the 8px grid
 export const OhTypographyHeadingH3LetterSpacing = "-0.01em";
-export const OhTypographyHeadingH4FontSize = "1.25rem";
+export const OhTypographyHeadingH4FontSize = "1.5rem";
 export const OhTypographyHeadingH4FontWeight = "600";
-export const OhTypographyHeadingH4LineHeight = 1.35;
+export const OhTypographyHeadingH4LineHeight = 1.3333; // 32px at 24px: 24px × 1.35, rounded to the 8px grid
 export const OhTypographyHeadingH4LetterSpacing = "0";
-export const OhTypographyHeadingH5FontSize = "1.125rem";
+export const OhTypographyHeadingH5FontSize = "1.25rem";
 export const OhTypographyHeadingH5FontWeight = "500";
-export const OhTypographyHeadingH5LineHeight = 1.5;
+export const OhTypographyHeadingH5LineHeight = 1.6; // 32px at 20px: 20px × 1.5, rounded to the 8px grid
 export const OhTypographyHeadingH6FontSize = "1rem";
 export const OhTypographyHeadingH6FontWeight = "500";
-export const OhTypographyHeadingH6LineHeight = 1.5;
+export const OhTypographyHeadingH6LineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhTypographyBodyFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhTypographyBodyXlFontSize = "1.25rem";
+export const OhTypographyBodyXlFontSize = "1.5rem";
 export const OhTypographyBodyXlFontWeight = "400";
-export const OhTypographyBodyXlLineHeight = 1.5;
-export const OhTypographyBodyLgFontSize = "1.125rem";
+export const OhTypographyBodyXlLineHeight = 1.6667; // 40px at 24px: 24px × 1.5, rounded to the 8px grid
+export const OhTypographyBodyLgFontSize = "1.25rem";
 export const OhTypographyBodyLgFontWeight = "400";
-export const OhTypographyBodyLgLineHeight = 1.65;
+export const OhTypographyBodyLgLineHeight = 1.6; // 32px at 20px: 20px × 1.65, rounded to the 8px grid
 export const OhTypographyBodyBaseFontSize = "1rem";
 export const OhTypographyBodyBaseFontWeight = "400";
-export const OhTypographyBodyBaseLineHeight = 1.5;
-export const OhTypographyBodySmFontSize = "0.875rem";
+export const OhTypographyBodyBaseLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
+export const OhTypographyBodySmFontSize = "0.75rem";
 export const OhTypographyBodySmFontWeight = "400";
-export const OhTypographyBodySmLineHeight = 1.5;
+export const OhTypographyBodySmLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyBodySmLetterSpacing = "0.01em";
 export const OhTypographyBodyXsFontSize = "0.75rem";
 export const OhTypographyBodyXsFontWeight = "400";
-export const OhTypographyBodyXsLineHeight = 1.5;
+export const OhTypographyBodyXsLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyBodyXsLetterSpacing = "0.01em";
 export const OhTypographyLabelFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhTypographyLabelBaseFontSize = "0.875rem";
+export const OhTypographyLabelBaseFontSize = "1rem";
 export const OhTypographyLabelBaseFontWeight = "500";
-export const OhTypographyLabelBaseLineHeight = 1.5; // 1.5 for WCAG 1.4.12
+export const OhTypographyLabelBaseLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhTypographyLabelBaseLetterSpacing = "0.01em";
 export const OhTypographyLabelSmFontSize = "0.75rem";
 export const OhTypographyLabelSmFontWeight = "500";
-export const OhTypographyLabelSmLineHeight = 1.5; // 1.5 for WCAG 1.4.12
+export const OhTypographyLabelSmLineHeight = 1.6667; // 20px at 12px: 12px × 1.5, rounded to the 4px grid
 export const OhTypographyLabelSmLetterSpacing = "0.01em";
 export const OhTypographyEyebrowFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
@@ -325,13 +357,13 @@ export const OhTypographyControlFontFamily =
 export const OhTypographyControlFontWeight = "600";
 export const OhTypographyControlLetterSpacing = "0.01em";
 export const OhTypographyControlFontSizeSm = "1rem"; // Small buttons, field labels
-export const OhTypographyControlFontSizeMd = "1.125rem"; // Default: input text, choices, buttons
-export const OhTypographyControlFontSizeLg = "1.25rem"; // Large buttons
+export const OhTypographyControlFontSizeMd = "1.25rem"; // Default: input text, choices, buttons
+export const OhTypographyControlFontSizeLg = "1.5rem"; // Large buttons
 export const OhTypographyEmphasisFontWeight = "600";
 export const OhTypographyCodeFontFamily =
   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
-export const OhTypographyCodeFontSize = "0.875rem";
-export const OhTypographyCodeLineHeight = 1.5;
+export const OhTypographyCodeFontSize = "1rem";
+export const OhTypographyCodeLineHeight = 1.5; // 24px at 16px: 16px × 1.5, rounded to the 8px grid
 export const OhLayoutContainerSm = "640px";
 export const OhLayoutContainerMd = "768px";
 export const OhLayoutContainerLg = "1024px";
@@ -352,6 +384,39 @@ export const OhElevationStrong =
 export const OhElevationGlow =
   "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)"; // Focus ring
 export const OhElevationInset = "inset 0 1px 3px rgba(61, 50, 41, 0.08)"; // Inputs, wells
+export const OhElevationSurfaceFlat =
+  "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)";
+export const OhElevationSurfaceRaised =
+  "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)";
+export const OhElevationSurfaceLifted =
+  "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)"; // Hovered
+export const OhElevationSurfacePressed =
+  "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)";
+export const OhElevationSurfaceFocused =
+  "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)"; // Sits under the focus glow
+export const OhElevationSurfaceFeatured =
+  "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)";
+export const OhElevationSurfaceFeaturedLifted =
+  "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)";
+export const OhElevationSurfaceFeaturedFocused =
+  "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)";
+export const OhElevationOffsetXs = "1px";
+export const OhElevationOffsetSm = "2px";
+export const OhElevationOffsetMd = "3px";
+export const OhElevationOffsetLg = "4px";
+export const OhElevationOffsetXl = "5px";
+export const OhElevationOffset2xl = "6px";
+export const OhLiftHoverSm = "-1px";
+export const OhLiftHoverMd = "-2px";
+export const OhLiftPressSm = "1px";
+export const OhLiftPressMd = "2px";
+export const OhStrokeControl = "2.5px"; // Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs
+export const OhStrokeSurface = "1px"; // Card edges
+export const OhStrokeDivider = "1px"; // Lines between sections
+export const OhDecorationUnderlineThickness = "2px";
+export const OhDecorationUnderlineFocusThickness = "3px"; // The solid underline that shows keyboard focus on inline links
+export const OhDecorationUnderlineDash = "4px";
+export const OhDecorationUnderlinePeriod = "8px";
 export const OhFocusRingWidth = "3px";
 export const OhFocusRingOffset = "2px";
 export const OhFocusRingColor = "#c54300"; // The focus colour: outlines, focused control borders. Must stay opaque (4.7:1 on cream, WCAG 1.4.11)
@@ -369,12 +434,12 @@ export const OhButtonSizeSmPaddingX = "1rem";
 export const OhButtonSizeSmPaddingY = "0.5rem";
 export const OhButtonSizeSmMinHeight = "40px";
 export const OhButtonSizeSmGap = "0.5rem";
-export const OhButtonSizeMdFontSize = "1.125rem";
+export const OhButtonSizeMdFontSize = "1.25rem";
 export const OhButtonSizeMdPaddingX = "1.5rem";
 export const OhButtonSizeMdPaddingY = "0.75rem";
 export const OhButtonSizeMdMinHeight = "48px";
 export const OhButtonSizeMdGap = "0.5rem";
-export const OhButtonSizeLgFontSize = "1.25rem";
+export const OhButtonSizeLgFontSize = "1.5rem";
 export const OhButtonSizeLgPaddingX = "2rem";
 export const OhButtonSizeLgPaddingY = "1rem";
 export const OhButtonSizeLgMinHeight = "56px";
@@ -401,7 +466,7 @@ export const OhButtonFocusRingColor = "#c54300";
 export const OhButtonFocusGlowColor = "#c5430026";
 export const OhInputBaseFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhInputBaseFontSize = "1.125rem";
+export const OhInputBaseFontSize = "1.25rem";
 export const OhInputBaseLineHeight = 1.5;
 export const OhInputBaseBorderRadius = "10px";
 export const OhInputBaseBorderWidth = "2.5px";
@@ -448,12 +513,13 @@ export const OhCardSunlitGradientStart = "#fffbf5";
 export const OhCardSunlitGradientMid = "#fdf6ee";
 export const OhCardSunlitGradientEnd = "#f8efe4";
 export const OhCardSunlitBorderColor = "#c5430040";
-export const OhCardSunlitBorderColorHover = "#c5430059"; // Decorative container edge — not a focus or control border
+export const OhCardSunlitBorderColorHover = "#c5430059";
 export const OhCardSunlitShadow =
   "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)";
-export const OhCardSectionDividerColor = "#e2d5c899"; // Decorative divider
+export const OhCardSectionDividerColor = "#e2d5c899";
 export const OhCardSectionHeaderGradientStart = "#ffffff80";
 export const OhCardSectionHeaderGradientEnd = "#ffffff00";
+export const OhProgressTrackInsetShadow = "#0000000f"; // Neutral, so it works on every track colour
 export const OhProgressInverseTrackBackground = "#ffffff26";
 export const OhProgressInverseTrackBorder = "#ffffff4d";
 export const OhProgressInverseFill = "#faf7f2";
@@ -482,5 +548,6 @@ export const OhLinkColorHover = "#9e3500";
 export const OhLinkTextDecoration = "underline";
 export const OhLinkTextDecorationHover = "none";
 export const OhLinkInverseFocusBackground = "#0000001a"; // Focus tint — paired with the underline, which is the indicator
-export const OhModalOverlay = "#3d322999"; // Backdrop — darker than color.surface.overlay so the dialog stands out
+export const OhModalOverlay = "#3d322999";
 export const OhCloseButtonBackgroundHover = "#00000014"; // Neutral tint that works on every alert variant
+export const OhCloseButtonShadowHover = "#00000026"; // Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant