@ticketlayer/theme 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ticketlayer Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @ticketlayer/theme
+
+The Ticketlayer Live design tokens. One source, every harness.
+
+`tokens.json` is that source. Every `--tl-*` custom property the Elements read,
+the typed object a native harness will render from, the JSON schema the Backstage
+theme editor and the sales-channel theme API validate against, and `TOKENS.md`
+are generated from it. A token's default value is written down once, in
+`tokens.json`, and nowhere else.
+
+```bash
+pnpm --filter @ticketlayer/theme run generate   # rewrite everything generated
+pnpm --filter @ticketlayer/theme run lint       # fail if what is committed is not that
+```
+
+## What comes out
+
+| Artifact | For |
+|---|---|
+| `generated/tokens.css` | the web defaults, one `:root` block. `@ticketlayer/elements` generates its Stencil global stylesheet from this, so the Elements ship it |
+| `generated/tokens.dark.css` | the dark values, scoped to `[data-tl-color-scheme='dark']`. Opt in: nothing loads it today |
+| `src/generated/tokens.ts` | `TOKEN_NAMES`, `TOKEN_DEFAULTS`, `TOKEN_THEME_KEYS`, and `lightTheme` / `darkTheme`, the typed grouped objects a React Native harness renders from |
+| `generated/theme.schema.json` | the theme document: what an operator edits and what `GET /sales/theme` returns |
+| `TOKENS.md` | the docs page, one table per group |
+
+## Using it
+
+```ts
+import { lightTheme, darkTheme, TOKEN_DEFAULTS, themeToCssVars } from '@ticketlayer/theme';
+import '@ticketlayer/theme/tokens.css';   // only if you are not loading the Elements
+```
+
+`themeToCssVars(theme)` turns a channel theme from `GET /sales/theme` into the
+custom properties that override the defaults, including every alias a token
+answers to. `@ticketlayer/live`'s `applyTheme` is the web harness that writes
+them onto `:root`; there is no second injection mechanism, and a harness that
+needs one calls this function rather than writing its own mapping.
+
+## The two rules
+
+**A token missing on one runtime fails CI.** Every token in `tokens.json` is
+declared for every runtime unless it names a shorter `runtimes` list, and a
+shorter list has to carry a `runtimesNote` saying why. The web stylesheet and
+the native object are generated from that one list and compared after they are
+rendered, so the harnesses cannot drift onto different token names without
+somebody writing down that they are meant to.
+
+**A `var(--tl-*)` that is not a declared token fails CI.** The Elements carry no
+per-use-site fallbacks: `var(--tl-primary, #6366f1)` was a second place the
+default lived, and the second places had drifted to three different values for
+that token alone. `packages/elements/scripts/check-token-usage.mjs` reads this
+package's token list and fails on a `var(--tl-*)` naming something undeclared,
+or carrying a fallback at all. Rename a token and every use site fails.
+
+## Aliases
+
+A few tokens answer to more than one name, because more than one name is already
+in the wild. `--tl-color-primary` beside `--tl-primary` (the Elements use both),
+`--tl-destructive` beside `--tl-error` (the API calls it one, the Elements the
+other), `--tl-base-size` beside `--tl-font-size-base` (the Backstage theme
+designer emits one, this client the other), and a bare `--tl-radius` for
+`--tl-radius-md`. Aliases are declared in `tokens.json`, emitted into the
+stylesheet as `--tl-color-primary: var(--tl-primary)`, and written out by
+`themeToCssVars` so a channel theme reaches all of them. New stylesheets use
+the token name, not an alias.

package/TOKENS.md

