mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-03 21:03:08 +00:00
feat: add new themes, Zed fonts, and sort theme/font lists
New themes added: - Dark: Ayu Dark, Ayu Mirage, Ember, Matcha - Light: Ayu Light, One Light, Bluloco, Feather Other changes: - Bundle Zed Sans and Zed Mono fonts from zed-industries/zed-fonts - Sort font options alphabetically (default first) - Sort theme options alphabetically (Dark/Light first) - Improve Ayu Dark text contrast for better readability - Fix Matcha theme to have green undertone instead of blue
This commit is contained in:
Stefan de Vogelaere
151
apps/ui/src/styles/themes/ayu-dark.css
Normal file
151
apps/ui/src/styles/themes/ayu-dark.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Ayu Dark Theme - Deep dark with warm orange accents */
|
||||
|
||||
.ayu-dark {
|
||||
/* Backgrounds - from editor.bg #10141C, ui.bg #0D1017 */
|
||||
--background: oklch(0.12 0.02 250); /* #0D1017 */
|
||||
--background-50: oklch(0.12 0.02 250 / 0.5);
|
||||
--background-80: oklch(0.12 0.02 250 / 0.8);
|
||||
|
||||
/* Text - from editor.fg #BFBDB6, ui.fg #5A6378 - boosted for contrast */
|
||||
--foreground: oklch(0.95 0.01 90); /* Brighter for better readability */
|
||||
--foreground-secondary: oklch(0.75 0.02 240);
|
||||
--foreground-muted: oklch(0.6 0.03 240);
|
||||
|
||||
/* Card/Popover - from panel.bg #141821, popup.bg #0F131A */
|
||||
--card: oklch(0.15 0.02 250); /* #141821 */
|
||||
--card-foreground: oklch(0.95 0.01 90);
|
||||
--popover: oklch(0.13 0.02 250); /* #0F131A */
|
||||
--popover-foreground: oklch(0.95 0.01 90);
|
||||
|
||||
/* Primary/Brand - from accent.tint #E6B450, orange #FF8F40 */
|
||||
--primary: oklch(0.78 0.15 75); /* #E6B450 golden */
|
||||
--primary-foreground: oklch(0.12 0.02 250);
|
||||
|
||||
--brand-400: oklch(0.82 0.14 75);
|
||||
--brand-500: oklch(0.78 0.15 75); /* #E6B450 */
|
||||
--brand-600: oklch(0.72 0.17 70);
|
||||
|
||||
/* Secondary - from ui.line #1B1F29 */
|
||||
--secondary: oklch(0.18 0.02 250);
|
||||
--secondary-foreground: oklch(0.95 0.01 90);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.18 0.02 250);
|
||||
--muted-foreground: oklch(0.45 0.04 240);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.22 0.03 250);
|
||||
--accent-foreground: oklch(0.95 0.01 90);
|
||||
|
||||
/* Destructive - from error #D95757 */
|
||||
--destructive: oklch(0.55 0.2 25); /* #D95757 */
|
||||
|
||||
/* Borders - from editor.line #161A24 */
|
||||
--border: oklch(0.2 0.02 250);
|
||||
--border-glass: oklch(0.78 0.15 75 / 0.3);
|
||||
|
||||
--input: oklch(0.15 0.02 250);
|
||||
--ring: oklch(0.78 0.15 75);
|
||||
|
||||
/* Charts - using Ayu palette */
|
||||
--chart-1: oklch(0.78 0.15 75); /* Gold accent */
|
||||
--chart-2: oklch(0.75 0.2 130); /* Green #AAD94C */
|
||||
--chart-3: oklch(0.7 0.15 220); /* Blue #59C2FF */
|
||||
--chart-4: oklch(0.7 0.2 320); /* Purple #D2A6FF */
|
||||
--chart-5: oklch(0.65 0.2 15); /* Red #F07178 */
|
||||
|
||||
/* Sidebar - from ui.bg #0D1017 */
|
||||
--sidebar: oklch(0.1 0.02 250);
|
||||
--sidebar-foreground: oklch(0.95 0.01 90);
|
||||
--sidebar-primary: oklch(0.78 0.15 75);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.02 250);
|
||||
--sidebar-accent: oklch(0.18 0.02 250);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.01 90);
|
||||
--sidebar-border: oklch(0.2 0.02 250);
|
||||
--sidebar-ring: oklch(0.78 0.15 75);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.78 0.15 75); /* Gold */
|
||||
--action-view-hover: oklch(0.72 0.17 70);
|
||||
--action-followup: oklch(0.7 0.15 220); /* Blue #59C2FF */
|
||||
--action-followup-hover: oklch(0.65 0.17 220);
|
||||
--action-commit: oklch(0.75 0.2 130); /* Green #AAD94C */
|
||||
--action-commit-hover: oklch(0.7 0.22 130);
|
||||
--action-verify: oklch(0.75 0.2 130);
|
||||
--action-verify-hover: oklch(0.7 0.22 130);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.78 0.15 75);
|
||||
--running-indicator-text: oklch(0.82 0.14 75);
|
||||
}
|
||||
|
||||
/* Theme-specific overrides */
|
||||
|
||||
.ayu-dark .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #e6b450 0%, #ff8f40 50%, #e6b450 100%);
|
||||
}
|
||||
|
||||
.ayu-dark .animated-outline-inner {
|
||||
background: oklch(0.12 0.02 250) !important;
|
||||
color: #e6b450 !important;
|
||||
}
|
||||
|
||||
.ayu-dark [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
|
||||
background: oklch(0.18 0.02 250) !important;
|
||||
color: #ffb454 !important;
|
||||
}
|
||||
|
||||
.ayu-dark .slider-track {
|
||||
background: oklch(0.18 0.02 250);
|
||||
}
|
||||
|
||||
.ayu-dark .slider-range {
|
||||
background: linear-gradient(to right, #e6b450, #ffb454);
|
||||
}
|
||||
|
||||
.ayu-dark .slider-thumb {
|
||||
background: oklch(0.12 0.02 250);
|
||||
border-color: #e6b450;
|
||||
}
|
||||
|
||||
/* XML Syntax Highlighting */
|
||||
.ayu-dark .xml-highlight {
|
||||
color: oklch(0.95 0.01 90);
|
||||
}
|
||||
|
||||
.ayu-dark .xml-tag-bracket {
|
||||
color: #39bae6; /* Indigo */
|
||||
}
|
||||
|
||||
.ayu-dark .xml-tag-name {
|
||||
color: #39bae6;
|
||||
}
|
||||
|
||||
.ayu-dark .xml-attribute-name {
|
||||
color: #ffb454; /* Yellow */
|
||||
}
|
||||
|
||||
.ayu-dark .xml-attribute-equals {
|
||||
color: oklch(0.95 0.01 90);
|
||||
}
|
||||
|
||||
.ayu-dark .xml-attribute-value {
|
||||
color: #aad94c; /* Green */
|
||||
}
|
||||
|
||||
.ayu-dark .xml-comment {
|
||||
color: #5a6673; /* Gray */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ayu-dark .xml-cdata {
|
||||
color: #95e6cb; /* Teal */
|
||||
}
|
||||
|
||||
.ayu-dark .xml-doctype {
|
||||
color: #d2a6ff; /* Purple */
|
||||
}
|
||||
|
||||
.ayu-dark .xml-text {
|
||||
color: oklch(0.95 0.01 90);
|
||||
}
|
||||
151
apps/ui/src/styles/themes/ayu-light.css
Normal file
151
apps/ui/src/styles/themes/ayu-light.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Ayu Light Theme - Clean light with warm orange accents */
|
||||
|
||||
.ayu-light {
|
||||
/* Backgrounds - from editor.bg #FCFCFC, ui.bg #F8F9FA */
|
||||
--background: oklch(0.98 0.005 90); /* #FCFCFC */
|
||||
--background-50: oklch(0.98 0.005 90 / 0.5);
|
||||
--background-80: oklch(0.98 0.005 90 / 0.8);
|
||||
|
||||
/* Text - from editor.fg #5C6166, ui.fg #828E9F */
|
||||
--foreground: oklch(0.42 0.02 240); /* #5C6166 */
|
||||
--foreground-secondary: oklch(0.52 0.02 240);
|
||||
--foreground-muted: oklch(0.58 0.03 240); /* #828E9F */
|
||||
|
||||
/* Card/Popover - from panel.bg #FAFAFA, popup.bg #FFFFFF */
|
||||
--card: oklch(0.98 0.003 90); /* #FAFAFA */
|
||||
--card-foreground: oklch(0.42 0.02 240);
|
||||
--popover: oklch(1 0 0); /* #FFFFFF */
|
||||
--popover-foreground: oklch(0.42 0.02 240);
|
||||
|
||||
/* Primary/Brand - from accent.tint #F29718 */
|
||||
--primary: oklch(0.72 0.18 55); /* #F29718 orange */
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--brand-400: oklch(0.78 0.16 55);
|
||||
--brand-500: oklch(0.72 0.18 55); /* #F29718 */
|
||||
--brand-600: oklch(0.65 0.2 50);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.96 0.005 90);
|
||||
--secondary-foreground: oklch(0.42 0.02 240);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.96 0.005 90);
|
||||
--muted-foreground: oklch(0.58 0.03 240);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.94 0.01 90);
|
||||
--accent-foreground: oklch(0.42 0.02 240);
|
||||
|
||||
/* Destructive - from error #E65050 */
|
||||
--destructive: oklch(0.55 0.22 25); /* #E65050 */
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(0.9 0.01 90);
|
||||
--border-glass: oklch(0.42 0.02 240 / 0.1);
|
||||
|
||||
--input: oklch(1 0 0);
|
||||
--ring: oklch(0.72 0.18 55);
|
||||
|
||||
/* Charts - using Ayu Light palette */
|
||||
--chart-1: oklch(0.72 0.18 55); /* Orange accent */
|
||||
--chart-2: oklch(0.6 0.18 130); /* Green #86B300 */
|
||||
--chart-3: oklch(0.65 0.15 210); /* Blue #22A4E6 */
|
||||
--chart-4: oklch(0.55 0.18 310); /* Purple #A37ACC */
|
||||
--chart-5: oklch(0.58 0.2 20); /* Red #F07171 */
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.97 0.005 90); /* #F8F9FA */
|
||||
--sidebar-foreground: oklch(0.42 0.02 240);
|
||||
--sidebar-primary: oklch(0.72 0.18 55);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.94 0.01 90);
|
||||
--sidebar-accent-foreground: oklch(0.42 0.02 240);
|
||||
--sidebar-border: oklch(0.9 0.01 90);
|
||||
--sidebar-ring: oklch(0.72 0.18 55);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.72 0.18 55); /* Orange */
|
||||
--action-view-hover: oklch(0.65 0.2 50);
|
||||
--action-followup: oklch(0.65 0.15 210); /* Blue */
|
||||
--action-followup-hover: oklch(0.58 0.17 210);
|
||||
--action-commit: oklch(0.6 0.18 130); /* Green */
|
||||
--action-commit-hover: oklch(0.55 0.2 130);
|
||||
--action-verify: oklch(0.6 0.18 130);
|
||||
--action-verify-hover: oklch(0.55 0.2 130);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.72 0.18 55);
|
||||
--running-indicator-text: oklch(0.65 0.2 50);
|
||||
}
|
||||
|
||||
/* Theme-specific overrides */
|
||||
|
||||
.ayu-light .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #f29718 0%, #fa8532 50%, #f29718 100%);
|
||||
}
|
||||
|
||||
.ayu-light .animated-outline-inner {
|
||||
background: oklch(0.98 0.005 90) !important;
|
||||
color: #f29718 !important;
|
||||
}
|
||||
|
||||
.ayu-light [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
|
||||
background: oklch(0.96 0.01 90) !important;
|
||||
color: #fa8532 !important;
|
||||
}
|
||||
|
||||
.ayu-light .slider-track {
|
||||
background: oklch(0.92 0.01 90);
|
||||
}
|
||||
|
||||
.ayu-light .slider-range {
|
||||
background: linear-gradient(to right, #f29718, #fa8532);
|
||||
}
|
||||
|
||||
.ayu-light .slider-thumb {
|
||||
background: oklch(1 0 0);
|
||||
border-color: #f29718;
|
||||
}
|
||||
|
||||
/* XML Syntax Highlighting */
|
||||
.ayu-light .xml-highlight {
|
||||
color: oklch(0.42 0.02 240);
|
||||
}
|
||||
|
||||
.ayu-light .xml-tag-bracket {
|
||||
color: #55b4d4; /* Indigo/Cyan */
|
||||
}
|
||||
|
||||
.ayu-light .xml-tag-name {
|
||||
color: #55b4d4;
|
||||
}
|
||||
|
||||
.ayu-light .xml-attribute-name {
|
||||
color: #f29718; /* Orange */
|
||||
}
|
||||
|
||||
.ayu-light .xml-attribute-equals {
|
||||
color: oklch(0.42 0.02 240);
|
||||
}
|
||||
|
||||
.ayu-light .xml-attribute-value {
|
||||
color: #86b300; /* Green */
|
||||
}
|
||||
|
||||
.ayu-light .xml-comment {
|
||||
color: #adaeb1; /* Gray */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ayu-light .xml-cdata {
|
||||
color: #4cbf99; /* Teal */
|
||||
}
|
||||
|
||||
.ayu-light .xml-doctype {
|
||||
color: #a37acc; /* Purple */
|
||||
}
|
||||
|
||||
.ayu-light .xml-text {
|
||||
color: oklch(0.42 0.02 240);
|
||||
}
|
||||
151
apps/ui/src/styles/themes/ayu-mirage.css
Normal file
151
apps/ui/src/styles/themes/ayu-mirage.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Ayu Mirage Theme - Soft dark with golden yellow accents */
|
||||
|
||||
.ayu-mirage {
|
||||
/* Backgrounds - from editor.bg #242936, ui.bg #1F2430 */
|
||||
--background: oklch(0.2 0.02 260); /* #1F2430 */
|
||||
--background-50: oklch(0.2 0.02 260 / 0.5);
|
||||
--background-80: oklch(0.2 0.02 260 / 0.8);
|
||||
|
||||
/* Text - from editor.fg #CCCAC2, ui.fg #707A8C */
|
||||
--foreground: oklch(0.82 0.01 90); /* #CCCAC2 */
|
||||
--foreground-secondary: oklch(0.58 0.03 240);
|
||||
--foreground-muted: oklch(0.52 0.04 240); /* #707A8C */
|
||||
|
||||
/* Card/Popover - from panel.bg #282E3B, popup.bg #1C212C */
|
||||
--card: oklch(0.24 0.02 260); /* #282E3B */
|
||||
--card-foreground: oklch(0.82 0.01 90);
|
||||
--popover: oklch(0.18 0.02 260); /* #1C212C */
|
||||
--popover-foreground: oklch(0.82 0.01 90);
|
||||
|
||||
/* Primary/Brand - from accent.tint #FFCC66 */
|
||||
--primary: oklch(0.85 0.14 85); /* #FFCC66 golden yellow */
|
||||
--primary-foreground: oklch(0.18 0.02 260);
|
||||
|
||||
--brand-400: oklch(0.88 0.12 85);
|
||||
--brand-500: oklch(0.85 0.14 85); /* #FFCC66 */
|
||||
--brand-600: oklch(0.78 0.16 80);
|
||||
|
||||
/* Secondary - from ui.line #171B24 */
|
||||
--secondary: oklch(0.22 0.02 260);
|
||||
--secondary-foreground: oklch(0.82 0.01 90);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.22 0.02 260);
|
||||
--muted-foreground: oklch(0.52 0.04 240);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.28 0.03 260);
|
||||
--accent-foreground: oklch(0.82 0.01 90);
|
||||
|
||||
/* Destructive - from error #FF6666 */
|
||||
--destructive: oklch(0.62 0.22 20); /* #FF6666 */
|
||||
|
||||
/* Borders - from editor.line #1A1F29 */
|
||||
--border: oklch(0.22 0.02 260);
|
||||
--border-glass: oklch(0.85 0.14 85 / 0.3);
|
||||
|
||||
--input: oklch(0.2 0.02 260);
|
||||
--ring: oklch(0.85 0.14 85);
|
||||
|
||||
/* Charts - using Ayu Mirage palette */
|
||||
--chart-1: oklch(0.85 0.14 85); /* Yellow accent */
|
||||
--chart-2: oklch(0.85 0.2 120); /* Green #D5FF80 */
|
||||
--chart-3: oklch(0.78 0.12 200); /* Blue #73D0FF */
|
||||
--chart-4: oklch(0.82 0.15 310); /* Purple #DFBFFF */
|
||||
--chart-5: oklch(0.68 0.18 20); /* Red #F28779 */
|
||||
|
||||
/* Sidebar - slightly darker than main bg */
|
||||
--sidebar: oklch(0.16 0.02 260);
|
||||
--sidebar-foreground: oklch(0.82 0.01 90);
|
||||
--sidebar-primary: oklch(0.85 0.14 85);
|
||||
--sidebar-primary-foreground: oklch(0.18 0.02 260);
|
||||
--sidebar-accent: oklch(0.22 0.02 260);
|
||||
--sidebar-accent-foreground: oklch(0.82 0.01 90);
|
||||
--sidebar-border: oklch(0.22 0.02 260);
|
||||
--sidebar-ring: oklch(0.85 0.14 85);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.85 0.14 85); /* Yellow */
|
||||
--action-view-hover: oklch(0.78 0.16 80);
|
||||
--action-followup: oklch(0.78 0.12 200); /* Blue #73D0FF */
|
||||
--action-followup-hover: oklch(0.72 0.14 200);
|
||||
--action-commit: oklch(0.85 0.2 120); /* Green #D5FF80 */
|
||||
--action-commit-hover: oklch(0.78 0.22 120);
|
||||
--action-verify: oklch(0.85 0.2 120);
|
||||
--action-verify-hover: oklch(0.78 0.22 120);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.85 0.14 85);
|
||||
--running-indicator-text: oklch(0.88 0.12 85);
|
||||
}
|
||||
|
||||
/* Theme-specific overrides */
|
||||
|
||||
.ayu-mirage .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #ffcc66 0%, #ffa659 50%, #ffcc66 100%);
|
||||
}
|
||||
|
||||
.ayu-mirage .animated-outline-inner {
|
||||
background: oklch(0.2 0.02 260) !important;
|
||||
color: #ffcc66 !important;
|
||||
}
|
||||
|
||||
.ayu-mirage [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
|
||||
background: oklch(0.24 0.02 260) !important;
|
||||
color: #ffcd66 !important;
|
||||
}
|
||||
|
||||
.ayu-mirage .slider-track {
|
||||
background: oklch(0.22 0.02 260);
|
||||
}
|
||||
|
||||
.ayu-mirage .slider-range {
|
||||
background: linear-gradient(to right, #ffcc66, #ffa659);
|
||||
}
|
||||
|
||||
.ayu-mirage .slider-thumb {
|
||||
background: oklch(0.2 0.02 260);
|
||||
border-color: #ffcc66;
|
||||
}
|
||||
|
||||
/* XML Syntax Highlighting */
|
||||
.ayu-mirage .xml-highlight {
|
||||
color: oklch(0.82 0.01 90);
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-tag-bracket {
|
||||
color: #5ccfe6; /* Indigo/Cyan */
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-tag-name {
|
||||
color: #5ccfe6;
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-attribute-name {
|
||||
color: #ffcd66; /* Yellow */
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-attribute-equals {
|
||||
color: oklch(0.82 0.01 90);
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-attribute-value {
|
||||
color: #d5ff80; /* Green */
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-comment {
|
||||
color: #6e7c8f; /* Gray */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-cdata {
|
||||
color: #95e6cb; /* Teal */
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-doctype {
|
||||
color: #dfbfff; /* Purple */
|
||||
}
|
||||
|
||||
.ayu-mirage .xml-text {
|
||||
color: oklch(0.82 0.01 90);
|
||||
}
|
||||
93
apps/ui/src/styles/themes/bluloco.css
Normal file
93
apps/ui/src/styles/themes/bluloco.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/* Bluloco Light Theme - Clean light with cyan-blue accent */
|
||||
|
||||
.bluloco {
|
||||
/* Backgrounds */
|
||||
--background: oklch(0.98 0.002 250);
|
||||
--background-50: oklch(0.98 0.002 250 / 0.5);
|
||||
--background-80: oklch(0.98 0.002 250 / 0.8);
|
||||
|
||||
/* Text */
|
||||
--foreground: oklch(0.3 0.02 250);
|
||||
--foreground-secondary: oklch(0.45 0.02 250);
|
||||
--foreground-muted: oklch(0.55 0.015 250);
|
||||
|
||||
/* Card/Popover */
|
||||
--card: oklch(0.96 0.003 250);
|
||||
--card-foreground: oklch(0.3 0.02 250);
|
||||
--popover: oklch(0.98 0.002 250);
|
||||
--popover-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Primary/Brand - cyan-blue #0099e1 */
|
||||
--primary: oklch(0.62 0.18 220);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--brand-400: oklch(0.67 0.16 220);
|
||||
--brand-500: oklch(0.62 0.18 220);
|
||||
--brand-600: oklch(0.55 0.2 220);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.92 0.005 250);
|
||||
--secondary-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.93 0.005 250);
|
||||
--muted-foreground: oklch(0.5 0.015 250);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.94 0.005 250);
|
||||
--accent-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Destructive - red #d52753 */
|
||||
--destructive: oklch(0.5 0.22 15);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(0.88 0.005 250);
|
||||
--border-glass: oklch(0.3 0.02 250 / 0.1);
|
||||
|
||||
--input: oklch(0.98 0.002 250);
|
||||
--ring: oklch(0.62 0.18 220);
|
||||
|
||||
/* Charts */
|
||||
--chart-1: oklch(0.62 0.18 220);
|
||||
--chart-2: oklch(0.55 0.15 145);
|
||||
--chart-3: oklch(0.5 0.22 15);
|
||||
--chart-4: oklch(0.6 0.2 320);
|
||||
--chart-5: oklch(0.7 0.15 85);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.93 0.005 250);
|
||||
--sidebar-foreground: oklch(0.3 0.02 250);
|
||||
--sidebar-primary: oklch(0.62 0.18 220);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.9 0.005 250);
|
||||
--sidebar-accent-foreground: oklch(0.3 0.02 250);
|
||||
--sidebar-border: oklch(0.88 0.005 250);
|
||||
--sidebar-ring: oklch(0.62 0.18 220);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.62 0.18 220);
|
||||
--action-view-hover: oklch(0.55 0.2 220);
|
||||
--action-followup: oklch(0.55 0.15 265);
|
||||
--action-followup-hover: oklch(0.5 0.17 265);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.62 0.18 220);
|
||||
--running-indicator-text: oklch(0.55 0.2 220);
|
||||
|
||||
/* Status colors */
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.7 0.15 85);
|
||||
--status-warning-bg: oklch(0.7 0.15 85 / 0.15);
|
||||
--status-error: oklch(0.5 0.22 15);
|
||||
--status-error-bg: oklch(0.5 0.22 15 / 0.15);
|
||||
--status-info: oklch(0.62 0.18 220);
|
||||
--status-info-bg: oklch(0.62 0.18 220 / 0.15);
|
||||
--status-backlog: oklch(0.5 0 0);
|
||||
--status-in-progress: oklch(0.7 0.15 85);
|
||||
--status-waiting: oklch(0.65 0.18 50);
|
||||
}
|
||||
151
apps/ui/src/styles/themes/ember.css
Normal file
151
apps/ui/src/styles/themes/ember.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Ember Theme - Warm orange accent on dark background */
|
||||
|
||||
.ember {
|
||||
/* Backgrounds - from bgMain #272822 */
|
||||
--background: oklch(0.2 0.02 100); /* #272822 */
|
||||
--background-50: oklch(0.2 0.02 100 / 0.5);
|
||||
--background-80: oklch(0.2 0.02 100 / 0.8);
|
||||
|
||||
/* Text - from textMain #f8f8f2, textDim #8f908a */
|
||||
--foreground: oklch(0.97 0.01 100); /* #f8f8f2 */
|
||||
--foreground-secondary: oklch(0.65 0.02 100);
|
||||
--foreground-muted: oklch(0.6 0.02 100); /* #8f908a */
|
||||
|
||||
/* Card/Popover - derived from bgActivity #3e3d32 */
|
||||
--card: oklch(0.28 0.02 100); /* #3e3d32 */
|
||||
--card-foreground: oklch(0.97 0.01 100);
|
||||
--popover: oklch(0.24 0.02 100);
|
||||
--popover-foreground: oklch(0.97 0.01 100);
|
||||
|
||||
/* Primary/Brand - from accent #fd971f (orange) */
|
||||
--primary: oklch(0.75 0.18 60); /* #fd971f */
|
||||
--primary-foreground: oklch(0.18 0.02 100); /* #1e1f1c */
|
||||
|
||||
--brand-400: oklch(0.8 0.16 60); /* #fdbf6f lighter */
|
||||
--brand-500: oklch(0.75 0.18 60); /* #fd971f */
|
||||
--brand-600: oklch(0.68 0.2 55);
|
||||
|
||||
/* Secondary - from bgActivity #3e3d32 */
|
||||
--secondary: oklch(0.28 0.02 100);
|
||||
--secondary-foreground: oklch(0.97 0.01 100);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.28 0.02 100);
|
||||
--muted-foreground: oklch(0.6 0.02 100);
|
||||
|
||||
/* Accent - from accentDim */
|
||||
--accent: oklch(0.32 0.04 80);
|
||||
--accent-foreground: oklch(0.97 0.01 100);
|
||||
|
||||
/* Destructive - from error #f92672 */
|
||||
--destructive: oklch(0.6 0.28 350); /* #f92672 */
|
||||
|
||||
/* Borders - from border #49483e */
|
||||
--border: oklch(0.35 0.03 90); /* #49483e */
|
||||
--border-glass: oklch(0.75 0.18 60 / 0.3);
|
||||
|
||||
--input: oklch(0.24 0.02 100);
|
||||
--ring: oklch(0.75 0.18 60);
|
||||
|
||||
/* Charts - using theme colors */
|
||||
--chart-1: oklch(0.75 0.18 60); /* Orange accent */
|
||||
--chart-2: oklch(0.75 0.22 130); /* Green #a6e22e */
|
||||
--chart-3: oklch(0.85 0.15 95); /* Yellow #e6db74 */
|
||||
--chart-4: oklch(0.6 0.28 350); /* Pink #f92672 */
|
||||
--chart-5: oklch(0.7 0.2 200); /* Blue for variety */
|
||||
|
||||
/* Sidebar - from bgSidebar #1e1f1c */
|
||||
--sidebar: oklch(0.16 0.02 100); /* #1e1f1c */
|
||||
--sidebar-foreground: oklch(0.97 0.01 100);
|
||||
--sidebar-primary: oklch(0.75 0.18 60);
|
||||
--sidebar-primary-foreground: oklch(0.18 0.02 100);
|
||||
--sidebar-accent: oklch(0.28 0.02 100);
|
||||
--sidebar-accent-foreground: oklch(0.97 0.01 100);
|
||||
--sidebar-border: oklch(0.35 0.03 90);
|
||||
--sidebar-ring: oklch(0.75 0.18 60);
|
||||
|
||||
/* Action buttons - orange/green theme */
|
||||
--action-view: oklch(0.75 0.18 60); /* Orange */
|
||||
--action-view-hover: oklch(0.7 0.2 55);
|
||||
--action-followup: oklch(0.7 0.2 200); /* Blue */
|
||||
--action-followup-hover: oklch(0.65 0.22 200);
|
||||
--action-commit: oklch(0.75 0.22 130); /* Green #a6e22e */
|
||||
--action-commit-hover: oklch(0.7 0.24 130);
|
||||
--action-verify: oklch(0.75 0.22 130);
|
||||
--action-verify-hover: oklch(0.7 0.24 130);
|
||||
|
||||
/* Running indicator - Orange */
|
||||
--running-indicator: oklch(0.75 0.18 60);
|
||||
--running-indicator-text: oklch(0.8 0.16 60);
|
||||
}
|
||||
|
||||
/* Theme-specific overrides */
|
||||
|
||||
.ember .animated-outline-gradient {
|
||||
background: conic-gradient(from 90deg at 50% 50%, #fd971f 0%, #f92672 50%, #fd971f 100%);
|
||||
}
|
||||
|
||||
.ember .animated-outline-inner {
|
||||
background: oklch(0.2 0.02 100) !important;
|
||||
color: #fd971f !important;
|
||||
}
|
||||
|
||||
.ember [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
|
||||
background: oklch(0.28 0.02 100) !important;
|
||||
color: #fdbf6f !important;
|
||||
}
|
||||
|
||||
.ember .slider-track {
|
||||
background: oklch(0.28 0.02 100);
|
||||
}
|
||||
|
||||
.ember .slider-range {
|
||||
background: linear-gradient(to right, #fd971f, #fdbf6f);
|
||||
}
|
||||
|
||||
.ember .slider-thumb {
|
||||
background: oklch(0.2 0.02 100);
|
||||
border-color: #fd971f;
|
||||
}
|
||||
|
||||
/* XML Syntax Highlighting */
|
||||
.ember .xml-highlight {
|
||||
color: oklch(0.97 0.01 100);
|
||||
}
|
||||
|
||||
.ember .xml-tag-bracket {
|
||||
color: oklch(0.6 0.28 350); /* Pink */
|
||||
}
|
||||
|
||||
.ember .xml-tag-name {
|
||||
color: oklch(0.6 0.28 350); /* Pink */
|
||||
}
|
||||
|
||||
.ember .xml-attribute-name {
|
||||
color: oklch(0.75 0.22 130); /* Green */
|
||||
}
|
||||
|
||||
.ember .xml-attribute-equals {
|
||||
color: oklch(0.97 0.01 100);
|
||||
}
|
||||
|
||||
.ember .xml-attribute-value {
|
||||
color: oklch(0.85 0.15 95); /* Yellow */
|
||||
}
|
||||
|
||||
.ember .xml-comment {
|
||||
color: oklch(0.6 0.02 100);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ember .xml-cdata {
|
||||
color: oklch(0.7 0.2 200); /* Blue */
|
||||
}
|
||||
|
||||
.ember .xml-doctype {
|
||||
color: oklch(0.75 0.18 60); /* Orange */
|
||||
}
|
||||
|
||||
.ember .xml-text {
|
||||
color: oklch(0.97 0.01 100);
|
||||
}
|
||||
93
apps/ui/src/styles/themes/feather.css
Normal file
93
apps/ui/src/styles/themes/feather.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/* Feather Theme - Clean white with orange accent */
|
||||
|
||||
.feather {
|
||||
/* Backgrounds */
|
||||
--background: oklch(1 0 0);
|
||||
--background-50: oklch(1 0 0 / 0.5);
|
||||
--background-80: oklch(1 0 0 / 0.8);
|
||||
|
||||
/* Text - dark blue-gray #395063 */
|
||||
--foreground: oklch(0.38 0.03 230);
|
||||
--foreground-secondary: oklch(0.5 0.025 230);
|
||||
--foreground-muted: oklch(0.6 0.02 230);
|
||||
|
||||
/* Card/Popover */
|
||||
--card: oklch(0.99 0.001 250);
|
||||
--card-foreground: oklch(0.38 0.03 230);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.38 0.03 230);
|
||||
|
||||
/* Primary/Brand - orange #FF7B2E */
|
||||
--primary: oklch(0.7 0.2 45);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--brand-400: oklch(0.75 0.18 45);
|
||||
--brand-500: oklch(0.7 0.2 45);
|
||||
--brand-600: oklch(0.62 0.22 40);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.95 0.003 250);
|
||||
--secondary-foreground: oklch(0.38 0.03 230);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.96 0.003 250);
|
||||
--muted-foreground: oklch(0.55 0.02 230);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.97 0.003 250);
|
||||
--accent-foreground: oklch(0.38 0.03 230);
|
||||
|
||||
/* Destructive - orange-red */
|
||||
--destructive: oklch(0.55 0.22 30);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(0.9 0.003 250);
|
||||
--border-glass: oklch(0.38 0.03 230 / 0.1);
|
||||
|
||||
--input: oklch(1 0 0);
|
||||
--ring: oklch(0.7 0.2 45);
|
||||
|
||||
/* Charts */
|
||||
--chart-1: oklch(0.7 0.2 45);
|
||||
--chart-2: oklch(0.6 0.15 175);
|
||||
--chart-3: oklch(0.6 0.18 320);
|
||||
--chart-4: oklch(0.55 0.15 220);
|
||||
--chart-5: oklch(0.55 0.22 30);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.99 0.001 250);
|
||||
--sidebar-foreground: oklch(0.38 0.03 230);
|
||||
--sidebar-primary: oklch(0.7 0.2 45);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.96 0.003 250);
|
||||
--sidebar-accent-foreground: oklch(0.38 0.03 230);
|
||||
--sidebar-border: oklch(0.92 0.003 250);
|
||||
--sidebar-ring: oklch(0.7 0.2 45);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.7 0.2 45);
|
||||
--action-view-hover: oklch(0.62 0.22 40);
|
||||
--action-followup: oklch(0.55 0.15 220);
|
||||
--action-followup-hover: oklch(0.5 0.17 220);
|
||||
--action-commit: oklch(0.6 0.15 175);
|
||||
--action-commit-hover: oklch(0.55 0.17 175);
|
||||
--action-verify: oklch(0.6 0.15 175);
|
||||
--action-verify-hover: oklch(0.55 0.17 175);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.7 0.2 45);
|
||||
--running-indicator-text: oklch(0.62 0.22 40);
|
||||
|
||||
/* Status colors */
|
||||
--status-success: oklch(0.6 0.15 175);
|
||||
--status-success-bg: oklch(0.6 0.15 175 / 0.15);
|
||||
--status-warning: oklch(0.7 0.2 45);
|
||||
--status-warning-bg: oklch(0.7 0.2 45 / 0.15);
|
||||
--status-error: oklch(0.55 0.22 30);
|
||||
--status-error-bg: oklch(0.55 0.22 30 / 0.15);
|
||||
--status-info: oklch(0.55 0.15 220);
|
||||
--status-info-bg: oklch(0.55 0.15 220 / 0.15);
|
||||
--status-backlog: oklch(0.5 0 0);
|
||||
--status-in-progress: oklch(0.7 0.2 45);
|
||||
--status-waiting: oklch(0.65 0.18 50);
|
||||
}
|
||||
103
apps/ui/src/styles/themes/matcha.css
Normal file
103
apps/ui/src/styles/themes/matcha.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Matcha Theme
|
||||
* A calming dark theme with sage green and warm beige accents
|
||||
* Inspired by: https://github.com/lucafalasco/matcha
|
||||
*/
|
||||
|
||||
.matcha {
|
||||
/* Background layers - dark with subtle green undertone */
|
||||
--background: oklch(20% 0.015 145);
|
||||
--background-secondary: oklch(24% 0.015 145);
|
||||
--background-tertiary: oklch(16% 0.015 145);
|
||||
--background-50: oklch(20% 0.015 145 / 0.5);
|
||||
--background-80: oklch(20% 0.015 145 / 0.8);
|
||||
|
||||
/* Foreground / text - light with green tint */
|
||||
--foreground: oklch(90% 0.025 145);
|
||||
--foreground-secondary: oklch(70% 0.02 145);
|
||||
--foreground-muted: oklch(60% 0.015 145);
|
||||
|
||||
/* Brand / accent - sage green */
|
||||
--brand-400: oklch(72% 0.12 135);
|
||||
--brand-500: oklch(68% 0.14 135);
|
||||
--brand-600: oklch(62% 0.16 135);
|
||||
--primary: oklch(68% 0.14 135);
|
||||
--primary-foreground: oklch(15% 0.02 135);
|
||||
|
||||
/* Sidebar - slightly lighter with green tint */
|
||||
--sidebar: oklch(22% 0.02 145);
|
||||
--sidebar-foreground: oklch(90% 0.025 145);
|
||||
--sidebar-primary: oklch(68% 0.14 135);
|
||||
--sidebar-primary-foreground: oklch(15% 0.02 135);
|
||||
--sidebar-accent: oklch(28% 0.025 145);
|
||||
--sidebar-accent-foreground: oklch(90% 0.025 145);
|
||||
--sidebar-border: oklch(30% 0.02 145);
|
||||
--sidebar-ring: oklch(68% 0.14 135);
|
||||
|
||||
/* Cards */
|
||||
--card: oklch(22% 0.02 145);
|
||||
--card-foreground: oklch(90% 0.025 145);
|
||||
|
||||
/* Inputs */
|
||||
--input: oklch(18% 0.015 145);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(32% 0.025 145);
|
||||
--border-glass: oklch(90% 0.02 145 / 0.1);
|
||||
|
||||
/* Popover / Dropdown */
|
||||
--popover: oklch(20% 0.02 145);
|
||||
--popover-foreground: oklch(90% 0.025 145);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(28% 0.025 145);
|
||||
--secondary-foreground: oklch(90% 0.025 145);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(26% 0.02 145);
|
||||
--muted-foreground: oklch(65% 0.02 145);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(30% 0.03 145);
|
||||
--accent-foreground: oklch(90% 0.025 145);
|
||||
|
||||
/* Destructive */
|
||||
--destructive: oklch(60% 0.18 25);
|
||||
|
||||
/* Ring / Focus */
|
||||
--ring: oklch(68% 0.14 135);
|
||||
|
||||
/* Action buttons - warm beige */
|
||||
--action-view: oklch(78% 0.06 90);
|
||||
--action-view-hover: oklch(72% 0.07 90);
|
||||
--action-followup: oklch(68% 0.14 135);
|
||||
--action-followup-hover: oklch(62% 0.16 135);
|
||||
--action-commit: oklch(68% 0.14 135);
|
||||
--action-commit-hover: oklch(62% 0.16 135);
|
||||
--action-verify: oklch(68% 0.14 135);
|
||||
--action-verify-hover: oklch(62% 0.16 135);
|
||||
|
||||
/* Running indicator - sage green */
|
||||
--running-indicator: oklch(68% 0.14 135);
|
||||
--running-indicator-text: oklch(72% 0.12 135);
|
||||
|
||||
/* Status colors */
|
||||
--status-success: oklch(68% 0.14 135);
|
||||
--status-success-bg: oklch(68% 0.14 135 / 0.2);
|
||||
--status-warning: oklch(78% 0.12 85);
|
||||
--status-warning-bg: oklch(78% 0.12 85 / 0.2);
|
||||
--status-error: oklch(65% 0.18 25);
|
||||
--status-error-bg: oklch(65% 0.18 25 / 0.2);
|
||||
--status-info: oklch(68% 0.14 135);
|
||||
--status-info-bg: oklch(68% 0.14 135 / 0.2);
|
||||
--status-backlog: oklch(55% 0 0);
|
||||
--status-in-progress: oklch(78% 0.12 85);
|
||||
--status-waiting: oklch(70% 0.15 55);
|
||||
|
||||
/* Chart colors */
|
||||
--chart-1: oklch(68% 0.14 135);
|
||||
--chart-2: oklch(70% 0.1 170);
|
||||
--chart-3: oklch(78% 0.12 85);
|
||||
--chart-4: oklch(65% 0.12 280);
|
||||
--chart-5: oklch(60% 0.15 25);
|
||||
}
|
||||
93
apps/ui/src/styles/themes/onelight.css
Normal file
93
apps/ui/src/styles/themes/onelight.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/* Atom One Light Theme - Clean light with blue accent */
|
||||
|
||||
.onelight {
|
||||
/* Backgrounds */
|
||||
--background: oklch(0.98 0.002 250);
|
||||
--background-50: oklch(0.98 0.002 250 / 0.5);
|
||||
--background-80: oklch(0.98 0.002 250 / 0.8);
|
||||
|
||||
/* Text */
|
||||
--foreground: oklch(0.3 0.02 250);
|
||||
--foreground-secondary: oklch(0.45 0.02 250);
|
||||
--foreground-muted: oklch(0.55 0.015 250);
|
||||
|
||||
/* Card/Popover */
|
||||
--card: oklch(0.97 0.002 250);
|
||||
--card-foreground: oklch(0.3 0.02 250);
|
||||
--popover: oklch(0.98 0.002 250);
|
||||
--popover-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Primary/Brand - blue #526FFF */
|
||||
--primary: oklch(0.55 0.22 265);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--brand-400: oklch(0.6 0.2 265);
|
||||
--brand-500: oklch(0.55 0.22 265);
|
||||
--brand-600: oklch(0.5 0.24 265);
|
||||
|
||||
/* Secondary */
|
||||
--secondary: oklch(0.92 0.005 250);
|
||||
--secondary-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Muted */
|
||||
--muted: oklch(0.93 0.005 250);
|
||||
--muted-foreground: oklch(0.5 0.015 250);
|
||||
|
||||
/* Accent */
|
||||
--accent: oklch(0.94 0.005 250);
|
||||
--accent-foreground: oklch(0.3 0.02 250);
|
||||
|
||||
/* Destructive - red #E45649 */
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
|
||||
/* Borders */
|
||||
--border: oklch(0.88 0.005 250);
|
||||
--border-glass: oklch(0.3 0.02 250 / 0.1);
|
||||
|
||||
--input: oklch(0.98 0.002 250);
|
||||
--ring: oklch(0.55 0.22 265);
|
||||
|
||||
/* Charts */
|
||||
--chart-1: oklch(0.55 0.22 265);
|
||||
--chart-2: oklch(0.55 0.15 145);
|
||||
--chart-3: oklch(0.55 0.2 25);
|
||||
--chart-4: oklch(0.55 0.18 320);
|
||||
--chart-5: oklch(0.55 0.15 70);
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.93 0.005 250);
|
||||
--sidebar-foreground: oklch(0.3 0.02 250);
|
||||
--sidebar-primary: oklch(0.55 0.22 265);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.9 0.005 250);
|
||||
--sidebar-accent-foreground: oklch(0.3 0.02 250);
|
||||
--sidebar-border: oklch(0.88 0.005 250);
|
||||
--sidebar-ring: oklch(0.55 0.22 265);
|
||||
|
||||
/* Action buttons */
|
||||
--action-view: oklch(0.55 0.22 265);
|
||||
--action-view-hover: oklch(0.5 0.24 265);
|
||||
--action-followup: oklch(0.55 0.18 230);
|
||||
--action-followup-hover: oklch(0.5 0.2 230);
|
||||
--action-commit: oklch(0.55 0.15 145);
|
||||
--action-commit-hover: oklch(0.5 0.17 145);
|
||||
--action-verify: oklch(0.55 0.15 145);
|
||||
--action-verify-hover: oklch(0.5 0.17 145);
|
||||
|
||||
/* Running indicator */
|
||||
--running-indicator: oklch(0.55 0.22 265);
|
||||
--running-indicator-text: oklch(0.5 0.24 265);
|
||||
|
||||
/* Status colors */
|
||||
--status-success: oklch(0.55 0.15 145);
|
||||
--status-success-bg: oklch(0.55 0.15 145 / 0.15);
|
||||
--status-warning: oklch(0.7 0.15 70);
|
||||
--status-warning-bg: oklch(0.7 0.15 70 / 0.15);
|
||||
--status-error: oklch(0.55 0.2 25);
|
||||
--status-error-bg: oklch(0.55 0.2 25 / 0.15);
|
||||
--status-info: oklch(0.55 0.22 265);
|
||||
--status-info-bg: oklch(0.55 0.22 265 / 0.15);
|
||||
--status-backlog: oklch(0.5 0 0);
|
||||
--status-in-progress: oklch(0.7 0.15 70);
|
||||
--status-waiting: oklch(0.65 0.18 50);
|
||||
}
|
||||
Reference in New Issue
Block a user