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

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

@layer design-system.tokens{html,[data-theme=sun-expressive]{--sys-color-primary:light-dark(#5f5598,#c9bfff);--sys-color-surface-tint:light-dark(#5f5598,#c9bfff);--sys-color-on-primary:light-dark(#fff,#302666);--sys-color-primary-container:light-dark(#e5deff,#473d7e);--sys-color-on-primary-container:light-dark(#473d7e,#e5deff);--sys-color-secondary:light-dark(#695e2f,#d6c68e);--sys-color-on-secondary:light-dark(#fff,#393005);--sys-color-secondary-container:light-dark(#f3e2a7,#51461a);--sys-color-on-secondary-container:light-dark(#51461a,#f3e2a7);--sys-color-tertiary:light-dark(#7e571d,#f1bd7a);--sys-color-on-tertiary:light-dark(#fff,#462b00);--sys-color-tertiary-container:light-dark(#ffddb5,#623f05);--sys-color-on-tertiary-container:light-dark(#623f05,#ffddb5);--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,#1a1209);--sys-color-on-background:light-dark(#231a11,#f1dfd0);--sys-color-surface:light-dark(#fff8f4,#1a1209);--sys-color-on-surface:light-dark(#231a11,#f1dfd0);--sys-color-surface-variant:light-dark(#f7dec7,#544433);--sys-color-on-surface-variant:light-dark(#544433,#dac2ac);--sys-color-outline:light-dark(#877460,#a28d79);--sys-color-outline-variant:light-dark(#dac2ac,#544433);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#392f24,#f1dfd0);--sys-color-inverse-on-surface:light-dark(#ffeedf,#392f24);--sys-color-inverse-primary:light-dark(#c9bfff,#5f5598);--sys-color-primary-fixed:light-dark(#e5deff,#e5deff);--sys-color-on-primary-fixed:light-dark(#1b0e50,#1b0e50);--sys-color-primary-fixed-dim:light-dark(#c9bfff,#c9bfff);--sys-color-on-primary-fixed-variant:light-dark(#473d7e,#473d7e);--sys-color-secondary-fixed:light-dark(#f3e2a7,#f3e2a7);--sys-color-on-secondary-fixed:light-dark(#221b00,#221b00);--sys-color-secondary-fixed-dim:light-dark(#d6c68e,#d6c68e);--sys-color-on-secondary-fixed-variant:light-dark(#51461a,#51461a);--sys-color-tertiary-fixed:light-dark(#ffddb5,#ffddb5);--sys-color-on-tertiary-fixed:light-dark(#2a1800,#2a1800);--sys-color-tertiary-fixed-dim:light-dark(#f1bd7a,#f1bd7a);--sys-color-on-tertiary-fixed-variant:light-dark(#623f05,#623f05);--sys-color-surface-dim:light-dark(#e8d7c8,#1a1209);--sys-color-surface-bright:light-dark(#fff8f4,#42372d);--sys-color-surface-container-lowest:light-dark(#fff,#140d05);--sys-color-surface-container-low:light-dark(#fff1e6,#231a11);--sys-color-surface-container:light-dark(#fdebdb,#271e14);--sys-color-surface-container-high:light-dark(#f7e5d6,#32281e);--sys-color-surface-container-highest:light-dark(#f1dfd0,#3d3328)}}