druid/css/tokens.css

/* @file Design tokens for the druid theme.
 * Custom properties live in the `tokens` cascade layer so any later layer
 * (base, layout, components, utilities) can reference them without
 * specificity concerns. To override a token in a narrower scope, re-declare
 * it on a more specific selector inside a later layer — e.g. inside
 * `@layer components { .card { --surface-1: #fafafa; } }`.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * Adding tokens cherry-picked from Open Props
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Open Props (https://open-props.style) is a library of pre-made CSS custom
 * properties. We do NOT import the full library — instead, copy just the
 * individual props we use, here, by hand.
 *
 * Why cherry-pick rather than @import the whole bundle:
 *   - Keeps payload small (the full library is ~20KB of props we'd never use).
 *   - No build step / dependency to manage.
 *   - You can see, in one file, every token the theme actually relies on.
 *
 * Workflow:
 *   1. Browse https://open-props.style and find the token you want
 *      (e.g. `--shadow-3`, `--ease-elastic-1`, `--gray-7`).
 *   2. Copy its declaration line — both the name and the value — into the
 *      appropriate section below. Preserve the Open Props name so you can
 *      look it up again later; rename only when you have a clear reason.
 *   3. If you copy a token that depends on another OP token (e.g. a shadow
 *      that references `--shadow-color`), copy that one too.
 *   4. Save. No build step, no `drush cr` needed for token *value* changes;
 *      a cache rebuild is only needed when adding/removing files or library
 *      entries.
 *
 * Reference for the source values:
 *   - Live docs:   https://open-props.style
 *   - Source CSS:  https://github.com/argyleink/open-props/tree/main/src
 */
@layer tokens {
  :root {
    /* Typography — families registered in css/fonts.css; applied in css/base.css.
       --font-sans   body text (Open Sans, self-hosted variable font, weights 300–800)
       --font-serif  headings (Adelle, self-hosted, Regular/Italic/Bold/BoldItalic)
       System fallbacks ensure usable text before the @font-face files load. */
    --font-sans: "Open Sans", system-ui, sans-serif;
    --font-serif: "Adelle", Georgia, "Times New Roman", serif;

    /* Sizing scale — hand-picked, loosely follows Open Props `--size-N`. */
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 1rem;
    --size-4: 1.5rem;

    /* Layout sizing — shared width caps for centered content rails. */
    --content-max-width: 1180px;
    --sidebar-width: 240px;

    /* Border radius */
    --radius-1: 4px;
    --radius-2: 6px;
    --radius-3: 8px;

    /* Surfaces (backgrounds) */
    --surface-1: #ffffff;
    --surface-2: #f5f5f5;
    --surface-dark: #333;

    /* Text colors */
    --text-1: #111;
    --text-2: #555;
    --text-on-dark: #fff;

    /* Borders / dividers */
    --border-1: #ccc;

    /* Easing — cherry-picked from Open Props (props.easing.css). */
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);

    /* Typography scale — cherry-picked from Open Props (props.fontsize.css). */
    --font-size-0: 0.75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;

    /* Line heights — cherry-picked from Open Props (props.font-lineheight.css). */
    --font-lineheight-1: 1.25;
    --font-lineheight-3: 1.5;

    /* Brand */
    --upei-yellow: #fdc902;
    --upei-green: #5c8727;
    --upei-dark-red: #691803;
    --upei-red: #8c2004;
    --upei-orange: #fbb040;
    --brand: hsl(210 90% 50%);
    --brand: #8c2004;

    /* Sizes */
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-5: 1.5rem;
    --size-6: 1.75rem;
    --size-7: 2rem;
    --size-8: 3rem;
    --size-9: 4rem;
    --size-10: 5rem;
    --size-11: 7.5rem;
    --size-12: 10rem;
    --size-13: 15rem;
    --size-14: 20rem;
    --size-15: 30rem;
    --size-px-000: -8px;
    --size-px-00: -4px;
    --size-px-1: 4px;
    --size-px-2: 8px;
    --size-px-3: 16px;
    --size-px-4: 20px;
    --size-px-5: 24px;
    --size-px-6: 28px;
    --size-px-7: 32px;
    --size-px-8: 48px;
    --size-px-9: 64px;
    --size-px-10: 80px;
    --size-px-11: 120px;
    --size-px-12: 160px;
    --size-px-13: 240px;
    --size-px-14: 320px;
    --size-px-15: 480px;
    --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
    --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
    --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
    --size-fluid-4: clamp(2rem, 4vw, 3rem);
    --size-fluid-5: clamp(4rem, 5vw, 5rem);
    --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
    --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
    --size-fluid-8: clamp(10rem, 20vw, 15rem);
    --size-fluid-9: clamp(15rem, 30vw, 20rem);
    --size-fluid-10: clamp(20rem, 40vw, 30rem);
    --size-content-1: 20ch;
    --size-content-2: 45ch;
    --size-content-3: 60ch;
    --size-header-1: 20ch;
    --size-header-2: 25ch;
    --size-header-3: 35ch;
    --size-xxs: 240px;
    --size-xs: 360px;
    --size-sm: 480px;
    --size-md: 768px;
    --size-lg: 1024px;
    --size-xl: 1440px;
    --size-xxl: 1920px;
    --size-relative-000: -0.5ch;
    --size-relative-00: -0.25ch;
    --size-relative-1: 0.25ch;
    --size-relative-2: 0.5ch;
    --size-relative-3: 1ch;
    --size-relative-4: 1.25ch;
    --size-relative-5: 1.5ch;
    --size-relative-6: 1.75ch;
    --size-relative-7: 2ch;
    --size-relative-8: 3ch;
    --size-relative-9: 4ch;
    --size-relative-10: 5ch;
    --size-relative-11: 7.5ch;
    --size-relative-12: 10ch;
    --size-relative-13: 15ch;
    --size-relative-14: 20ch;
    --size-relative-15: 30ch;
  }
}