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

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

@layer design-system.tokens{html,[data-theme=berry-expressive]{--sys-color-primary:light-dark(#1d6391,#93ccff);--sys-color-surface-tint:light-dark(#1d6391,#93ccff);--sys-color-on-primary:light-dark(#fff,#003351);--sys-color-primary-container:light-dark(#cce5ff,#004b73);--sys-color-on-primary-container:light-dark(#004b73,#cce5ff);--sys-color-secondary:light-dark(#7f553a,#f2bb9a);--sys-color-on-secondary:light-dark(#fff,#4a2810);--sys-color-secondary-container:light-dark(#ffdbc8,#643e24);--sys-color-on-secondary-container:light-dark(#643e24,#ffdbc8);--sys-color-tertiary:light-dark(#54642d,#bbce8c);--sys-color-on-tertiary:light-dark(#fff,#273503);--sys-color-tertiary-container:light-dark(#d6eba5,#3c4c18);--sys-color-on-tertiary-container:light-dark(#3c4c18,#d6eba5);--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(#fff8f7,#1c1010);--sys-color-on-background:light-dark(#251918,#f4dddb);--sys-color-surface:light-dark(#fff8f7,#1c1010);--sys-color-on-surface:light-dark(#251918,#f4dddb);--sys-color-surface-variant:light-dark(#fcdbd8,#584140);--sys-color-on-surface-variant:light-dark(#584140,#dfbfbd);--sys-color-outline:light-dark(#8b716f,#a78a88);--sys-color-outline-variant:light-dark(#dfbfbd,#584140);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#3b2d2c,#f4dddb);--sys-color-inverse-on-surface:light-dark(#ffedeb,#3b2d2c);--sys-color-inverse-primary:light-dark(#93ccff,#1d6391);--sys-color-primary-fixed:light-dark(#cce5ff,#cce5ff);--sys-color-on-primary-fixed:light-dark(#001d31,#001d31);--sys-color-primary-fixed-dim:light-dark(#93ccff,#93ccff);--sys-color-on-primary-fixed-variant:light-dark(#004b73,#004b73);--sys-color-secondary-fixed:light-dark(#ffdbc8,#ffdbc8);--sys-color-on-secondary-fixed:light-dark(#301401,#301401);--sys-color-secondary-fixed-dim:light-dark(#f2bb9a,#f2bb9a);--sys-color-on-secondary-fixed-variant:light-dark(#643e24,#643e24);--sys-color-tertiary-fixed:light-dark(#d6eba5,#d6eba5);--sys-color-on-tertiary-fixed:light-dark(#151f00,#151f00);--sys-color-tertiary-fixed-dim:light-dark(#bbce8c,#bbce8c);--sys-color-on-tertiary-fixed-variant:light-dark(#3c4c18,#3c4c18);--sys-color-surface-dim:light-dark(#ecd5d3,#1c1010);--sys-color-surface-bright:light-dark(#fff8f7,#443635);--sys-color-surface-container-lowest:light-dark(#fff,#160b0b);--sys-color-surface-container-low:light-dark(#fff0ef,#251918);--sys-color-surface-container:light-dark(#ffe9e7,#291c1c);--sys-color-surface-container-high:light-dark(#fae3e1,#342726);--sys-color-surface-container-highest:light-dark(#f4dddb,#403130)}}