/* ============================================================================= * tH-necco — DESIGN TOKENS * * THIS IS THE ONLY FILE YOU NEED TO EDIT TO RE-SKIN THE WHOLE THEME. * * Edit a value here, save, hard-refresh the browser. No npm, no build step, * no cache to clear. Every Tailwind colour utility in the theme resolves to * these variables at runtime, and so does the block editor palette. * * Two rules when editing colours: * 1. Change the hex on the `--color-*` line. * 2. Change the matching `--color-*-rgb` line to the same colour as three * space-separated 0-255 channels (e.g. #243770 -> 36 55 112). * The -rgb twin is what makes opacity modifiers work, e.g. * `bg-accent-primary/50`. Skip it and that colour will simply ignore * the /50 — the solid colour still works. * Quick convert: https://www.google.com/search?q=243770+to+rgb * * Where each token lands is documented in README.md -> "Design tokens". * ========================================================================== */ :root { /* --- Colours -------------------------------------------------------- */ --color-accent-primary: #243770; --color-accent-secondary: #e42026; --color-accent-tertiary: #c92026; --color-background-page: #ffffff; --color-border-4: #333333; --color-border-primary: #e8e8e8; --color-border-secondary: #e42026; --color-border-tertiary: #ffffff; --color-surface-4: #c4c4c4; --color-surface-5: #040c23; --color-surface-6: #f2f2f0; --color-surface-7: #d7d7d7; --color-surface-8: #e2e3de; --color-surface-9: #050c24; --color-surface-10: #f2f3f5; --color-surface-primary: #ffffff; --color-surface-secondary: #d9d9d9; --color-surface-tertiary: #000000; --color-text-4: #e42026; --color-text-5: #efefef; --color-text-primary: #ffffff; --color-text-secondary: #606060; --color-text-tertiary: #333333; /* --- Colours as RGB channels (enables /opacity) ---------------------- */ --color-accent-primary-rgb: 36 55 112; --color-accent-secondary-rgb: 228 32 38; --color-accent-tertiary-rgb: 201 32 38; --color-background-page-rgb: 255 255 255; --color-border-4-rgb: 51 51 51; --color-border-primary-rgb: 232 232 232; --color-border-secondary-rgb: 228 32 38; --color-border-tertiary-rgb: 255 255 255; --color-surface-4-rgb: 196 196 196; --color-surface-5-rgb: 4 12 35; --color-surface-6-rgb: 242 242 240; --color-surface-7-rgb: 215 215 215; --color-surface-8-rgb: 226 227 222; --color-surface-9-rgb: 5 12 36; --color-surface-10-rgb: 242 243 245; --color-surface-primary-rgb: 255 255 255; --color-surface-secondary-rgb: 217 217 217; --color-surface-tertiary-rgb: 0 0 0; --color-text-4-rgb: 228 32 38; --color-text-5-rgb: 239 239 239; --color-text-primary-rgb: 255 255 255; --color-text-secondary-rgb: 96 96 96; --color-text-tertiary-rgb: 51 51 51; /* --- Font families --------------------------------------------------- */ --typography-font-family-primary: "Instrument Sans", sans-serif; --typography-font-family-2: "Intel One Mono", monospace; --typography-font-family-3: "Archivo", sans-serif; --typography-font-family-4: "Inter", sans-serif; /* --- Font weights ---------------------------------------------------- */ --typography-font-style-regular: 400; --typography-font-style-medium: 500; --typography-font-style-semibold: 600; --typography-font-style-bold: 700; --typography-font-style-extrabold: 800; /* --- Font sizes ------------------------------------------------------ */ --typography-font-size-8-729: 8.729px; --typography-font-size-9-076: 9.076px; --typography-font-size-9-35: 9.35px; --typography-font-size-12-697: 12.697px; --typography-font-size-13-201: 13.201px; --typography-font-size-13-6: 13.6px; --typography-font-size-14: 14px; --typography-font-size-16: 16px; --typography-font-size-20: 20px; --typography-font-size-22: 22px; --typography-font-size-26: 26px; --typography-font-size-28: 28px; --typography-font-size-38: 38px; --typography-font-size-40: 40px; --typography-font-size-50: 50px; --typography-font-size-68: 68px; --typography-font-size-84: 84px; --typography-font-size-200: 200px; /* --- Line heights ---------------------------------------------------- */ --typography-line-height-pixels-20: 20px; --typography-line-height-pixels-24: 24px; /* --- Letter spacing -------------------------------------------------- */ --typography-letter-spacing-percent-neg-2: -0.02em; --typography-letter-spacing-percent-0: 0em; --typography-letter-spacing-percent-2: 0.02em; /* --- Spacing --------------------------------------------------------- */ --spacing-0: 0px; --spacing-2: 2px; --spacing-3-174: 3.174px; --spacing-3-3: 3.3px; --spacing-3-4: 3.4px; --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px; --spacing-12: 12px; --spacing-14: 14px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-30: 30px; --spacing-32: 32px; --spacing-40: 40px; --spacing-60: 60px; --spacing-85: 85px; --spacing-634: 634px; --spacing-775: 775px; --spacing-799: 799px; --spacing-1368: 1368px; /* --- Corner radii ---------------------------------------------------- */ --radius-0: 0px; /* ========================================================================= * DERIVED — the theme's neutral ramp. * * The templates use Tailwind's `slate-*` names for hairlines, panels and * hover states. Rather than leave those hard-coded, they are pointed at * your tokens here, so borders and greys re-skin along with everything * else. Change the right-hand side to re-map; do not rename the keys. * ====================================================================== */ --thn-neutral-50: var(--color-surface-10); --thn-neutral-100: var(--color-surface-6); --thn-neutral-200: var(--color-border-primary); --thn-neutral-300: var(--color-surface-7); --thn-neutral-400: var(--color-surface-4); --thn-neutral-500: var(--color-text-secondary); --thn-neutral-600: var(--color-text-secondary); --thn-neutral-700: var(--color-text-tertiary); --thn-neutral-800: var(--color-border-4); --thn-neutral-900: var(--color-surface-5); --thn-neutral-950: var(--color-surface-9); --thn-neutral-50-rgb: var(--color-surface-10-rgb); --thn-neutral-100-rgb: var(--color-surface-6-rgb); --thn-neutral-200-rgb: var(--color-border-primary-rgb); --thn-neutral-300-rgb: var(--color-surface-7-rgb); --thn-neutral-400-rgb: var(--color-surface-4-rgb); --thn-neutral-500-rgb: var(--color-text-secondary-rgb); --thn-neutral-600-rgb: var(--color-text-secondary-rgb); --thn-neutral-700-rgb: var(--color-text-tertiary-rgb); --thn-neutral-800-rgb: var(--color-border-4-rgb); --thn-neutral-900-rgb: var(--color-surface-5-rgb); --thn-neutral-950-rgb: var(--color-surface-9-rgb); /* --- Layout ---------------------------------------------------------- */ --thn-container-max: var(--spacing-1368); --thn-header-height: 4.5rem; --thn-radius-card: 16px; --thn-radius-pill: 999px; }