@orange-halo/tokens 2.1.0 → 2.2.0

package/dist/tokens.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": {
     "$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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/tokens",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Design tokens for Orange Halo Design System (W3C Design Token Format)",
   "type": "module",
   "main": "./dist/tokens.js",
@@ -38,8 +38,6 @@
   "scripts": {
     "build": "node style-dictionary.config.js",
     "dev": "node --watch style-dictionary.config.js",
-    "clean": "rm -rf dist",
-    "lint": "eslint tokens/",
-    "lint:fix": "eslint tokens/ --fix"
+    "clean": "rm -rf dist"
   }
 }

package/tokens/brands/hood/brand.json

@@ -1,5 +1,7 @@
 {
   "$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"]
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+  ]
 }

package/tokens/brands/hood/light.tokens.json

@@ -403,7 +403,7 @@
       "sm": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.xs}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -445,7 +445,7 @@
       "base": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.base}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -486,7 +486,7 @@
       },
       "fontSize": {
         "$type": "dimension",
-        "$value": "{font.size.sm}"
+        "$value": "{font.size.xs}"
       },
       "fontWeight": {
         "$type": "fontWeight",
@@ -538,7 +538,7 @@
       },
       "fontSize": {
         "$type": "dimension",
-        "$value": "{font.size.sm}"
+        "$value": "{font.size.base}"
       },
       "lineHeight": {
         "$type": "number",

package/tokens/brands/hood/palette.tokens.json

@@ -1,5 +1,13 @@
 {
   "$description": "Hood brand palette (tier 1): Fraser Hood's personal site. Greyscale and type-led, after fraser-hood.co.uk/gig-history: flat, no shadows, small corners, one quiet blue for links that need a colour and for info.",
+  "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": {
+      "$type": "dimension",
+      "$value": "8px",
+      "$description": "8px grid with 4px half-steps"
+    }
+  },
   "color": {
     "grey": {
       "$description": "Neutral greys. 850, 800, 750 and 100 are the gig-history site's page, surface, line and text colours; 500 is its muted grey, a touch lighter",
@@ -8,7 +16,11 @@
       "200": { "$type": "color", "$value": "#DEDEDE" },
       "300": { "$type": "color", "$value": "#C4C4C4" },
       "400": { "$type": "color", "$value": "#A8A8A8" },
-      "500": { "$type": "color", "$value": "#929292", "$description": "The site's muted grey (#8F8F8F) lifted just enough for 4.5:1 on surface.raised" },
+      "500": {
+        "$type": "color",
+        "$value": "#929292",
+        "$description": "The site's muted grey (#8F8F8F) lifted just enough for 4.5:1 on surface.raised"
+      },
       "600": { "$type": "color", "$value": "#6B6B6B" },
       "650": { "$type": "color", "$value": "#575757" },
       "700": { "$type": "color", "$value": "#454545" },
@@ -56,21 +68,58 @@
   "font": {
     "family": {
       "$description": "Plus Jakarta Sans for everything, as on the site",
-      "sans": { "$type": "fontFamily", "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif" },
-      "display": { "$type": "fontFamily", "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif" },
-      "mono": { "$type": "fontFamily", "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }
+      "sans": {
+        "$type": "fontFamily",
+        "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif"
+      },
+      "display": {
+        "$type": "fontFamily",
+        "$value": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif"
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+      }
     },
     "size": {
-      "$description": "The site's scale: 15px body, large bold headings",
-      "xs": { "$type": "dimension", "$value": "0.6875rem" },
-      "sm": { "$type": "dimension", "$value": "0.8125rem" },
-      "base": { "$type": "dimension", "$value": "0.9375rem" },
-      "lg": { "$type": "dimension", "$value": "1.0625rem" },
-      "xl": { "$type": "dimension", "$value": "1.35rem" },
-      "2xl": { "$type": "dimension", "$value": "1.8rem" },
-      "3xl": { "$type": "dimension", "$value": "2.6rem" },
-      "4xl": { "$type": "dimension", "$value": "3.5rem" },
-      "5xl": { "$type": "dimension", "$value": "4.2rem" }
+      "$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": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "12px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "{font.size.xs}",
+        "$description": "Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role"
+      },
+      "base": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "16px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "20px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "24px"
+      },
+      "2xl": { "$type": "dimension", "$value": "2rem", "$description": "32px" },
+      "3xl": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "40px"
+      },
+      "4xl": {
+        "$type": "dimension",
+        "$value": "3.5rem",
+        "$description": "56px"
+      },
+      "5xl": { "$type": "dimension", "$value": "4rem", "$description": "64px" }
     },
     "weight": {
       "normal": { "$type": "fontWeight", "$value": "400" },
@@ -91,7 +140,11 @@
       "tight": { "$type": "dimension", "$value": "-0.01em" },
       "normal": { "$type": "dimension", "$value": "0" },
       "wide": { "$type": "dimension", "$value": "0.02em" },
-      "widest": { "$type": "dimension", "$value": "0.08em", "$description": "Small uppercase labels, as on the site" }
+      "widest": {
+        "$type": "dimension",
+        "$value": "0.08em",
+        "$description": "Small uppercase labels, as on the site"
+      }
     }
   },
   "radius": {
@@ -111,7 +164,11 @@
   "shadow": {
     "$description": "Flat: no shadows, except under dialogs",
     "none": { "$type": "shadow", "$value": "none" },
-    "overlay": { "$type": "shadow", "$value": "0 12px 32px rgba(0, 0, 0, 0.35)", "$description": "Modals and drawers only, to lift them off the backdrop" }
+    "overlay": {
+      "$type": "shadow",
+      "$value": "0 12px 32px rgba(0, 0, 0, 0.35)",
+      "$description": "Modals and drawers only, to lift them off the backdrop"
+    }
   },
   "motion": {
     "duration": {

package/tokens/brands/orange-halo/brand.json

@@ -1,5 +1,7 @@
 {
   "$description": "About the brand, for tools that show it (Storybook's Brand control): its name, and the stylesheets that load its fonts.",
   "name": "Orange Halo",
-  "fonts": ["https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"]
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+  ]
 }

package/tokens/brands/orange-halo/dark.tokens.json

@@ -35,12 +35,20 @@
       "raised": { "$type": "color", "$value": "{color.warm.walnut}" },
       "sunlit": { "$type": "color", "$value": "{color.warm.chestnut}" },
       "inset": { "$type": "color", "$value": "{color.warm.espresso}" },
-      "highlight": { "$type": "color", "$value": "{color.warm.hickory}", "$description": "Lighter than raised; text.primary stays readable on it" },
+      "highlight": {
+        "$type": "color",
+        "$value": "{color.warm.hickory}",
+        "$description": "Lighter than raised; text.primary stays readable on it"
+      },
       "overlay": { "$type": "color", "$value": "rgba(15, 12, 10, 0.7)" },
       "disabled": { "$type": "color", "$value": "{color.warm.mocha}" },
       "hover": { "$type": "color", "$value": "{color.warm.hickory}" },
       "activePressed": { "$type": "color", "$value": "{color.warm.mocha}" },
-      "featuredStart": { "$type": "color", "$value": "{color.warm.dawn}", "$description": "Same as light for now: the dark theme hasn't been designed" },
+      "featuredStart": {
+        "$type": "color",
+        "$value": "{color.warm.dawn}",
+        "$description": "Same as light for now: the dark theme hasn't been designed"
+      },
       "featuredMid": { "$type": "color", "$value": "{color.warm.shell}" },
       "featuredEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
       "sheen": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
@@ -48,13 +56,21 @@
     },
     "border": {
       "default": { "$type": "color", "$value": "{color.warm.taupe}" },
-      "subtle": { "$type": "color", "$value": "{color.warm.driftwood}", "$description": "Decorative dividers only — below 3:1" },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.warm.driftwood}",
+        "$description": "Decorative dividers only — below 3:1"
+      },
       "emphasis": { "$type": "color", "$value": "{color.warm.stone}" },
       "strong": { "$type": "color", "$value": "{color.warm.stone}" },
       "hover": { "$type": "color", "$value": "{color.warm.dune}" },
       "disabled": { "$type": "color", "$value": "{color.warm.hickory}" },
       "brand": { "$type": "color", "$value": "rgba(232, 168, 56, 0.3)" },
-      "brandHover": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)", "$description": "Same as light for now: the dark theme hasn't been designed" },
+      "brandHover": {
+        "$type": "color",
+        "$value": "rgba(197, 67, 0, 0.35)",
+        "$description": "Same as light for now: the dark theme hasn't been designed"
+      },
       "divider": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)" }
     },
     "text": {
@@ -80,20 +96,43 @@
     "secondary": { "$type": "color", "$value": "{color.warm.espresso}" },
     "accent": { "$type": "color", "$value": "{color.blue.800}" },
     "error": { "$type": "color", "$value": "{color.red.900}" },
-    "neutral": { "$type": "color", "$value": "{shadow.chunky.driftwood}", "$description": "As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design" },
-    "neutralHover": { "$type": "color", "$value": "{shadow.chunky.driftwoodHover}", "$description": "As in light; review with the dark design" },
-    "overlay": { "$type": "color", "$value": "{shadow.chunky.driftwoodDeep}", "$description": "As in light; review with the dark design" },
-    "field": { "$type": "color", "$value": "{shadow.chunky.walnut}", "$description": "As in light; review with the dark design" }
+    "neutral": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwood}",
+      "$description": "As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design"
+    },
+    "neutralHover": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodHover}",
+      "$description": "As in light; review with the dark design"
+    },
+    "overlay": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodDeep}",
+      "$description": "As in light; review with the dark design"
+    },
+    "field": {
+      "$type": "color",
+      "$value": "{shadow.chunky.walnut}",
+      "$description": "As in light; review with the dark design"
+    }
   },
   "elevation": {
     "$description": "Black-based shadows — warm-brown shadows vanish on cocoa",
     "soft": { "$type": "shadow", "$value": "0 2px 8px rgba(0, 0, 0, 0.25)" },
     "medium": { "$type": "shadow", "$value": "0 4px 16px rgba(0, 0, 0, 0.3)" },
     "strong": { "$type": "shadow", "$value": "0 8px 24px rgba(0, 0, 0, 0.4)" },
-    "inset": { "$type": "shadow", "$value": "inset 0 1px 3px rgba(0, 0, 0, 0.3)" }
+    "inset": {
+      "$type": "shadow",
+      "$value": "inset 0 1px 3px rgba(0, 0, 0, 0.3)"
+    }
   },
   "focus": {
-    "ringColor": { "$type": "color", "$value": "{color.honey.400}", "$description": "Opaque, as in light" },
+    "ringColor": {
+      "$type": "color",
+      "$value": "{color.honey.400}",
+      "$description": "Opaque, as in light"
+    },
     "glowColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.2)" }
   }
 }

