web-expressive/dist/schemes/paper-tonal.css

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

@layer design-system.tokens{html,[data-theme=paper-tonal]{--sys-color-primary:light-dark(#5d5791,#c6bfff);--sys-color-surface-tint:light-dark(#5d5791,#c6bfff);--sys-color-on-primary:light-dark(#fff,#2e295f);--sys-color-primary-container:light-dark(#e4dfff,#454078);--sys-color-on-primary-container:light-dark(#454078,#e4dfff);--sys-color-secondary:light-dark(#5f5c71,#c8c3dc);--sys-color-on-secondary:light-dark(#fff,#302e41);--sys-color-secondary-container:light-dark(#e4dff9,#474459);--sys-color-on-secondary-container:light-dark(#474459,#e4dff9);--sys-color-tertiary:light-dark(#7b5266,#ebb8cf);--sys-color-on-tertiary:light-dark(#fff,#482537);--sys-color-tertiary-container:light-dark(#ffd8e8,#613b4e);--sys-color-on-tertiary-container:light-dark(#613b4e,#ffd8e8);--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(#fcf8ff,#131318);--sys-color-on-background:light-dark(#1c1b20,#e5e1e9);--sys-color-surface:light-dark(#fcf8ff,#131318);--sys-color-on-surface:light-dark(#1c1b20,#e5e1e9);--sys-color-surface-variant:light-dark(#e5e1ec,#47464f);--sys-color-on-surface-variant:light-dark(#47464f,#c9c5d0);--sys-color-outline:light-dark(#787680,#928f99);--sys-color-outline-variant:light-dark(#c9c5d0,#47464f);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#313036,#e5e1e9);--sys-color-inverse-on-surface:light-dark(#f3eff7,#313036);--sys-color-inverse-primary:light-dark(#c6bfff,#5d5791);--sys-color-primary-fixed:#e4dfff;--sys-color-on-primary-fixed:#19124a;--sys-color-primary-fixed-dim:#c6bfff;--sys-color-on-primary-fixed-variant:#454078;--sys-color-secondary-fixed:#e4dff9;--sys-color-on-secondary-fixed:#1b192c;--sys-color-secondary-fixed-dim:#c8c3dc;--sys-color-on-secondary-fixed-variant:#474459;--sys-color-tertiary-fixed:#ffd8e8;--sys-color-on-tertiary-fixed:#301122;--sys-color-tertiary-fixed-dim:#ebb8cf;--sys-color-on-tertiary-fixed-variant:#613b4e;--sys-color-surface-dim:light-dark(#dcd8e0,#131318);--sys-color-surface-bright:light-dark(#fcf8ff,#3a383e);--sys-color-surface-container-lowest:light-dark(#fff,#0e0e13);--sys-color-surface-container-low:light-dark(#f6f2fa,#1c1b20);--sys-color-surface-container:light-dark(#f1ecf4,#201f25);--sys-color-surface-container-high:light-dark(#ebe6ef,#2a292f);--sys-color-surface-container-highest:light-dark(#e5e1e9,#35343a)}}