@orange-halo/tokens 2.0.0 → 2.1.0

package/dist/brands/hood-dark.json

@@ -0,0 +1,719 @@
+{
+  "$description": "Hood tier 2, dark mode: the default look, after fraser-hood.co.uk/gig-history. Sets every tier 2 colour.",
+  "color": {
+    "grey": {
+      "50": "#f7f7f7",
+      "100": "#ededed",
+      "200": "#dedede",
+      "300": "#c4c4c4",
+      "400": "#a8a8a8",
+      "500": "#929292",
+      "600": "#6b6b6b",
+      "650": "#575757",
+      "700": "#454545",
+      "750": "#363636",
+      "800": "#292929",
+      "850": "#1f1f1f",
+      "900": "#171717",
+      "950": "#0d0d0d",
+      "$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"
+    },
+    "white": "#ffffff",
+    "black": "#000000",
+    "blue": {
+      "50": "#edf3fc",
+      "200": "#b3cdf2",
+      "300": "#93b8ec",
+      "700": "#1f5cb3",
+      "800": "#184a91",
+      "900": "#16263d",
+      "$description": "The one colour: accent and info"
+    },
+    "green": {
+      "50": "#ebf6ee",
+      "300": "#82cf9c",
+      "700": "#1d7238",
+      "900": "#142b1c",
+      "$description": "Success"
+    },
+    "red": {
+      "50": "#fceeee",
+      "100": "#fad4d4",
+      "300": "#f59a9a",
+      "700": "#b02525",
+      "800": "#8c1d1d",
+      "900": "#3a1717",
+      "$description": "Error"
+    },
+    "amber": {
+      "50": "#fcf4e3",
+      "300": "#ebc271",
+      "700": "#835600",
+      "900": "#33260e",
+      "$description": "Warning"
+    },
+    "brand": {
+      "primary": "#ffffff",
+      "primaryHover": "#dedede",
+      "primaryActive": "#c4c4c4",
+      "primarySubtle": "#292929",
+      "highlight": "#ededed",
+      "highlightSubtle": "#363636"
+    },
+    "accent": {
+      "default": "#93b8ec",
+      "hover": "#b3cdf2",
+      "active": "#93b8ec",
+      "subtle": "#16263d",
+      "shadow": "#16263d"
+    },
+    "feedback": {
+      "success": "#82cf9c",
+      "successSubtle": "#142b1c",
+      "error": "#f59a9a",
+      "errorHover": "#fad4d4",
+      "errorSubtle": "#3a1717",
+      "errorShadow": "#3a1717",
+      "warning": "#ebc271",
+      "warningSubtle": "#33260e",
+      "info": "#93b8ec",
+      "infoSubtle": "#16263d"
+    },
+    "surface": {
+      "base": "#1f1f1f",
+      "raised": "#292929",
+      "sunlit": "#292929",
+      "inset": "#171717",
+      "highlight": "#363636",
+      "overlay": "#000000b3",
+      "disabled": "#292929",
+      "hover": "#363636",
+      "activePressed": "#454545",
+      "featuredStart": "#363636",
+      "featuredMid": "#292929",
+      "featuredEnd": "#292929",
+      "sheen": "#ffffff08",
+      "backdrop": "#000000bf"
+    },
+    "border": {
+      "default": "#363636",
+      "subtle": "#292929",
+      "emphasis": "#929292",
+      "strong": "#575757",
+      "hover": "#ededed",
+      "disabled": "#292929",
+      "brand": "#ffffff40",
+      "brandHover": "#ffffff73",
+      "divider": "#363636"
+    },
+    "text": {
+      "primary": "#ededed",
+      "secondary": "#929292",
+      "disabled": "#575757",
+      "inverse": "#1f1f1f",
+      "link": "#ffffff",
+      "linkHover": "#c4c4c4",
+      "linkRaised": "#ffffff",
+      "brand": "#ffffff",
+      "onBrand": "#1f1f1f",
+      "onAccent": "#1f1f1f",
+      "onSuccess": "#1f1f1f",
+      "onError": "#1f1f1f",
+      "onWarning": "#1f1f1f",
+      "onInfo": "#1f1f1f"
+    }
+  },
+  "font": {
+    "family": {
+      "$description": "Plus Jakarta Sans for everything, as on the site",
+      "sans": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "display": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+    },
+    "size": {
+      "$description": "The site's scale: 15px body, large bold headings",
+      "xs": "0.6875rem",
+      "sm": "0.8125rem",
+      "base": "0.9375rem",
+      "lg": "1.0625rem",
+      "xl": "1.35rem",
+      "2xl": "1.8rem",
+      "3xl": "2.6rem",
+      "4xl": "3.5rem",
+      "5xl": "4.2rem"
+    },
+    "weight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700",
+      "extrabold": "800"
+    },
+    "lineHeight": {
+      "none": 1,
+      "tight": 1.1,
+      "snug": 1.3,
+      "normal": 1.5,
+      "relaxed": 1.6
+    },
+    "letterSpacing": {
+      "tighter": "-0.02em",
+      "tight": "-0.01em",
+      "normal": "0",
+      "wide": "0.02em",
+      "widest": "0.08em"
+    }
+  },
+  "radius": {
+    "$description": "Small, square-ish corners: 2px badges, 4px controls",
+    "none": "0",
+    "xs": "2px",
+    "sm": "4px",
+    "md": "6px",
+    "full": "9999px"
+  },
+  "border": {
+    "width": {
+      "1": "1px",
+      "2": "2px"
+    }
+  },
+  "shadow": {
+    "$description": "Flat: no shadows, except under dialogs",
+    "none": "none",
+    "overlay": "#000000",
+    "primary": "#000000",
+    "secondary": "#000000",
+    "accent": "#000000",
+    "error": "#000000",
+    "neutral": "#000000",
+    "neutralHover": "#000000",
+    "field": "#000000"
+  },
+  "motion": {
+    "duration": {
+      "quick": "100ms",
+      "snappy": "150ms",
+      "gentle": "200ms",
+      "relaxed": "250ms",
+      "slow": "350ms"
+    },
+    "easing": {
+      "$description": "Plain ease-out: no overshoot",
+      "standard": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "out": [
+        0,
+        0,
+        0.2,
+        1
+      ]
+    },
+    "quick": "100ms",
+    "snappy": "150ms",
+    "gentle": "200ms",
+    "relaxed": "250ms",
+    "slow": "350ms",
+    "easeGentle": [
+      0.4,
+      0,
+      0.2,
+      1
+    ],
+    "easeOut": [
+      0,
+      0,
+      0.2,
+      1
+    ],
+    "easePlayful": [
+      0,
+      0,
+      0.2,
+      1
+    ]
+  },
+  "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": {
+      "page": "1.5rem",
+      "section": "3rem",
+      "stack": "1.25rem",
+      "inline": "1rem"
+    },
+    "component": {
+      "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": {
+    "0": 0,
+    "10": 10,
+    "20": 20,
+    "$description": "Z-index layering",
+    "dropdown": 1000,
+    "sticky": 1100,
+    "modal": 1200,
+    "popover": 1300,
+    "tooltip": 1400
+  },
+  "typography": {
+    "heading": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "h1": {
+        "fontSize": "3.5rem",
+        "fontWeight": "800",
+        "lineHeight": 1.1,
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "fontSize": "2.6rem",
+        "fontWeight": "800",
+        "lineHeight": 1.1,
+        "letterSpacing": "-0.01em"
+      },
+      "h3": {
+        "fontSize": "1.8rem",
+        "fontWeight": "700",
+        "lineHeight": 1.3,
+        "letterSpacing": "-0.01em"
+      },
+      "h4": {
+        "fontSize": "1.35rem",
+        "fontWeight": "700",
+        "lineHeight": 1.3,
+        "letterSpacing": "0"
+      },
+      "h5": {
+        "fontSize": "1.0625rem",
+        "fontWeight": "700",
+        "lineHeight": 1.5
+      },
+      "h6": {
+        "fontSize": "0.9375rem",
+        "fontWeight": "700",
+        "lineHeight": 1.5
+      }
+    },
+    "body": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "xl": {
+        "fontSize": "1.35rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
+      "lg": {
+        "fontSize": "1.0625rem",
+        "fontWeight": "400",
+        "lineHeight": 1.6
+      },
+      "base": {
+        "fontSize": "0.9375rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
+      "sm": {
+        "fontSize": "0.8125rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5,
+        "letterSpacing": "0"
+      },
+      "xs": {
+        "fontSize": "0.6875rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.02em"
+      }
+    },
+    "label": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "base": {
+        "fontSize": "0.8125rem",
+        "fontWeight": "600",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.02em"
+      },
+      "sm": {
+        "fontSize": "0.6875rem",
+        "fontWeight": "600",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.08em"
+      }
+    },
+    "eyebrow": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "fontSize": "0.8125rem",
+      "fontWeight": "600",
+      "letterSpacing": "0.08em"
+    },
+    "control": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.02em",
+      "fontSize": {
+        "sm": "0.9375rem",
+        "md": "0.9375rem",
+        "lg": "1.0625rem"
+      }
+    },
+    "emphasis": {
+      "fontWeight": "700"
+    },
+    "code": {
+      "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      "fontSize": "0.8125rem",
+      "lineHeight": 1.5
+    }
+  },
+  "layout": {
+    "container": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  },
+  "shape": {
+    "control": "4px",
+    "container": "4px",
+    "large": "6px",
+    "compact": "2px",
+    "tight": "2px",
+    "pill": "9999px"
+  },
+  "elevation": {
+    "none": "none",
+    "soft": "none",
+    "medium": "none",
+    "strong": "#000000",
+    "glow": "none",
+    "inset": "none",
+    "surface": {
+      "flat": "none",
+      "raised": "none",
+      "lifted": "none",
+      "pressed": "none",
+      "focused": "none",
+      "featured": "none",
+      "featuredLifted": "none",
+      "featuredFocused": "none"
+    },
+    "offset": {
+      "xs": "0px",
+      "sm": "0px",
+      "md": "0px",
+      "lg": "0px",
+      "xl": "0px",
+      "2xl": "0px"
+    }
+  },
+  "lift": {
+    "hoverSm": "0px",
+    "hoverMd": "0px",
+    "pressSm": "0px",
+    "pressMd": "0px"
+  },
+  "stroke": {
+    "control": "1px",
+    "surface": "1px",
+    "divider": "1px"
+  },
+  "decoration": {
+    "underlineThickness": "1px",
+    "underlineFocusThickness": "2px",
+    "underlineDash": "4px",
+    "underlinePeriod": "8px"
+  },
+  "focus": {
+    "ringWidth": "2px",
+    "ringOffset": "2px",
+    "ringColor": "#ffffff",
+    "glowColor": "#ffffff00"
+  },
+  "button": {
+    "$description": "Button — chunky, tactile, playful with offset shadows",
+    "base": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.02em",
+      "borderRadius": "4px",
+      "borderWidth": "1px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0,
+        0,
+        0.2,
+        1
+      ]
+    },
+    "size": {
+      "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
+      "sm": {
+        "fontSize": "0.9375rem",
+        "paddingX": "1rem",
+        "paddingY": "0.5rem",
+        "minHeight": "40px",
+        "gap": "0.5rem"
+      },
+      "md": {
+        "fontSize": "0.9375rem",
+        "paddingX": "1.5rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px",
+        "gap": "0.5rem"
+      },
+      "lg": {
+        "fontSize": "1.0625rem",
+        "paddingX": "2rem",
+        "paddingY": "1rem",
+        "minHeight": "56px",
+        "gap": "0.625rem"
+      }
+    },
+    "variant": {
+      "primary": {
+        "$description": "Primary — warm orange, chunky tactile shadow",
+        "background": "#ffffff",
+        "backgroundHover": "#dedede",
+        "backgroundActive": "#c4c4c4",
+        "color": "#1f1f1f",
+        "borderColor": "#ffffff",
+        "shadowColor": "#000000"
+      },
+      "secondary": {
+        "$description": "Secondary — cream surface with emphasis border",
+        "background": "#1f1f1f",
+        "backgroundHover": "#363636",
+        "backgroundActive": "#454545",
+        "color": "#ededed",
+        "borderColor": "#929292",
+        "shadowColor": "#000000"
+      },
+      "accent": {
+        "$description": "Accent — blue, modern counterbalance",
+        "background": "#93b8ec",
+        "backgroundHover": "#b3cdf2",
+        "backgroundActive": "#93b8ec",
+        "color": "#1f1f1f",
+        "borderColor": "#93b8ec",
+        "shadowColor": "#16263d"
+      }
+    },
+    "focus": {
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
+      "ringColor": "#ffffff",
+      "glowColor": "#ffffff00"
+    }
+  },
+  "input": {
+    "$description": "Input — chunky border, inset shadow, tactile feel",
+    "base": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "fontSize": "0.9375rem",
+      "lineHeight": 1.5,
+      "borderRadius": "4px",
+      "borderWidth": "1px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ]
+    },
+    "size": {
+      "md": {
+        "paddingX": "1rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px"
+      }
+    },
+    "state": {
+      "default": {
+        "background": "#1f1f1f",
+        "borderColor": "#929292",
+        "color": "#ededed",
+        "placeholderColor": "#929292",
+        "shadowColor": "#000000"
+      },
+      "hover": {
+        "borderColor": "#ededed"
+      },
+      "focus": {
+        "background": "#363636",
+        "borderColor": "#ffffff",
+        "focusRingColor": "#ffffff"
+      },
+      "error": {
+        "borderColor": "#f59a9a",
+        "background": "#3a1717",
+        "shadowColor": "#000000"
+      }
+    }
+  },
+  "card": {
+    "$description": "Card — raised surface with visible frame",
+    "base": {
+      "background": "#292929",
+      "borderRadius": "6px",
+      "borderWidth": "1px",
+      "borderColor": "#363636",
+      "shadow": "none",
+      "padding": "1.25rem"
+    },
+    "interactive": {
+      "$description": "Interactive card — gentle warmth on hover",
+      "transitionDuration": "200ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "backgroundHover": "#1f1f1f",
+      "borderColorHover": "#ffffff40",
+      "shadowHover": "none"
+    },
+    "raised": {
+      "$description": "Raised card (default) — subtle top-lit gradient",
+      "gradientStart": "#363636",
+      "gradientMid": "#1f1f1f",
+      "gradientEnd": "#292929",
+      "borderColor": "#363636"
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": "#1f1f1f",
+      "gradientEnd": "#292929",
+      "borderColor": "#363636"
+    },
+    "sunlit": {
+      "$description": "Sunlit card — featured with gradient",
+      "background": "linear-gradient(180deg, #363636 0%, #292929 30%, #292929 100%)",
+      "gradientStart": "#363636",
+      "gradientMid": "#292929",
+      "gradientEnd": "#292929",
+      "borderColor": "#ffffff40",
+      "borderColorHover": "#ffffff73",
+      "shadow": "none"
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "dividerColor": "#363636",
+      "headerGradientStart": "#ffffff08",
+      "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": "#1f1f1f"
+    }
+  },
+  "badge": {
+    "$description": "Badge — small status indicators",
+    "base": {
+      "fontFamily": "'Plus Jakarta Sans', Arial, Helvetica, sans-serif",
+      "fontSize": "0.9375rem",
+      "fontWeight": "600",
+      "letterSpacing": "0.02em",
+      "borderRadius": "2px",
+      "paddingX": "0.625rem",
+      "paddingY": "0.25rem"
+    },
+    "variant": {
+      "brand": {
+        "background": "#292929",
+        "color": "#ffffff"
+      },
+      "accent": {
+        "background": "#16263d",
+        "color": "#93b8ec"
+      },
+      "success": {
+        "background": "#142b1c",
+        "color": "#82cf9c"
+      },
+      "error": {
+        "background": "#3a1717",
+        "color": "#f59a9a"
+      },
+      "warning": {
+        "background": "#33260e",
+        "color": "#ebc271"
+      },
+      "neutral": {
+        "background": "#171717",
+        "color": "#929292"
+      }
+    }
+  },
+  "link": {
+    "$description": "Link — warm brand color",
+    "color": "#ffffff",
+    "colorHover": "#c4c4c4",
+    "textDecoration": "underline",
+    "textDecorationHover": "none",
+    "inverse": {
+      "$description": "On brand/accent backgrounds",
+      "focusBackground": "#0000001a"
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "overlay": "#000000bf"
+  },
+  "closeButton": {
+    "$description": "Icon-only close buttons in alerts and modals",
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
+  }
+}