@@ -0,0 +1,99 @@
+<!-- Generated from tokens.json by packages/theme/scripts/generate.mjs. Do not edit. -->
+
+# Ticketlayer design tokens
+
+44 tokens, in 5 groups. Every one of them is
+declared in `tokens.json` and generated from there into the web custom properties,
+the Stencil global stylesheet the Elements load, the typed object a native harness
+renders from, the JSON schema the theme editor and the sales-channel theme API
+validate against, and this page.
+
+A token that carries a **theme key** can be set per sales channel: that key is what
+`GET /sales/theme` returns and what `@ticketlayer/live` writes onto `:root` at runtime.
+A token without one is a constant of the design system and can only be changed here.
+
+## Colour
+
+Palette. A channel theme overrides these through colours on GET /sales/theme.
+
+| Custom property | Default | Dark | Theme key | Also answers to |
+|---|---|---|---|---|
+| `--tl-primary` | `#6366f1` | `#818cf8` | `colors.primary` | `--tl-color-primary` |
+| `--tl-primary-foreground` | `#ffffff` | `#111827` | `colors.primaryForeground` | `--tl-color-primary-foreground` |
+| `--tl-secondary` | `#f3f4f6` | `#1f2937` | `colors.secondary` | `--tl-color-secondary` |
+| `--tl-secondary-foreground` | `#111827` | `#f9fafb` | `colors.secondaryForeground` | `--tl-color-secondary-foreground` |
+| `--tl-accent` | `#ec4899` | `#f472b6` | `colors.accent` | `--tl-color-accent` |
+| `--tl-accent-foreground` | `#ffffff` | `#111827` | `colors.accentForeground` | `--tl-color-accent-foreground` |
+| `--tl-background` | `#ffffff` | `#0b0f19` | `colors.background` | `--tl-color-background` |
+| `--tl-foreground` | `#111827` | `#f9fafb` | `colors.foreground` | `--tl-color-foreground` |
+| `--tl-card` | `#ffffff` | `#111827` | - | `--tl-color-card` |
+| `--tl-muted` | `#f9fafb` | `#111827` | `colors.muted` | `--tl-color-muted` |
+| `--tl-muted-foreground` | `#6b7280` | `#9ca3af` | `colors.mutedForeground` | `--tl-color-muted-foreground` |
+| `--tl-border` | `#e5e7eb` | `#374151` | `colors.border` | `--tl-color-border` |
+| `--tl-border-hover` | `#9ca3af` | `#4b5563` | - | `--tl-color-border-hover` |
+| `--tl-input` | `#e5e7eb` | `#374151` | `colors.input` | `--tl-color-input` |
+| `--tl-ring` | `#6366f1` | `#818cf8` | `colors.ring` | `--tl-color-ring` |
+| `--tl-success` | `#10b981` | `#34d399` | `colors.success` | `--tl-color-success` |
+| `--tl-success-foreground` | `#ffffff` | `#062a1d` | `colors.successForeground` | `--tl-color-success-foreground` |
+| `--tl-warning` | `#f59e0b` | `#fbbf24` | `colors.warning` | `--tl-color-warning` |
+| `--tl-warning-foreground` | `#ffffff` | `#2a1a02` | `colors.warningForeground` | `--tl-color-warning-foreground` |
+| `--tl-warning-bg` | `#fef3c7` | `#422006` | - | `--tl-color-warning-bg` |
+| `--tl-error` | `#ef4444` | `#f87171` | `colors.destructive` | `--tl-color-error`, `--tl-destructive`, `--tl-color-destructive` |
+| `--tl-error-foreground` | `#ffffff` | `#2a0a0a` | `colors.destructiveForeground` | `--tl-color-error-foreground`, `--tl-destructive-foreground`, `--tl-color-destructive-foreground` |
+| `--tl-error-bg` | `#fee2e2` | `#450a0a` | - | `--tl-color-error-bg`, `--tl-destructive-bg`, `--tl-color-destructive-bg` |
+
+## Type
+
+Font stacks and the base size the type scale is built from.
+
+| Custom property | Default | Dark | Theme key | Also answers to |
+|---|---|---|---|---|
+| `--tl-font-family` | `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif` | - | `typography.fontFamily` | - |
+| `--tl-font-family-mono` | `ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace` | - | `typography.fontFamilyMono` | - |
+| `--tl-font-size-base` | `16px` | - | `typography.baseSize` | `--tl-base-size` |
+| `--tl-font-scale` | `1.25` | - | `typography.scaleRatio` | - |
+
+## Radius
+
+Corner radii. A channel theme overrides these through shape.
+
+| Custom property | Default | Dark | Theme key | Also answers to |
+|---|---|---|---|---|
+| `--tl-radius-none` | `0px` | - | `shape.radiusNone` | - |
+| `--tl-radius-sm` | `0.25rem` | - | `shape.radiusSm` | - |
+| `--tl-radius-md` | `0.5rem` | - | `shape.radiusMd` | `--tl-radius` |
+| `--tl-radius-lg` | `0.75rem` | - | `shape.radiusLg` | - |
+| `--tl-radius-full` | `9999px` | - | `shape.radiusFull` | - |
+
+## Spacing
+
+The spacing step scale. Not themeable through the API today.
+
+| Custom property | Default | Dark | Theme key | Also answers to |
+|---|---|---|---|---|
+| `--tl-spacing-1` | `0.25rem` | - | - | - |
+| `--tl-spacing-2` | `0.5rem` | - | - | - |
+| `--tl-spacing-3` | `0.75rem` | - | - | - |
+| `--tl-spacing-4` | `1rem` | - | - | - |
+| `--tl-spacing-5` | `1.25rem` | - | - | - |
+| `--tl-spacing-6` | `1.5rem` | - | - | - |
+| `--tl-spacing-8` | `2rem` | - | - | - |
+
+## Motion
+
+Durations and easings. Not themeable through the API today.
+
+| Custom property | Default | Dark | Theme key | Also answers to |
+|---|---|---|---|---|
+| `--tl-duration-fast` | `120ms` | - | - | - |
+| `--tl-duration-normal` | `200ms` | - | - | - |
+| `--tl-duration-slow` | `320ms` | - | - | - |
+| `--tl-easing-standard` | `cubic-bezier(0.2, 0, 0, 1)` | - | - | - |
+| `--tl-easing-emphasised` | `cubic-bezier(0.3, 0, 0, 1)` | - | - | - |
+
+## Runtimes
+
+Every token above exists on every runtime. A token may name a shorter `runtimes`
+list in `tokens.json`, but only with a `runtimesNote` saying why, and
+`pnpm lint` fails without one: that is what stops the web and native harnesses
+drifting onto different token names.

