@orange-halo/tokens 1.0.0 → 2.1.0

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$description": "Component Design Tokens — Orange Halo Visual DNA applied. Each component has personality knobs.",
   "color": {
-    "$description": "Warm color palette with nostalgic character. No pure white, no blue-gray.",
+    "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
       "50": "#fff3e0",
       "100": "#ffe0b2",
@@ -26,6 +26,7 @@
       "600": "#b87a24",
       "700": "#8c5e1c",
       "800": "#6b4815",
+      "900": "#3d3529",
       "$description": "Warm highlight — golden warmth for accents and feedback"
     },
     "terracotta": {
@@ -52,33 +53,47 @@
       "700": "#3f5c5d",
       "800": "#344a4b",
       "900": "#2a3c3d",
-      "$description": "Nostalgic accent — muted teal, the retro counterbalance"
+      "$description": "Reserve palette — not used by semantic tokens"
     },
     "warm": {
       "$description": "Warm neutral scale — cream to walnut, no blue-gray",
       "cream": "#faf7f2",
       "linen": "#f5f0e8",
+      "dawn": "#fffbf5",
+      "shell": "#fdf6ee",
+      "biscuit": "#f8efe4",
       "parchment": "#ede8df",
       "sand": "#e2dcd2",
       "dune": "#c9c1b4",
+      "stone": "#a09080",
+      "taupe": "#8a7a68",
       "driftwood": "#6b5d4d",
       "bark": "#52463a",
-      "walnut": "#3d3229"
+      "hickory": "#4a3f33",
+      "chestnut": "#44382c",
+      "walnut": "#3d3229",
+      "mocha": "#352e28",
+      "cocoa": "#2a2420",
+      "espresso": "#1f1a17"
     },
     "green": {
       "50": "#f0f7f1",
       "100": "#d9edd9",
+      "300": "#7ab87c",
       "500": "#5a9a5c",
       "600": "#4a8a4c",
       "700": "#3d7340",
+      "900": "#2a3629",
       "$description": "Success — warm-tinted green"
     },
     "red": {
       "50": "#fdf4f3",
       "100": "#f9e0dc",
+      "300": "#e08f8d",
       "500": "#c75450",
       "600": "#b54540",
       "700": "#943836",
+      "900": "#3d2a29",
       "$description": "Error — warm-tinted red"
     },
     "blue": {
@@ -100,7 +115,6 @@
       "primaryHover": "#9e3500",
       "primaryActive": "#9e3500",
       "primarySubtle": "#fff3e0",
-      "primaryMuted": "#ffe0b2",
       "highlight": "#e8a838",
       "highlightSubtle": "#fdf3d4"
     },
@@ -110,25 +124,20 @@
       "hover": "#354f70",
       "active": "#2e4460",
       "subtle": "#eef4f9",
-      "muted": "#d6e4f0",
       "shadow": "#a0b4c8"
     },
     "feedback": {
       "$description": "Feedback colors — warm-tinted",
-      "success": "#4a8a4c",
+      "success": "#3d7340",
       "successSubtle": "#f0f7f1",
-      "successMuted": "#d9edd9",
       "error": "#b54540",
       "errorHover": "#943836",
       "errorSubtle": "#fdf4f3",
-      "errorMuted": "#f9e0dc",
       "errorShadow": "#b545404d",
       "warning": "#8c5e1c",
       "warningSubtle": "#fefaee",
-      "warningMuted": "#fdf3d4",
       "info": "#3d5a80",
-      "infoSubtle": "#eef4f9",
-      "infoMuted": "#d6e4f0"
+      "infoSubtle": "#eef4f9"
     },
     "surface": {
       "$description": "Surface system — designed surfaces, not flat planes",
@@ -136,22 +145,28 @@
       "raised": "#f5f0e8",
       "sunlit": "#faf7f2",
       "inset": "#ede8df",
-      "white": "#ffffff",
+      "highlight": "#ffffff",
       "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",
       "default": "#e2dcd2",
       "subtle": "#ede8df",
       "emphasis": "#6b5d4d",
+      "strong": "#c9c1b4",
       "hover": "#8b4726",
-      "focus": "#c54300",
-      "focusInner": "#c54300",
       "disabled": "#ede8df",
-      "brand": "#c5430040"
+      "brand": "#c5430040",
+      "brandHover": "#c5430059",
+      "divider": "#e2d5c899"
     },
     "text": {
       "$description": "Text colors — calm and readable, not stark",
@@ -161,9 +176,14 @@
       "inverse": "#faf7f2",
       "link": "#c54300",
       "linkHover": "#9e3500",
+      "linkRaised": "#9e3500",
       "brand": "#c54300",
       "onBrand": "#ffffff",
-      "onAccent": "#ffffff"
+      "onAccent": "#ffffff",
+      "onSuccess": "#ffffff",
+      "onError": "#ffffff",
+      "onWarning": "#ffffff",
+      "onInfo": "#ffffff"
     }
   },
   "font": {
@@ -207,43 +227,8 @@
       "tight": "-0.01em",
       "normal": "0",
       "wide": "0.01em",
-      "wider": "0.02em"
-    }
-  },
-  "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"
+      "wider": "0.02em",
+      "widest": "0.05em"
     }
   },
   "radius": {
@@ -269,16 +254,35 @@
       "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",
-    "sunlit": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+    "sunlit": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
     "warm": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
     "nostalgic": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)"
   },
