@orange-halo/tokens 2.0.0 → 2.1.0

package/dist/tokens.js

@@ -115,6 +115,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 +127,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
@@ -167,33 +174,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 +195,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 +250,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";
@@ -352,6 +383,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)
@@ -448,12 +512,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 +547,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

package/dist/tokens.json

@@ -149,7 +149,12 @@
       "overlay": "#3d322966",
       "disabled": "#e2dcd2",
       "hover": "#fff4e6",
-      "activePressed": "#f0ebe3"
+      "activePressed": "#f0ebe3",
+      "featuredStart": "#fffbf5",
+      "featuredMid": "#fdf6ee",
+      "featuredEnd": "#f8efe4",
+      "sheen": "#ffffff80",
+      "backdrop": "#3d322999"
     },
     "border": {
       "$description": "Border colors — visible and intentional",
@@ -159,7 +164,9 @@
       "strong": "#c9c1b4",
       "hover": "#8b4726",
       "disabled": "#ede8df",
-      "brand": "#c5430040"
+      "brand": "#c5430040",
+      "brandHover": "#c5430059",
+      "divider": "#e2d5c899"
     },
     "text": {
       "$description": "Text colors — calm and readable, not stark",
@@ -224,42 +231,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 +254,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": "#e8c4a0",
     "secondary": "#d4c4b0",
     "accent": "#a0b4c8",
-    "error": "#b545404d"
+    "error": "#b545404d",
+    "neutral": "#6b5d4d26",
+    "neutralHover": "#6b5d4d33",
+    "overlay": "#6b5d4d40",
+    "field": "#3d322926"
   },
   "gradient": {
     "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
@@ -364,6 +354,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",
+    "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": {
@@ -531,7 +557,47 @@
     "medium": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
     "strong": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
     "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(61, 50, 41, 0.08)"
+    "inset": "inset 0 1px 3px rgba(61, 50, 41, 0.08)",
+    "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",
@@ -716,6 +782,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 +847,7 @@
   },
   "closeButton": {
     "$description": "Icon-only close buttons in alerts and modals",
-    "backgroundHover": "#00000014"
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/tokens",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Design tokens for Orange Halo Design System (W3C Design Token Format)",
   "type": "module",
   "main": "./dist/tokens.js",
@@ -12,6 +12,7 @@
     "./themes/dark": "./dist/themes/dark.css",
     "./themes/dark.json": "./dist/themes/dark.json",
     "./json": "./dist/tokens.json",
+    "./brands/*": "./dist/brands/*",
     "./contrast": "./contrast.js",
     "./contrast-pairs": "./contrast-pairs.json"
   },

package/tokens/brands/hood/brand.json

@@ -0,0 +1,5 @@
+{
+  "$description": "About the brand, for tools that show it (Storybook's Brand control): its name, and the stylesheets that load its fonts. Hood is dark by default: sites set data-theme=\"dark\".",
+  "name": "Hood",
+  "fonts": ["https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"]
+}