package/dist/generated/tokens.d.ts

@@ -0,0 +1,169 @@
+/**
+ * Typed access to the token set. Generated from packages/theme/tokens.json;
+ * change a token there and regenerate.
+ */
+/** Every token name, in declaration order. */
+export declare const TOKEN_NAMES: readonly ["primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "background", "foreground", "card", "muted", "muted-foreground", "border", "border-hover", "input", "ring", "success", "success-foreground", "warning", "warning-foreground", "warning-bg", "error", "error-foreground", "error-bg", "font-family", "font-family-mono", "font-size-base", "font-scale", "radius-none", "radius-sm", "radius-md", "radius-lg", "radius-full", "spacing-1", "spacing-2", "spacing-3", "spacing-4", "spacing-5", "spacing-6", "spacing-8", "duration-fast", "duration-normal", "duration-slow", "easing-standard", "easing-emphasised"];
+/** A token name. Renaming a token in tokens.json changes this union, and every consumer that named the old one stops compiling. */
+export type TokenName = (typeof TOKEN_NAMES)[number];
+/** Alias name -> the token it resolves to. */
+export declare const TOKEN_ALIASES: {
+    readonly 'color-primary': "primary";
+    readonly 'color-primary-foreground': "primary-foreground";
+    readonly 'color-secondary': "secondary";
+    readonly 'color-secondary-foreground': "secondary-foreground";
+    readonly 'color-accent': "accent";
+    readonly 'color-accent-foreground': "accent-foreground";
+    readonly 'color-background': "background";
+    readonly 'color-foreground': "foreground";
+    readonly 'color-card': "card";
+    readonly 'color-muted': "muted";
+    readonly 'color-muted-foreground': "muted-foreground";
+    readonly 'color-border': "border";
+    readonly 'color-border-hover': "border-hover";
+    readonly 'color-input': "input";
+    readonly 'color-ring': "ring";
+    readonly 'color-success': "success";
+    readonly 'color-success-foreground': "success-foreground";
+    readonly 'color-warning': "warning";
+    readonly 'color-warning-foreground': "warning-foreground";
+    readonly 'color-warning-bg': "warning-bg";
+    readonly 'color-error': "error";
+    readonly destructive: "error";
+    readonly 'color-destructive': "error";
+    readonly 'color-error-foreground': "error-foreground";
+    readonly 'destructive-foreground': "error-foreground";
+    readonly 'color-destructive-foreground': "error-foreground";
+    readonly 'color-error-bg': "error-bg";
+    readonly 'destructive-bg': "error-bg";
+    readonly 'color-destructive-bg': "error-bg";
+    readonly 'base-size': "font-size-base";
+    readonly radius: "radius-md";
+};
+export type TokenAlias = keyof typeof TOKEN_ALIASES;
+/** The default (light) value of every token, by token name. */
+export declare const TOKEN_DEFAULTS: Record<TokenName, string>;
+/** The dark value of every token that has one. */
+export declare const TOKEN_DARK: Partial<Record<TokenName, string>>;
+/** The theme-document key that feeds each token, for the tokens the theme API can set. */
+export declare const TOKEN_THEME_KEYS: Partial<Record<TokenName, string>>;
+/** The group each token belongs to. */
+export declare const TOKEN_GROUPS: Record<TokenName, string>;
+/**
+ * The typed theme object a native harness renders from: the same tokens, grouped,
+ * with camelCase keys and no CSS anywhere near them.
+ */
+export declare const lightTheme: {
+    readonly color: {
+        readonly primary: "#6366f1";
+        readonly primaryForeground: "#ffffff";
+        readonly secondary: "#f3f4f6";
+        readonly secondaryForeground: "#111827";
+        readonly accent: "#ec4899";
+        readonly accentForeground: "#ffffff";
+        readonly background: "#ffffff";
+        readonly foreground: "#111827";
+        readonly card: "#ffffff";
+        readonly muted: "#f9fafb";
+        readonly mutedForeground: "#6b7280";
+        readonly border: "#e5e7eb";
+        readonly borderHover: "#9ca3af";
+        readonly input: "#e5e7eb";
+        readonly ring: "#6366f1";
+        readonly success: "#10b981";
+        readonly successForeground: "#ffffff";
+        readonly warning: "#f59e0b";
+        readonly warningForeground: "#ffffff";
+        readonly warningBg: "#fef3c7";
+        readonly error: "#ef4444";
+        readonly errorForeground: "#ffffff";
+        readonly errorBg: "#fee2e2";
+    };
+    readonly typography: {
+        readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        readonly fontFamilyMono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace";
+        readonly fontSizeBase: "16px";
+        readonly fontScale: "1.25";
+    };
+    readonly radius: {
+        readonly none: "0px";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly full: "9999px";
+    };
+    readonly spacing: {
+        readonly '1': "0.25rem";
+        readonly '2': "0.5rem";
+        readonly '3': "0.75rem";
+        readonly '4': "1rem";
+        readonly '5': "1.25rem";
+        readonly '6': "1.5rem";
+        readonly '8': "2rem";
+    };
+    readonly motion: {
+        readonly durationFast: "120ms";
+        readonly durationNormal: "200ms";
+        readonly durationSlow: "320ms";
+        readonly easingStandard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly easingEmphasised: "cubic-bezier(0.3, 0, 0, 1)";
+    };
+};
+export declare const darkTheme: {
+    readonly color: {
+        readonly primary: "#818cf8";
+        readonly primaryForeground: "#111827";
+        readonly secondary: "#1f2937";
+        readonly secondaryForeground: "#f9fafb";
+        readonly accent: "#f472b6";
+        readonly accentForeground: "#111827";
+        readonly background: "#0b0f19";
+        readonly foreground: "#f9fafb";
+        readonly card: "#111827";
+        readonly muted: "#111827";
+        readonly mutedForeground: "#9ca3af";
+        readonly border: "#374151";
+        readonly borderHover: "#4b5563";
+        readonly input: "#374151";
+        readonly ring: "#818cf8";
+        readonly success: "#34d399";
+        readonly successForeground: "#062a1d";
+        readonly warning: "#fbbf24";
+        readonly warningForeground: "#2a1a02";
+        readonly warningBg: "#422006";
+        readonly error: "#f87171";
+        readonly errorForeground: "#2a0a0a";
+        readonly errorBg: "#450a0a";
+    };
+    readonly typography: {
+        readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+        readonly fontFamilyMono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace";
+        readonly fontSizeBase: "16px";
+        readonly fontScale: "1.25";
+    };
+    readonly radius: {
+        readonly none: "0px";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly full: "9999px";
+    };
+    readonly spacing: {
+        readonly '1': "0.25rem";
+        readonly '2': "0.5rem";
+        readonly '3': "0.75rem";
+        readonly '4': "1rem";
+        readonly '5': "1.25rem";
+        readonly '6': "1.5rem";
+        readonly '8': "2rem";
+    };
+    readonly motion: {
+        readonly durationFast: "120ms";
+        readonly durationNormal: "200ms";
+        readonly durationSlow: "320ms";
+        readonly easingStandard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly easingEmphasised: "cubic-bezier(0.3, 0, 0, 1)";
+    };
+};
+export type NativeTheme = typeof lightTheme;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/generated/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/generated/tokens.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,8CAA8C;AAC9C,eAAO,MAAM,WAAW,qpBA6Cd,CAAC;AAEX,mIAAmI;AACnI,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,8CAA8C;AAC9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgChB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,aAAa,CAAC;AAEpD,+DAA+D;AAC/D,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CA6CpD,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAwBzD,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CA6B/D,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CA6ClD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDb,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDZ,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,UAAU,CAAC"}