70 lines
3.2 KiB
CSS
70 lines
3.2 KiB
CSS
/* Theme color definitions */
|
|
|
|
@theme {
|
|
--color-black: oklch(0% 0 0);
|
|
--color-white: oklch(100% 0 0);
|
|
|
|
--color-background: oklch(89.75% 0 0);
|
|
--color-text: var(--color-black);
|
|
|
|
--color-primary: oklch(0.57 0.203362 257.1706);
|
|
--color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
|
|
--color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
|
|
--color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
|
|
--color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
|
|
--color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
|
|
--color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
|
|
--color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
|
|
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
|
|
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
|
|
|
|
--color-secondary: oklch(0.56 0.0176 257.23);
|
|
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
|
|
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
|
|
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
|
|
--color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
|
|
--color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
|
|
--color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
|
|
--color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
|
|
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
|
|
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
|
|
|
|
/* WCAG AA on --color-page-base (#100e0b): ~7:1 contrast, also visually
|
|
* distinct from surrounding --color-on-surface (#e3e1e9) for inline links. */
|
|
--color-bodylinks: oklch(0.68 0.16 250);
|
|
--color-footlinks: oklch(0.68 0.16 250);
|
|
|
|
--color-light: oklch(98.16% 0.0017 247.8);
|
|
--color-dark: oklch(34.51% 0.0133 248.2);
|
|
|
|
/* Carbon Blue / dark surface tokens (Portfolio 2026) */
|
|
--color-surface: #121318;
|
|
--color-surface-dim: #121318;
|
|
--color-surface-bright: #38393f;
|
|
--color-surface-container-lowest: #0d0e13;
|
|
--color-surface-container-low: #1a1b21;
|
|
--color-surface-container: #1e1f25;
|
|
--color-surface-container-high: #292a2f;
|
|
--color-surface-container-highest: #34343a;
|
|
--color-on-surface: #e3e1e9;
|
|
--color-on-surface-variant: #c5c5d3;
|
|
--color-outline: #8f909d;
|
|
--color-outline-variant: #444651;
|
|
--color-page-base: #100e0b;
|
|
--color-backlight: rgba(96, 165, 250, 0.20);
|
|
|
|
--color-primary-fixed: #dce1ff;
|
|
--color-primary-fixed-dim: #b6c4ff;
|
|
--color-on-primary: #05297a;
|
|
--color-on-primary-fixed: #00164e;
|
|
--color-on-primary-fixed-variant: #264191;
|
|
|
|
--color-primary-12: rgba(182, 196, 255, 0.12);
|
|
--color-primary-87: #dce1ff;
|
|
|
|
--color-success: #5ccf91;
|
|
--color-warning: #f4e04d;
|
|
--color-danger: #cc3b3b;
|
|
--color-info: #3d7ab0;
|
|
}
|