web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.47 kB
CSS
@layer design-system.tokens{html,[data-theme=carbon-vibrant]{--sys-color-primary:light-dark(#006943,#afffd1);--sys-color-surface-tint:light-dark(#006943,#afffd1);--sys-color-on-primary:light-dark(#c9ffdd,#006641);--sys-color-primary-container:#0fa;--sys-color-on-primary-container:#005c3b;--sys-color-secondary:light-dark(#006850,#60fccd);--sys-color-on-secondary:light-dark(#c5ffe7,#005d48);--sys-color-secondary-container:light-dark(#60fccd,#006c53);--sys-color-on-secondary-container:light-dark(#005d48,#dffff0);--sys-color-tertiary:light-dark(#006573,#88ebff);--sys-color-on-tertiary:light-dark(#daf8ff,#005763);--sys-color-tertiary-container:#10e3ff;--sys-color-on-tertiary-container:#004d58;--sys-color-error:light-dark(#b31b25,#ff716c);--sys-color-on-error:light-dark(#ffefee,#490006);--sys-color-error-container:light-dark(#fb5151,#9f0519);--sys-color-on-error-container:light-dark(#570008,#ffa8a3);--sys-color-background:light-dark(#d9ffee,#00120b);--sys-color-on-background:light-dark(#003628,#baf1db);--sys-color-surface:light-dark(#d9ffee,#00120b);--sys-color-on-surface:light-dark(#003628,#baf1db);--sys-color-surface-variant:light-dark(#9eeccf,#002c20);--sys-color-on-surface-variant:light-dark(#316553,#80b6a1);--sys-color-outline:light-dark(#4d816e,#4b7f6d);--sys-color-outline-variant:light-dark(#82b8a3,#1a5140);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#00120b,#e7fff3);--sys-color-inverse-on-surface:light-dark(#73a893,#2a5e4d);--sys-color-inverse-primary:light-dark(#0fa,#006d46);--sys-color-primary-fixed:#0fa;--sys-color-on-primary-fixed:#00472c;--sys-color-primary-fixed-dim:#00ef9f;--sys-color-on-primary-fixed-variant:#006742;--sys-color-secondary-fixed:#60fccd;--sys-color-on-secondary-fixed:#004937;--sys-color-secondary-fixed-dim:#4eedbf;--sys-color-on-secondary-fixed-variant:#006850;--sys-color-tertiary-fixed:#10e3ff;--sys-color-on-tertiary-fixed:#003840;--sys-color-tertiary-fixed-dim:#00d4ee;--sys-color-on-tertiary-fixed-variant:#005763;--sys-color-surface-dim:light-dark(#91e5c6,#00120b);--sys-color-surface-bright:light-dark(#d9ffee,#003326);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#c0fee5,#001710);--sys-color-surface-container:light-dark(#b3f6dc,#001e15);--sys-color-surface-container-high:light-dark(#a9f1d5,#00251b);--sys-color-surface-container-highest:light-dark(#9eeccf,#002c20)}}:root{--alpha-file:"carbon-vibrant.css"}