web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.51 kB
CSS
@layer design-system.tokens{html,[data-theme=porcelain-vibrant]{--sys-color-primary:light-dark(#766300,#ffe88f);--sys-color-surface-tint:light-dark(#766300,#ffe88f);--sys-color-on-primary:light-dark(#fff,#645400);--sys-color-primary-container:#fed800;--sys-color-on-primary-container:#5b4c00;--sys-color-secondary:light-dark(#6c6700,#f1e752);--sys-color-on-secondary:light-dark(#fff,#585400);--sys-color-secondary-container:light-dark(#f1e752,#666000);--sys-color-on-secondary-container:light-dark(#585400,#fff9cb);--sys-color-tertiary:light-dark(#5a6c00,#f5ffc4);--sys-color-on-tertiary:light-dark(#fff,#560);--sys-color-tertiary-container:light-dark(#e2fd75,#ddf770);--sys-color-on-tertiary-container:light-dark(#516100,#4e5d00);--sys-color-error:light-dark(#be2d06,#ff7351);--sys-color-on-error:light-dark(#fff,#450900);--sys-color-error-container:light-dark(#f95630,#b92902);--sys-color-on-error-container:light-dark(#520c00,#ffd2c8);--sys-color-background:light-dark(#fffdef,#100f00);--sys-color-on-background:light-dark(#3c3905,#faf3ae);--sys-color-surface:light-dark(#fffdef,#100f00);--sys-color-on-surface:light-dark(#3c3905,#faf3ae);--sys-color-surface-variant:light-dark(#f3eb91,#292700);--sys-color-on-surface-variant:light-dark(#6a662f,#b3ad6e);--sys-color-outline:light-dark(#878348,#7c773e);--sys-color-outline-variant:light-dark(#c1bc7b,#4d4915);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#100f00,#fffadf);--sys-color-inverse-on-surface:light-dark(#a49f61,#5a5721);--sys-color-inverse-primary:light-dark(#fed800,#705e00);--sys-color-primary-fixed:#fed800;--sys-color-on-primary-fixed:#453900;--sys-color-primary-fixed-dim:#eeca00;--sys-color-on-primary-fixed-variant:#650;--sys-color-secondary-fixed:#f1e752;--sys-color-on-secondary-fixed:#454100;--sys-color-secondary-fixed-dim:#e2d945;--sys-color-on-secondary-fixed-variant:#635d00;--sys-color-tertiary-fixed:#e2fd75;--sys-color-on-tertiary-fixed:#404d00;--sys-color-tertiary-fixed-dim:#d4ee68;--sys-color-on-tertiary-fixed-variant:#5a6c00;--sys-color-surface-dim:light-dark(#ede687,#100f00);--sys-color-surface-bright:light-dark(#fffdef,#302d00);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#fffadf,#161400);--sys-color-surface-container:light-dark(#fef7a6,#1c1a00);--sys-color-surface-container-high:light-dark(#f8f19b,#232000);--sys-color-surface-container-highest:light-dark(#f3eb91,#292700)}}:root{--alpha-file:"porcelain-vibrant.css"}