glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add color variables and use them acros the project

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-10 23:19:27 +03:00
parent 8aad8942fc
commit d749f86edc
20 changed files with 134 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/styles/app.css
View File

@@ -37,6 +37,26 @@
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.015 286.067);
--background-20: oklch(1 0 0 / 20%);
--background-40: oklch(1 0 0 / 40%);
--background-60: oklch(1 0 0 / 60%);
--background-80: oklch(1 0 0 / 80%);
--background-95: oklch(1 0 0 / 95%);
--background-subtle: oklch(0.98 0 0);
--background-muted: oklch(0.97 0.002 286.375);
--text-muted: oklch(0.552 0.016 285.938);
--text-subtle: oklch(0.705 0.015 286.067);
--text-soft: oklch(0.5 0.01 286);
--border-subtle: oklch(0.95 0.003 286.32);
--border-muted: oklch(0.92 0.004 286.32);
--border-soft: oklch(0.88 0.005 286.32);
--gradient-from: oklch(0.98 0.002 286.32);
--gradient-via: oklch(1 0 0);
--gradient-to: oklch(0.98 0.002 286.32);
}
.dark {
@@ -71,6 +91,26 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.552 0.016 285.938);
--background-20: oklch(0.21 0.006 285.885 / 20%);
--background-40: oklch(0.21 0.006 285.885 / 40%);
--background-60: oklch(0.21 0.006 285.885 / 60%);
--background-80: oklch(0.21 0.006 285.885 / 80%);
--background-95: oklch(0.21 0.006 285.885 / 95%);
--background-subtle: oklch(0.18 0.005 285.823);
--background-muted: oklch(0.274 0.006 286.033);
--text-muted: oklch(0.705 0.015 286.067);
--text-subtle: oklch(0.552 0.016 285.938);
--text-soft: oklch(0.8 0.01 286);
--border-subtle: oklch(1 0 0 / 8%);
--border-muted: oklch(1 0 0 / 10%);
--border-soft: oklch(1 0 0 / 15%);
--gradient-from: oklch(0.25 0.005 285.885);
--gradient-via: oklch(0.21 0.006 285.885);
--gradient-to: oklch(0.25 0.005 285.885);
}
@theme inline {
@@ -109,6 +149,22 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-background-20: var(--background-20);
--color-background-40: var(--background-40);
--color-background-60: var(--background-60);
--color-background-80: var(--background-80);
--color-background-95: var(--background-95);
--color-background-subtle: var(--background-subtle);
--color-background-muted: var(--background-muted);
--color-text-muted: var(--text-muted);
--color-text-subtle: var(--text-subtle);
--color-text-soft: var(--text-soft);
--color-border-subtle: var(--border-subtle);
--color-border-muted: var(--border-muted);
--color-border-soft: var(--border-soft);
--color-gradient-from: var(--gradient-from);
--color-gradient-via: var(--gradient-via);
--color-gradient-to: var(--gradient-to);
}
@layer base {