web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.48 kB
CSS
@layer design-system.tokens{html,[data-theme=sun-vibrant]{--sys-color-primary:light-dark(#825100,#ffb555);--sys-color-surface-tint:light-dark(#825100,#ffb555);--sys-color-on-primary:light-dark(#fff0e3,#5a3600);--sys-color-primary-container:#fda200;--sys-color-on-primary-container:#4d2e00;--sys-color-secondary:light-dark(#7a5500,#fab422);--sys-color-on-secondary:light-dark(#fff1df,#523800);--sys-color-secondary-container:light-dark(#ffc96b,#7d5700);--sys-color-on-secondary-container:light-dark(#604200,#fff6ee);--sys-color-tertiary:light-dark(#655d00,#fff391);--sys-color-on-tertiary:light-dark(#fff5a6,#635b00);--sys-color-tertiary-container:#f5e650;--sys-color-on-tertiary-container:#5a5300;--sys-color-error:light-dark(#b02500,#ff7351);--sys-color-on-error:light-dark(#ffefec,#450900);--sys-color-error-container:light-dark(#f95630,#b92902);--sys-color-on-error-container:light-dark(#520c00,#ffd2c8);--sys-color-background:light-dark(#fff5ea,#160c00);--sys-color-on-background:light-dark(#402b00,#ffe1b4);--sys-color-surface:light-dark(#fff5ea,#160c00);--sys-color-on-surface:light-dark(#402b00,#ffe1b4);--sys-color-surface-variant:light-dark(#ffd796,#342200);--sys-color-on-surface-variant:light-dark(#735723,#caa669);--sys-color-outline:light-dark(#91723b,#90703a);--sys-color-outline-variant:light-dark(#cca86b,#5e4310);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#160c00,#fff8f3);--sys-color-inverse-on-surface:light-dark(#bb985d,#6c501d);--sys-color-inverse-primary:light-dark(#fda200,#865400);--sys-color-primary-fixed:#fda200;--sys-color-on-primary-fixed:#2e1900;--sys-color-primary-fixed-dim:#eb9600;--sys-color-on-primary-fixed-variant:#593600;--sys-color-secondary-fixed:#ffc96b;--sys-color-on-secondary-fixed:#473000;--sys-color-secondary-fixed-dim:#fdb726;--sys-color-on-secondary-fixed-variant:#6c4a00;--sys-color-tertiary-fixed:#f5e650;--sys-color-on-tertiary-fixed:#464000;--sys-color-tertiary-fixed-dim:#e6d742;--sys-color-on-tertiary-fixed-variant:#655d00;--sys-color-surface-dim:light-dark(#ffcd76,#160c00);--sys-color-surface-bright:light-dark(#fff5ea,#3d2800);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#ffeed9,#1d1100);--sys-color-surface-container:light-dark(#ffe4bd,#251700);--sys-color-surface-container-high:light-dark(#ffdeaa,#2d1d00);--sys-color-surface-container-highest:light-dark(#ffd796,#342200)}}:root{--alpha-file:"sun-vibrant.css"}