view design_system/src/styles/themes.css @ 256:30c2196d03d4

[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents
children 60a876c4587a
line wrap: on
line source

:root[data-zen-theme="paper"] {
  color-scheme: light;
  --zen-color-canvas: var(--zen-color-neutral-100);
  --zen-color-surface: var(--zen-color-neutral-50);
  --zen-color-surface-raised: var(--zen-color-neutral-50);
  --zen-color-surface-muted: var(--zen-color-neutral-100);
  --zen-color-surface-sunken: var(--zen-color-neutral-200);
  --zen-color-text: var(--zen-color-neutral-950);
  --zen-color-text-muted: var(--zen-color-neutral-600);
  --zen-color-text-subtle: var(--zen-color-neutral-500);
  --zen-color-border: var(--zen-color-neutral-800);
  --zen-color-border-muted: var(--zen-color-neutral-300);
  --zen-color-accent: var(--zen-color-amber-400);
  --zen-color-accent-hover: var(--zen-color-amber-300);
  --zen-color-accent-muted: var(--zen-color-amber-100);
  --zen-color-info: var(--zen-color-blue-600);
  --zen-color-success: var(--zen-color-green-600);
  --zen-color-warning: var(--zen-color-orange-600);
  --zen-color-danger: var(--zen-color-red-600);
  --zen-color-focus: var(--zen-color-violet-600);
  --zen-font-sans: var(
    --zen-font-editorial,
    ui-rounded,
    system-ui,
    sans-serif
  );
}

:root[data-zen-theme="ink"] {
  color-scheme: dark;
  --zen-color-canvas: var(--zen-color-neutral-950);
  --zen-color-surface: var(--zen-color-neutral-900);
  --zen-color-surface-raised: var(--zen-color-neutral-800);
  --zen-color-surface-muted: var(--zen-color-neutral-800);
  --zen-color-surface-sunken: var(--zen-color-neutral-950);
  --zen-color-text: var(--zen-color-neutral-50);
  --zen-color-text-muted: var(--zen-color-neutral-300);
  --zen-color-text-subtle: var(--zen-color-neutral-400);
  --zen-color-border: var(--zen-color-neutral-200);
  --zen-color-border-muted: var(--zen-color-neutral-700);
  --zen-color-accent: var(--zen-color-amber-300);
  --zen-color-accent-hover: var(--zen-color-amber-200);
  --zen-color-accent-muted: var(--zen-color-amber-800);
  --zen-color-info: var(--zen-color-blue-300);
  --zen-color-success: var(--zen-color-green-300);
  --zen-color-warning: var(--zen-color-orange-300);
  --zen-color-danger: var(--zen-color-red-300);
  --zen-color-on-info: var(--zen-color-neutral-950);
  --zen-color-on-success: var(--zen-color-neutral-950);
  --zen-color-on-warning: var(--zen-color-neutral-950);
  --zen-color-on-danger: var(--zen-color-neutral-950);
  --zen-color-focus: var(--zen-color-violet-300);
  --zen-color-on-accent: var(--zen-color-neutral-950);
  --zen-color-text-inverse: var(--zen-color-neutral-950);
  --zen-font-sans: var(
    --zen-font-editorial,
    ui-rounded,
    system-ui,
    sans-serif
  );
}

:root[data-zen-theme="playful"] {
  color-scheme: light;
  --zen-color-canvas: var(--zen-color-rose-100);
  --zen-color-surface: var(--zen-color-amber-50);
  --zen-color-surface-raised: var(--zen-color-neutral-50);
  --zen-color-surface-muted: var(--zen-color-orange-100);
  --zen-color-surface-sunken: var(--zen-color-violet-100);
  --zen-color-text: var(--zen-color-blue-900);
  --zen-color-text-muted: var(--zen-color-violet-700);
  --zen-color-text-subtle: var(--zen-color-blue-600);
  --zen-color-border: var(--zen-color-violet-700);
  --zen-color-border-muted: var(--zen-color-rose-300);
  --zen-color-accent: var(--zen-color-orange-300);
  --zen-color-accent-hover: var(--zen-color-amber-300);
  --zen-color-accent-muted: var(--zen-color-orange-100);
  --zen-color-info: var(--zen-color-blue-600);
  --zen-color-success: var(--zen-color-green-600);
  --zen-color-warning: var(--zen-color-amber-600);
  --zen-color-danger: var(--zen-color-rose-600);
  --zen-color-on-success: var(--zen-color-neutral-50);
  --zen-color-on-warning: var(--zen-color-neutral-50);
  --zen-color-focus: var(--zen-color-violet-500);
  --zen-color-on-accent: var(--zen-color-blue-950);
  --zen-font-sans: var(
    --zen-font-playful,
    ui-rounded,
    system-ui,
    sans-serif
  );
  --zen-radius-sm: 0.65rem;
  --zen-radius-md: 1rem;
  --zen-radius-lg: 1.5rem;
}