@trading-game/design-intelligence-layer 0.8.8 → 0.9.0

package/AGENTS.md

@@ -53,10 +53,11 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
 ## Step 3 — Core rules summary
 
 1. **Check before building** — if a component exists in `@trading-game/design-intelligence-layer`, import it. Never re-implement it.
-2. **Tokens only** — use semantic token classes (`bg-background`, `text-on-prominent`, `border-border`, etc.). Never hardcode hex values, raw Tailwind palette colors, or CSS variables.
+2. **Tokens only** — use semantic token classes (`bg-prominent`, `text-on-prominent`, `border-border`, etc.). Never hardcode hex values, raw Tailwind palette colors, or CSS variables.
 3. **Design principles and accessibility first** — every screen must reflect the 8 design principles and meet the accessibility standards (WCAG 2.1 AA). Run both checklists before shipping.
 4. **No separate installs** — do not install `lucide-react`, `tailwindcss`, or other bundled dependencies separately.
 5. **After a version bump** — re-copy the rules file into `.cursor/rules/`, check for stale local component copies, and align them with the package.
+6. **Blocks are playground-only** — Blocks (e.g. NavBar) appear in the playground's Blocks tab but are **not** exported from the package. Do not try to import them. To build a block pattern in a consuming project, compose it manually using package components and design tokens. See `guides/design-system-guide/trading-game-ds-guide.md` Section 8.5.
 
 ---
 

package/README.md

@@ -155,6 +155,17 @@ npm install react react-dom tailwindcss
 
 ---
 
+## Blocks
+
+Blocks are pre-composed UI patterns built from design system primitives. They are demonstrated in the **Blocks** tab of the development playground and are **not** exported from the npm package — import the underlying components directly if you need to use them.
+
+| Block | Variants | Description |
+|---|---|---|
+| NavBar | Desktop, Mobile (closed), Mobile (open) | Landing page top navigation bar. Logo + ghost nav links (Products, Use Cases, Docs, Blog, FAQ) + Sign in / Sign up CTAs. |
+| Hero | Type 1 (Desktop + Mobile), Type 2 | Landing page hero sections. Type 1: tagline pill + heading + body + CTAs left, image right (responsive). Type 2: centred single-column, tagline pill + heading + body + primary CTA with arrow icon, no image. |
+
+---
+
 ## Button variants and sizes
 
 ```tsx
@@ -242,7 +253,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 
 | Tailwind class | CSS variable | Value | Usage |
 |---|---|---|---|
-| `bg-background` | `--background` | `#FFFFFF` | Page background |
+| `bg-prominent` | `--prominent` | `#FFFFFF` | Page background |
 | `bg-card` | `--card` | `#FFFFFF` | Card/panel surface |
 | `bg-popover` | `--popover` | `#FFFFFF` | Popover/dropdown surface |
 | `bg-subtle` | `--subtle` | `#F5F5F5` | Subtle tinted surface |
@@ -319,7 +330,7 @@ Opacity on tokens is allowed and encouraged:
 ✅ ring-ring/10            → ring at 10% opacity
 
 ❌ bg-black/50             → NOT a token, use bg-overlay instead
