/* Blazor Blueprint default theme (Zinc) */ /* Compatible with shadcn/ui default theme */ :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --radius: 0.625rem; --success: oklch(0.596 0.145 163.225); --success-foreground: oklch(0.985 0 0); --warning: oklch(0.769 0.188 70.08); --warning-foreground: oklch(0.985 0 0); --info: oklch(0.623 0.214 259.815); --info-foreground: oklch(0.985 0 0); --danger: oklch(0.577 0.245 27.325); --danger-foreground: oklch(0.985 0 0); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --font-sans: ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, monospace; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --success: oklch(0.596 0.145 163.225); --success-foreground: oklch(0.985 0 0); --warning: oklch(0.769 0.188 70.08); --warning-foreground: oklch(0.985 0 0); --info: oklch(0.623 0.214 259.815); --info-foreground: oklch(0.985 0 0); --danger: oklch(0.704 0.191 22.216); --danger-foreground: oklch(0.985 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); } /* ── Store scope (storefront) ─────────────────────────── */ /* Applied by StoreContext.ThemeClass to every store page root. Pins the user-tweakable variables to app defaults so a store's brand is identical for every visitor — the theme-*/radius-* preference classes on only reach store pages by inheritance, which this class overrides. MUST stay ABOVE the color-theme/radius sections: a store's own scheme or radius class on the same element wins the specificity tie by order. The --store-base-* values are defined at the end of this file (dark-aware). Dark mode itself stays user-level. */ .sf-store-scope { --primary: var(--store-base-primary); --primary-foreground: var(--store-base-primary-foreground); --ring: var(--store-base-ring); --radius: var(--store-base-radius); } /* ── Color themes ─────────────────────────────────────── */ /* Slate */ .theme-slate { --primary: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.984 0.003 247.858); --ring: oklch(0.208 0.042 265.755); --sidebar-primary: oklch(0.208 0.042 265.755); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); } .dark.theme-slate, .dark .theme-slate { --primary: oklch(0.929 0.013 255.508); --primary-foreground: oklch(0.208 0.042 265.755); --ring: oklch(0.929 0.013 255.508); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); } /* Blue */ .theme-blue { --primary: oklch(0.546 0.245 262.881); --primary-foreground: oklch(0.97 0.014 254.604); --ring: oklch(0.546 0.245 262.881); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); } .dark.theme-blue, .dark .theme-blue { --primary: oklch(0.623 0.214 259.815); --primary-foreground: oklch(0.97 0.014 254.604); --ring: oklch(0.623 0.214 259.815); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: oklch(0.985 0 0); } /* Rose */ .theme-rose { --primary: oklch(0.586 0.245 12.174); --primary-foreground: oklch(0.969 0.015 12.422); --ring: oklch(0.586 0.245 12.174); --sidebar-primary: oklch(0.586 0.245 12.174); --sidebar-primary-foreground: oklch(0.969 0.015 12.422); } .dark.theme-rose, .dark .theme-rose { --primary: oklch(0.645 0.246 16.439); --primary-foreground: oklch(0.969 0.015 12.422); --ring: oklch(0.645 0.246 16.439); --sidebar-primary: oklch(0.645 0.246 16.439); --sidebar-primary-foreground: oklch(0.985 0 0); } /* Red */ .theme-red { --primary: oklch(0.637 0.237 25.331); --primary-foreground: oklch(0.971 0.013 17.38); --ring: oklch(0.637 0.237 25.331); --sidebar-primary: oklch(0.637 0.237 25.331); --sidebar-primary-foreground: oklch(0.971 0.013 17.38); } .dark.theme-red, .dark .theme-red { --primary: oklch(0.704 0.191 22.216); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.704 0.191 22.216); --sidebar-primary: oklch(0.704 0.191 22.216); --sidebar-primary-foreground: oklch(0.985 0 0); } /* Orange */ .theme-orange { --primary: oklch(0.646 0.222 41.116); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.646 0.222 41.116); --sidebar-primary: oklch(0.646 0.222 41.116); --sidebar-primary-foreground: oklch(0.985 0 0); } .dark.theme-orange, .dark .theme-orange { --primary: oklch(0.769 0.188 70.08); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.769 0.188 70.08); --sidebar-primary: oklch(0.769 0.188 70.08); --sidebar-primary-foreground: oklch(0.145 0 0); } /* Yellow */ .theme-yellow { --primary: oklch(0.795 0.184 86.047); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.795 0.184 86.047); --sidebar-primary: oklch(0.795 0.184 86.047); --sidebar-primary-foreground: oklch(0.145 0 0); } .dark.theme-yellow, .dark .theme-yellow { --primary: oklch(0.828 0.189 84.429); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.828 0.189 84.429); --sidebar-primary: oklch(0.828 0.189 84.429); --sidebar-primary-foreground: oklch(0.145 0 0); } /* Green */ .theme-green { --primary: oklch(0.627 0.194 149.214); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.627 0.194 149.214); --sidebar-primary: oklch(0.627 0.194 149.214); --sidebar-primary-foreground: oklch(0.985 0 0); } .dark.theme-green, .dark .theme-green { --primary: oklch(0.696 0.17 162.48); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.696 0.17 162.48); --sidebar-primary: oklch(0.696 0.17 162.48); --sidebar-primary-foreground: oklch(0.145 0 0); } /* Violet */ .theme-violet { --primary: oklch(0.606 0.25 292.717); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.606 0.25 292.717); --sidebar-primary: oklch(0.606 0.25 292.717); --sidebar-primary-foreground: oklch(0.985 0 0); } .dark.theme-violet, .dark .theme-violet { --primary: oklch(0.627 0.265 303.9); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.627 0.265 303.9); --sidebar-primary: oklch(0.627 0.265 303.9); --sidebar-primary-foreground: oklch(0.985 0 0); } /* ── Radius ──────────────────────────────────────────── */ .radius-none { --radius: 0rem; } .radius-sm { --radius: 0.25rem; } /* radius-md is the default (0.625rem in :root) */ .radius-lg { --radius: 1rem; } .radius-full { --radius: 9999px; } /* ── Store-scope base values (storefront) ─────────────── */ /* Store pages pin accent + radius to the store's theme so a store's brand is identical for every visitor: StoreContext.ThemeStyle sets --primary/--primary-foreground/--ring/--radius to these bases, then the store's own theme overrides on top. These mirror the zinc defaults above and are deliberately NEVER set by the user-preference classes (theme-* / radius-*) — that's what stops personal accent/radius picks from leaking into store pages. Dark mode stays user-level: the .dark block below keeps these scheme-aware. */ :root { --store-base-primary: oklch(0.205 0 0); --store-base-primary-foreground: oklch(0.985 0 0); --store-base-ring: oklch(0.708 0 0); --store-base-radius: 0.625rem; } .dark { --store-base-primary: oklch(0.985 0 0); --store-base-primary-foreground: oklch(0.205 0 0); --store-base-ring: oklch(0.556 0 0); }