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:#000;--sys-color-scrim:#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:#c1efaf;--sys-color-on-primary-fixed:#012200;--sys-color-primary-fixed-dim:#a5d395;--sys-color-on-primary-fixed-variant:#295020;--sys-color-secondary-fixed:#d7e8cd;--sys-color-on-secondary-fixed:#121f0e;--sys-color-secondary-fixed-dim:#bbcbb1;--sys-color-on-secondary-fixed-variant:#3c4b37;--sys-color-tertiary-fixed:#bcebee;--sys-color-on-tertiary-fixed:#002021;--sys-color-tertiary-fixed-dim:#a0cfd2;--sys-color-on-tertiary-fixed-variant:#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)}}