/* * app-tokens.css * FoodPantry * * Created by Tolu Oridota on 8/8/23. * Copyright © 2023 Nexus Connect. All rights reserved. * * Brand color tokens + Bootstrap 5.3 theme overrides. * * Why this file exists (and lives separate from user.min.css): * The Phoenix theme ships a hollow `user.min.css` meant for user overrides. * Instead of editing the minified file by hand, we load THIS file AFTER * theme.min.css and user.min.css in head.ejs so its :root cascade wins. * Keeping tokens in their own file means: * - Easy to diff in PRs (branding changes are isolated) * - Easy to swap themes in the future (replace one ) * - Source mapping stays intact for the Phoenix minified CSS * * Layered structure (top → bottom): * 1. Raw brand palette — --app-* primitives. The template ships a * neutral palette (Bootstrap-adjacent blue + * amber accent). Replace these values with * your product's real palette on fork. * 2. Semantic app tokens — --color-* aliases for app-level usage * (e.g. --color-primary-hover) so component * CSS doesn't hardcode hex values. * 3. Bootstrap overrides — --bs-* variables Bootstrap 5.3 reads at * runtime. Overriding these reskins every * btn, badge, alert, bg-*, text-*, border-* * utility in one shot. Both the hex form * AND the rgb triplet form are required — * Bootstrap uses the triplet inside rgba() * calls (e.g. box-shadow tints on :focus). * * Dark mode: Phoenix listens to `data-bs-theme="dark"` on . The * block at the bottom of this file overrides a few tokens that need to * stay legible against a near-black background (dark navy loses too * much contrast, so we brighten primary links to a lighter blue and * promote the accent on hover). */ :root { /* ── 1. Raw brand palette ──────────────────────────────────────────── * * REPLACE THESE VALUES ON FORK with your product's real palette. The * defaults are a neutral blue + amber that read as "professional web * app" without imprinting any specific brand identity. */ --app-primary-900: #0B3A6F; /* deep blue — headlines, dark accents */ --app-primary-700: #1260B3; /* primary blue — buttons, links */ --app-primary-500: #2988E6; /* bright blue — focus rings, info */ --app-accent: #E4A218; /* amber — secondary accent / CTAs */ --app-accent-soft: #FCD85B; /* light amber — hover, highlights */ --app-ink-900: #0B0F14; /* near-black — highest-contrast text */ --app-ink-700: #1F2937; /* slate 900 — body text */ --app-ink-500: #5F6364; /* muted steel — secondary text */ --app-ink-300: #A2A5A6; /* silver — disabled / icons */ --app-rule: #DDDFDF; /* hairline — borders, dividers */ --app-bg: #F5F7FA; /* page background — cool off-white */ --app-surface: #FFFFFF; /* card / surface */ /* ── 2. Semantic app tokens (use these in custom component CSS) ──── */ --color-primary: var(--app-primary-700); --color-primary-hover: var(--app-primary-900); --color-accent: var(--app-accent); --color-accent-soft: var(--app-accent-soft); --color-bg: var(--app-bg); --color-surface: var(--app-surface); --color-text: var(--app-ink-700); --color-text-muted: var(--app-ink-500); --color-border: var(--app-rule); --color-success: #198754; --color-danger: #DC3545; --color-warning: var(--app-accent); --color-info: var(--app-primary-500); /* ── 3. Bootstrap 5.3 theme variables ──────────────────────────────── */ /* Both `--bs-` (hex, used directly by components) and the `--bs--rgb` triplet (used inside rgba() for focus rings, alert backgrounds, table-striped tints, etc.) must be set. */ --bs-primary: #1260B3; --bs-primary-rgb: 18, 96, 179; --bs-secondary: #A2A5A6; --bs-secondary-rgb: 162, 165, 166; --bs-success: #198754; --bs-success-rgb: 25, 135, 84; --bs-info: #2988E6; --bs-info-rgb: 41, 136, 230; --bs-warning: #E4A218; --bs-warning-rgb: 228, 162, 24; --bs-danger: #DC3545; --bs-danger-rgb: 220, 53, 69; --bs-light: #F5F7FA; --bs-light-rgb: 245, 247, 250; --bs-dark: #0B3A6F; --bs-dark-rgb: 11, 58, 111; /* Link color + hover — default Bootstrap uses --bs-primary, but the hover color defaults to a computed darker shade. Pin it to the deep-blue primary-900 so hover reads as a deliberate deepening of the brand color rather than whatever Bootstrap happens to compute. */ --bs-link-color: #1260B3; --bs-link-color-rgb: 18, 96, 179; --bs-link-hover-color: #0B3A6F; --bs-link-hover-color-rgb: 11, 58, 111; } /* * Dark-mode overrides. Phoenix toggles `data-bs-theme="dark"` on * when the user clicks the moon icon. Bootstrap's default dark palette * desaturates primary — we want something legible against the dark * background. Brighten primary to primary-500 and make link hover the * amber accent so it pops against near-black. */ [data-bs-theme="dark"] { --bs-primary: #2988E6; --bs-primary-rgb: 41, 136, 230; --bs-link-color: #2988E6; --bs-link-color-rgb: 41, 136, 230; --bs-link-hover-color: #FCD85B; --bs-link-hover-color-rgb: 252, 216, 91; } /* * ── Table edge padding inside flush card bodies ────────────────────── * * Pattern used across the app (admin user-management tables, and any * table a fork drops into a flush card body): * *
*
* * ... * * The `.p-0` on .card-body lets the table bleed edge-to-edge (so the * row divider lines span the full card width — visually cleaner than a * table floating inside card padding). But Bootstrap's default cell * padding only spaces cells FROM EACH OTHER — the first cell's left * edge and the last cell's right edge end up flush against the card * border, which reads as a layout bug. * * Fix: add horizontal breathing room to the first and last cell of * every row (both and ). 1rem matches Bootstrap's * `ps-3` / `pe-3` utility scale, which is the padding you'd apply * manually per-cell without this rule. * * Selector walk: * .card-body.p-0 the flush card body * > .table-responsive Bootstrap's scroll wrapper * > .table the table itself * > :not(caption) skip ) * > :first-child / :last-child first or last cell in that row * * Using padding-inline-* instead of padding-left/-right keeps the rule * RTL-friendly (matches Bootstrap 5's own logical-property convention). */ .card-body.p-0 > .table-responsive > .table > :not(caption) > * > :first-child { padding-inline-start: 1rem; } .card-body.p-0 > .table-responsive > .table > :not(caption) > * > :last-child { padding-inline-end: 1rem; }
FirstLast
, pick thead/tbody/tfoot * > * every row (