web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.52 kB
CSS
@layer design-system.tokens{html,[data-theme=fuchsia-neutral]{--sys-color-primary:light-dark(#665b63,#d1c2cb);--sys-color-surface-tint:light-dark(#665b63,#d1c2cb);--sys-color-on-primary:light-dark(#fff5f9,#473d44);--sys-color-primary-container:light-dark(#eedee7,#4e444b);--sys-color-on-primary-container:light-dark(#594f56,#dbccd5);--sys-color-secondary:light-dark(#635d61,#a39c9f);--sys-color-on-secondary:light-dark(#fff7f9,#231f22);--sys-color-secondary-container:light-dark(#e9e0e4,#3f3a3d);--sys-color-on-secondary-container:light-dark(#565053,#c5bdc1);--sys-color-tertiary:light-dark(#655a76,#ede0ff);--sys-color-on-tertiary:light-dark(#fef7ff,#594f6a);--sys-color-tertiary-container:#dfd1f3;--sys-color-on-tertiary-container:#504661;--sys-color-error:light-dark(#9e3f4e,#ec7c8a);--sys-color-on-error:light-dark(#fff7f7,#490013);--sys-color-error-container:light-dark(#ff8b9a,#7f2737);--sys-color-on-error-container:light-dark(#782232,#ff97a3);--sys-color-background:light-dark(#fef8f8,#0f0e0e);--sys-color-on-background:light-dark(#353133,#ebe3e6);--sys-color-surface:light-dark(#fef8f8,#0f0e0e);--sys-color-on-surface:light-dark(#353133,#ebe3e6);--sys-color-surface-variant:light-dark(#e8e0e3,#282527);--sys-color-on-surface-variant:light-dark(#635e60,#b0a9ac);--sys-color-outline:light-dark(#7f797c,#797476);--sys-color-outline-variant:light-dark(#b7b0b3,#4b4749);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#0f0e0e,#fef8f8);--sys-color-inverse-on-surface:light-dark(#a09c9d,#575455);--sys-color-inverse-primary:light-dark(#fcecf5,#675c63);--sys-color-primary-fixed:#eedee7;--sys-color-on-primary-fixed:#463c43;--sys-color-primary-fixed-dim:#dfd0d9;--sys-color-on-primary-fixed-variant:#635860;--sys-color-secondary-fixed:#e9e0e4;--sys-color-on-secondary-fixed:#433e41;--sys-color-secondary-fixed-dim:#dbd2d6;--sys-color-on-secondary-fixed-variant:#605a5d;--sys-color-tertiary-fixed:#dfd1f3;--sys-color-on-tertiary-fixed:#3d344d;--sys-color-tertiary-fixed-dim:#d1c4e4;--sys-color-on-tertiary-fixed-variant:#5a506b;--sys-color-surface-dim:light-dark(#e0d8db,#0f0e0e);--sys-color-surface-bright:light-dark(#fef8f8,#2f2b2d);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#f8f2f3,#151314);--sys-color-surface-container:light-dark(#f3ecee,#1b191a);--sys-color-surface-container-high:light-dark(#eee6e8,#221f20);--sys-color-surface-container-highest:light-dark(#e8e0e3,#282527)}}:root{--alpha-file:"fuchsia-neutral.css"}