web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.79 kB
CSS
@layer design-system.tokens{html,[data-theme=fuchsia-neutral]{--sys-color-primary:light-dark(#6a5a66,#d6c1cf);--sys-color-surface-tint:light-dark(#6a5a66,#d6c1cf);--sys-color-on-primary:light-dark(#fff,#3a2c37);--sys-color-primary-container:light-dark(#f2dceb,#51424e);--sys-color-on-primary-container:light-dark(#51424e,#f2dceb);--sys-color-secondary:light-dark(#665b63,#d1c2cb);--sys-color-on-secondary:light-dark(#fff,#372e34);--sys-color-secondary-container:light-dark(#eedee7,#4e444b);--sys-color-on-secondary-container:light-dark(#4e444b,#eedee7);--sys-color-tertiary:light-dark(#6d5869,#dabfd2);--sys-color-on-tertiary:light-dark(#fff,#3d2b3a);--sys-color-tertiary-container:light-dark(#f7daef,#554151);--sys-color-on-tertiary-container:light-dark(#554151,#f7daef);--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(#fef8f9,#151314);--sys-color-on-background:light-dark(#1d1b1c,#e7e1e2);--sys-color-surface:light-dark(#fef8f9,#151314);--sys-color-on-surface:light-dark(#1d1b1c,#e7e1e2);--sys-color-surface-variant:light-dark(#e7e1e2,#494647);--sys-color-on-surface-variant:light-dark(#494647,#cbc5c6);--sys-color-outline:light-dark(#7a7677,#948f91);--sys-color-outline-variant:light-dark(#cbc5c6,#494647);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#323031,#e7e1e2);--sys-color-inverse-on-surface:light-dark(#f6eff0,#323031);--sys-color-inverse-primary:light-dark(#d6c1cf,#6a5a66);--sys-color-primary-fixed:light-dark(#f2dceb,#f2dceb);--sys-color-on-primary-fixed:light-dark(#241822,#241822);--sys-color-primary-fixed-dim:light-dark(#d6c1cf,#d6c1cf);--sys-color-on-primary-fixed-variant:light-dark(#51424e,#51424e);--sys-color-secondary-fixed:light-dark(#eedee7,#eedee7);--sys-color-on-secondary-fixed:light-dark(#21191f,#21191f);--sys-color-secondary-fixed-dim:light-dark(#d1c2cb,#d1c2cb);--sys-color-on-secondary-fixed-variant:light-dark(#4e444b,#4e444b);--sys-color-tertiary-fixed:light-dark(#f7daef,#f7daef);--sys-color-on-tertiary-fixed:light-dark(#271624,#271624);--sys-color-tertiary-fixed-dim:light-dark(#dabfd2,#dabfd2);--sys-color-on-tertiary-fixed-variant:light-dark(#554151,#554151);--sys-color-surface-dim:light-dark(#dfd8da,#151314);--sys-color-surface-bright:light-dark(#fef8f9,#3b383a);--sys-color-surface-container-lowest:light-dark(#fff,#100e0f);--sys-color-surface-container-low:light-dark(#f9f2f3,#1d1b1c);--sys-color-surface-container:light-dark(#f3ecee,#211f20);--sys-color-surface-container-high:light-dark(#ede7e8,#2c292a);--sys-color-surface-container-highest:light-dark(#e7e1e2,#373435)}}