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

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

@layer design-system.tokens{html,[data-theme=fuchsia-tonal]{--sys-color-primary:light-dark(#804d7a,#f1b3e6);--sys-color-surface-tint:light-dark(#804d7a,#f1b3e6);--sys-color-on-primary:light-dark(#fff,#4c1f49);--sys-color-primary-container:light-dark(#ffd7f5,#653661);--sys-color-on-primary-container:light-dark(#653661,#ffd7f5);--sys-color-secondary:light-dark(#6d5869,#dabfd2);--sys-color-on-secondary:light-dark(#fff,#3d2b3a);--sys-color-secondary-container:light-dark(#f7daef,#554151);--sys-color-on-secondary-container:light-dark(#554151,#f7daef);--sys-color-tertiary:light-dark(#825345,#f5b8a7);--sys-color-on-tertiary:light-dark(#fff,#4c261b);--sys-color-tertiary-container:light-dark(#ffdbd1,#663c2f);--sys-color-on-tertiary-container:light-dark(#663c2f,#ffdbd1);--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(#fff7f9,#171216);--sys-color-on-background:light-dark(#201a1e,#ecdfe5);--sys-color-surface:light-dark(#fff7f9,#171216);--sys-color-on-surface:light-dark(#201a1e,#ecdfe5);--sys-color-surface-variant:light-dark(#eedee7,#4e444b);--sys-color-on-surface-variant:light-dark(#4e444b,#d1c2cb);--sys-color-outline:light-dark(#80747c,#9a8d95);--sys-color-outline-variant:light-dark(#d1c2cb,#4e444b);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#352e33,#ecdfe5);--sys-color-inverse-on-surface:light-dark(#faedf4,#352e33);--sys-color-inverse-primary:light-dark(#f1b3e6,#804d7a);--sys-color-primary-fixed:light-dark(#ffd7f5,#ffd7f5);--sys-color-on-primary-fixed:light-dark(#340832,#340832);--sys-color-primary-fixed-dim:light-dark(#f1b3e6,#f1b3e6);--sys-color-on-primary-fixed-variant:light-dark(#653661,#653661);--sys-color-secondary-fixed:light-dark(#f7daef,#f7daef);--sys-color-on-secondary-fixed:light-dark(#271624,#271624);--sys-color-secondary-fixed-dim:light-dark(#dabfd2,#dabfd2);--sys-color-on-secondary-fixed-variant:light-dark(#554151,#554151);--sys-color-tertiary-fixed:light-dark(#ffdbd1,#ffdbd1);--sys-color-on-tertiary-fixed:light-dark(#321208,#321208);--sys-color-tertiary-fixed-dim:light-dark(#f5b8a7,#f5b8a7);--sys-color-on-tertiary-fixed-variant:light-dark(#663c2f,#663c2f);--sys-color-surface-dim:light-dark(#e3d7dd,#171216);--sys-color-surface-bright:light-dark(#fff7f9,#3e373c);--sys-color-surface-container-lowest:light-dark(#fff,#120d11);--sys-color-surface-container-low:light-dark(#fdf0f7,#201a1e);--sys-color-surface-container:light-dark(#f7ebf1,#241e22);--sys-color-surface-container-high:light-dark(#f1e5eb,#2f282d);--sys-color-surface-container-highest:light-dark(#ecdfe5,#3a3338)}}