/** * Design tokens, layered: primitive -> semantic -> component. * Components (components.css) should reference semantic tokens here, not * primitives directly. See dfusionfw/docs/css-conventions.md §2. * * The values below are a starting point, not a fixed brand -- replace the * primitive colour scale and --link-colour with this project's own brand * as soon as it has one, and add more spacing/font steps only once a real * page needs them. * * The spacing ladder is responsive: --spacing-s1..s14 change value at each * breakpoint, so most layouts need no responsive spacing classes at all. * These used to live in grid.css, inside the layout layer, where they * silently overrode the values declared here. One source of truth now. */ @layer tokens { :root { /* --- Primitive: neutral colour scale --- */ --color-ui-0: #ffffff; --color-ui-50: #f7f8fa; --color-ui-100: #eef0f3; --color-ui-200: #dde1e7; --color-ui-300: #c3c9d3; --color-ui-400: #a3abb9; --color-ui-500: #8f9cb2; --color-ui-600: #6b7688; --color-ui-700: #4d5566; --color-ui-800: #333947; --color-ui-900: #1e222c; --color-ui-950: #121419; --color-ui-1000: #000000; /* --- Primitive: status colours (one standard shade each) --- */ --color-error-500: #c20e33; --color-warning-500: #f6c100; --color-success-500: #55ab55; /* --- Semantic: text / link colour --- */ --text-colour-white: var(--color-ui-0); --text-colour-light: var(--color-ui-600); --text-colour-regular: var(--color-ui-800); --text-colour-dark: var(--color-ui-950); --link-colour: #0093ee; /* --- Spacing: element-level, large tier (>= 1920px) --- Smaller tiers override these below. */ --spacing-s0: 0; --spacing-s1: 5px; --spacing-s2: 10px; --spacing-s3: 15px; --spacing-s4: 20px; --spacing-s5: 25px; --spacing-s6: 30px; --spacing-s7: 35px; --spacing-s8: 40px; --spacing-s9: 45px; --spacing-s10: 50px; --spacing-s11: 55px; --spacing-s12: 60px; --spacing-s13: 65px; --spacing-s14: 70px; /* --- Spacing: block-gutter (page/layout level) --- */ --gutter-s0: 0; --gutter-s2: 10px; --gutter-s4: 20px; --gutter-s6: 30px; /* --- Typography --- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-s: 13px; --font-size-r: 14px; --font-size-m: 16px; --font-size-l: 20px; --font-size-xl: 24px; /* --- Radius / shadow --- */ --radius-s: 4px; --radius-m: 6px; --shadow-card: 0 3px 6px 0 rgba(14, 30, 62, 0.08); } /** * Responsive spacing tiers. Breakpoints match docs/css-conventions.md §7 * and grid.css exactly. * * The *-element-spacing-override-* ladders are the fixed 5px scale that * spacing.css's per-breakpoint override classes key off, for the cases * where a layout needs to opt out of the responsive ladder. */ /* small | <= 640 */ @media only screen and (max-width: 640px) { :root { --spacing-s1: 5px; --spacing-s2: 10px; --spacing-s3: 11px; --spacing-s4: 12px; --spacing-s5: 13px; --spacing-s6: 14px; --spacing-s7: 15px; --spacing-s8: 16px; --spacing-s9: 17px; --spacing-s10: 18px; --spacing-s11: 19px; --spacing-s12: 20px; --spacing-s13: 22px; --spacing-s14: 24px; --small-element-spacing-override-s0: 0; --small-element-spacing-override-s1: 5px; --small-element-spacing-override-s2: 10px; --small-element-spacing-override-s3: 15px; --small-element-spacing-override-s4: 20px; --small-element-spacing-override-s5: 25px; --small-element-spacing-override-s6: 30px; --small-element-spacing-override-s7: 35px; --small-element-spacing-override-s8: 40px; --small-element-spacing-override-s9: 45px; --small-element-spacing-override-s10: 50px; --small-element-spacing-override-s11: 55px; --small-element-spacing-override-s12: 60px; --small-element-spacing-override-s13: 65px; --small-element-spacing-override-s14: 70px; } } /* smallMedium | 641 - 900 */ @media only screen and (min-width: 641px) and (max-width: 900px) { :root { --spacing-s1: 5px; --spacing-s2: 11px; --spacing-s3: 13px; --spacing-s4: 15px; --spacing-s5: 17px; --spacing-s6: 20px; --spacing-s7: 22px; --spacing-s8: 25px; --spacing-s9: 27px; --spacing-s10: 30px; --spacing-s11: 32px; --spacing-s12: 35px; --spacing-s13: 37px; --spacing-s14: 40px; --smallMedium-element-spacing-override-s0: 0; --smallMedium-element-spacing-override-s1: 5px; --smallMedium-element-spacing-override-s2: 10px; --smallMedium-element-spacing-override-s3: 15px; --smallMedium-element-spacing-override-s4: 20px; --smallMedium-element-spacing-override-s5: 25px; --smallMedium-element-spacing-override-s6: 30px; --smallMedium-element-spacing-override-s7: 35px; --smallMedium-element-spacing-override-s8: 40px; --smallMedium-element-spacing-override-s9: 45px; --smallMedium-element-spacing-override-s10: 50px; --smallMedium-element-spacing-override-s11: 55px; --smallMedium-element-spacing-override-s12: 60px; --smallMedium-element-spacing-override-s13: 65px; --smallMedium-element-spacing-override-s14: 70px; } } /* medium | 901 - 1279 */ @media only screen and (min-width: 901px) and (max-width: 1279px) { :root { --spacing-s1: 4px; --spacing-s2: 8px; --spacing-s3: 12px; --spacing-s4: 16px; --spacing-s5: 20px; --spacing-s6: 24px; --spacing-s7: 28px; --spacing-s8: 32px; --spacing-s9: 36px; --spacing-s10: 40px; --spacing-s11: 44px; --spacing-s12: 48px; --spacing-s13: 52px; --spacing-s14: 56px; } } /* largeMedium | 1280 - 1919 */ @media only screen and (min-width: 1280px) and (max-width: 1919px) { :root { --spacing-s1: 4px; --spacing-s2: 8px; --spacing-s3: 12px; --spacing-s4: 16px; --spacing-s5: 20px; --spacing-s6: 24px; --spacing-s7: 28px; --spacing-s8: 32px; --spacing-s9: 36px; --spacing-s10: 40px; --spacing-s11: 44px; --spacing-s12: 48px; --spacing-s13: 52px; --spacing-s14: 56px; } } }