/* * cms-core/css/theme-vars.css — gismc-core Global CSS Variables * * Namespaced CSS custom properties for the gismc-core framework. * All variables use the --gismc-color-* / --gismc-shadow-* namespace to * prevent collisions when used alongside third-party CSS. * * Usage: * - Load this file BEFORE admin.css in any gismc-core admin page. * - The consuming project's own CSS (e.g. css/theme.css) may define its own * --color-* variables independently — they do not conflict. * - Dark mode: set data-theme="dark" on . The [data-theme="dark"] * block overrides every :root variable defined here. * * Variable categories (32 total + 3 shadows): * Surface (5), Text (5), Brand/Accent (4), Border (3), * Admin (1), Status (4), Scrollbar (3), Code (4), Shadow (3) * * Task 3.7 — CSS Variable Namespace Migration: * These are the canonical gismc-core variable names. The consuming project's * css/theme.css uses --color-* names independently; update that file if * Tailwind bridge th-* classes are desired on the public site. */ /* ============================================================================= LIGHT THEME (default — :root) ============================================================================= */ :root { /* --- Surface / Background --- */ --gismc-color-bg-page: #f9fafb; /* gray-50 — main page background */ --gismc-color-bg-surface: #ffffff; /* white — card / panel background */ --gismc-color-bg-surface-alt: #f3f4f6; /* gray-100 — secondary surface, table headers */ --gismc-color-bg-overlay: rgba(0, 0, 0, 0.5); /* modal / lightbox backdrop */ --gismc-color-bg-header: rgba(249, 250, 251, 0.8); /* gray-50/80 — sticky nav */ /* --- Text --- */ --gismc-color-text-primary: #111827; /* gray-900 — headings, strong text */ --gismc-color-text-secondary: #4b5563; /* gray-600 — body text */ --gismc-color-text-muted: #9ca3af; /* gray-400 — captions, timestamps */ --gismc-color-text-inverse: #ffffff; /* text on dark backgrounds */ --gismc-color-text-heading: #1e3a8a; /* blue-900 — branded headings */ /* --- Brand / Accent --- */ --gismc-color-primary: #2563eb; /* blue-600 — primary buttons, active links */ --gismc-color-primary-hover: #1d4ed8; /* blue-700 — hover state */ --gismc-color-primary-light: #dbeafe; /* blue-100 — tinted badges, backgrounds */ --gismc-color-primary-text: #1e40af; /* blue-800 — text over primary-light */ /* --- Border & Divider --- */ --gismc-color-border: #e5e7eb; /* gray-200 — card borders, dividers */ --gismc-color-border-focus: #3b82f6; /* blue-500 — input / button focus ring */ --gismc-color-focus-ring: rgba(59, 130, 246, 0.1); /* blue-500/10 — box-shadow focus */ /* --- Admin --- */ --gismc-color-sidebar-active-bg: rgba(59, 130, 246, 0.1); /* blue-500/10 — sidebar active state */ /* --- Status Colors --- */ --gismc-color-success: #16a34a; /* green-600 — published, completed */ --gismc-color-warning: #ca8a04; /* yellow-600 — draft, in-progress */ --gismc-color-danger: #dc2626; /* red-600 — delete, error */ --gismc-color-info: #9333ea; /* purple-600 — media, special actions */ /* --- Scrollbar --- */ --gismc-color-scrollbar-track: #f1f5f9; /* slate-100 */ --gismc-color-scrollbar-thumb: #cbd5e1; /* slate-300 */ --gismc-color-scrollbar-thumb-hover: #94a3b8; /* slate-400 */ /* --- Code Blocks --- */ --gismc-color-code-bg-inline: #f3f4f6; /* gray-100 — inline code background */ --gismc-color-code-text-inline: #1f2937; /* gray-800 — inline code text */ --gismc-color-code-bg-block: #1f2937; /* gray-800 — fenced code block background */ --gismc-color-code-text-block: #f3f4f6; /* gray-100 — fenced code block text */ /* --- Shadows --- */ --gismc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --gismc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --gismc-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); } /* ============================================================================= DARK THEME — [data-theme="dark"] on Overrides every :root variable above. ============================================================================= */ [data-theme="dark"] { /* --- Surface / Background --- */ --gismc-color-bg-page: #0f172a; /* slate-900 — dark page background */ --gismc-color-bg-surface: #1e293b; /* slate-800 — card / panel background */ --gismc-color-bg-surface-alt: #334155; /* slate-700 — secondary surface */ --gismc-color-bg-overlay: rgba(0, 0, 0, 0.7); --gismc-color-bg-header: rgba(15, 23, 42, 0.95); /* slate-900/95 — sticky nav */ /* --- Text --- */ --gismc-color-text-primary: #f1f5f9; /* slate-100 — off-white */ --gismc-color-text-secondary: #94a3b8; /* slate-400 — body text */ --gismc-color-text-muted: #64748b; /* slate-500 — captions */ --gismc-color-text-inverse: #0f172a; /* slate-900 */ --gismc-color-text-heading: #bfdbfe; /* blue-200 — branded headings on dark */ /* --- Brand / Accent --- */ --gismc-color-primary: #3b82f6; /* blue-500 — brighter for dark */ --gismc-color-primary-hover: #2563eb; /* blue-600 */ --gismc-color-primary-light: #1e3a8a; /* blue-900 — dark badge background */ --gismc-color-primary-text: #bfdbfe; /* blue-200 */ /* --- Border & Divider --- */ --gismc-color-border: #334155; /* slate-700 */ --gismc-color-border-focus: #60a5fa; /* blue-400 — lighter for dark */ --gismc-color-focus-ring: rgba(96, 165, 250, 0.15); /* blue-400/15 */ /* --- Admin --- */ --gismc-color-sidebar-active-bg: rgba(59, 130, 246, 0.15); /* --- Status Colors (one stop lighter for dark surfaces) --- */ --gismc-color-success: #22c55e; /* green-500 */ --gismc-color-warning: #eab308; /* yellow-500 */ --gismc-color-danger: #ef4444; /* red-500 */ --gismc-color-info: #a855f7; /* purple-500 */ /* --- Scrollbar --- */ --gismc-color-scrollbar-track: #1e293b; /* slate-800 */ --gismc-color-scrollbar-thumb: #334155; /* slate-700 */ --gismc-color-scrollbar-thumb-hover: #475569; /* slate-600 */ /* --- Code Blocks --- */ --gismc-color-code-bg-inline: #334155; /* slate-700 */ --gismc-color-code-text-inline: #e2e8f0; /* slate-200 */ /* code block colors intentionally unchanged in dark — already dark */ /* --- Shadows (more diffuse on dark) --- */ --gismc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --gismc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2); --gismc-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 10px 10px -5px rgb(0 0 0 / 0.2); } /* ============================================================================= NO-TRANSITIONS GUARD Applied by the FOUC script before first paint; removed via rAF after load. ============================================================================= */ .no-transitions, .no-transitions * { transition: none !important; }