@trading-game/design-intelligence-layer 0.8.9 → 0.9.1

package/AGENTS.md

@@ -23,14 +23,14 @@ node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standa
 node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
-**Tone of voice** — the creative foundation, campaign territories, and the mirror test for all player-facing copy:
+**Brand voice** — channel-specific voice application, banned phrases, vocabulary reference, and formatting rules for all player-facing copy:
 ```
-node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
 ```
 
 All four files apply to all projects built with this package — landing pages, product screens, and games.
 
-Run the checklists at the end of the design principles and accessibility standards files before considering any screen complete. Use the personas and tone of voice to guide all player-facing copy.
+Run the checklists at the end of the design principles and accessibility standards files before considering any screen complete. Use the personas and brand voice to guide all player-facing copy.
 
 ---
 
@@ -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.
 
 ---
 
@@ -66,5 +67,5 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
 - Design principles: `node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md`
 - Accessibility standards: `node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md`
 - Personas: `node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
-- Tone of voice: `node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md`
+- Brand voice: `node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md`
 - Full agent rules: `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`

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 |
@@ -262,7 +273,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `text-on-prominent` | `#000000` | Primary text on light backgrounds |
 | `text-on-prominent-static-inverse` | `#FFFFFF` | Always white — for text on dark/primary backgrounds |
 | `text-on-subtle` | mid grey | Secondary / supporting text |
-| `text-on-muted` | dark grey | Low-emphasis text |
+
 | `text-primary` | `#2323FF` | Brand blue inline text |
 | `text-semantic-win` | green | Profit / positive text |
 | `text-semantic-loss` | red | Loss / negative text |
@@ -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
@@ -418,12 +429,12 @@ node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standa
 node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
-**Tone of voice file** (bundled in the package):
+**Brand voice** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
 ```
 
-All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and tone of voice to guide all player-facing copy.
+All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and brand voice to guide all player-facing copy.
 
 ### Cursor
 
@@ -447,9 +458,9 @@ This project uses @trading-game/design-intelligence-layer. Before writing any UI
 1. Read node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
 2. Read node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
 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
+4. Read node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules 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 [&_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-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
@@ -573,7 +573,7 @@ function Button(_a) {
       "data-variant": variant,
       "data-size": size,
       "data-loading": loading || void 0,
-      className: cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none opacity-50"),
+      className: cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none opacity-24"),
       "aria-busy": loading || void 0
     }, props)
   );
@@ -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
@@ -1820,7 +1820,7 @@ function Input(_a) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-9 w-full min-w-0 rounded-sm border border-border-subtle bg-white/5 px-3 py-1 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-on-prominent placeholder:text-on-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "h-9 w-full min-w-0 rounded-sm border border-border-subtle bg-white/5 px-3 py-1 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-on-prominent placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]",
         className
       )
@@ -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",
+        "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-subtle 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)
@@ -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" })
@@ -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",
@@ -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, {
@@ -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",
@@ -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)(