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

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

@layer design-system.tokens{html,[data-theme=fuchsia-vibrant]{--sys-color-primary:light-dark(#a900a9,#ffaaf3);--sys-color-surface-tint:light-dark(#a900a9,#ffaaf3);--sys-color-on-primary:light-dark(#fff,#5b005b);--sys-color-primary-container:light-dark(#ffd7f5,#810081);--sys-color-on-primary-container:light-dark(#810081,#ffd7f5);--sys-color-secondary:light-dark(#7a5368,#eab9d2);--sys-color-on-secondary:light-dark(#fff,#472639);--sys-color-secondary-container:light-dark(#ffd8eb,#603c50);--sys-color-on-secondary-container:light-dark(#603c50,#ffd8eb);--sys-color-tertiary:light-dark(#874d60,#fcb2c8);--sys-color-on-tertiary:light-dark(#fff,#512032);--sys-color-tertiary-container:light-dark(#ffd9e2,#6c3649);--sys-color-on-tertiary-container:light-dark(#6c3649,#ffd9e2);--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,#1a1018);--sys-color-on-background:light-dark(#231821,#f0dde9);--sys-color-surface:light-dark(#fff7f9,#1a1018);--sys-color-on-surface:light-dark(#231821,#f0dde9);--sys-color-surface-variant:light-dark(#f2dceb,#51424e);--sys-color-on-surface-variant:light-dark(#51424e,#d6c1cf);--sys-color-outline:light-dark(#83727f,#9e8b99);--sys-color-outline-variant:light-dark(#d6c1cf,#51424e);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#382d36,#f0dde9);--sys-color-inverse-on-surface:light-dark(#ffebf7,#382d36);--sys-color-inverse-primary:light-dark(#ffaaf3,#a900a9);--sys-color-primary-fixed:light-dark(#ffd7f5,#ffd7f5);--sys-color-on-primary-fixed:light-dark(#380038,#380038);--sys-color-primary-fixed-dim:light-dark(#ffaaf3,#ffaaf3);--sys-color-on-primary-fixed-variant:light-dark(#810081,#810081);--sys-color-secondary-fixed:light-dark(#ffd8eb,#ffd8eb);--sys-color-on-secondary-fixed:light-dark(#2f1124,#2f1124);--sys-color-secondary-fixed-dim:light-dark(#eab9d2,#eab9d2);--sys-color-on-secondary-fixed-variant:light-dark(#603c50,#603c50);--sys-color-tertiary-fixed:light-dark(#ffd9e2,#ffd9e2);--sys-color-on-tertiary-fixed:light-dark(#370a1d,#370a1d);--sys-color-tertiary-fixed-dim:light-dark(#fcb2c8,#fcb2c8);--sys-color-on-tertiary-fixed-variant:light-dark(#6c3649,#6c3649);--sys-color-surface-dim:light-dark(#e7d5e1,#1a1018);--sys-color-surface-bright:light-dark(#fff7f9,#41363f);--sys-color-surface-container-lowest:light-dark(#fff,#140b13);--sys-color-surface-container-low:light-dark(#ffeff8,#231821);--sys-color-surface-container:light-dark(#fce9f4,#271c25);--sys-color-surface-container-high:light-dark(#f6e3ef,#32272f);--sys-color-surface-container-highest:light-dark(#f0dde9,#3d313a)}}