@ticketlayer/theme 0.1.0

package/tokens.json

@@ -0,0 +1,323 @@
+{
+  "version": 1,
+  "prefix": "tl",
+  "description": "The Ticketlayer Live design tokens. This file is the source: every --tl-* custom property, every typed value a native harness reads, and the JSON schema the theme editor and the sales-channel theme API validate against are generated from it by scripts/generate.mjs. Nothing here is generated; nothing generated from here is edited.",
+  "groups": {
+    "color": {
+      "title": "Colour",
+      "stripPrefix": "",
+      "description": "Palette. A channel theme overrides these through colours on GET /sales/theme."
+    },
+    "typography": {
+      "title": "Type",
+      "stripPrefix": "",
+      "description": "Font stacks and the base size the type scale is built from."
+    },
+    "radius": {
+      "title": "Radius",
+      "stripPrefix": "radius-",
+      "description": "Corner radii. A channel theme overrides these through shape."
+    },
+    "spacing": {
+      "title": "Spacing",
+      "stripPrefix": "spacing-",
+      "description": "The spacing step scale. Not themeable through the API today."
+    },
+    "motion": {
+      "title": "Motion",
+      "stripPrefix": "",
+      "description": "Durations and easings. Not themeable through the API today."
+    }
+  },
+  "tokens": {
+    "primary": {
+      "group": "color",
+      "value": "#6366f1",
+      "dark": "#818cf8",
+      "themeKey": "colors.primary",
+      "aliases": ["color-primary"],
+      "description": "The channel's brand colour; buttons, links and selected state."
+    },
+    "primary-foreground": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#111827",
+      "themeKey": "colors.primaryForeground",
+      "aliases": ["color-primary-foreground"],
+      "description": "Text and icons on a primary surface."
+    },
+    "secondary": {
+      "group": "color",
+      "value": "#f3f4f6",
+      "dark": "#1f2937",
+      "themeKey": "colors.secondary",
+      "aliases": ["color-secondary"],
+      "description": "A quieter filled surface: secondary buttons and chips."
+    },
+    "secondary-foreground": {
+      "group": "color",
+      "value": "#111827",
+      "dark": "#f9fafb",
+      "themeKey": "colors.secondaryForeground",
+      "aliases": ["color-secondary-foreground"],
+      "description": "Text on a secondary surface."
+    },
+    "accent": {
+      "group": "color",
+      "value": "#ec4899",
+      "dark": "#f472b6",
+      "themeKey": "colors.accent",
+      "aliases": ["color-accent"],
+      "description": "A second brand colour for highlights. No element uses it yet; it exists because the theme API accepts it."
+    },
+    "accent-foreground": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#111827",
+      "themeKey": "colors.accentForeground",
+      "aliases": ["color-accent-foreground"],
+      "description": "Text on an accent surface."
+    },
+    "background": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#0b0f19",
+      "themeKey": "colors.background",
+      "aliases": ["color-background"],
+      "description": "The page surface an element sits on."
+    },
+    "foreground": {
+      "group": "color",
+      "value": "#111827",
+      "dark": "#f9fafb",
+      "themeKey": "colors.foreground",
+      "aliases": ["color-foreground"],
+      "description": "Body text."
+    },
+    "card": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#111827",
+      "aliases": ["color-card"],
+      "description": "A raised surface inside the page. Not themeable through the API today; it follows background."
+    },
+    "muted": {
+      "group": "color",
+      "value": "#f9fafb",
+      "dark": "#111827",
+      "themeKey": "colors.muted",
+      "aliases": ["color-muted"],
+      "description": "A recessed surface: table stripes, empty state, disabled fills."
+    },
+    "muted-foreground": {
+      "group": "color",
+      "value": "#6b7280",
+      "dark": "#9ca3af",
+      "themeKey": "colors.mutedForeground",
+      "aliases": ["color-muted-foreground"],
+      "description": "Secondary text: captions, hints, metadata."
+    },
+    "border": {
+      "group": "color",
+      "value": "#e5e7eb",
+      "dark": "#374151",
+      "themeKey": "colors.border",
+      "aliases": ["color-border"],
+      "description": "Hairlines and control outlines."
+    },
+    "border-hover": {
+      "group": "color",
+      "value": "#9ca3af",
+      "dark": "#4b5563",
+      "aliases": ["color-border-hover"],
+      "description": "A control outline under the pointer. Not themeable through the API today."
+    },
+    "input": {
+      "group": "color",
+      "value": "#e5e7eb",
+      "dark": "#374151",
+      "themeKey": "colors.input",
+      "aliases": ["color-input"],
+      "description": "The outline of a text input. No element uses it yet; it exists because the theme API accepts it."
+    },
+    "ring": {
+      "group": "color",
+      "value": "#6366f1",
+      "dark": "#818cf8",
+      "themeKey": "colors.ring",
+      "aliases": ["color-ring"],
+      "description": "The focus ring."
+    },
+    "success": {
+      "group": "color",
+      "value": "#10b981",
+      "dark": "#34d399",
+      "themeKey": "colors.success",
+      "aliases": ["color-success"],
+      "description": "A confirmed state: an order placed, a code accepted."
+    },
+    "success-foreground": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#062a1d",
+      "themeKey": "colors.successForeground",
+      "aliases": ["color-success-foreground"],
+      "description": "Text on a success surface."
+    },
+    "warning": {
+      "group": "color",
+      "value": "#f59e0b",
+      "dark": "#fbbf24",
+      "themeKey": "colors.warning",
+      "aliases": ["color-warning"],
+      "description": "A cart about to expire, a low-stock notice."
+    },
+    "warning-foreground": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#2a1a02",
+      "themeKey": "colors.warningForeground",
+      "aliases": ["color-warning-foreground"],
+      "description": "Text on a warning surface."
+    },
+    "warning-bg": {
+      "group": "color",
+      "value": "#fef3c7",
+      "dark": "#422006",
+      "aliases": ["color-warning-bg"],
+      "description": "The tinted background of a warning banner. Not themeable through the API today."
+    },
+    "error": {
+      "group": "color",
+      "value": "#ef4444",
+      "dark": "#f87171",
+      "themeKey": "colors.destructive",
+      "aliases": ["color-error", "destructive", "color-destructive"],
+      "description": "A failed payment, a rejected code. The theme API calls this colour destructive; the elements call it error, so both names resolve."
+    },
+    "error-foreground": {
+      "group": "color",
+      "value": "#ffffff",
+      "dark": "#2a0a0a",
+      "themeKey": "colors.destructiveForeground",
+      "aliases": ["color-error-foreground", "destructive-foreground", "color-destructive-foreground"],
+      "description": "Text on an error surface."
+    },
+    "error-bg": {
+      "group": "color",
+      "value": "#fee2e2",
+      "dark": "#450a0a",
+      "aliases": ["color-error-bg", "destructive-bg", "color-destructive-bg"],
+      "description": "The tinted background of an error banner. Not themeable through the API today."
+    },
+    "font-family": {
+      "group": "typography",
+      "value": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      "themeKey": "typography.fontFamily",
+      "description": "The body font stack."
+    },
+    "font-family-mono": {
+      "group": "typography",
+      "value": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+      "themeKey": "typography.fontFamilyMono",
+      "description": "The stack for order references, codes and seat labels."
+    },
+    "font-size-base": {
+      "group": "typography",
+      "value": "16px",
+      "themeKey": "typography.baseSize",
+      "aliases": ["base-size"],
+      "description": "The root size the scale is built from. The alias exists because Backstage's theme designer emits --tl-base-size and this client emits --tl-font-size-base."
+    },
+    "font-scale": {
+      "group": "typography",
+      "value": "1.25",
+      "themeKey": "typography.scaleRatio",
+      "themeValueType": "number",
+      "description": "The ratio between steps of the type scale."
+    },
+    "radius-none": {
+      "group": "radius",
+      "value": "0px",
+      "themeKey": "shape.radiusNone",
+      "description": "No rounding."
+    },
+    "radius-sm": {
+      "group": "radius",
+      "value": "0.25rem",
+      "themeKey": "shape.radiusSm",
+      "description": "Badges, tags, small controls."
+    },
+    "radius-md": {
+      "group": "radius",
+      "value": "0.5rem",
+      "themeKey": "shape.radiusMd",
+      "aliases": ["radius"],
+      "description": "Buttons, inputs, cards. The bare --tl-radius alias exists because several stylesheets already ask for it."
+    },
+    "radius-lg": {
+      "group": "radius",
+      "value": "0.75rem",
+      "themeKey": "shape.radiusLg",
+      "description": "Panels, drawers, modals."
+    },
+    "radius-full": {
+      "group": "radius",
+      "value": "9999px",
+      "themeKey": "shape.radiusFull",
+      "description": "Pills and circular controls."
+    },
+    "spacing-1": { "group": "spacing", "value": "0.25rem", "description": "Step 1." },
+    "spacing-2": { "group": "spacing", "value": "0.5rem", "description": "Step 2." },
+    "spacing-3": { "group": "spacing", "value": "0.75rem", "description": "Step 3." },
+    "spacing-4": { "group": "spacing", "value": "1rem", "description": "Step 4, the base step." },
+    "spacing-5": { "group": "spacing", "value": "1.25rem", "description": "Step 5." },
+    "spacing-6": { "group": "spacing", "value": "1.5rem", "description": "Step 6." },
+    "spacing-8": { "group": "spacing", "value": "2rem", "description": "Step 8." },
+    "duration-fast": { "group": "motion", "value": "120ms", "description": "Hover and press feedback." },
+    "duration-normal": { "group": "motion", "value": "200ms", "description": "Panels and disclosure." },
+    "duration-slow": { "group": "motion", "value": "320ms", "description": "A drawer or modal entering." },
+    "easing-standard": { "group": "motion", "value": "cubic-bezier(0.2, 0, 0, 1)", "description": "The default curve." },
+    "easing-emphasised": { "group": "motion", "value": "cubic-bezier(0.3, 0, 0, 1)", "description": "For something entering the screen." }
+  },
+  "themeDocument": {
+    "title": "TicketlayerTheme",
+    "description": "The theme document a sales channel stores and GET /sales/theme returns. Its colours, typography and shape sections are exactly the tokens above that carry a themeKey; brand and design are not tokens and are described here.",
+    "sections": {
+      "brand": {
+        "description": "Identity that is not a token.",
+        "properties": {
+          "logoUrl": { "type": "string", "description": "The logo shown on a light surface." },
+          "logoDarkUrl": { "type": "string", "description": "The logo shown on a dark surface." },
+          "faviconUrl": { "type": "string", "description": "The storefront favicon." },
+          "displayName": { "type": "string", "description": "The name shown in place of the organisation's." }
+        }
+      },
+      "design": {
+        "description": "Layout choices the hosted storefront reads. Open ended on purpose: unknown keys pass through.",
+        "additionalProperties": true,
+        "nullable": true,
+        "properties": {
+          "heroLayout": {
+            "type": "object",
+            "description": "How an event page leads.",
+            "properties": {
+              "type": { "type": "string", "enum": ["cinema", "hero"] },
+              "size": { "type": "string", "enum": ["small", "medium", "large"] }
+            },
+            "required": ["type", "size"]
+          },
+          "cinemaGradient": {
+            "type": "object",
+            "description": "The gradient over a cinema hero.",
+            "properties": {
+              "strength": { "type": "number", "enum": [70, 50, 20] },
+              "position": { "type": "string", "enum": ["bottom", "center"] }
+            },
+            "required": ["strength", "position"]
+          }
+        }
+      }
+    }
+  }
+}