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

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

@layer design-system.tokens{html,[data-theme=classic-expressive]{--sys-color-primary:light-dark(#396932,#9fd491);--sys-color-surface-tint:light-dark(#396932,#9fd491);--sys-color-on-primary:light-dark(#fff,#073907);--sys-color-primary-container:light-dark(#baf1ab,#21511c);--sys-color-on-primary-container:light-dark(#21511c,#baf1ab);--sys-color-secondary:light-dark(#7c5264,#edb8cd);--sys-color-on-secondary:light-dark(#fff,#482535);--sys-color-secondary-container:light-dark(#ffd8e6,#623b4c);--sys-color-on-secondary-container:light-dark(#623b4c,#ffd8e6);--sys-color-tertiary:light-dark(#535b8b,#bcc3fa);--sys-color-on-tertiary:light-dark(#fff,#252d5a);--sys-color-tertiary-container:light-dark(#dee0ff,#3b4472);--sys-color-on-tertiary-container:light-dark(#3b4472,#dee0ff);--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(#fbf8ff,#12131a);--sys-color-on-background:light-dark(#1a1b23,#e3e1ec);--sys-color-surface:light-dark(#fbf8ff,#12131a);--sys-color-on-surface:light-dark(#1a1b23,#e3e1ec);--sys-color-surface-variant:light-dark(#e1e1f3,#444654);--sys-color-on-surface-variant:light-dark(#444654,#c5c5d6);--sys-color-outline:light-dark(#757685,#8f8f9f);--sys-color-outline-variant:light-dark(#c5c5d6,#444654);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#2f3038,#e3e1ec);--sys-color-inverse-on-surface:light-dark(#f1effa,#2f3038);--sys-color-inverse-primary:light-dark(#9fd491,#396932);--sys-color-primary-fixed:light-dark(#baf1ab,#baf1ab);--sys-color-on-primary-fixed:light-dark(#002201,#002201);--sys-color-primary-fixed-dim:light-dark(#9fd491,#9fd491);--sys-color-on-primary-fixed-variant:light-dark(#21511c,#21511c);--sys-color-secondary-fixed:light-dark(#ffd8e6,#ffd8e6);--sys-color-on-secondary-fixed:light-dark(#301120,#301120);--sys-color-secondary-fixed-dim:light-dark(#edb8cd,#edb8cd);--sys-color-on-secondary-fixed-variant:light-dark(#623b4c,#623b4c);--sys-color-tertiary-fixed:light-dark(#dee0ff,#dee0ff);--sys-color-on-tertiary-fixed:light-dark(#0e1744,#0e1744);--sys-color-tertiary-fixed-dim:light-dark(#bcc3fa,#bcc3fa);--sys-color-on-tertiary-fixed-variant:light-dark(#3b4472,#3b4472);--sys-color-surface-dim:light-dark(#dad9e4,#12131a);--sys-color-surface-bright:light-dark(#fbf8ff,#383941);--sys-color-surface-container-lowest:light-dark(#fff,#0d0e15);--sys-color-surface-container-low:light-dark(#f4f2fd,#1a1b23);--sys-color-surface-container:light-dark(#eeedf8,#1e1f27);--sys-color-surface-container-high:light-dark(#e8e7f2,#292931);--sys-color-surface-container-highest:light-dark(#e3e1ec,#33343c)}}