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

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

@layer design-system.tokens{html,[data-theme=sun-tonal]{--sys-color-primary:light-dark(#8b5023,#ffb786);--sys-color-surface-tint:light-dark(#8b5023,#ffb786);--sys-color-on-primary:light-dark(#fff,#502400);--sys-color-primary-container:light-dark(#ffdcc6,#6e390d);--sys-color-on-primary-container:light-dark(#6e390d,#ffdcc6);--sys-color-secondary:light-dark(#755846,#e5bfa8);--sys-color-on-secondary:light-dark(#fff,#422b1b);--sys-color-secondary-container:light-dark(#ffdcc6,#5b4130);--sys-color-on-secondary-container:light-dark(#5b4130,#ffdcc6);--sys-color-tertiary:light-dark(#606134,#c9ca93);--sys-color-on-tertiary:light-dark(#fff,#31320a);--sys-color-tertiary-container:light-dark(#e6e6ad,#48491f);--sys-color-on-tertiary-container:light-dark(#48491f,#e6e6ad);--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(#fff8f5,#19120d);--sys-color-on-background:light-dark(#221a15,#f0dfd7);--sys-color-surface:light-dark(#fff8f5,#19120d);--sys-color-on-surface:light-dark(#221a15,#f0dfd7);--sys-color-surface-variant:light-dark(#f4ded3,#52443c);--sys-color-on-surface-variant:light-dark(#52443c,#d7c3b7);--sys-color-outline:light-dark(#84746a,#9f8d83);--sys-color-outline-variant:light-dark(#d7c3b7,#52443c);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#382e29,#f0dfd7);--sys-color-inverse-on-surface:light-dark(#feede5,#382e29);--sys-color-inverse-primary:light-dark(#ffb786,#8b5023);--sys-color-primary-fixed:light-dark(#ffdcc6,#ffdcc6);--sys-color-on-primary-fixed:light-dark(#311300,#311300);--sys-color-primary-fixed-dim:light-dark(#ffb786,#ffb786);--sys-color-on-primary-fixed-variant:light-dark(#6e390d,#6e390d);--sys-color-secondary-fixed:light-dark(#ffdcc6,#ffdcc6);--sys-color-on-secondary-fixed:light-dark(#2b1708,#2b1708);--sys-color-secondary-fixed-dim:light-dark(#e5bfa8,#e5bfa8);--sys-color-on-secondary-fixed-variant:light-dark(#5b4130,#5b4130);--sys-color-tertiary-fixed:light-dark(#e6e6ad,#e6e6ad);--sys-color-on-tertiary-fixed:light-dark(#1c1d00,#1c1d00);--sys-color-tertiary-fixed-dim:light-dark(#c9ca93,#c9ca93);--sys-color-on-tertiary-fixed-variant:light-dark(#48491f,#48491f);--sys-color-surface-dim:light-dark(#e7d7ce,#19120d);--sys-color-surface-bright:light-dark(#fff8f5,#413731);--sys-color-surface-container-lowest:light-dark(#fff,#140d08);--sys-color-surface-container-low:light-dark(#fff1ea,#221a15);--sys-color-surface-container:light-dark(#fcebe2,#261e19);--sys-color-surface-container-high:light-dark(#f6e5dc,#312823);--sys-color-surface-container-highest:light-dark(#f0dfd7,#3d332d)}}