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(#705090,#dcb8ff);--sys-color-surface-tint:light-dark(#705090,#dcb8ff);--sys-color-on-primary:light-dark(#fff,#40215e);--sys-color-primary-container:light-dark(#f0dbff,#573877);--sys-color-on-primary-container:light-dark(#573877,#f0dbff);--sys-color-secondary:light-dark(#5e6135,#c7ca95);--sys-color-on-secondary:light-dark(#fff,#30330b);--sys-color-secondary-container:light-dark(#e4e6af,#464920);--sys-color-on-secondary-container:light-dark(#464920,#e4e6af);--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(#fff8f2,#181308);--sys-color-on-background:light-dark(#201b10,#ede1cf);--sys-color-surface:light-dark(#fff8f2,#181308);--sys-color-on-surface:light-dark(#201b10,#ede1cf);--sys-color-surface-variant:light-dark(#f1e0c5,#504531);--sys-color-on-surface-variant:light-dark(#504531,#d4c5aa);--sys-color-outline:light-dark(#82755f,#9d8f77);--sys-color-outline-variant:light-dark(#d4c5aa,#504531);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#363024,#ede1cf);--sys-color-inverse-on-surface:light-dark(#fcefdd,#363024);--sys-color-inverse-primary:light-dark(#dcb8ff,#705090);--sys-color-primary-fixed:#f0dbff;--sys-color-on-primary-fixed:#290848;--sys-color-primary-fixed-dim:#dcb8ff;--sys-color-on-primary-fixed-variant:#573877;--sys-color-secondary-fixed:#e4e6af;--sys-color-on-secondary-fixed:#1b1d00;--sys-color-secondary-fixed-dim:#c7ca95;--sys-color-on-secondary-fixed-variant:#464920;--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(#e4d8c7,#181308);--sys-color-surface-bright:light-dark(#fff8f2,#3f382c);--sys-color-surface-container-lowest:light-dark(#fff,#120e05);--sys-color-surface-container-low:light-dark(#fff2e0,#201b10);--sys-color-surface-container:light-dark(#f9ecda,#251f14);--sys-color-surface-container-high:light-dark(#f3e7d5,#2f291d);--sys-color-surface-container-highest:light-dark(#ede1cf,#3b3428)}}