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

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

@layer design-system.tokens{html,[data-theme=porcelain-vibrant]{--sys-color-primary:light-dark(#6f5d00,#e8c400);--sys-color-surface-tint:light-dark(#6f5d00,#e8c400);--sys-color-on-primary:light-dark(#fff,#3a3000);--sys-color-primary-container:light-dark(#ffe169,#544600);--sys-color-on-primary-container:light-dark(#544600,#ffe169);--sys-color-secondary:light-dark(#636032,#cec891);--sys-color-on-secondary:light-dark(#fff,#343108);--sys-color-secondary-container:light-dark(#eae5ab,#4b481d);--sys-color-on-secondary-container:light-dark(#4b481d,#eae5ab);--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(#fff9ee,#171306);--sys-color-on-background:light-dark(#1f1b0d,#ebe2cb);--sys-color-surface:light-dark(#fff9ee,#171306);--sys-color-on-surface:light-dark(#1f1b0d,#ebe2cb);--sys-color-surface-variant:light-dark(#ece2c6,#4d4732);--sys-color-on-surface-variant:light-dark(#4d4732,#d0c6ab);--sys-color-outline:light-dark(#7e775f,#989078);--sys-color-outline-variant:light-dark(#d0c6ab,#4d4732);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#353020,#ebe2cb);--sys-color-inverse-on-surface:light-dark(#faf0d8,#353020);--sys-color-inverse-primary:light-dark(#e8c400,#6f5d00);--sys-color-primary-fixed:#ffe169;--sys-color-on-primary-fixed:#221b00;--sys-color-primary-fixed-dim:#e8c400;--sys-color-on-primary-fixed-variant:#544600;--sys-color-secondary-fixed:#eae5ab;--sys-color-on-secondary-fixed:#1e1c00;--sys-color-secondary-fixed-dim:#cec891;--sys-color-on-secondary-fixed-variant:#4b481d;--sys-color-tertiary-fixed:#e1e89e;--sys-color-on-tertiary-fixed:#1a1e00;--sys-color-tertiary-fixed-dim:#c4cc84;--sys-color-on-tertiary-fixed-variant:#444a10;--sys-color-surface-dim:light-dark(#e2d9c2,#171306);--sys-color-surface-bright:light-dark(#fff9ee,#3e3929);--sys-color-surface-container-lowest:light-dark(#fff,#110e03);--sys-color-surface-container-low:light-dark(#fcf3db,#1f1b0d);--sys-color-surface-container:light-dark(#f7edd6,#231f11);--sys-color-surface-container-high:light-dark(#f1e8d0,#2e2a1a);--sys-color-surface-container-highest:light-dark(#ebe2cb,#393525)}}