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

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

@layer design-system.tokens{html,[data-theme=porcelain-expressive]{--sys-color-primary:light-dark(#854a7b,#f8b0e7);--sys-color-surface-tint:light-dark(#854a7b,#f8b0e7);--sys-color-on-primary:light-dark(#fff,#501b4a);--sys-color-primary-container:light-dark(#ffd7f3,#6a3262);--sys-color-on-primary-container:light-dark(#6a3262,#ffd7f3);--sys-color-secondary:light-dark(#4c6544,#b3cea7);--sys-color-on-secondary:light-dark(#fff,#1f361a);--sys-color-secondary-container:light-dark(#ceebc1,#354d2e);--sys-color-on-secondary-container:light-dark(#354d2e,#ceebc1);--sys-color-tertiary:light-dark(#5c6326,#c4cc84);--sys-color-on-tertiary:light-dark(#fff,#2e3300);--sys-color-tertiary-container:light-dark(#e1e89e,#444a10);--sys-color-on-tertiary-container:light-dark(#444a10,#e1e89e);--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(#fdfae8,#14140a);--sys-color-on-background:light-dark(#1c1c11,#e6e3d1);--sys-color-surface:light-dark(#fdfae8,#14140a);--sys-color-on-surface:light-dark(#1c1c11,#e6e3d1);--sys-color-surface-variant:light-dark(#e6e4c9,#484834);--sys-color-on-surface-variant:light-dark(#484834,#c9c8ae);--sys-color-outline:light-dark(#797862,#93927a);--sys-color-outline-variant:light-dark(#c9c8ae,#484834);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#313125,#e6e3d1);--sys-color-inverse-on-surface:light-dark(#f4f1df,#313125);--sys-color-inverse-primary:light-dark(#f8b0e7,#854a7b);--sys-color-primary-fixed:light-dark(#ffd7f3,#ffd7f3);--sys-color-on-primary-fixed:light-dark(#370333,#370333);--sys-color-primary-fixed-dim:light-dark(#f8b0e7,#f8b0e7);--sys-color-on-primary-fixed-variant:light-dark(#6a3262,#6a3262);--sys-color-secondary-fixed:light-dark(#ceebc1,#ceebc1);--sys-color-on-secondary-fixed:light-dark(#0a2007,#0a2007);--sys-color-secondary-fixed-dim:light-dark(#b3cea7,#b3cea7);--sys-color-on-secondary-fixed-variant:light-dark(#354d2e,#354d2e);--sys-color-tertiary-fixed:light-dark(#e1e89e,#e1e89e);--sys-color-on-tertiary-fixed:light-dark(#1a1e00,#1a1e00);--sys-color-tertiary-fixed-dim:light-dark(#c4cc84,#c4cc84);--sys-color-on-tertiary-fixed-variant:light-dark(#444a10,#444a10);--sys-color-surface-dim:light-dark(#dddac9,#14140a);--sys-color-surface-bright:light-dark(#fdfae8,#3a3a2d);--sys-color-surface-container-lowest:light-dark(#fff,#0f0f06);--sys-color-surface-container-low:light-dark(#f7f4e2,#1c1c11);--sys-color-surface-container:light-dark(#f1eedc,#202015);--sys-color-surface-container-high:light-dark(#ebe9d7,#2b2b1f);--sys-color-surface-container-highest:light-dark(#e6e3d1,#363529)}}