@tpzdsp/eslint-config-dsp
Version:
re-usable config for ESLint, Prettier and semantic-release
106 lines (92 loc) • 4.26 kB
CSS
:root,
[data-theme='defra-light'] {
/* page and component backgrounds */
--color-panel: var(--color-white);
/* card/modal/panel edges */
--color-panel-border: var(--color-black);
/* primary text */
--color-body: var(--color-black);
/* secondary/supporting text */
--color-body-secondary: var(--color-black-tint-25);
/* Defra brand colour */
--color-accent: #008938;
/*
FIXME: the below colour is the NEW Defra brand theme.
Once Defra agrees to use this new colour, we can delete the line above and uncomment the line below
*/
/* --color-accent: #00a33b; */
/* contrast-safe accent for text on light backgrounds */
--color-accent-safe: #008531;
/* darkened accent for hover states */
--color-accent-hover: color-mix(in srgb, var(--color-accent) 75%, black);
/* heavily darkened accent for button shadow depth */
--color-accent-shadow: color-mix(in srgb, var(--color-accent) 50%, black);
/* text on accent/brand-coloured backgrounds */
--color-on-accent: var(--color-white);
/* link text */
--color-link: var(--color-accent);
/* link text on hover */
--color-link-hover: var(--color-accent-hover);
/* visited link text */
--color-link-visited: var(--color-accent);
/* active/pressed link text */
--color-link-active: var(--color-black);
/* borders and horizontal rules */
--color-divider: var(--color-black-tint-80);
/* form input borders */
--color-divider-input: var(--color-black);
/* GDS focus ring colour (always yellow) */
--color-focus: var(--color-yellow);
/* text on focus-yellow backgrounds */
--color-on-focus: var(--color-black);
/* error states */
--color-error: var(--color-red);
/* darkened error for hover states */
--color-error-hover: color-mix(in srgb, var(--color-error) 75%, black);
/* heavily darkened error for button shadow depth */
--color-error-shadow: color-mix(in srgb, var(--color-error) 50%, black);
/* text on error/destructive backgrounds */
--color-on-error: var(--color-white);
/* success states */
--color-success: var(--color-green);
/* very light neutral background e.g. secondary button base */
--color-wash: var(--color-black-tint-95);
/* mid neutral e.g. secondary button shadow */
--color-neutral-mid: var(--color-black-tint-50);
/* subtle backgrounds e.g. hover */
--color-muted: var(--color-black-tint-80);
/* surface colours derive from accent so they adapt when the theme accent changes */
/* branded tinted surface */
--color-surface: color-mix(in srgb, var(--color-accent) 5%, white);
/* text on surface backgrounds */
--color-on-surface: var(--color-black);
/* borders within surface areas */
--color-surface-divider: color-mix(in srgb, var(--color-accent) 50%, white);
/* darkened surface colour */
--color-surface-hover: color-mix(in srgb, var(--color-accent) 3%, white, black 4%);
/* warning states */
--color-warning: var(--color-yellow);
/* text on warning backgrounds */
--color-on-warning: var(--color-black);
/* disabled component backgrounds */
--color-disabled: var(--color-black-tint-80);
/* text on disabled backgrounds */
--color-on-disabled: var(--color-black-tint-50);
/* subtle tag/chip backgrounds — tinted but light enough to avoid confusion with buttons */
--color-neutral-subtle: var(--color-black-tint-80);
--color-success-subtle: var(--color-green-tint-80);
--color-warning-subtle: var(--color-yellow-tint-80);
--color-error-subtle: var(--color-red-tint-80);
--color-info-subtle: var(--color-blue-tint-80);
/* derives from accent so it adapts per theme */
--color-accent-subtle: color-mix(in srgb, var(--color-accent) 20%, white);
/* text on subtle backgrounds — dark shade of the same colour family for a coloured-on-coloured look */
/* warning and neutral stay black — yellow text fails contrast, grey has no useful hue */
--color-on-neutral-subtle: var(--color-body);
--color-on-success-subtle: var(--color-green-shade-25);
--color-on-warning-subtle: var(--color-body);
--color-on-error-subtle: var(--color-red-shade-25);
--color-on-info-subtle: var(--color-blue-shade-25);
/* derives from accent-shadow so it adapts per theme */
--color-on-accent-subtle: var(--color-accent-shadow);
}