/* * @file * Color semantic variables. */ /* stylelint-disable hue-degree-notation */ :root { --white: white; --black: black; /* * Primary colors. * * The `--theme-setting-base-primary-color` variable is placed on the * element within the_drip_preprocess_html(). The value can be changed at the * theme settings page. * * If you have a specific palette, you can override colors here. */ --primary: var(--theme-setting-base-primary-color); --primary-100: oklch(from var(--primary) 0.98 c h); --primary-200: oklch(from var(--primary) 0.94 c h); --primary-300: oklch(from var(--primary) 0.84 c h); --primary-400: oklch(from var(--primary) 0.76 c h); --primary-500: oklch(from var(--primary) 0.68 c h); --primary-600: oklch(from var(--primary) 0.55 c h); --primary-700: oklch(from var(--primary) 0.48 c h); --primary-800: oklch(from var(--primary) 0.4 c h); --primary-900: oklch(from var(--primary) 0.25 c h); --primary-1000: oklch(from var(--primary) 0.15 c h); /* Neutral color derived from primary. */ --chroma: 2%; --neutral-100: oklch(from var(--primary) 0.98 var(--chroma) h); --neutral-200: oklch(from var(--primary) 0.94 var(--chroma) h); --neutral-300: oklch(from var(--primary) 0.84 var(--chroma) h); --neutral-400: oklch(from var(--primary) 0.76 var(--chroma) h); --neutral-500: oklch(from var(--primary) 0.68 var(--chroma) h); --neutral-600: oklch(from var(--primary) 0.55 var(--chroma) h); --neutral-700: oklch(from var(--primary) 0.48 var(--chroma) h); --neutral-800: oklch(from var(--primary) 0.4 var(--chroma) h); --neutral-900: oklch(from var(--primary) 0.25 var(--chroma) h); --neutral-1000: oklch(from var(--primary) 0.15 var(--chroma) h); /* Status colors. */ --color-error-light: #ff616b; --color-error-dark: #dc0000; --color-warning-light: #fdca40; --color-warning-dark: #8c7024; --color-success-light: #00b300; --color-success-dark: green; --color-info-light: lightblue; --color-info-dark: #007aa2; /* * PHP code on server adds `.primary-color-is-dark` or `.primary-color-is-light` * to the tag based on the selected color. This allows us to make informed * choices on whether the text color should be white or black. */ &.primary-color-is-dark { --color-primary-surface-alt: oklch(from var(--primary) calc(l + 0.04) c h); --color-primary-surface-alt-2: oklch(from var(--primary) calc(l + 0.08) c h); --color-primary-text-color: var(--white); --color-primary-text-opposite: var(--black); } &.primary-color-is-light { --color-primary-surface-alt: oklch(from var(--primary) calc(l - 0.04) c h); --color-primary-surface-alt-2: oklch(from var(--primary) calc(l - 0.08) c h); --color-primary-text-color: var(--black); --color-primary-text-opposite: var(--white); } }