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

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

@layer design-system.tokens{html,[data-theme=aqua-vibrant]{--sys-color-primary:light-dark(#006a62,#00dece);--sys-color-surface-tint:light-dark(#006a62,#00dece);--sys-color-on-primary:light-dark(#fff,#003733);--sys-color-primary-container:light-dark(#00fdeb,#00504a);--sys-color-on-primary-container:light-dark(#00504a,#00fdeb);--sys-color-secondary:light-dark(#38656a,#a0cfd4);--sys-color-on-secondary:light-dark(#fff,#00363b);--sys-color-secondary-container:light-dark(#bcebf0,#1f4d52);--sys-color-on-secondary-container:light-dark(#1f4d52,#bcebf0);--sys-color-tertiary:light-dark(#23667a,#92cfe6);--sys-color-on-tertiary:light-dark(#fff,#003543);--sys-color-tertiary-container:light-dark(#b6ebff,#004e60);--sys-color-on-tertiary-container:light-dark(#004e60,#b6ebff);--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(#eefcf9,#091614);--sys-color-on-background:light-dark(#111e1c,#d7e6e2);--sys-color-surface:light-dark(#eefcf9,#091614);--sys-color-on-surface:light-dark(#111e1c,#d7e6e2);--sys-color-surface-variant:light-dark(#d4e6e3,#394a47);--sys-color-on-surface-variant:light-dark(#394a47,#b8cac7);--sys-color-outline:light-dark(#697b78,#829491);--sys-color-outline-variant:light-dark(#b8cac7,#394a47);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#263331,#d7e6e2);--sys-color-inverse-on-surface:light-dark(#e5f4f0,#263331);--sys-color-inverse-primary:light-dark(#00dece,#006a62);--sys-color-primary-fixed:light-dark(#00fdeb,#00fdeb);--sys-color-on-primary-fixed:light-dark(#00201d,#00201d);--sys-color-primary-fixed-dim:light-dark(#00dece,#00dece);--sys-color-on-primary-fixed-variant:light-dark(#00504a,#00504a);--sys-color-secondary-fixed:light-dark(#bcebf0,#bcebf0);--sys-color-on-secondary-fixed:light-dark(#002023,#002023);--sys-color-secondary-fixed-dim:light-dark(#a0cfd4,#a0cfd4);--sys-color-on-secondary-fixed-variant:light-dark(#1f4d52,#1f4d52);--sys-color-tertiary-fixed:light-dark(#b6ebff,#b6ebff);--sys-color-on-tertiary-fixed:light-dark(#001f28,#001f28);--sys-color-tertiary-fixed-dim:light-dark(#92cfe6,#92cfe6);--sys-color-on-tertiary-fixed-variant:light-dark(#004e60,#004e60);--sys-color-surface-dim:light-dark(#cfddda,#091614);--sys-color-surface-bright:light-dark(#eefcf9,#2f3c3a);--sys-color-surface-container-lowest:light-dark(#fff,#04100f);--sys-color-surface-container-low:light-dark(#e8f7f3,#111e1c);--sys-color-surface-container:light-dark(#e2f1ee,#152220);--sys-color-surface-container-high:light-dark(#ddebe8,#202c2b);--sys-color-surface-container-highest:light-dark(#d7e6e2,#2a3735)}}