-❌ bg-white                → NOT a token, use bg-background or bg-card
+❌ bg-white                → NOT a token, use bg-prominent or bg-card
 ```
 
 ### Primitive alpha scales
@@ -449,7 +460,7 @@ This project uses @trading-game/design-intelligence-layer. Before writing any UI
 3. Read node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
 4. Read node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md — apply the voice, campaign territories, and mirror test for all player-facing copy
 5. Check if the component exists in the package — import it, don't re-implement
-6. Use only design token classes (bg-background, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
+6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
 7. Do not install lucide-react, tailwindcss, or other bundled dependencies separately
 8. If no token exists for a value, ask before using a hardcoded value
 9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy guides/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor
@@ -465,7 +476,7 @@ See node_modules/@trading-game/design-intelligence-layer/README.md for complete
 | Wrong | Right | Why |
 |---|---|---|
 | `bg-gray-100` | `bg-subtle` | Raw Tailwind palette — use tokens |
-| `bg-white` | `bg-background` or `bg-card` | Not a semantic token |
+| `bg-white` | `bg-prominent` or `bg-card` | Not a semantic token |
 | `text-white` | `text-on-prominent-static-inverse` | Use the semantic inverse token |
 | `text-black` | `text-on-prominent` | Not a semantic token |
 | `bg-black/50` | `bg-overlay` | Overlay has its own token |

package/dist/index.cjs

@@ -524,7 +524,7 @@ var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
@@ -626,7 +626,7 @@ function AlertDialogContent(_a) {
         "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-prominent p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
           className
         )
       }, props)
@@ -819,7 +819,7 @@ function AvatarBadge(_a) {
     __spreadValues({
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-background select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-prominent select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -836,7 +836,7 @@ function AvatarGroup(_a) {
     __spreadValues({
       "data-slot": "avatar-group",
       className: cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-prominent",
         className
       )
     }, props)
@@ -853,7 +853,7 @@ function AvatarGroupCount(_a) {
     __spreadValues({
       "data-slot": "avatar-group-count",
       className: cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-subtle text-sm text-on-subtle ring-2 ring-background group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=xl]/avatar-group:[width:var(--avatar-size-xl)] group-has-data-[size=xl]/avatar-group:[height:var(--avatar-size-xl)] [&>svg]:size-4 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=xl]/avatar-group:[&>svg]:size-6",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-subtle text-sm text-on-subtle ring-2 ring-prominent group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=xl]/avatar-group:[width:var(--avatar-size-xl)] group-has-data-[size=xl]/avatar-group:[height:var(--avatar-size-xl)] [&>svg]:size-4 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=xl]/avatar-group:[&>svg]:size-6",
         className
       )
     }, props)
@@ -1052,7 +1052,7 @@ function Calendar(_a) {
     __spreadValues({
       showOutsideDays,
       className: cn(
-        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-prominent p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -1507,7 +1507,7 @@ function CarouselNext(_a) {
 var React3 = __toESM(require("react"), 1);
 var RechartsPrimitive = __toESM(require("recharts"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var THEMES = { light: "", dark: ".dark" };
+var THEMES = { light: "" };
 var ChartContext = React3.createContext(null);
 function useChart() {
   const context = React3.useContext(ChartContext);
@@ -1623,7 +1623,7 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border-subtle/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border-subtle/50 bg-prominent px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
       children: [
@@ -1760,7 +1760,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse dark:bg-input/30 dark:data-[state=checked]:bg-primary",
+        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse",
         className
       )
     }, props), {
@@ -1837,7 +1837,7 @@ function Textarea(_a) {
     __spreadValues({
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-sm border border-border-subtle bg-white/5 px-3 py-2 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-on-muted focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-sm border border-border-subtle bg-white/5 px-3 py-2 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-on-muted focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm",
         className
       )
     }, props)
@@ -1864,7 +1864,7 @@ function InputGroup(_a) {
         // Focus state.
         "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-primary/[0.08]",
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20",
         className
       )
     }, props)
@@ -1972,7 +1972,7 @@ function InputGroupInput(_a) {
     __spreadValues({
       "data-slot": "input-group-control",
       className: cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0",
         className
       )
     }, props)
@@ -1989,7 +1989,7 @@ function InputGroupTextarea(_a) {
     __spreadValues({
       "data-slot": "input-group-control",
       className: cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0",
         className
       )
     }, props)
@@ -2234,7 +2234,7 @@ function ComboboxChips(_a) {
     __spreadValues({
       "data-slot": "combobox-chips",
       className: cn(
-        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5",
         className
       )
     }, props)
@@ -2352,7 +2352,7 @@ function DialogContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-prominent p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )
       }, props), {
@@ -2362,7 +2362,7 @@ function DialogContent(_a) {
             import_radix_ui10.Dialog.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-on-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-prominent transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-on-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.XIcon, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Close" })
@@ -2718,7 +2718,7 @@ function ContextMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -2890,7 +2890,7 @@ function DrawerContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "drawer-content",
         className: cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-prominent",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=top]:border-border-subtle",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:border-border-subtle",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:border-border-subtle data-[vaul-drawer-direction=right]:sm:max-w-sm",
@@ -3020,7 +3020,7 @@ function DropdownMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -3453,7 +3453,7 @@ function FieldLabel(_a) {
       className: cn(
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5",
         className
       )
     }, props)
@@ -3510,7 +3510,7 @@ function FieldSeparator(_a) {
         children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "span",
           {
-            className: "relative mx-auto block w-fit bg-background px-2 text-on-subtle",
+            className: "relative mx-auto block w-fit bg-prominent px-2 text-on-subtle",
             "data-slot": "field-separator-content",
             children
           }
@@ -3756,7 +3756,7 @@ function InputOTPSlot(_a) {
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border border-border-subtle bg-white/5 text-sm font-body text-on-prominent shadow-xs transition-[color,box-shadow] outline-none first:rounded-l-sm last:rounded-r-sm aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 data-[active=true]:z-10 data-[active=true]:border-primary data-[active=true]:ring-[3px] data-[active=true]:ring-primary/[0.08] data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border border-border-subtle bg-white/5 text-sm font-body text-on-prominent shadow-xs transition-[color,box-shadow] outline-none first:rounded-l-sm last:rounded-r-sm aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[active=true]:z-10 data-[active=true]:border-primary data-[active=true]:ring-[3px] data-[active=true]:ring-primary/[0.08] data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20",
         className
       )
     }, props), {
@@ -4037,7 +4037,7 @@ function Menubar(_a) {
     __spreadValues({
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-md border border-border-subtle bg-background p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-md border border-border-subtle bg-prominent p-1 shadow-xs",
         className
       )
     }, props)
@@ -4119,7 +4119,7 @@ function MenubarItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )
     }, props)
@@ -4299,7 +4299,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": size,
             className: cn(
-              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
+              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               className
             )
@@ -4400,7 +4400,7 @@ function NavigationMenuItem(_a) {
   );
 }
 var navigationMenuTriggerStyle = (0, import_class_variance_authority9.cva)(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-secondary-hover data-[state=open]:text-on-prominent data-[state=open]:hover:bg-secondary-hover data-[state=open]:focus:bg-secondary-hover"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-prominent px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus:bg-secondary-hover focus:text-on-prominent focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-secondary-hover data-[state=open]:text-on-prominent data-[state=open]:hover:bg-secondary-hover data-[state=open]:focus:bg-secondary-hover"
 );
 function NavigationMenuTrigger(_a) {
   var _b = _a, {
@@ -4738,7 +4738,7 @@ function RadioGroupItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         className
       )
     }, props), {
@@ -4900,7 +4900,7 @@ function SelectTrigger(_a) {
       "data-readonly": readOnly ? "" : void 0,
       disabled: readOnly || props.disabled,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-background appearance-none px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
+        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-prominent appearance-none px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
         className
       )
     }, props), {
@@ -5106,7 +5106,7 @@ function SheetContent(_a) {
       __spreadProps(__spreadValues({
         "data-slot": "sheet-content",
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
+          "fixed z-50 flex flex-col gap-4 bg-prominent shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
           side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-border-subtle data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-border-subtle data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
           side === "top" && "inset-x-0 top-0 h-auto border-b border-border-subtle data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -5116,7 +5116,7 @@ function SheetContent(_a) {
       }, props), {
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_radix_ui27.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_radix_ui27.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-prominent transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react19.XIcon, { className: "size-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sr-only", children: "Close" })
           ] })
@@ -5514,7 +5514,7 @@ function SidebarInset(_a) {
     __spreadValues({
       "data-slot": "sidebar-inset",
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-background",
+        "relative flex w-full flex-1 flex-col bg-prominent",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )
@@ -5532,7 +5532,7 @@ function SidebarInput(_a) {
     __spreadValues({
       "data-slot": "sidebar-input",
       "data-sidebar": "input",
-      className: cn("h-8 w-full bg-background shadow-none", className)
+      className: cn("h-8 w-full bg-prominent shadow-none", className)
     }, props)
   );
 }
@@ -5687,7 +5687,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority10.cva)(
     variants: {
       variant: {
         default: "",
-        outline: "bg-background ring-1 ring-sidebar-border hover:ring-primary/40 data-[active=true]:ring-primary/40"
+        outline: "bg-prominent ring-1 ring-sidebar-border hover:ring-primary/40 data-[active=true]:ring-primary/40"
       },
       size: {
         default: "h-8 text-sm",
@@ -6058,7 +6058,7 @@ function Switch(_a) {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-[6px] border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-slider-range data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-[6px] border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-slider-range data-[state=unchecked]:bg-input",
         className
       )
     }, props), {
@@ -6322,14 +6322,14 @@ function TicketCard({
             "div",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-background"
+              className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-prominent"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-background"
+              className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-prominent"
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -6385,7 +6385,7 @@ var import_class_variance_authority12 = require("class-variance-authority");
 var import_radix_ui33 = require("radix-ui");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority12.cva)(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-secondary-hover data-[state=on]:border-transparent data-[state=on]:text-primary dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-secondary-hover data-[state=on]:border-transparent data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {