web-expressive/dist/schemes/baseline.css

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

@layer design-system.tokens{html,[data-theme=baseline]{--sys-color-primary:light-dark(#65558f,#cfbdfe);--sys-color-surface-tint:light-dark(#65558f,#cfbdfe);--sys-color-on-primary:light-dark(#fff,#36275d);--sys-color-primary-container:light-dark(#e9ddff,#4d3d75);--sys-color-on-primary-container:light-dark(#4d3d75,#e9ddff);--sys-color-secondary:light-dark(#625b71,#cbc2db);--sys-color-on-secondary:light-dark(#fff,#332d41);--sys-color-secondary-container:light-dark(#e8def8,#4a4458);--sys-color-on-secondary-container:light-dark(#4a4458,#e8def8);--sys-color-tertiary:light-dark(#7e5260,#efb8c8);--sys-color-on-tertiary:light-dark(#fff,#4a2532);--sys-color-tertiary-container:light-dark(#ffd9e3,#633b48);--sys-color-on-tertiary-container:light-dark(#633b48,#ffd9e3);--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(#fdf7ff,#141218);--sys-color-on-background:light-dark(#1d1b20,#e6e0e9);--sys-color-surface:light-dark(#fdf7ff,#141218);--sys-color-on-surface:light-dark(#1d1b20,#e6e0e9);--sys-color-surface-variant:light-dark(#e7e0eb,#49454e);--sys-color-on-surface-variant:light-dark(#49454e,#cac4cf);--sys-color-outline:light-dark(#7a757f,#948f99);--sys-color-outline-variant:light-dark(#cac4cf,#49454e);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#322f35,#e6e0e9);--sys-color-inverse-on-surface:light-dark(#f5eff7,#322f35);--sys-color-inverse-primary:light-dark(#cfbdfe,#65558f);--sys-color-primary-fixed:light-dark(#e9ddff,#e9ddff);--sys-color-on-primary-fixed:light-dark(#201047,#201047);--sys-color-primary-fixed-dim:light-dark(#cfbdfe,#cfbdfe);--sys-color-on-primary-fixed-variant:light-dark(#4d3d75,#4d3d75);--sys-color-secondary-fixed:light-dark(#e8def8,#e8def8);--sys-color-on-secondary-fixed:light-dark(#1e192b,#1e192b);--sys-color-secondary-fixed-dim:light-dark(#cbc2db,#cbc2db);--sys-color-on-secondary-fixed-variant:light-dark(#4a4458,#4a4458);--sys-color-tertiary-fixed:light-dark(#ffd9e3,#ffd9e3);--sys-color-on-tertiary-fixed:light-dark(#31101d,#31101d);--sys-color-tertiary-fixed-dim:light-dark(#efb8c8,#efb8c8);--sys-color-on-tertiary-fixed-variant:light-dark(#633b48,#633b48);--sys-color-surface-dim:light-dark(#ded8e0,#141218);--sys-color-surface-bright:light-dark(#fdf7ff,#3b383e);--sys-color-surface-container-lowest:light-dark(#fff,#0f0d13);--sys-color-surface-container-low:light-dark(#f8f2fa,#1d1b20);--sys-color-surface-container:light-dark(#f2ecf4,#211f24);--sys-color-surface-container-high:light-dark(#ece6ee,#2b292f);--sys-color-surface-container-highest:light-dark(#e6e0e9,#36343a)}}