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

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

@layer design-system.tokens{html,[data-theme=porcelain-tonal]{--sys-color-primary:light-dark(#6e5d0e,#dcc66e);--sys-color-surface-tint:light-dark(#6e5d0e,#dcc66e);--sys-color-on-primary:light-dark(#fff,#3a3000);--sys-color-primary-container:light-dark(#fae287,#544600);--sys-color-on-primary-container:light-dark(#544600,#fae287);--sys-color-secondary:light-dark(#675e40,#d2c6a1);--sys-color-on-secondary:light-dark(#fff,#373016);--sys-color-secondary-container:light-dark(#efe2bc,#4e472a);--sys-color-on-secondary-container:light-dark(#4e472a,#efe2bc);--sys-color-tertiary:light-dark(#44664e,#aad0b2);--sys-color-on-tertiary:light-dark(#fff,#153722);--sys-color-tertiary-container:light-dark(#c5eccd,#2c4e37);--sys-color-on-tertiary-container:light-dark(#2c4e37,#c5eccd);--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(#fff9ee,#16130b);--sys-color-on-background:light-dark(#1e1b13,#e9e2d4);--sys-color-surface:light-dark(#fff9ee,#16130b);--sys-color-on-surface:light-dark(#1e1b13,#e9e2d4);--sys-color-surface-variant:light-dark(#eae2cf,#4b4739);--sys-color-on-surface-variant:light-dark(#4b4739,#cdc6b4);--sys-color-outline:light-dark(#7c7767,#969080);--sys-color-outline-variant:light-dark(#cdc6b4,#4b4739);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#333027,#e9e2d4);--sys-color-inverse-on-surface:light-dark(#f7f0e2,#333027);--sys-color-inverse-primary:light-dark(#dcc66e,#6e5d0e);--sys-color-primary-fixed:light-dark(#fae287,#fae287);--sys-color-on-primary-fixed:light-dark(#221b00,#221b00);--sys-color-primary-fixed-dim:light-dark(#dcc66e,#dcc66e);--sys-color-on-primary-fixed-variant:light-dark(#544600,#544600);--sys-color-secondary-fixed:light-dark(#efe2bc,#efe2bc);--sys-color-on-secondary-fixed:light-dark(#211b04,#211b04);--sys-color-secondary-fixed-dim:light-dark(#d2c6a1,#d2c6a1);--sys-color-on-secondary-fixed-variant:light-dark(#4e472a,#4e472a);--sys-color-tertiary-fixed:light-dark(#c5eccd,#c5eccd);--sys-color-on-tertiary-fixed:light-dark(#00210f,#00210f);--sys-color-tertiary-fixed-dim:light-dark(#aad0b2,#aad0b2);--sys-color-on-tertiary-fixed-variant:light-dark(#2c4e37,#2c4e37);--sys-color-surface-dim:light-dark(#e0d9cc,#16130b);--sys-color-surface-bright:light-dark(#fff9ee,#3c3930);--sys-color-surface-container-lowest:light-dark(#fff,#100e07);--sys-color-surface-container-low:light-dark(#faf3e5,#1e1b13);--sys-color-surface-container:light-dark(#f4eddf,#221f17);--sys-color-surface-container-high:light-dark(#eee7da,#2d2a21);--sys-color-surface-container-highest:light-dark(#e9e2d4,#38352b)}}