Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: Map Tailwind colors to base CSS variables for dynamic dark mode resolution
All checks were successful
Automated Container Build / build-and-push (push) Successful in 53s
Details

Browse source
This commit is contained in:
Elijah 2026-06-27 21:02:06 -07:00
parent 87fc071961
commit 8ac95df772
1 changed files with 83 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

138
src/app/globals.css
View file

@ -1,71 +1,99 @@
@import "tailwindcss";
@layer base {
:root {
--theme-bg-base: #f0f4f2;
--theme-bg-surface: #ffffff;
--theme-bg-surface-alt: #f4f7f5;
--theme-bg-callout: #e8f4f0;
--theme-primary: #2a7d7d;
--theme-primary-hover: #1f6363;
--theme-primary-light: #3a9e9e;
--theme-text-heading: #1a2f2f;
--theme-text-body: #2d4a4a;
--theme-text-secondary: #4a6a6a;
--theme-text-muted: #7a9a9a;
--theme-border: #c8d8d0;
--theme-border-light: #dce8e2;
--theme-success: #2d8a4e;
--theme-success-bg: #e8f5ed;
--theme-error: #c44c4c;
--theme-error-bg: #fce8e8;
--theme-badge-bg: #e0eeea;
--theme-badge-text: #2a6a5a;
--theme-danger: #dc3545;
--theme-danger-hover: #c82333;
--theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
}
:root.dark {
--theme-bg-base: #0f1614;
--theme-bg-surface: #17221f;
--theme-bg-surface-alt: #1e2d28;
--theme-bg-callout: #1a332a;
--theme-primary: #4ab2b2;
--theme-primary-hover: #5ec7c7;
--theme-primary-light: #6cd1d1;
--theme-text-heading: #e4f0ec;
--theme-text-body: #c3d9d3;
--theme-text-secondary: #9cb8b0;
--theme-text-muted: #6b8a81;
--theme-border: #38524a;
--theme-border-light: #253832;
--theme-success: #4ade80;
--theme-success-bg: #143621;
--theme-error: #f87171;
--theme-error-bg: #3b1c1c;
--theme-badge-bg: #214035;
--theme-badge-text: #6fd6b8;
--theme-danger: #ef4444;
--theme-danger-hover: #f87171;
--theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
--theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
--theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
}
}
@theme inline {
/* ── Sage / Teal palette from reference image ── */
--color-bg-base: #f0f4f2;
--color-bg-surface: #ffffff;
--color-bg-surface-alt: #f4f7f5;
--color-bg-callout: #e8f4f0;
--color-primary: #2a7d7d;
--color-primary-hover: #1f6363;
--color-primary-light: #3a9e9e;
--color-text-heading: #1a2f2f;
--color-text-body: #2d4a4a;
--color-text-secondary: #4a6a6a;
--color-text-muted: #7a9a9a;
--color-border: #c8d8d0;
--color-border-light: #dce8e2;
--color-success: #2d8a4e;
--color-success-bg: #e8f5ed;
--color-error: #c44c4c;
--color-error-bg: #fce8e8;
--color-badge-bg: #e0eeea;
--color-badge-text: #2a6a5a;
--color-danger: #dc3545;
--color-danger-hover: #c82333;
/* ── Sage / Teal palette mapped from CSS variables ── */
--color-bg-base: var(--theme-bg-base);
--color-bg-surface: var(--theme-bg-surface);
--color-bg-surface-alt: var(--theme-bg-surface-alt);
--color-bg-callout: var(--theme-bg-callout);
--color-primary: var(--theme-primary);
--color-primary-hover: var(--theme-primary-hover);
--color-primary-light: var(--theme-primary-light);
--color-text-heading: var(--theme-text-heading);
--color-text-body: var(--theme-text-body);
--color-text-secondary: var(--theme-text-secondary);
--color-text-muted: var(--theme-text-muted);
--color-border: var(--theme-border);
--color-border-light: var(--theme-border-light);
--color-success: var(--theme-success);
--color-success-bg: var(--theme-success-bg);
--color-error: var(--theme-error);
--color-error-bg: var(--theme-error-bg);
--color-badge-bg: var(--theme-badge-bg);
--color-badge-text: var(--theme-badge-text);
--color-danger: var(--theme-danger);
--color-danger-hover: var(--theme-danger-hover);
/* Typography */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
/* Shadows */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
--shadow-card: var(--theme-shadow-card);
--shadow-card-hover: var(--theme-shadow-card-hover);
--shadow-modal: var(--theme-shadow-modal);
/* Animations */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@layer base {
.dark {
--color-bg-base: #0f1614;
--color-bg-surface: #17221f;
--color-bg-surface-alt: #1e2d28;
--color-bg-callout: #1a332a;
--color-primary: #4ab2b2;
--color-primary-hover: #5ec7c7;
--color-primary-light: #6cd1d1;
--color-text-heading: #e4f0ec;
--color-text-body: #c3d9d3;
--color-text-secondary: #9cb8b0;
--color-text-muted: #6b8a81;
--color-border: #38524a;
--color-border-light: #253832;
--color-success: #4ade80;
--color-success-bg: #143621;
--color-error: #f87171;
--color-error-bg: #3b1c1c;
--color-badge-bg: #214035;
--color-badge-text: #6fd6b8;
--color-danger: #ef4444;
--color-danger-hover: #f87171;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
}
}
/* ── Base Styles ── */
body {
background: var(--color-bg-base);