@orange-halo/tokens 1.0.0 → 2.1.0

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

@@ -0,0 +1,130 @@
+{
+  "$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.",
+  "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": "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" }
+    },
+    "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,5 @@
+{
+  "$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/brands/orange-halo/dark.tokens.json

@@ -0,0 +1,99 @@
+{
+  "$description": "Dark Theme — warm cocoa base, cozy evening Orange Halo. Overrides tier 2 only; every colour references the palette. Applies when data-theme=\"dark\" is set.",
+  "color": {
+    "brand": {
+      "$description": "Honey replaces orange on dark — orange.900 is too dark to read on cocoa",
+      "primary": { "$type": "color", "$value": "{color.honey.400}" },
+      "primaryHover": { "$type": "color", "$value": "{color.honey.300}" },
+      "primaryActive": { "$type": "color", "$value": "{color.honey.500}" },
+      "primarySubtle": { "$type": "color", "$value": "{color.warm.walnut}" },
+      "highlight": { "$type": "color", "$value": "{color.honey.300}" },
+      "highlightSubtle": { "$type": "color", "$value": "{color.honey.900}" }
+    },
+    "accent": {
+      "$description": "Blue, as in light — lighter steps so it reads on cocoa",
+      "default": { "$type": "color", "$value": "{color.blue.200}" },
+      "hover": { "$type": "color", "$value": "{color.blue.100}" },
+      "active": { "$type": "color", "$value": "{color.blue.300}" },
+      "subtle": { "$type": "color", "$value": "{color.blue.800}" },
+      "shadow": { "$type": "color", "$value": "{color.blue.800}" }
+    },
+    "feedback": {
+      "success": { "$type": "color", "$value": "{color.green.300}" },
+      "successSubtle": { "$type": "color", "$value": "{color.green.900}" },
+      "error": { "$type": "color", "$value": "{color.red.300}" },
+      "errorHover": { "$type": "color", "$value": "{color.red.100}" },
+      "errorSubtle": { "$type": "color", "$value": "{color.red.900}" },
+      "errorShadow": { "$type": "color", "$value": "{color.red.900}" },
+      "warning": { "$type": "color", "$value": "{color.honey.300}" },
+      "warningSubtle": { "$type": "color", "$value": "{color.honey.900}" },
+      "info": { "$type": "color", "$value": "{color.blue.200}" },
+      "infoSubtle": { "$type": "color", "$value": "{color.blue.800}" }
+    },
+    "surface": {
+      "base": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "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" },
+      "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" },
+      "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" },
+      "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" },
+      "divider": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)" }
+    },
+    "text": {
+      "primary": { "$type": "color", "$value": "{color.warm.linen}" },
+      "secondary": { "$type": "color", "$value": "{color.warm.dune}" },
+      "disabled": { "$type": "color", "$value": "{color.warm.driftwood}" },
+      "inverse": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "link": { "$type": "color", "$value": "{color.honey.400}" },
+      "linkHover": { "$type": "color", "$value": "{color.honey.300}" },
+      "linkRaised": { "$type": "color", "$value": "{color.honey.400}" },
+      "brand": { "$type": "color", "$value": "{color.honey.400}" },
+      "onBrand": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "onAccent": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "onSuccess": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "onError": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "onWarning": { "$type": "color", "$value": "{color.warm.cocoa}" },
+      "onInfo": { "$type": "color", "$value": "{color.warm.cocoa}" }
+    }
+  },
+  "shadow": {
+    "$description": "Chunky offset shadow colours — darker than the surface, so they read as shadow on dark",
+    "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}" },
+    "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)" }
+  },
+  "focus": {
+    "ringColor": { "$type": "color", "$value": "{color.honey.400}", "$description": "Opaque, as in light" },
+    "glowColor": { "$type": "color", "$value": "rgba(232, 168, 56, 0.2)" }
+  }
+}