mygit/apps/shade/theme-variables.css

/* Runtime semantic variables shared by styles.css and tokens.css */
:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(216 11% 9%);
    --muted: hsl(200 12% 96%);
    --muted-foreground: hsl(210 13% 55%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(216 11% 9%);
    --border: hsl(204 15% 91%);
    --input: hsl(204 14% 93%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(216 11% 9%);
    --primary: hsl(216 11% 9%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(204 14% 93%);
    --secondary-foreground: hsl(216 11% 9%);
    --accent: hsl(200 12% 96%);
    --accent-foreground: hsl(216 11% 9%);
    --destructive: hsl(354 92% 50%);
    --destructive-foreground: hsl(0 0% 100%);
    --ring: hsl(215 13% 63%);
    --surface-page: var(--background);
    --surface-panel: var(--card);
    --surface-panel-foreground: var(--card-foreground);
    --surface-elevated: hsl(0 0% 100%);
    --surface-elevated-foreground: var(--card-foreground);
    --surface-overlay: var(--popover);
    --surface-overlay-foreground: var(--popover-foreground);
    --surface-inverse: hsl(216 11% 9%);
    --surface-inverse-foreground: hsl(0 0% 100%);
    --text-primary: var(--foreground);
    --text-secondary: hsl(210 13% 55%);
    --text-tertiary: hsl(210 13% 63%);
    --text-inverse: hsl(0 0% 100%);
    --border-subtle: var(--input);
    --border-default: var(--border);
    --border-strong: hsl(210 13% 79%);
    --focus-ring: var(--ring);
    --state-info: hsl(198 100% 51%);
    --state-info-foreground: hsl(216 11% 9%);
    --state-success: hsl(144 100% 39%);
    --state-success-foreground: hsl(216 11% 9%);
    --state-warning: hsl(47 100% 50%);
    --state-warning-foreground: hsl(216 11% 9%);
    --state-danger: var(--destructive);
    --state-danger-foreground: hsl(216 11% 5%);
    --control-height: 34px;
    --input-group-radius: 9px;
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 88%);
    --chart-darkgray: hsl(210 13% 79%);
    --chart-rose: hsl(345 100% 56%);
    --chart-orange: hsl(25 100% 50%);
    --chart-amber: hsl(36 100% 50%);
    --chart-yellow: hsl(47 100% 50%);
    --chart-green: hsl(144 100% 39%);
    --chart-teal: hsl(174 100% 37%);
    --chart-blue: hsl(198 100% 51%);
    --chart-darkblue: hsl(226 91% 61%);
    --chart-purple: hsl(273 100% 64%);
    --sidebar-background: hsl(240 11% 98%);
    --sidebar-foreground: hsl(216 11% 9%);
    --sidebar-primary: hsl(216 11% 9%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(204 14% 93%);
    --sidebar-accent-foreground: hsl(216 11% 9%);
    --sidebar-border: hsl(200 12% 96%);
    --sidebar-ring: hsl(215 13% 63%);
    --mobile-navbar-height: 64px;
}

.dark {
    --background: hsl(216 11% 9%);
    --foreground: hsl(210 13% 88%);
    --muted: hsl(210 11% 25%);
    --muted-foreground: hsl(210 13% 63%);
    --accent: hsl(210 11% 25%);
    --accent-foreground: hsl(200 12% 96%);
    --popover: hsl(216 11% 9%);
    --popover-foreground: hsl(212 13% 72%);
    --border: hsl(216 7% 14%);
    --input: hsl(210 11% 25%);
    --card: hsl(216 11% 9%);
    --card-foreground: hsl(213 31% 91%);
    --primary: hsl(200 12% 96%);
    --primary-foreground: hsl(216 11% 9%);
    --secondary: hsl(210 11% 25%);
    --secondary-foreground: hsl(200 12% 96%);
    --destructive: hsl(354 81% 31%);
    --destructive-foreground: hsl(240 11% 98%);
    --ring: hsl(210 11% 25%);
    --surface-page: var(--background);
    --surface-panel: var(--card);
    --surface-panel-foreground: var(--card-foreground);
    --surface-elevated: hsl(210 11% 12%);
    --surface-elevated-foreground: hsl(213 31% 91%);
    --surface-overlay: var(--popover);
    --surface-overlay-foreground: var(--popover-foreground);
    --surface-inverse: hsl(0 0% 100%);
    --surface-inverse-foreground: hsl(216 11% 9%);
    --text-primary: var(--foreground);
    --text-secondary: hsl(210 13% 72%);
    --text-tertiary: hsl(210 13% 63%);
    --text-inverse: hsl(216 11% 9%);
    --border-subtle: hsl(210 11% 20%);
    --border-default: var(--border);
    --border-strong: hsl(210 13% 55%);
    --focus-ring: var(--ring);
    --state-info: hsl(198 100% 64%);
    --state-info-foreground: hsl(216 11% 9%);
    --state-success: hsl(144 100% 48%);
    --state-success-foreground: hsl(216 11% 9%);
    --state-warning: hsl(47 100% 65%);
    --state-warning-foreground: hsl(216 11% 9%);
    --state-danger: hsl(354 81% 54%);
    --state-danger-foreground: hsl(216 11% 5%);
    --chart-1: hsl(201 100% 50%);
    --chart-2: hsl(201 88% 70%);
    --chart-3: hsl(201 85% 80%);
    --chart-4: hsl(201 82% 90%);
    --chart-5: hsl(201 87% 94%);
    --chart-gray: hsl(210 13% 55%);
    --sidebar-background: hsl(216 11% 6%);
    --sidebar-foreground: hsl(200 12% 96%);
    --sidebar-primary: hsl(210 11% 25%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(210 11% 17%);
    --sidebar-accent-foreground: hsl(200 12% 96%);
    --sidebar-border: hsl(210 11% 15%);
    --sidebar-ring: hsl(210 13% 55%);
}