@@ -346,7 +350,61 @@
       "0": "0",
       "1": "1px",
       "2": "2px",
-      "$description": "Border widths"
+      "$description": "Border widths",
+      "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": {
+      "$description": "Content max-widths",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    },
+    "breakpoint": {
+      "$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
+      "xs": "480px",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px"
     }
   },
   "zIndex": {
@@ -372,7 +430,7 @@
       },
       "h2": {
         "fontSize": "2rem",
-        "fontWeight": "600",
+        "fontWeight": "700",
         "lineHeight": 1.25,
         "letterSpacing": "-0.01em"
       },
@@ -384,7 +442,7 @@
       },
       "h4": {
         "fontSize": "1.25rem",
-        "fontWeight": "500",
+        "fontWeight": "600",
         "lineHeight": 1.35,
         "letterSpacing": "0"
       },
@@ -401,6 +459,12 @@
     },
     "body": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "xl": {
+        "$description": "Lead paragraphs and hero subtitles",
+        "fontSize": "1.25rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
       "lg": {
         "fontSize": "1.125rem",
         "fontWeight": "400",
@@ -439,18 +503,51 @@
         "letterSpacing": "0.01em"
       }
     },
+    "eyebrow": {
+      "$description": "Small uppercase line above a heading (set text-transform: uppercase alongside)",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.05em"
+    },
+    "control": {
+      "$description": "Buttons, field labels, legends, select triggers and options, choice labels",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.01em",
+      "fontSize": {
+        "sm": "1rem",
+        "md": "1.125rem",
+        "lg": "1.25rem"
+      }
+    },
+    "emphasis": {
+      "$description": "Inline emphasis inside body text: links, the selected option",
+      "fontWeight": "600"
+    },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
       "fontSize": "0.875rem",
       "lineHeight": 1.5
     }
   },
+  "layout": {
+    "$description": "Layout sizes",
+    "container": {
+      "$description": "Max-width of a centred content column (oh-container, oh-hero)",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  },
   "shape": {
     "$description": "Friendly soft corners",
-    "interactive": "6px",
+    "control": "10px",
     "container": "10px",
     "large": "14px",
-    "small": "4px",
+    "compact": "6px",
+    "tight": "4px",
     "pill": "9999px"
   },
   "elevation": {
@@ -460,19 +557,60 @@
     "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",
     "ringWidth": "3px",
-    "ringColor": "#c5430059",
+    "ringOffset": "2px",
+    "ringColor": "#c54300",
     "glowColor": "#c5430026"
   },
   "button": {
     "$description": "Button — chunky, tactile, playful with offset shadows",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontWeight": "500",
+      "fontWeight": "600",
       "letterSpacing": "0.01em",
       "borderRadius": "10px",
       "borderWidth": "2.5px",
@@ -485,25 +623,26 @@
       ]
     },
     "size": {
+      "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
       "sm": {
-        "fontSize": "0.875rem",
-        "paddingX": "0.75rem",
+        "fontSize": "1rem",
+        "paddingX": "1rem",
         "paddingY": "0.5rem",
-        "minHeight": "36px",
-        "gap": "0.375rem"
+        "minHeight": "40px",
+        "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "0.875rem",
-        "paddingX": "1rem",
-        "paddingY": "0.625rem",
-        "minHeight": "44px",
+        "fontSize": "1.125rem",
+        "paddingX": "1.5rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1rem",
-        "paddingX": "1.5rem",
-        "paddingY": "0.875rem",
-        "minHeight": "52px",
+        "fontSize": "1.25rem",
+        "paddingX": "2rem",
+        "paddingY": "1rem",
+        "minHeight": "56px",
         "gap": "0.625rem"
       }
     },
