/* ============================================================ PEPS Ventures Theme ============================================================ Warm olive-gold brand derived from the tweakcn PEPS Ventures palette (oklch hue ≈ 90.32). Activated by . ============================================================ */ [data-theme="peps"] { /* ── Primitive Palette ──────────────────────────────────── Olive-gold brand scale generated from the tweakcn primary oklch(0.7565 0.1442 90.3236). ─────────────────────────────────────────────────────── */ /* Brand Olive-Gold */ --brand-50: oklch(0.98 0.005 90.32); --brand-100: oklch(0.96 0.01 90.32); --brand-200: oklch(0.92 0.03 90.32); --brand-300: oklch(0.85 0.06 90.32); --brand-400: oklch(0.80 0.10 90.32); --brand-500: oklch(0.7565 0.1442 90.32); --brand-600: oklch(0.68 0.152 90.32); --brand-700: oklch(0.58 0.13 90.32); --brand-800: oklch(0.48 0.10 90.32); --brand-900: oklch(0.35 0.07 90.32); --brand-950: oklch(0.20 0.02 90.32); /* Accent — warm amber-orange */ --accent-50: oklch(0.98 0.01 60); --accent-100: oklch(0.95 0.03 60); --accent-200: oklch(0.90 0.06 60); --accent-300: oklch(0.83 0.10 60); --accent-400: oklch(0.76 0.14 60); --accent-500: oklch(0.70 0.12 60); --accent-600: oklch(0.62 0.12 60); --accent-700: oklch(0.52 0.10 60); --accent-800: oklch(0.42 0.08 60); --accent-900: oklch(0.32 0.06 60); /* Neutral — warm gray (slight gold tint) */ --gray-50: oklch(0.98 0.005 90.32); --gray-100: oklch(0.96 0.005 90.32); --gray-200: oklch(0.92 0.005 90.32); --gray-300: oklch(0.85 0.008 90.32); --gray-400: oklch(0.70 0.02 90.32); --gray-500: oklch(0.55 0.02 90.32); --gray-600: oklch(0.45 0.05 90.32); --gray-700: oklch(0.35 0.03 90.32); --gray-800: oklch(0.25 0.02 90.32); --gray-900: oklch(0.20 0.02 90.32); --gray-950: oklch(0.15 0.01 90.32); /* Success — earthy green */ --success-50: oklch(0.97 0.02 145); --success-100: oklch(0.93 0.04 145); --success-200: oklch(0.87 0.07 145); --success-600: oklch(0.55 0.14 145); --success-700: oklch(0.47 0.12 145); /* Warning — warm orange (matches accent hue) */ --warning-50: oklch(0.98 0.02 65); --warning-100: oklch(0.94 0.05 65); --warning-200: oklch(0.88 0.08 65); --warning-600: oklch(0.60 0.15 65); --warning-700: oklch(0.50 0.12 65); /* Danger — kept close to universal red for usability */ --danger-50: oklch(0.97 0.01 20); --danger-100: oklch(0.93 0.03 20); --danger-200: oklch(0.87 0.06 20); --danger-600: oklch(0.60 0.20 20); --danger-700: oklch(0.50 0.18 20); --danger-800: oklch(0.42 0.15 20); /* Purple (badges) — warmed slightly */ --purple-100: oklch(0.94 0.04 310); --purple-700: oklch(0.45 0.18 310); /* ── Semantic Tokens ──────────────────────────────────── */ --color-primary: var(--brand-500); --color-primary-hover: var(--brand-600); --color-primary-active: var(--brand-700); --color-primary-light: var(--brand-50); --color-primary-fg: oklch(0.20 0.02 90.32); --color-secondary-bg: oklch(1 0 0); --color-secondary-fg: var(--gray-700); --color-secondary-border: var(--gray-300); --color-secondary-hover-bg: var(--gray-50); --color-secondary-hover-border: var(--gray-400); --color-secondary-hover-fg: var(--gray-900); --color-secondary-active-bg: var(--gray-100); --color-destructive: var(--danger-600); --color-destructive-hover: var(--danger-700); --color-destructive-active: var(--danger-800); --color-destructive-fg: oklch(1 0 0); --color-success: var(--success-600); --color-success-hover: var(--success-700); --color-success-fg: oklch(1 0 0); --color-warning: var(--warning-600); --color-warning-dark: var(--warning-700); --color-accent: var(--accent-600); --color-accent-dark: var(--accent-700); --color-background: oklch(1 0 0); --color-surface: oklch(1 0 0); --color-surface-muted: var(--gray-50); --color-surface-subtle: var(--gray-100); --color-foreground: var(--gray-900); --color-foreground-muted: var(--gray-700); --color-foreground-dim: var(--gray-600); --color-foreground-subtle: var(--gray-500); --color-foreground-faint: var(--gray-400); --color-foreground-body: var(--gray-700); --color-border: var(--gray-200); --color-border-muted: var(--gray-100); --color-border-input: var(--gray-300); /* Focus Rings — olive-gold tint */ --ring-primary: oklch(0.7565 0.1442 90.32 / 0.40); --ring-primary-light: oklch(0.7565 0.1442 90.32 / 0.15); --ring-secondary: oklch(0.55 0.02 90.32 / 0.30); --ring-destructive: oklch(0.60 0.20 20 / 0.40); --ring-destructive-light: oklch(0.60 0.20 20 / 0.15); --ring-success: oklch(0.55 0.14 145 / 0.40); --ring-success-light: oklch(0.55 0.14 145 / 0.15); --color-overlay: rgba(0, 0, 0, 0.5); --color-readonly-bg: oklch(0.93 0.005 90.32); --color-readonly-fg: oklch(0.50 0.02 90.32); /* ── Badge Tokens ─────────────────────────────────────── */ --badge-primary-bg: var(--brand-100); --badge-primary-fg: var(--brand-700); --badge-success-bg: var(--success-100); --badge-success-fg: var(--success-700); --badge-warning-bg: var(--warning-100); --badge-warning-fg: var(--warning-700); --badge-danger-bg: var(--danger-100); --badge-danger-fg: var(--danger-700); --badge-info-bg: var(--accent-100); --badge-info-fg: var(--accent-700); --badge-gray-bg: var(--gray-100); --badge-gray-fg: var(--gray-600); --badge-purple-bg: var(--purple-100); --badge-purple-fg: var(--purple-700); /* ── Alert Tokens ─────────────────────────────────────── */ --alert-success-bg: var(--success-50); --alert-success-border: var(--success-200); --alert-success-fg: var(--success-700); --alert-warning-bg: var(--warning-50); --alert-warning-border: var(--warning-200); --alert-warning-fg: var(--warning-700); --alert-danger-bg: var(--danger-50); --alert-danger-border: var(--danger-200); --alert-danger-fg: var(--danger-700); --alert-info-bg: var(--brand-50); --alert-info-border: var(--brand-200); --alert-info-fg: var(--brand-700); /* ── Stat Card Tokens ─────────────────────────────────── */ --stat-primary-accent: var(--brand-500); --stat-primary-icon-bg: var(--brand-50); --stat-primary-icon-fg: var(--brand-600); --stat-success-accent: var(--success-600); --stat-success-icon-bg: var(--success-50); --stat-success-icon-fg: var(--success-600); --stat-warning-accent: var(--warning-600); --stat-warning-icon-bg: var(--warning-50); --stat-warning-icon-fg: var(--warning-600); --stat-danger-accent: var(--danger-600); --stat-danger-icon-bg: var(--danger-50); --stat-danger-icon-fg: var(--danger-600); --stat-accent-accent: var(--accent-600); --stat-accent-icon-bg: var(--accent-50); --stat-accent-icon-fg: var(--accent-600); /* ── Navigation / Sidebar Tokens ────────────────────── */ --nav-bg: var(--brand-950); --nav-bg-hover: var(--brand-900); --nav-bg-active: var(--brand-800); --nav-border: var(--brand-900); --nav-border-subtle: var(--brand-800); --nav-text: oklch(0.98 0.005 90.32); --nav-text-muted: oklch(0.70 0.02 90.32); --nav-text-dim: oklch(0.60 0.02 90.32); --nav-text-label: var(--brand-500); --nav-accent-bg: var(--brand-500); --nav-accent-fg: oklch(0.20 0.02 90.32); --nav-gradient-from: var(--brand-950); --nav-gradient-to: var(--brand-900); /* ── Syncfusion Grid Tokens ───────────────────────────── */ --csg-header-bg: oklch(0.94 0.02 90.32); --csg-header-color: oklch(0.30 0.05 90.32); --csg-header-font-size: 0.6875rem; --csg-row-bg: oklch(1 0 0); --csg-row-alt-bg: oklch(0.96 0.01 90.32); --csg-row-hover-bg: oklch(0.93 0.02 90.32); --csg-row-selected-bg: oklch(0.88 0.06 90.32); --csg-row-selected-color: oklch(0.25 0.04 90.32); --csg-row-selected-border: var(--color-primary); --csg-cell-color: var(--gray-700); --csg-cell-font-size: 0.6875rem; --csg-cell-height: 26px; --csg-cell-padding: 0px 6px; --csg-border-color: oklch(0.88 0.01 90.32); --csg-toolbar-bg: oklch(0.97 0.005 90.32); --csg-toolbar-height: 32px; --csg-pager-active-bg: var(--color-primary); --csg-pager-active-color: var(--color-primary-fg); } /* ── Dark Mode ──────────────────────────────────────────────── Follows the tweakcn PEPS dark palette. Activated by . ──────────────────────────────────────────────────────────── */ [data-theme="peps"].dark { /* Neutral — dark warm */ --gray-50: oklch(0.20 0.02 90.32); --gray-100: oklch(0.22 0.01 90.32); --gray-200: oklch(0.25 0.01 90.32); --gray-300: oklch(0.35 0.02 90.32); --gray-400: oklch(0.50 0.02 90.32); --gray-500: oklch(0.70 0.02 90.32); --gray-600: oklch(0.80 0.01 90.32); --gray-700: oklch(0.90 0.005 90.32); --gray-800: oklch(0.95 0.005 90.32); --gray-900: oklch(0.98 0.005 90.32); --gray-950: oklch(1 0 0); --color-background: oklch(0.15 0.01 90.32); --color-surface: oklch(0.18 0.01 90.32); --color-surface-muted: oklch(0.18 0.01 90.32); --color-surface-subtle: oklch(0.25 0.02 90.32); --color-foreground: oklch(0.98 0.005 90.32); --color-foreground-muted: oklch(0.90 0.005 90.32); --color-foreground-dim: oklch(0.80 0.01 90.32); --color-foreground-subtle: oklch(0.70 0.02 90.32); --color-foreground-faint: oklch(0.50 0.02 90.32); --color-foreground-body: oklch(0.80 0.01 90.32); --color-border: oklch(0.22 0.01 90.32); --color-border-muted: oklch(0.18 0.01 90.32); --color-border-input: oklch(0.35 0.02 90.32); --color-primary-fg: oklch(0.10 0.02 90.32); --color-secondary-bg: oklch(0.18 0.01 90.32); --color-secondary-fg: oklch(0.90 0.005 90.32); --color-secondary-border: oklch(0.35 0.02 90.32); --color-secondary-hover-bg: oklch(0.25 0.02 90.32); --color-secondary-hover-border: oklch(0.50 0.02 90.32); --color-secondary-hover-fg: oklch(0.98 0.005 90.32); --color-secondary-active-bg: oklch(0.30 0.02 90.32); --color-overlay: rgba(0, 0, 0, 0.7); --color-readonly-bg: oklch(0.22 0.01 90.32); --color-readonly-fg: oklch(0.55 0.02 90.32); /* Badge dark */ --badge-primary-bg: oklch(0.7565 0.1442 90.32 / 0.20); --badge-primary-fg: oklch(0.85 0.06 90.32); --badge-success-bg: oklch(0.55 0.14 145 / 0.20); --badge-success-fg: oklch(0.80 0.08 145); --badge-warning-bg: oklch(0.60 0.15 65 / 0.20); --badge-warning-fg: oklch(0.85 0.08 65); --badge-danger-bg: oklch(0.60 0.20 20 / 0.20); --badge-danger-fg: oklch(0.80 0.08 20); --badge-info-bg: oklch(0.62 0.12 60 / 0.20); --badge-info-fg: oklch(0.83 0.10 60); --badge-gray-bg: oklch(0.55 0.02 90.32 / 0.20); --badge-gray-fg: oklch(0.80 0.01 90.32); --badge-purple-bg: oklch(0.45 0.18 310 / 0.20); --badge-purple-fg: oklch(0.78 0.10 310); /* Alert dark */ --alert-success-bg: oklch(0.55 0.14 145 / 0.10); --alert-success-border: oklch(0.55 0.14 145 / 0.30); --alert-success-fg: oklch(0.80 0.08 145); --alert-warning-bg: oklch(0.60 0.15 65 / 0.10); --alert-warning-border: oklch(0.60 0.15 65 / 0.30); --alert-warning-fg: oklch(0.85 0.08 65); --alert-danger-bg: oklch(0.60 0.20 20 / 0.10); --alert-danger-border: oklch(0.60 0.20 20 / 0.30); --alert-danger-fg: oklch(0.80 0.08 20); --alert-info-bg: oklch(0.7565 0.1442 90.32 / 0.10); --alert-info-border: oklch(0.7565 0.1442 90.32 / 0.30); --alert-info-fg: oklch(0.85 0.06 90.32); /* Stat card dark */ --stat-primary-icon-bg: oklch(0.7565 0.1442 90.32 / 0.15); --stat-success-icon-bg: oklch(0.55 0.14 145 / 0.15); --stat-warning-icon-bg: oklch(0.60 0.15 65 / 0.15); --stat-danger-icon-bg: oklch(0.60 0.20 20 / 0.15); --stat-accent-icon-bg: oklch(0.62 0.12 60 / 0.15); /* Syncfusion Grid dark */ --csg-header-bg: oklch(0.22 0.01 90.32); --csg-header-color: oklch(0.90 0.005 90.32); --csg-row-bg: oklch(0.15 0.01 90.32); --csg-row-alt-bg: oklch(0.18 0.01 90.32); --csg-row-hover-bg: oklch(0.25 0.02 90.32); --csg-row-selected-bg: oklch(0.7565 0.1442 90.32 / 0.25); --csg-row-selected-color: oklch(0.98 0.005 90.32); --csg-cell-color: oklch(0.80 0.01 90.32); --csg-border-color: oklch(0.25 0.01 90.32); --csg-toolbar-bg: oklch(0.18 0.01 90.32); }