@orange-halo/tokens 2.0.0 → 2.2.0

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

@@ -0,0 +1,187 @@
+{
+  "$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",
+      "50": { "$type": "color", "$value": "#F7F7F7" },
+      "100": { "$type": "color", "$value": "#EDEDED" },
+      "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"
+      },
+      "600": { "$type": "color", "$value": "#6B6B6B" },
+      "650": { "$type": "color", "$value": "#575757" },
+      "700": { "$type": "color", "$value": "#454545" },
+      "750": { "$type": "color", "$value": "#363636" },
+      "800": { "$type": "color", "$value": "#292929" },
+      "850": { "$type": "color", "$value": "#1F1F1F" },
+      "900": { "$type": "color", "$value": "#171717" },
+      "950": { "$type": "color", "$value": "#0D0D0D" }
+    },
+    "white": { "$type": "color", "$value": "#FFFFFF" },
+    "black": { "$type": "color", "$value": "#000000" },
+    "blue": {
+      "$description": "The one colour: accent and info",
+      "50": { "$type": "color", "$value": "#EDF3FC" },
+      "200": { "$type": "color", "$value": "#B3CDF2" },
+      "300": { "$type": "color", "$value": "#93B8EC" },
+      "700": { "$type": "color", "$value": "#1F5CB3" },
+      "800": { "$type": "color", "$value": "#184A91" },
+      "900": { "$type": "color", "$value": "#16263D" }
+    },
+    "green": {
+      "$description": "Success",
+      "50": { "$type": "color", "$value": "#EBF6EE" },
+      "300": { "$type": "color", "$value": "#82CF9C" },
+      "700": { "$type": "color", "$value": "#1D7238" },
+      "900": { "$type": "color", "$value": "#142B1C" }
+    },
+    "red": {
+      "$description": "Error",
+      "50": { "$type": "color", "$value": "#FCEEEE" },
+      "100": { "$type": "color", "$value": "#FAD4D4" },
+      "300": { "$type": "color", "$value": "#F59A9A" },
+      "700": { "$type": "color", "$value": "#B02525" },
+      "800": { "$type": "color", "$value": "#8C1D1D" },
+      "900": { "$type": "color", "$value": "#3A1717" }
+    },
+    "amber": {
+      "$description": "Warning",
+      "50": { "$type": "color", "$value": "#FCF4E3" },
+      "300": { "$type": "color", "$value": "#EBC271" },
+      "700": { "$type": "color", "$value": "#835600" },
+      "900": { "$type": "color", "$value": "#33260E" }
+    }
+  },
+  "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"
+      }
+    },
+    "size": {
+      "$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" },
+      "medium": { "$type": "fontWeight", "$value": "500" },
+      "semibold": { "$type": "fontWeight", "$value": "600" },
+      "bold": { "$type": "fontWeight", "$value": "700" },
+      "extrabold": { "$type": "fontWeight", "$value": "800" }
+    },
+    "lineHeight": {
+      "none": { "$type": "number", "$value": 1 },
+      "tight": { "$type": "number", "$value": 1.1 },
+      "snug": { "$type": "number", "$value": 1.3 },
+      "normal": { "$type": "number", "$value": 1.5 },
+      "relaxed": { "$type": "number", "$value": 1.6 }
+    },
+    "letterSpacing": {
+      "tighter": { "$type": "dimension", "$value": "-0.02em" },
+      "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"
+      }
+    }
+  },
+  "radius": {
+    "$description": "Small, square-ish corners: 2px badges, 4px controls",
+    "none": { "$type": "dimension", "$value": "0" },
+    "xs": { "$type": "dimension", "$value": "2px" },
+    "sm": { "$type": "dimension", "$value": "4px" },
+    "md": { "$type": "dimension", "$value": "6px" },
+    "full": { "$type": "dimension", "$value": "9999px" }
+  },
+  "border": {
+    "width": {
+      "1": { "$type": "dimension", "$value": "1px" },
+      "2": { "$type": "dimension", "$value": "2px" }
+    }
+  },
+  "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"
+    }
+  },
+  "motion": {
+    "duration": {
+      "quick": { "$type": "duration", "$value": "100ms" },
+      "snappy": { "$type": "duration", "$value": "150ms" },
+      "gentle": { "$type": "duration", "$value": "200ms" },
+      "relaxed": { "$type": "duration", "$value": "250ms" },
+      "slow": { "$type": "duration", "$value": "350ms" }
+    },
+    "easing": {
+      "$description": "Plain ease-out: no overshoot",
+      "standard": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1] },
+      "out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1] }
+    }
+  }
+}

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

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

package/tokens/{themes → brands/orange-halo}/dark.tokens.json

@@ -35,20 +35,43 @@
       "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}" }