@@ -520,7 +659,7 @@
       "secondary": {
         "$description": "Secondary — cream surface with emphasis border",
         "background": "#faf7f2",
-        "backgroundHover": "#ffffff",
+        "backgroundHover": "#fff4e6",
         "backgroundActive": "#f0ebe3",
         "color": "#3d3229",
         "borderColor": "#6b5d4d",
@@ -537,9 +676,8 @@
       }
     },
     "focus": {
-      "$description": "Warm, friendly focus ring",
-      "ringWidth": "3px",
-      "ringColor": "#c5430059",
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
+      "ringColor": "#c54300",
       "glowColor": "#c5430026"
     }
   },
@@ -593,7 +731,7 @@
     "$description": "Card — raised surface with visible frame",
     "base": {
       "background": "#f5f0e8",
-      "borderRadius": "10px",
+      "borderRadius": "14px",
       "borderWidth": "1px",
       "borderColor": "#e2dcd2",
       "shadow": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
@@ -612,21 +750,56 @@
       "borderColorHover": "#c5430040",
       "shadowHover": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
     },
+    "raised": {
+      "$description": "Raised card (default) — subtle top-lit gradient",
+      "gradientStart": "#ffffff",
+      "gradientMid": "#faf7f2",
+      "gradientEnd": "#f5f0e8",
+      "borderColor": "#e2dcd2"
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": "#faf7f2",
+      "gradientEnd": "#f5f0e8",
+      "borderColor": "#e2dcd2"
+    },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "background": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+      "background": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
+      "gradientStart": "#fffbf5",
+      "gradientMid": "#fdf6ee",
+      "gradientEnd": "#f8efe4",
       "borderColor": "#c5430040",
+      "borderColorHover": "#c5430059",
       "shadow": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "dividerColor": "#e2d5c899",
+      "headerGradientStart": "#ffffff80",
+      "headerGradientEnd": "#ffffff00"
+    }
+  },
+  "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",
+      "trackBorder": "#ffffff4d",
+      "fill": "#faf7f2"
     }
   },
   "badge": {
     "$description": "Badge — small status indicators",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontSize": "0.75rem",
+      "fontSize": "1rem",
       "fontWeight": "500",
       "letterSpacing": "0.01em",
-      "borderRadius": "9999px",
+      "borderRadius": "6px",
       "paddingX": "0.625rem",
       "paddingY": "0.25rem"
     },
@@ -641,7 +814,7 @@
       },
       "success": {
         "background": "#f0f7f1",
-        "color": "#4a8a4c"
+        "color": "#3d7340"
       },
       "error": {
         "background": "#fdf4f3",
@@ -662,6 +835,19 @@
     "color": "#c54300",
     "colorHover": "#9e3500",
     "textDecoration": "underline",
-    "textDecorationHover": "none"
+    "textDecorationHover": "none",
+    "inverse": {
+      "$description": "On brand/accent backgrounds",
+      "focusBackground": "#0000001a"
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "overlay": "#3d322999"
+  },
+  "closeButton": {
+    "$description": "Icon-only close buttons in alerts and modals",
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/tokens",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Design tokens for Orange Halo Design System (W3C Design Token Format)",
   "type": "module",
   "main": "./dist/tokens.js",
@@ -9,13 +9,18 @@
       "import": "./dist/tokens.js"
     },
     "./css": "./dist/tokens.css",
-    "./themes/light": "./dist/themes/light.css",
     "./themes/dark": "./dist/themes/dark.css",
-    "./json": "./dist/tokens.json"
+    "./themes/dark.json": "./dist/themes/dark.json",
+    "./json": "./dist/tokens.json",
+    "./brands/*": "./dist/brands/*",
+    "./contrast": "./contrast.js",
+    "./contrast-pairs": "./contrast-pairs.json"
   },
   "files": [
     "dist",
-    "tokens"
+    "tokens",
+    "contrast.js",
+    "contrast-pairs.json"
   ],
   "devDependencies": {
     "style-dictionary": "^4.2.0"

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"]
+}