web-expressive
Version:
A standard-first frontend toolkit based on Material Expressive design language intent.
2 lines (1 loc) • 2.52 kB
CSS
@layer design-system.tokens{html,[data-theme=forest-vibrant]{--sys-color-primary:light-dark(#066b00,#76e860);--sys-color-surface-tint:light-dark(#066b00,#76e860);--sys-color-on-primary:light-dark(#d3ffc2,#035200);--sys-color-primary-container:light-dark(#76e860,#46b735);--sys-color-on-primary-container:light-dark(#035200,#012a00);--sys-color-secondary:light-dark(#006a2f,#8ff9a4);--sys-color-on-secondary:light-dark(#ceffd1,#005f2a);--sys-color-secondary-container:light-dark(#8ff9a4,#006d31);--sys-color-on-secondary-container:light-dark(#005f2a,#e4ffe3);--sys-color-tertiary:light-dark(#00666c,#79f5ff);--sys-color-on-tertiary:light-dark(#cefbff,#005b61);--sys-color-tertiary-container:#07ebf8;--sys-color-on-tertiary-container:#005257;--sys-color-error:light-dark(#b02500,#ff7351);--sys-color-on-error:light-dark(#ffefec,#450900);--sys-color-error-container:light-dark(#f95630,#b92902);--sys-color-on-error-container:light-dark(#520c00,#ffd2c8);--sys-color-background:light-dark(#dfffde,#001204);--sys-color-on-background:light-dark(#10361a,#cdf9d0);--sys-color-surface:light-dark(#dfffde,#001204);--sys-color-on-surface:light-dark(#10361a,#cdf9d0);--sys-color-surface-variant:light-dark(#b0ebb6,#002d10);--sys-color-on-surface-variant:light-dark(#3e6444,#8cb590);--sys-color-outline:light-dark(#59805e,#587e5d);--sys-color-outline-variant:light-dark(#8eb792,#2b5032);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#001204,#eaffe8);--sys-color-inverse-on-surface:light-dark(#7ea782,#385d3e);--sys-color-inverse-primary:light-dark(#76e860,#066f00);--sys-color-primary-fixed:#76e860;--sys-color-on-primary-fixed:#023c00;--sys-color-primary-fixed-dim:#68d953;--sys-color-on-primary-fixed-variant:#045c00;--sys-color-secondary-fixed:#8ff9a4;--sys-color-on-secondary-fixed:#004a1f;--sys-color-secondary-fixed-dim:#81ea97;--sys-color-on-secondary-fixed-variant:#006a2f;--sys-color-tertiary-fixed:#07ebf8;--sys-color-on-tertiary-fixed:#003d41;--sys-color-tertiary-fixed-dim:#00dbe8;--sys-color-on-tertiary-fixed-variant:#005c62;--sys-color-surface-dim:light-dark(#a4e3ac,#001204);--sys-color-surface-bright:light-dark(#dfffde,#003414);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#cdfdd0,#001806);--sys-color-surface-container:light-dark(#c1f5c5,#001f09);--sys-color-surface-container-high:light-dark(#b9f0be,#00260c);--sys-color-surface-container-highest:light-dark(#b0ebb6,#002d10)}}:root{--alpha-file:"forest-vibrant.css"}