+      "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"
+      },
+      "featuredMid": { "$type": "color", "$value": "{color.warm.shell}" },
+      "featuredEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
+      "sheen": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
+      "backdrop": { "$type": "color", "$value": "rgba(61, 50, 41, 0.6)" }
     },
     "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)" }
+      "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"
+      },
+      "divider": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)" }
     },
     "text": {
       "primary": { "$type": "color", "$value": "{color.warm.linen}" },
@@ -72,17 +95,44 @@
     "primary": { "$type": "color", "$value": "{color.honey.800}" },
     "secondary": { "$type": "color", "$value": "{color.warm.espresso}" },
     "accent": { "$type": "color", "$value": "{color.blue.800}" },
-    "error": { "$type": "color", "$value": "{color.red.900}" }
+    "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"
+    }
   },
   "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/{semantic.tokens.json → brands/orange-halo/light.tokens.json}

@@ -150,6 +150,31 @@
         "$type": "color",
         "$value": "#F0EBE3",
         "$description": "Active/pressed surface"
+      },
+      "featuredStart": {
+        "$type": "color",
+        "$value": "{color.warm.dawn}",
+        "$description": "Featured (sunlit) card gradient: top"
+      },
+      "featuredMid": {
+        "$type": "color",
+        "$value": "{color.warm.shell}",
+        "$description": "Featured (sunlit) card gradient: 30%"
+      },
+      "featuredEnd": {
+        "$type": "color",
+        "$value": "{color.warm.biscuit}",
+        "$description": "Featured (sunlit) card gradient: bottom"
+      },
+      "sheen": {
+        "$type": "color",
+        "$value": "rgba(255, 255, 255, 0.5)",
+        "$description": "Light glaze at the top of card headers, fading to transparent"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.6)",
+        "$description": "Modal backdrop — darker than surface.overlay so the dialog stands out"
       }
     },
     "border": {
@@ -187,6 +212,16 @@
         "$type": "color",
         "$value": "rgba(197, 67, 0, 0.25)",
         "$description": "Brand-tinted border"
+      },
+      "brandHover": {
+        "$type": "color",
+        "$value": "rgba(197, 67, 0, 0.35)",
+        "$description": "Brand-tinted border on hover. Decorative container edge — not a focus or control border"
+      },
+      "divider": {
+        "$type": "color",
+        "$value": "rgba(226, 213, 200, 0.6)",
+        "$description": "Decorative divider inside a container, such as a card's header and footer"
       }
     },
     "text": {
@@ -421,7 +456,7 @@
       "sm": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.xs}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -463,7 +498,7 @@
       "base": {
         "fontSize": {
           "$type": "dimension",
-          "$value": "{font.size.sm}"
+          "$value": "{font.size.base}"
         },
         "fontWeight": {
           "$type": "fontWeight",
@@ -564,7 +599,7 @@
       },
       "fontSize": {
         "$type": "dimension",
-        "$value": "{font.size.sm}"
+        "$value": "{font.size.base}"
       },
       "lineHeight": {
         "$type": "number",
@@ -701,8 +736,78 @@
       "$type": "shadow",
       "$value": "{shadow.inset}",
       "$description": "Inputs, wells"
+    },
+    "surface": {
+      "$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"
+      },
+      "pressed": { "$type": "shadow", "$value": "{shadow.layered.pressed}" },
+      "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}"
+      }
+    },
+    "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": { "$type": "dimension", "$value": "1px" },
+      "sm": { "$type": "dimension", "$value": "2px" },
+      "md": { "$type": "dimension", "$value": "3px" },
+      "lg": { "$type": "dimension", "$value": "4px" },
+      "xl": { "$type": "dimension", "$value": "5px" },
+      "2xl": { "$type": "dimension", "$value": "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": { "$type": "dimension", "$value": "-1px" },
+    "hoverMd": { "$type": "dimension", "$value": "-2px" },
+    "pressSm": { "$type": "dimension", "$value": "1px" },
+    "pressMd": { "$type": "dimension", "$value": "2px" }
+  },
+  "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"
+    }
+  },
+  "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"
+    },
+    "underlineDash": { "$type": "dimension", "$value": "4px" },
+    "underlinePeriod": { "$type": "dimension", "$value": "8px" }
+  },
   "motion": {
     "$description": "Relaxed, playful motion",
     "quick": {
@@ -759,6 +864,26 @@
       "$type": "color",
       "$value": "{shadow.chunky.error}",
       "$description": "Error state"
+    },
+    "neutral": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwood}",
+      "$description": "Containers and the skip link"
+    },
+    "neutralHover": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodHover}",
+      "$description": "Lifted containers"
+    },
+    "overlay": {
+      "$type": "color",
+      "$value": "{shadow.chunky.driftwoodDeep}",
+      "$description": "Dialogs"
+    },
+    "field": {
+      "$type": "color",
+      "$value": "{shadow.chunky.walnut}",
+      "$description": "The inset shadow inside text fields"
     }
   },
   "focus": {