web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.79 kB
CSS
@layer design-system.tokens{html,[data-theme=paper-expressive]{--sys-color-primary:light-dark(#006b5e,#76d7c6);--sys-color-surface-tint:light-dark(#006b5e,#76d7c6);--sys-color-on-primary:light-dark(#fff,#003730);--sys-color-primary-container:light-dark(#93f4e2,#005047);--sys-color-on-primary-container:light-dark(#005047,#93f4e2);--sys-color-secondary:light-dark(#7a5267,#ebb9d0);--sys-color-on-secondary:light-dark(#fff,#472638);--sys-color-secondary-container:light-dark(#ffd8e9,#603b4f);--sys-color-on-secondary-container:light-dark(#603b4f,#ffd8e9);--sys-color-tertiary:light-dark(#76517d,#e4b8eb);--sys-color-on-tertiary:light-dark(#fff,#44244c);--sys-color-tertiary-container:light-dark(#fbd7ff,#5c3a64);--sys-color-on-tertiary-container:light-dark(#5c3a64,#fbd7ff);--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(#fff7fc,#171119);--sys-color-on-background:light-dark(#1f1a21,#ebdfea);--sys-color-surface:light-dark(#fff7fc,#171119);--sys-color-on-surface:light-dark(#1f1a21,#ebdfea);--sys-color-surface-variant:light-dark(#eddeef,#4e4351);--sys-color-on-surface-variant:light-dark(#4e4351,#d1c2d2);--sys-color-outline:light-dark(#7f7382,#9a8c9c);--sys-color-outline-variant:light-dark(#d1c2d2,#4e4351);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#352e36,#ebdfea);--sys-color-inverse-on-surface:light-dark(#f9edf8,#352e36);--sys-color-inverse-primary:light-dark(#76d7c6,#006b5e);--sys-color-primary-fixed:light-dark(#93f4e2,#93f4e2);--sys-color-on-primary-fixed:light-dark(#00201c,#00201c);--sys-color-primary-fixed-dim:light-dark(#76d7c6,#76d7c6);--sys-color-on-primary-fixed-variant:light-dark(#005047,#005047);--sys-color-secondary-fixed:light-dark(#ffd8e9,#ffd8e9);--sys-color-on-secondary-fixed:light-dark(#2f1123,#2f1123);--sys-color-secondary-fixed-dim:light-dark(#ebb9d0,#ebb9d0);--sys-color-on-secondary-fixed-variant:light-dark(#603b4f,#603b4f);--sys-color-tertiary-fixed:light-dark(#fbd7ff,#fbd7ff);--sys-color-on-tertiary-fixed:light-dark(#2d0e36,#2d0e36);--sys-color-tertiary-fixed-dim:light-dark(#e4b8eb,#e4b8eb);--sys-color-on-tertiary-fixed-variant:light-dark(#5c3a64,#5c3a64);--sys-color-surface-dim:light-dark(#e2d7e1,#171119);--sys-color-surface-bright:light-dark(#fff7fc,#3e373f);--sys-color-surface-container-lowest:light-dark(#fff,#110c13);--sys-color-surface-container-low:light-dark(#fcf0fb,#1f1a21);--sys-color-surface-container:light-dark(#f6eaf5,#231e25);--sys-color-surface-container-high:light-dark(#f0e5ef,#2e2830);--sys-color-surface-container-highest:light-dark(#ebdfea,#39333b)}}