web-expressive/dist/schemes/sun-vibrant.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.tokens{html,[data-theme=sun-vibrant]{--sys-color-primary:light-dark(#865300,#ffb960);--sys-color-surface-tint:light-dark(#865300,#ffb960);--sys-color-on-primary:light-dark(#fff,#472a00);--sys-color-primary-container:light-dark(#ffddb8,#653e00);--sys-color-on-primary-container:light-dark(#653e00,#ffddb8);--sys-color-secondary:light-dark(#745a2e,#e3c28c);--sys-color-on-secondary:light-dark(#fff,#412d05);--sys-color-secondary-container:light-dark(#ffdeaa,#5a4319);--sys-color-on-secondary-container:light-dark(#5a4319,#ffdeaa);--sys-color-tertiary:light-dark(#725c1a,#e2c377);--sys-color-on-tertiary:light-dark(#fff,#3e2e00);--sys-color-tertiary-container:light-dark(#ffdf91,#584401);--sys-color-on-tertiary-container:light-dark(#584401,#ffdf91);--sys-color-error:light-dark(#ba1a1a,#ffb4ab);--sys-color-on-error:light-dark(#fff,#690005);--sys-color-error-container:light-dark(#ffdad6,#93000a);--sys-color-on-error-container:light-dark(#93000a,#ffdad6);--sys-color-background:light-dark(#fff8f4,#1b1206);--sys-color-on-background:light-dark(#241a0e,#f4dfcb);--sys-color-surface:light-dark(#fff8f4,#1b1206);--sys-color-on-surface:light-dark(#241a0e,#f4dfcb);--sys-color-surface-variant:light-dark(#f7dfc6,#544432);--sys-color-on-surface-variant:light-dark(#544432,#dac3ac);--sys-color-outline:light-dark(#877460,#a18d78);--sys-color-outline-variant:light-dark(#dac3ac,#544432);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#3a2e21,#f4dfcb);--sys-color-inverse-on-surface:light-dark(#ffeede,#3a2e21);--sys-color-inverse-primary:light-dark(#ffb960,#865300);--sys-color-primary-fixed:#ffddb8;--sys-color-on-primary-fixed:#2a1700;--sys-color-primary-fixed-dim:#ffb960;--sys-color-on-primary-fixed-variant:#653e00;--sys-color-secondary-fixed:#ffdeaa;--sys-color-on-secondary-fixed:#271900;--sys-color-secondary-fixed-dim:#e3c28c;--sys-color-on-secondary-fixed-variant:#5a4319;--sys-color-tertiary-fixed:#ffdf91;--sys-color-on-tertiary-fixed:#241a00;--sys-color-tertiary-fixed-dim:#e2c377;--sys-color-on-tertiary-fixed-variant:#584401;--sys-color-surface-dim:light-dark(#ebd7c3,#1b1206);--sys-color-surface-bright:light-dark(#fff8f4,#433729);--sys-color-surface-container-lowest:light-dark(#fff,#150c03);--sys-color-surface-container-low:light-dark(#fff1e6,#241a0e);--sys-color-surface-container:light-dark(#ffead7,#281e11);--sys-color-surface-container-high:light-dark(#fae5d1,#33281b);--sys-color-surface-container-highest:light-dark(#f4dfcb,#3f3325)}}