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=forest-expressive]{--sys-color-primary:light-dark(#944744,#ffb3ae);--sys-color-surface-tint:light-dark(#944744,#ffb3ae);--sys-color-on-primary:light-dark(#fff,#5a1b1a);--sys-color-primary-container:light-dark(#ffdad7,#77302e);--sys-color-on-primary-container:light-dark(#77302e,#ffdad7);--sys-color-secondary:light-dark(#416651,#a8d0b6);--sys-color-on-secondary:light-dark(#fff,#123725);--sys-color-secondary-container:light-dark(#c3ecd1,#2a4e3a);--sys-color-on-secondary-container:light-dark(#2a4e3a,#c3ecd1);--sys-color-tertiary:light-dark(#1d6961,#8dd3c9);--sys-color-on-tertiary:light-dark(#fff,#003732);--sys-color-tertiary-container:light-dark(#a9f0e5,#005049);--sys-color-on-tertiary-container:light-dark(#005049,#a9f0e5);--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(#f3fcf2,#0e150f);--sys-color-on-background:light-dark(#161d17,#dce5db);--sys-color-surface:light-dark(#f3fcf2,#0e150f);--sys-color-on-surface:light-dark(#161d17,#dce5db);--sys-color-surface-variant:light-dark(#d7e7d8,#3d4a3f);--sys-color-on-surface-variant:light-dark(#3d4a3f,#bbcabc);--sys-color-outline:light-dark(#6c7b6e,#869487);--sys-color-outline-variant:light-dark(#bbcabc,#3d4a3f);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#2b322c,#dce5db);--sys-color-inverse-on-surface:light-dark(#ebf3e9,#2b322c);--sys-color-inverse-primary:light-dark(#ffb3ae,#944744);--sys-color-primary-fixed:#ffdad7;--sys-color-on-primary-fixed:#3d0507;--sys-color-primary-fixed-dim:#ffb3ae;--sys-color-on-primary-fixed-variant:#77302e;--sys-color-secondary-fixed:#c3ecd1;--sys-color-on-secondary-fixed:#002112;--sys-color-secondary-fixed-dim:#a8d0b6;--sys-color-on-secondary-fixed-variant:#2a4e3a;--sys-color-tertiary-fixed:#a9f0e5;--sys-color-on-tertiary-fixed:#00201d;--sys-color-tertiary-fixed-dim:#8dd3c9;--sys-color-on-tertiary-fixed-variant:#005049;--sys-color-surface-dim:light-dark(#d4dcd3,#0e150f);--sys-color-surface-bright:light-dark(#f3fcf2,#333b34);--sys-color-surface-container-lowest:light-dark(#fff,#09100a);--sys-color-surface-container-low:light-dark(#eef6ec,#161d17);--sys-color-surface-container:light-dark(#e8f0e6,#1a211b);--sys-color-surface-container-high:light-dark(#e2eae1,#242c25);--sys-color-surface-container-highest:light-dark(#dce5db,#2f3730)}}