/** * David Loy — design tokens (D17 "Paper & Ink") * * The single source of truth for colour and type across dl-media.css and * dl-filters.css. Nothing else in the theme should write a hex value. * * Enqueue this FIRST and declare it as a dependency of the others, so load * order is guaranteed rather than incidental: * * $dir = get_stylesheet_directory(); * $uri = get_stylesheet_directory_uri(); * * wp_enqueue_style( 'dl-tokens', "$uri/assets/dl-tokens.css", [], * filemtime( "$dir/assets/dl-tokens.css" ) ); * wp_enqueue_style( 'dl-media', "$uri/assets/dl-media.css", [ 'dl-tokens' ], * filemtime( "$dir/assets/dl-media.css" ) ); * wp_enqueue_style( 'dl-filters', "$uri/assets/dl-filters.css", [ 'dl-tokens' ], * filemtime( "$dir/assets/dl-filters.css" ) ); */ /* ========================================================================== * Tokens — the only place a colour or font value is written * * Every rule below reads a --dl-* alias. Each alias reads the child theme's * --dl-color-* / --dl-font-* token and falls back to the D17 value only if the * theme has not declared one. Change a value here, or in the child theme, and * it changes everywhere. * * Declared on :root AND body on purpose. If the child theme sets its tokens on * :root, the :root rule resolves them. If they arrive on body instead — * Elementor writes global colours onto .elementor-kit-N, which sits on * — the body rule resolves them and wins for everything inside the page. * Resolving on the wrong element would silently lock each alias to its * fallback, which is exactly how this file drifted out of step before. * ========================================================================== */ :root, body { --dl-ink: var(--dl-color-ink, #16241A); --dl-forest: var(--dl-color-forest, #24402A); --dl-moss: var(--dl-color-moss, #3A5C42); --dl-sage: var(--dl-color-sage, #55755A); --dl-gold: var(--dl-color-gold, #89591D); --dl-cream: var(--dl-color-cream, #F5F0E8); --dl-parchment: var(--dl-color-parchment, #EDE6D6); --dl-surface: var(--dl-color-surface, #FFFFFF); /* card face */ --dl-rule: var(--dl-color-rule, rgba(22, 36, 26, 0.22)); /* Bare channels, for the scrims, shadows and soft body text that need an * alpha. Kept in step with --dl-ink by hand: CSS cannot derive one from the * other without color-mix(), which is still young in Safari. */ --dl-ink-rgb: var(--dl-color-ink-rgb, 22, 36, 26); --dl-cream-rgb: var(--dl-color-cream-rgb, 245, 240, 232); --dl-display: var(--dl-font-display, "Playfair Display", serif); --dl-body: var(--dl-font-body, Spectral, Georgia, serif); --dl-ui: var(--dl-font-ui, "Josefin Sans", sans-serif); }