package/tokens/brands/orange-halo/light.tokens.json

@@ -456,7 +456,7 @@
       "sm": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.xs}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -498,7 +498,7 @@
       "base": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.base}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -599,7 +599,7 @@
       },
       "fontSize": {
         "$type": "dimension",
-        "$value": "{font.size.sm}"
+        "$value": "{font.size.base}"
       },
       "lineHeight": {
         "$type": "number",
@@ -741,12 +741,26 @@
       "$description": "Card surfaces, by state. Featured is the sunlit card",
       "flat": { "$type": "shadow", "$value": "{shadow.layered.flat}" },
       "raised": { "$type": "shadow", "$value": "{shadow.layered.raised}" },
-      "lifted": { "$type": "shadow", "$value": "{shadow.layered.lifted}", "$description": "Hovered" },
+      "lifted": {
+        "$type": "shadow",
+        "$value": "{shadow.layered.lifted}",
+        "$description": "Hovered"
+      },
       "pressed": { "$type": "shadow", "$value": "{shadow.layered.pressed}" },
-      "focused": { "$type": "shadow", "$value": "{shadow.layered.focused}", "$description": "Sits under the focus glow" },
+      "focused": {
+        "$type": "shadow",
+        "$value": "{shadow.layered.focused}",
+        "$description": "Sits under the focus glow"
+      },
       "featured": { "$type": "shadow", "$value": "{shadow.layered.sunlit}" },
-      "featuredLifted": { "$type": "shadow", "$value": "{shadow.layered.sunlitLifted}" },
-      "featuredFocused": { "$type": "shadow", "$value": "{shadow.layered.sunlitFocused}" }
+      "featuredLifted": {
+        "$type": "shadow",
+        "$value": "{shadow.layered.sunlitLifted}"
+      },
+      "featuredFocused": {
+        "$type": "shadow",
+        "$value": "{shadow.layered.sunlitFocused}"
+      }
     },
     "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",
