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

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

@layer design-system.tokens{html,[data-theme=classic-neutral]{--sys-color-primary:light-dark(#595e6c,#c2c6d6);--sys-color-surface-tint:light-dark(#595e6c,#c2c6d6);--sys-color-on-primary:light-dark(#fff,#2b303c);--sys-color-primary-container:light-dark(#dee2f2,#414753);--sys-color-on-primary-container:light-dark(#414753,#dee2f2);--sys-color-secondary:light-dark(#5c5e66,#c4c6d0);--sys-color-on-secondary:light-dark(#fff,#2d3038);--sys-color-secondary-container:light-dark(#e1e2ec,#44474f);--sys-color-on-secondary-container:light-dark(#44474f,#e1e2ec);--sys-color-tertiary:light-dark(#565e71,#bec6dc);--sys-color-on-tertiary:light-dark(#fff,#283041);--sys-color-tertiary-container:light-dark(#dbe2f9,#3f4759);--sys-color-on-tertiary-container:light-dark(#3f4759,#dbe2f9);--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(#fcf8fa,#131315);--sys-color-on-background:light-dark(#1b1b1d,#e4e2e3);--sys-color-surface:light-dark(#fcf8fa,#131315);--sys-color-on-surface:light-dark(#1b1b1d,#e4e2e3);--sys-color-surface-variant:light-dark(#e4e2e3,#474648);--sys-color-on-surface-variant:light-dark(#474648,#c8c6c7);--sys-color-outline:light-dark(#787778,#929092);--sys-color-outline-variant:light-dark(#c8c6c7,#474648);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#303032,#e4e2e3);--sys-color-inverse-on-surface:light-dark(#f3f0f1,#303032);--sys-color-inverse-primary:light-dark(#c2c6d6,#595e6c);--sys-color-primary-fixed:#dee2f2;--sys-color-on-primary-fixed:#161c27;--sys-color-primary-fixed-dim:#c2c6d6;--sys-color-on-primary-fixed-variant:#414753;--sys-color-secondary-fixed:#e1e2ec;--sys-color-on-secondary-fixed:#191c22;--sys-color-secondary-fixed-dim:#c4c6d0;--sys-color-on-secondary-fixed-variant:#44474f;--sys-color-tertiary-fixed:#dbe2f9;--sys-color-on-tertiary-fixed:#131b2c;--sys-color-tertiary-fixed-dim:#bec6dc;--sys-color-on-tertiary-fixed-variant:#3f4759;--sys-color-surface-dim:light-dark(#dcd9db,#131315);--sys-color-surface-bright:light-dark(#fcf8fa,#39393a);--sys-color-surface-container-lowest:light-dark(#fff,#0e0e0f);--sys-color-surface-container-low:light-dark(#f6f3f4,#1b1b1d);--sys-color-surface-container:light-dark(#f0edef,#1f1f21);--sys-color-surface-container-high:light-dark(#eae7e9,#2a2a2b);--sys-color-surface-container-highest:light-dark(#e4e2e3,#353436)}}