/* * DGLP Platform dashboard. * * The tokens (palette, type, geometry, rhythm) live in tokens.css, which * Assets::style() loads before this file and before public.css. They used to * be declared here as well, and this copy loaded second, so a token changed in * tokens.css changed the public pages and left the member area exactly as it * was. One definition now, and it is not this one. * * Every colour reads from the custom properties Blocksy already emits on the * page, with the live palette hex as a fallback. Source of the fallback * values: wp option get theme_mods_blocksy-child. The status chip pairs are * asserted against WCAG AA in tests/test-brand.php, and bin/check-contrast.mjs * walks the rendered pages to catch the pairs a palette test cannot see. */ /* ---- Status chips ------------------------------------------------------- * Backgrounds are the source palette colour mixed 88% into white; text is that * colour darkened until it clears 4.5:1. Measured ratios are in the comments * and asserted in the test suite. * ------------------------------------------------------------------------- */ .dgl-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: max(0.72em, 12px); /* Never below 12px however deep the em nesting. */ font-weight: 600; line-height: 1.5; white-space: nowrap; } .dgl-chip--draft { background: #e4e6e6; color: #1e3232; } /* 10.76:1 */ .dgl-chip--pending { background: #fff7e8; color: #6b4f18; } /* 7.1:1 */ .dgl-chip--live { background: #eaf4e6; color: #2a5a1a; } /* 7.2:1 */ .dgl-chip--changes { background: #f9e0ea; color: #94003c; } /* 7.3:1 */ .dgl-chip--expired { background: #e6e7ed; color: #2d3b6b; } /* 8.73:1 */ .dgl-chip--archived { background: #ebedf5; color: #3f4b7a; } /* 7.2:1 */ .dgl-chip--rejected { background: #ffede7; color: #88361b; } /* 7.1:1 */ /* ---- Primitives --------------------------------------------------------- */ /* * The default link colour, deliberately at the lowest specificity there is. * * Written as `.dgl-dash a` this scored 0,2,0 and beat every component rule at * 0,1,0. The whole sidebar navigation rendered Partnership purple on deep navy * at 2.13:1, and so did the active filter chip and every button that happened * to be an . Each was the same bug wearing a different hat. * * `:where()` contributes no specificity, so this rule scores 0,0,1: any * component that sets its own colour wins automatically, including components * nobody has written yet. Fixing it here rather than raising specificity on * each component is what stops the next one happening. */ :where( .dgl-dash__main ) a { color: var(--dgl-link); } /* * The rule above scores 0,0,1 and the theme's own `a` rule scores the same * and loads later, so on staging every bare link in the content column was * the theme's purple. This one scores 0,1,1 for bare links only, classed * components keep their own colours, and the hover is pinned too because * the theme sets that as well. */ .dgl-dash__main a:where( :not( [class] ) ), .dgl-dash__main a:where( :not( [class] ) ):hover { color: var(--dgl-link); } .dgl-dash :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--dgl-focus); outline-offset: 2px; } .dgl-card { background: var(--dgl-white); border: 1px solid var(--dgl-border); border-radius: var(--dgl-radius-card); padding: var(--dgl-pad-card); box-shadow: var(--dgl-shadow-rest); } .dgl-button { /* * Every background, border and colour below is !important on purpose. * Blocksy styles