marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: deep black dark + pure white light theme tokens

Browse Source 
- Canvas: oklch(1 0 0) light / oklch(0 0 0) dark (true black)
- Surface: oklch(0.98 0 0) light / oklch(0.07 0 0) dark
- Ink: oklch(0.08 0 0) light / oklch(1 0 0) dark (pure white)
- Ink-soft: oklch(0.40 0 0) light / oklch(0.72 0 0) dark
- Border: oklch(0.92 0 0) light / oklch(0.17 0 0) dark
- Accent: oklch(0.45 0.18 250) light / oklch(0.68 0.20 250) dark
- Shadow-card updated for both modes
This commit is contained in:
Krishna Ayyalasomayajula
2026-06-01 22:35:35 -05:00
parent 04adc7b896
commit 52b955de86
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/globals.css
View File

@@ -6,12 +6,12 @@
/* === Design Tokens === */ /* === Design Tokens === */
@theme { @theme {
/* Colors — Light mode defaults */ /* Colors — Light mode defaults */
--color-canvas: oklch(0.99 0 0); --color-canvas: oklch(1 0 0);
--color-surface: oklch(0.97 0.005 240); --color-surface: oklch(0.98 0 0);
--color-ink: oklch(0.15 0.006 240); --color-ink: oklch(0.08 0 0);
--color-ink-soft: oklch(0.45 0.008 240); --color-ink-soft: oklch(0.40 0 0);
--color-border: oklch(0.88 0.008 240); --color-border: oklch(0.92 0 0);
--color-accent: oklch(0.55 0.18 250); --color-accent: oklch(0.45 0.18 250);
/* Fonts — override defaults */ /* Fonts — override defaults */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
@@ -30,7 +30,7 @@
--text-5xl: 3rem; --text-5xl--line-height: 1.1; --text-5xl: 3rem; --text-5xl--line-height: 1.1;
/* Shadows */ /* Shadows */
--shadow-card: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08);
/* Animations */ /* Animations */
--animate-fade-in: fade-in 0.3s ease-out; --animate-fade-in: fade-in 0.3s ease-out;
@@ -83,11 +83,13 @@
/* === Dark mode token overrides === */ /* === Dark mode token overrides === */
.dark { .dark {
--color-canvas: oklch(0.12 0.02 240); --color-canvas: oklch(0 0 0);
--color-surface: oklch(0.18 0.02 240); --color-surface: oklch(0.07 0 0);
--color-ink: oklch(0.96 0.005 240); --color-ink: oklch(1 0 0);
--color-ink-soft: oklch(0.75 0.01 240); --color-ink-soft: oklch(0.72 0 0);
--color-border: oklch(0.28 0.025 240); --color-border: oklch(0.17 0 0);
--color-accent: oklch(0.68 0.20 250);
--shadow-card: 0 1px 4px oklch(1 0 0 / 0.06);
} }
/* === Blog typography === */ /* === Blog typography === */