@@ -767,14 +781,30 @@
   },
   "stroke": {
     "$description": "Border widths by role",
-    "control": { "$type": "dimension", "$value": "{border.width.chunky}", "$description": "Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs" },
-    "surface": { "$type": "dimension", "$value": "{border.width.1}", "$description": "Card edges" },
-    "divider": { "$type": "dimension", "$value": "{border.width.1}", "$description": "Lines between sections" }
+    "control": {
+      "$type": "dimension",
+      "$value": "{border.width.chunky}",
+      "$description": "Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs"
+    },
+    "surface": {
+      "$type": "dimension",
+      "$value": "{border.width.1}",
+      "$description": "Card edges"
+    },
+    "divider": {
+      "$type": "dimension",
+      "$value": "{border.width.1}",
+      "$description": "Lines between sections"
+    }
   },
   "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": { "$type": "dimension", "$value": "2px" },
-    "underlineFocusThickness": { "$type": "dimension", "$value": "3px", "$description": "The solid underline that shows keyboard focus on inline links" },
+    "underlineFocusThickness": {
+      "$type": "dimension",
+      "$value": "3px",
+      "$description": "The solid underline that shows keyboard focus on inline links"
+    },
     "underlineDash": { "$type": "dimension", "$value": "4px" },
     "underlinePeriod": { "$type": "dimension", "$value": "8px" }
   },