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

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

@layer design-system.tokens{html,[data-theme=forest-tonal]{--sys-color-primary:light-dark(#406835,#a5d395);--sys-color-surface-tint:light-dark(#406835,#a5d395);--sys-color-on-primary:light-dark(#fff,#12380b);--sys-color-primary-container:light-dark(#c1efaf,#295020);--sys-color-on-primary-container:light-dark(#295020,#c1efaf);--sys-color-secondary:light-dark(#54634d,#bbcbb1);--sys-color-on-secondary:light-dark(#fff,#263422);--sys-color-secondary-container:light-dark(#d7e8cd,#3c4b37);--sys-color-on-secondary-container:light-dark(#3c4b37,#d7e8cd);--sys-color-tertiary:light-dark(#386568,#a0cfd2);--sys-color-on-tertiary:light-dark(#fff,#003739);--sys-color-tertiary-container:light-dark(#bcebee,#1e4d50);--sys-color-on-tertiary-container:light-dark(#1e4d50,#bcebee);--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(#f8fbf0,#11140f);--sys-color-on-background:light-dark(#191d17,#e1e4da);--sys-color-surface:light-dark(#f8fbf0,#11140f);--sys-color-on-surface:light-dark(#191d17,#e1e4da);--sys-color-surface-variant:light-dark(#dfe4d7,#43483f);--sys-color-on-surface-variant:light-dark(#43483f,#c3c8bc);--sys-color-outline:light-dark(#73796e,#8d9387);--sys-color-outline-variant:light-dark(#c3c8bc,#43483f);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#2e322b,#e1e4da);--sys-color-inverse-on-surface:light-dark(#eff2e8,#2e322b);--sys-color-inverse-primary:light-dark(#a5d395,#406835);--sys-color-primary-fixed:light-dark(#c1efaf,#c1efaf);--sys-color-on-primary-fixed:light-dark(#012200,#012200);--sys-color-primary-fixed-dim:light-dark(#a5d395,#a5d395);--sys-color-on-primary-fixed-variant:light-dark(#295020,#295020);--sys-color-secondary-fixed:light-dark(#d7e8cd,#d7e8cd);--sys-color-on-secondary-fixed:light-dark(#121f0e,#121f0e);--sys-color-secondary-fixed-dim:light-dark(#bbcbb1,#bbcbb1);--sys-color-on-secondary-fixed-variant:light-dark(#3c4b37,#3c4b37);--sys-color-tertiary-fixed:light-dark(#bcebee,#bcebee);--sys-color-on-tertiary-fixed:light-dark(#002021,#002021);--sys-color-tertiary-fixed-dim:light-dark(#a0cfd2,#a0cfd2);--sys-color-on-tertiary-fixed-variant:light-dark(#1e4d50,#1e4d50);--sys-color-surface-dim:light-dark(#d8dbd2,#11140f);--sys-color-surface-bright:light-dark(#f8fbf0,#363a34);--sys-color-surface-container-lowest:light-dark(#fff,#0c0f0a);--sys-color-surface-container-low:light-dark(#f2f5eb,#191d17);--sys-color-surface-container:light-dark(#ecefe5,#1d211b);--sys-color-surface-container-high:light-dark(#e6e9e0,#272b25);--sys-color-surface-container-highest:light-dark(#e1e4da,#32362f)}}