/* Kofferly brand theme (issue #54) * ============================================================================= * Per-blog theme file. Linked by BlogThemingHelper#blog_theme_stylesheet_link_tag * AFTER stylesheet_link_tag :app, so this unlayered :root beats the bundle's * unlayered :root defaults on source order. * * LOGICAL PATH IS THE BARE FILENAME -- "theme-kofferly.css", NOT * "blog_themes/theme-kofferly.css". Rails declares paths.add "lib/assets", glob: "*", * so lib/assets/blog_themes IS the Propshaft load-path root, not lib/assets. * * Under Kofferly this file is deliberately a NO-OP: every value below restates the * base's default. That is the point -- it makes the theming seam real and provable * while keeping the render pixel-identical. * * CONTRACT for a new theme: * - :root is REQUIRED and must define BOTH ramps, all ELEVEN stops (50..900 + 950). * - .dark is OPTIONAL. Omit it and the base's neutral dark set applies unchanged; * the base re-derives --interactive-* from --brand-primary-* at dark-mode stops, * so a theme never restates those for dark mode. * - DO NOT define --interactive-*. The base derives all four from --brand-primary-*. * - --font-* is a safe optional override. * - ⚠️ --surface-*, --content-* and --border-* are a TRAP, not a free override. * The base sets each of them TWICE -- once in :root and again in .dark -- and * :root and .dark have EQUAL specificity (0,1,0; .dark is applied to , * which IS :root). This file loads AFTER the bundle, so source order decides * and a theme's `:root { --surface-primary: ... }` beats the bundle's * `.dark { --surface-primary: ... }`: LIGHT surfaces in dark mode, on every * page, with no error and nothing in the console. The rule: override such a * variable in BOTH your own :root AND your own .dark, or not at all. The two * brand ramps are exempt only because .dark never sets --brand-*. * - CONTRAST OBLIGATION -- BOTH the 700 and the 600 stops. 700 is what the base * uses for headings/emphasis text on light surfaces; 600 is what it uses for * LINKS and primary buttons, via --interactive-link and --interactive-primary * (91 interactive-* utility occurrences across 28 view files), plus `a:hover`, * `.blog-prose a:hover`, `.blog-prose code`, `.btn-amber`, `.nav-top__link.active`, * `.nav-bottom__item:hover` and blog_helper's category_color/category_tab_*. * A 700 stop below 4.5:1 on --surface-primary ships an app-wide AA failure. * Kofferly's own 600 stops already fail (sky-600 4.10:1, amber-600 3.19:1) -- * pre-existing, #98's to fix -- so aiming a NEW theme's 600 stops at >=4.5:1 * stops that base failure propagating to a new blog rather than merely matching * it. Not enforceable in CSS. * ============================================================================= */ :root { /* Primary brand ramp -- sky */ --brand-primary-50: #f0f9ff; --brand-primary-100: #e0f2fe; --brand-primary-200: #bae6fd; --brand-primary-300: #7dd3fc; --brand-primary-400: #38bdf8; --brand-primary-500: #0ea5e9; --brand-primary-600: #0284c7; --brand-primary-700: #0369a1; --brand-primary-800: #075985; --brand-primary-900: #0c4a6e; /* Tailwind v4's built-in sky-950, verbatim in oklch. NOT a hex approximation: the 22 live -950 utilities resolve to exactly this today. */ --brand-primary-950: oklch(29.3% 0.066 243.157); /* Secondary brand ramp -- amber */ --brand-secondary-50: #fffbeb; --brand-secondary-100: #fef3c7; --brand-secondary-200: #fde68a; --brand-secondary-300: #fcd34d; --brand-secondary-400: #fbbf24; --brand-secondary-500: #f59e0b; --brand-secondary-600: #d97706; --brand-secondary-700: #b45309; --brand-secondary-800: #92400e; --brand-secondary-900: #78350f; /* Tailwind v4's built-in amber-950, verbatim in oklch. */ --brand-secondary-950: oklch(27.9% 0.077 45.635); }