web-expressive/dist/schemes/forest-expressive.css

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

@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:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#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:light-dark(#ffdad7,#ffdad7);--sys-color-on-primary-fixed:light-dark(#3d0507,#3d0507);--sys-color-primary-fixed-dim:light-dark(#ffb3ae,#ffb3ae);--sys-color-on-primary-fixed-variant:light-dark(#77302e,#77302e);--sys-color-secondary-fixed:light-dark(#c3ecd1,#c3ecd1);--sys-color-on-secondary-fixed:light-dark(#002112,#002112);--sys-color-secondary-fixed-dim:light-dark(#a8d0b6,#a8d0b6);--sys-color-on-secondary-fixed-variant:light-dark(#2a4e3a,#2a4e3a);--sys-color-tertiary-fixed:light-dark(#a9f0e5,#a9f0e5);--sys-color-on-tertiary-fixed:light-dark(#00201d,#00201d);--sys-color-tertiary-fixed-dim:light-dark(#8dd3c9,#8dd3c9);--sys-color-on-tertiary-fixed-variant:light-dark(#005049,#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)}}