igniteui-webcomponents 2.0.0 → 2.1.0

package/themes/light/material.css

@@ -1 +1 @@
-.igc-scrollbar{--scrolbar-size: 1rem;--igc-scrollbar-track-color: hsla(var(--igc-gray-100), var(--igc-gray-a));--igc-scrollbar-thumb-color: hsla(var(--igc-gray-400), var(--igc-gray-a))}:root{--igc-border-radius: 0.125rem;--igc-spacing-small: 0.125rem;--igc-spacing-medium: 0.25rem;--igc-spacing-large: 0.5rem}:root{--igc-primary-h: 204deg;--igc-primary-s: 100%;--igc-primary-l: 50%;--igc-primary-a: 1;--igc-secondary-h: 333deg;--igc-secondary-s: 79%;--igc-secondary-l: 50%;--igc-secondary-a: 1;--igc-gray-h: 0deg;--igc-gray-s: 0%;--igc-gray-l: 0%;--igc-gray-a: 1;--igc-surface-h: 0deg;--igc-surface-s: 0%;--igc-surface-l: 100%;--igc-surface-a: 1;--igc-info-h: 209deg;--igc-info-s: 84%;--igc-info-l: 45%;--igc-info-a: 1;--igc-success-h: 131deg;--igc-success-s: 43%;--igc-success-l: 51%;--igc-success-a: 1;--igc-warn-h: 37deg;--igc-warn-s: 96%;--igc-warn-l: 61%;--igc-warn-a: 1;--igc-error-h: 346deg;--igc-error-s: 100%;--igc-error-l: 54%;--igc-error-a: 1;--igc-primary-50: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * 1.78);--igc-primary-50-contrast: black;--igc-primary-100: var(--igc-primary-h), calc(var(--igc-primary-s) / 1.25), calc(var(--igc-primary-l) * 1.66);--igc-primary-100-contrast: black;--igc-primary-200: var(--igc-primary-h), calc(var(--igc-primary-s) * .64), calc(var(--igc-primary-l) * 1.43);--igc-primary-200-contrast: black;--igc-primary-300: var(--igc-primary-h), calc(var(--igc-primary-s) * .73), calc(var(--igc-primary-l) * 1.19);--igc-primary-300-contrast: black;--igc-primary-400: var(--igc-primary-h), calc(var(--igc-primary-s) * .875), calc(var(--igc-primary-l) * 1.08);--igc-primary-400-contrast: black;--igc-primary-500: var(--igc-primary-h), var(--igc-primary-s), var(--igc-primary-l);--igc-primary-500-contrast: black;--igc-primary-600: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.26), calc(var(--igc-primary-l) * .89);--igc-primary-600-contrast: black;--igc-primary-700: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.52), calc(var(--igc-primary-l) * .81);--igc-primary-700-contrast: black;--igc-primary-800: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.5), calc(var(--igc-primary-l) * .73);--igc-primary-800-contrast: white;--igc-primary-900: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.34), calc(var(--igc-primary-l) * .64);--igc-primary-900-contrast: white;--igc-primary-A100: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * 1.34);--igc-primary-A100-contrast: black;--igc-primary-A200: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.22), calc(var(--igc-primary-l) * 1.16);--igc-primary-A200-contrast: black;--igc-primary-A400: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * .91);--igc-primary-A400-contrast: black;--igc-primary-A700: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.22), calc(var(--igc-primary-l) * .65);--igc-primary-A700-contrast: white;--igc-secondary-50: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * 1.78);--igc-secondary-50-contrast: black;--igc-secondary-100: var(--igc-secondary-h), calc(var(--igc-secondary-s) / 1.25), calc(var(--igc-secondary-l) * 1.66);--igc-secondary-100-contrast: black;--igc-secondary-200: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .64), calc(var(--igc-secondary-l) * 1.43);--igc-secondary-200-contrast: black;--igc-secondary-300: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .73), calc(var(--igc-secondary-l) * 1.19);--igc-secondary-300-contrast: black;--igc-secondary-400: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .875), calc(var(--igc-secondary-l) * 1.08);--igc-secondary-400-contrast: black;--igc-secondary-500: var(--igc-secondary-h), var(--igc-secondary-s), var(--igc-secondary-l);--igc-secondary-500-contrast: black;--igc-secondary-600: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.26), calc(var(--igc-secondary-l) * .89);--igc-secondary-600-contrast: white;--igc-secondary-700: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.52), calc(var(--igc-secondary-l) * .81);--igc-secondary-700-contrast: white;--igc-secondary-800: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.5), calc(var(--igc-secondary-l) * .73);--igc-secondary-800-contrast: white;--igc-secondary-900: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.34), calc(var(--igc-secondary-l) * .64);--igc-secondary-900-contrast: white;--igc-secondary-A100: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * 1.34);--igc-secondary-A100-contrast: black;--igc-secondary-A200: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.22), calc(var(--igc-secondary-l) * 1.16);--igc-secondary-A200-contrast: black;--igc-secondary-A400: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * .91);--igc-secondary-A400-contrast: white;--igc-secondary-A700: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.22), calc(var(--igc-secondary-l) * .65);--igc-secondary-A700-contrast: white;--igc-gray-50: var(--igc-gray-h), var(--igc-gray-s), 98%;--igc-gray-50-contrast: black;--igc-gray-100: var(--igc-gray-h), var(--igc-gray-s), 96%;--igc-gray-100-contrast: black;--igc-gray-200: var(--igc-gray-h), var(--igc-gray-s), 93%;--igc-gray-200-contrast: black;--igc-gray-300: var(--igc-gray-h), var(--igc-gray-s), 88%;--igc-gray-300-contrast: black;--igc-gray-400: var(--igc-gray-h), var(--igc-gray-s), 74%;--igc-gray-400-contrast: black;--igc-gray-500: var(--igc-gray-h), var(--igc-gray-s), 62%;--igc-gray-500-contrast: black;--igc-gray-600: var(--igc-gray-h), var(--igc-gray-s), 54%;--igc-gray-600-contrast: black;--igc-gray-700: var(--igc-gray-h), var(--igc-gray-s), 38%;--igc-gray-700-contrast: white;--igc-gray-800: var(--igc-gray-h), var(--igc-gray-s), 26%;--igc-gray-800-contrast: white;--igc-gray-900: var(--igc-gray-h), var(--igc-gray-s), 13%;--igc-gray-900-contrast: white;--igc-surface-50: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * 1.78);--igc-surface-50-contrast: black;--igc-surface-100: var(--igc-surface-h), calc(var(--igc-surface-s) / 1.25), calc(var(--igc-surface-l) * 1.66);--igc-surface-100-contrast: black;--igc-surface-200: var(--igc-surface-h), calc(var(--igc-surface-s) * .64), calc(var(--igc-surface-l) * 1.43);--igc-surface-200-contrast: black;--igc-surface-300: var(--igc-surface-h), calc(var(--igc-surface-s) * .73), calc(var(--igc-surface-l) * 1.19);--igc-surface-300-contrast: black;--igc-surface-400: var(--igc-surface-h), calc(var(--igc-surface-s) * .875), calc(var(--igc-surface-l) * 1.08);--igc-surface-400-contrast: black;--igc-surface-500: var(--igc-surface-h), var(--igc-surface-s), var(--igc-surface-l);--igc-surface-500-contrast: black;--igc-surface-600: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.26), calc(var(--igc-surface-l) * .89);--igc-surface-600-contrast: black;--igc-surface-700: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.52), calc(var(--igc-surface-l) * .81);--igc-surface-700-contrast: black;--igc-surface-800: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.5), calc(var(--igc-surface-l) * .73);--igc-surface-800-contrast: black;--igc-surface-900: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.34), calc(var(--igc-surface-l) * .64);--igc-surface-900-contrast: black;--igc-surface-A100: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * 1.34);--igc-surface-A100-contrast: black;--igc-surface-A200: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.22), calc(var(--igc-surface-l) * 1.16);--igc-surface-A200-contrast: black;--igc-surface-A400: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * .91);--igc-surface-A400-contrast: black;--igc-surface-A700: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.22), calc(var(--igc-surface-l) * .65);--igc-surface-A700-contrast: black;--igc-info-50: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * 1.78);--igc-info-50-contrast: black;--igc-info-100: var(--igc-info-h), calc(var(--igc-info-s) / 1.25), calc(var(--igc-info-l) * 1.66);--igc-info-100-contrast: black;--igc-info-200: var(--igc-info-h), calc(var(--igc-info-s) * .64), calc(var(--igc-info-l) * 1.43);--igc-info-200-contrast: black;--igc-info-300: var(--igc-info-h), calc(var(--igc-info-s) * .73), calc(var(--igc-info-l) * 1.19);--igc-info-300-contrast: black;--igc-info-400: var(--igc-info-h), calc(var(--igc-info-s) * .875), calc(var(--igc-info-l) * 1.08);--igc-info-400-contrast: black;--igc-info-500: var(--igc-info-h), var(--igc-info-s), var(--igc-info-l);--igc-info-500-contrast: black;--igc-info-600: var(--igc-info-h), calc(var(--igc-info-s) * 1.26), calc(var(--igc-info-l) * .89);--igc-info-600-contrast: white;--igc-info-700: var(--igc-info-h), calc(var(--igc-info-s) * 1.52), calc(var(--igc-info-l) * .81);--igc-info-700-contrast: white;--igc-info-800: var(--igc-info-h), calc(var(--igc-info-s) * 1.5), calc(var(--igc-info-l) * .73);--igc-info-800-contrast: white;--igc-info-900: var(--igc-info-h), calc(var(--igc-info-s) * 1.34), calc(var(--igc-info-l) * .64);--igc-info-900-contrast: white;--igc-info-A100: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * 1.34);--igc-info-A100-contrast: black;--igc-info-A200: var(--igc-info-h), calc(var(--igc-info-s) * 1.22), calc(var(--igc-info-l) * 1.16);--igc-info-A200-contrast: black;--igc-info-A400: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * .91);--igc-info-A400-contrast: white;--igc-info-A700: var(--igc-info-h), calc(var(--igc-info-s) * 1.22), calc(var(--igc-info-l) * .65);--igc-info-A700-contrast: white;--igc-success-50: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * 1.78);--igc-success-50-contrast: black;--igc-success-100: var(--igc-success-h), calc(var(--igc-success-s) / 1.25), calc(var(--igc-success-l) * 1.66);--igc-success-100-contrast: black;--igc-success-200: var(--igc-success-h), calc(var(--igc-success-s) * .64), calc(var(--igc-success-l) * 1.43);--igc-success-200-contrast: black;--igc-success-300: var(--igc-success-h), calc(var(--igc-success-s) * .73), calc(var(--igc-success-l) * 1.19);--igc-success-300-contrast: black;--igc-success-400: var(--igc-success-h), calc(var(--igc-success-s) * .875), calc(var(--igc-success-l) * 1.08);--igc-success-400-contrast: black;--igc-success-500: var(--igc-success-h), var(--igc-success-s), var(--igc-success-l);--igc-success-500-contrast: black;--igc-success-600: var(--igc-success-h), calc(var(--igc-success-s) * 1.26), calc(var(--igc-success-l) * .89);--igc-success-600-contrast: black;--igc-success-700: var(--igc-success-h), calc(var(--igc-success-s) * 1.52), calc(var(--igc-success-l) * .81);--igc-success-700-contrast: black;--igc-success-800: var(--igc-success-h), calc(var(--igc-success-s) * 1.5), calc(var(--igc-success-l) * .73);--igc-success-800-contrast: black;--igc-success-900: var(--igc-success-h), calc(var(--igc-success-s) * 1.34), calc(var(--igc-success-l) * .64);--igc-success-900-contrast: black;--igc-success-A100: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * 1.34);--igc-success-A100-contrast: black;--igc-success-A200: var(--igc-success-h), calc(var(--igc-success-s) * 1.22), calc(var(--igc-success-l) * 1.16);--igc-success-A200-contrast: black;--igc-success-A400: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * .91);--igc-success-A400-contrast: black;--igc-success-A700: var(--igc-success-h), calc(var(--igc-success-s) * 1.22), calc(var(--igc-success-l) * .65);--igc-success-A700-contrast: black;--igc-warn-50: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * 1.78);--igc-warn-50-contrast: black;--igc-warn-100: var(--igc-warn-h), calc(var(--igc-warn-s) / 1.25), calc(var(--igc-warn-l) * 1.66);--igc-warn-100-contrast: black;--igc-warn-200: var(--igc-warn-h), calc(var(--igc-warn-s) * .64), calc(var(--igc-warn-l) * 1.43);--igc-warn-200-contrast: black;--igc-warn-300: var(--igc-warn-h), calc(var(--igc-warn-s) * .73), calc(var(--igc-warn-l) * 1.19);--igc-warn-300-contrast: black;--igc-warn-400: var(--igc-warn-h), calc(var(--igc-warn-s) * .875), calc(var(--igc-warn-l) * 1.08);--igc-warn-400-contrast: black;--igc-warn-500: var(--igc-warn-h), var(--igc-warn-s), var(--igc-warn-l);--igc-warn-500-contrast: black;--igc-warn-600: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.26), calc(var(--igc-warn-l) * .89);--igc-warn-600-contrast: black;--igc-warn-700: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.52), calc(var(--igc-warn-l) * .81);--igc-warn-700-contrast: black;--igc-warn-800: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.5), calc(var(--igc-warn-l) * .73);--igc-warn-800-contrast: black;--igc-warn-900: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.34), calc(var(--igc-warn-l) * .64);--igc-warn-900-contrast: black;--igc-warn-A100: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * 1.34);--igc-warn-A100-contrast: black;--igc-warn-A200: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.22), calc(var(--igc-warn-l) * 1.16);--igc-warn-A200-contrast: black;--igc-warn-A400: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * .91);--igc-warn-A400-contrast: black;--igc-warn-A700: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.22), calc(var(--igc-warn-l) * .65);--igc-warn-A700-contrast: black;--igc-error-50: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * 1.78);--igc-error-50-contrast: black;--igc-error-100: var(--igc-error-h), calc(var(--igc-error-s) / 1.25), calc(var(--igc-error-l) * 1.66);--igc-error-100-contrast: black;--igc-error-200: var(--igc-error-h), calc(var(--igc-error-s) * .64), calc(var(--igc-error-l) * 1.43);--igc-error-200-contrast: black;--igc-error-300: var(--igc-error-h), calc(var(--igc-error-s) * .73), calc(var(--igc-error-l) * 1.19);--igc-error-300-contrast: black;--igc-error-400: var(--igc-error-h), calc(var(--igc-error-s) * .875), calc(var(--igc-error-l) * 1.08);--igc-error-400-contrast: black;--igc-error-500: var(--igc-error-h), var(--igc-error-s), var(--igc-error-l);--igc-error-500-contrast: black;--igc-error-600: var(--igc-error-h), calc(var(--igc-error-s) * 1.26), calc(var(--igc-error-l) * .89);--igc-error-600-contrast: black;--igc-error-700: var(--igc-error-h), calc(var(--igc-error-s) * 1.52), calc(var(--igc-error-l) * .81);--igc-error-700-contrast: white;--igc-error-800: var(--igc-error-h), calc(var(--igc-error-s) * 1.5), calc(var(--igc-error-l) * .73);--igc-error-800-contrast: white;--igc-error-900: var(--igc-error-h), calc(var(--igc-error-s) * 1.34), calc(var(--igc-error-l) * .64);--igc-error-900-contrast: white;--igc-error-A100: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * 1.34);--igc-error-A100-contrast: black;--igc-error-A200: var(--igc-error-h), calc(var(--igc-error-s) * 1.22), calc(var(--igc-error-l) * 1.16);--igc-error-A200-contrast: black;--igc-error-A400: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * .91);--igc-error-A400-contrast: black;--igc-error-A700: var(--igc-error-h), calc(var(--igc-error-s) * 1.22), calc(var(--igc-error-l) * .65);--igc-error-A700-contrast: white}:root{--igc-elevation-0: none;--igc-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08);--igc-elevation-2: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);--igc-elevation-3: 0 1px 8px 0 rgba(0, 0, 0, 0.26), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.08);--igc-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, 0.26), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.08);--igc-elevation-5: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 5px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 14px 0 rgba(0, 0, 0, 0.08);--igc-elevation-6: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.08);--igc-elevation-7: 0 4px 5px -2px rgba(0, 0, 0, 0.26), 0 7px 10px 1px rgba(0, 0, 0, 0.12), 0 2px 16px 1px rgba(0, 0, 0, 0.08);--igc-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08);--igc-elevation-9: 0 5px 6px -3px rgba(0, 0, 0, 0.26), 0 9px 12px 1px rgba(0, 0, 0, 0.12), 0 3px 16px 2px rgba(0, 0, 0, 0.08);--igc-elevation-10: 0 6px 6px -3px rgba(0, 0, 0, 0.26), 0 10px 14px 1px rgba(0, 0, 0, 0.12), 0 4px 18px 3px rgba(0, 0, 0, 0.08);--igc-elevation-11: 0 6px 7px -4px rgba(0, 0, 0, 0.26), 0 11px 15px 1px rgba(0, 0, 0, 0.12), 0 4px 20px 3px rgba(0, 0, 0, 0.08);--igc-elevation-12: 0 7px 8px -4px rgba(0, 0, 0, 0.26), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 5px 22px 4px rgba(0, 0, 0, 0.08);--igc-elevation-13: 0 7px 8px -4px rgba(0, 0, 0, 0.26), 0 13px 19px 2px rgba(0, 0, 0, 0.12), 0 5px 24px 4px rgba(0, 0, 0, 0.08);--igc-elevation-14: 0 7px 9px -4px rgba(0, 0, 0, 0.26), 0 14px 21px 2px rgba(0, 0, 0, 0.12), 0 5px 26px 4px rgba(0, 0, 0, 0.08);--igc-elevation-15: 0 8px 9px -5px rgba(0, 0, 0, 0.26), 0 15px 22px 2px rgba(0, 0, 0, 0.12), 0 6px 28px 5px rgba(0, 0, 0, 0.08);--igc-elevation-16: 0 8px 10px -5px rgba(0, 0, 0, 0.26), 0 16px 24px 2px rgba(0, 0, 0, 0.12), 0 6px 30px 5px rgba(0, 0, 0, 0.08);--igc-elevation-17: 0 8px 11px -5px rgba(0, 0, 0, 0.26), 0 17px 26px 2px rgba(0, 0, 0, 0.12), 0 6px 32px 5px rgba(0, 0, 0, 0.08);--igc-elevation-18: 0 9px 11px -5px rgba(0, 0, 0, 0.26), 0 18px 28px 2px rgba(0, 0, 0, 0.12), 0 7px 34px 6px rgba(0, 0, 0, 0.08);--igc-elevation-19: 0 9px 12px -6px rgba(0, 0, 0, 0.26), 0 19px 29px 2px rgba(0, 0, 0, 0.12), 0 7px 36px 6px rgba(0, 0, 0, 0.08);--igc-elevation-20: 0 10px 13px -6px rgba(0, 0, 0, 0.26), 0 20px 31px 3px rgba(0, 0, 0, 0.12), 0 8px 38px 7px rgba(0, 0, 0, 0.08);--igc-elevation-21: 0 10px 13px -6px rgba(0, 0, 0, 0.26), 0 21px 33px 3px rgba(0, 0, 0, 0.12), 0 8px 40px 7px rgba(0, 0, 0, 0.08);--igc-elevation-22: 0 10px 14px -6px rgba(0, 0, 0, 0.26), 0 22px 35px 3px rgba(0, 0, 0, 0.12), 0 8px 42px 7px rgba(0, 0, 0, 0.08);--igc-elevation-23: 0 11px 14px -7px rgba(0, 0, 0, 0.26), 0 23px 36px 3px rgba(0, 0, 0, 0.12), 0 9px 44px 8px rgba(0, 0, 0, 0.08);--igc-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 9px 46px 8px rgba(0, 0, 0, 0.08)}:root{--igc-font-family: Roboto, sans-serif;--igc-h1-font-family: var(--igc-font-family);--igc-h1-font-weight: 300;--igc-h1-font-size: 6rem;--igc-h1-font-style: normal;--igc-h1-letter-spacing: -0.09375rem;--igc-h1-text-transform: none;--igc-h1-line-height: 7rem;--igc-h1-margin-top: 1.75rem;--igc-h1-margin-bottom: 3.5rem;--igc-h2-font-family: var(--igc-font-family);--igc-h2-font-weight: 300;--igc-h2-font-size: 3.75rem;--igc-h2-font-style: normal;--igc-h2-letter-spacing: -0.03125rem;--igc-h2-text-transform: none;--igc-h2-line-height: 4.4375rem;--igc-h2-margin-top: 1.75rem;--igc-h2-margin-bottom: 1.75rem;--igc-h3-font-family: var(--igc-font-family);--igc-h3-font-weight: 400;--igc-h3-font-size: 3rem;--igc-h3-font-style: normal;--igc-h3-letter-spacing: 0;--igc-h3-text-transform: none;--igc-h3-line-height: 3.5625rem;--igc-h3-margin-top: 1.75rem;--igc-h3-margin-bottom: 0;--igc-h4-font-family: var(--igc-font-family);--igc-h4-font-weight: 400;--igc-h4-font-size: 2.125rem;--igc-h4-font-style: normal;--igc-h4-letter-spacing: 0.015625rem;--igc-h4-text-transform: none;--igc-h4-line-height: 2.5rem;--igc-h4-margin-top: 1.75rem;--igc-h4-margin-bottom: 0;--igc-h5-font-family: var(--igc-font-family);--igc-h5-font-weight: 400;--igc-h5-font-size: 1.5rem;--igc-h5-font-style: normal;--igc-h5-letter-spacing: 0;--igc-h5-text-transform: none;--igc-h5-line-height: 1.75rem;--igc-h5-margin-top: 1.75rem;--igc-h5-margin-bottom: 0;--igc-h6-font-family: var(--igc-font-family);--igc-h6-font-weight: 600;--igc-h6-font-size: 1.25rem;--igc-h6-font-style: normal;--igc-h6-letter-spacing: 0.009375rem;--igc-h6-text-transform: none;--igc-h6-line-height: 1.5rem;--igc-h6-margin-top: 0;--igc-h6-margin-bottom: 0;--igc-subtitle-1-font-family: var(--igc-font-family);--igc-subtitle-1-font-weight: 400;--igc-subtitle-1-font-size: 1rem;--igc-subtitle-1-font-style: normal;--igc-subtitle-1-letter-spacing: 0.009375rem;--igc-subtitle-1-text-transform: none;--igc-subtitle-1-line-height: 1.5rem;--igc-subtitle-2-font-family: var(--igc-font-family);--igc-subtitle-2-font-weight: 600;--igc-subtitle-2-font-size: 0.875rem;--igc-subtitle-2-font-style: normal;--igc-subtitle-2-letter-spacing: 0.00625rem;--igc-subtitle-2-text-transform: none;--igc-subtitle-2-line-height: 1.5rem;--igc-body-1-font-family: var(--igc-font-family);--igc-body-1-font-weight: 400;--igc-body-1-font-size: 1rem;--igc-body-1-font-style: normal;--igc-body-1-letter-spacing: 0.03125rem;--igc-body-1-text-transform: none;--igc-body-1-line-height: 1.75rem;--igc-body-1-margin-top: 1.75rem;--igc-body-1-margin-bottom: 1rem;--igc-body-2-font-family: var(--igc-font-family);--igc-body-2-font-weight: 400;--igc-body-2-font-size: 0.875rem;--igc-body-2-font-style: normal;--igc-body-2-letter-spacing: 0.015625rem;--igc-body-2-text-transform: none;--igc-body-2-line-height: 1.25rem;--igc-button-font-family: var(--igc-font-family);--igc-button-font-weight: 600;--igc-button-font-size: 0.875rem;--igc-button-font-style: normal;--igc-button-letter-spacing: 0.046875rem;--igc-button-text-transform: uppercase;--igc-button-line-height: 1rem;--igc-caption-font-family: var(--igc-font-family);--igc-caption-font-weight: 400;--igc-caption-font-size: 0.75rem;--igc-caption-font-style: normal;--igc-caption-letter-spacing: 0.025rem;--igc-caption-text-transform: none;--igc-caption-line-height: 1rem;--igc-overline-font-family: var(--igc-font-family);--igc-overline-font-weight: 400;--igc-overline-font-size: 0.625rem;--igc-overline-font-style: normal;--igc-overline-letter-spacing: 0.09375rem;--igc-overline-text-transform: uppercase;--igc-overline-line-height: 1rem}
+.igc-scrollbar{--scrolbar-size: 1rem;--igc-scrollbar-track-color: hsla(var(--igc-gray-100), var(--igc-gray-a));--igc-scrollbar-thumb-color: hsla(var(--igc-gray-400), var(--igc-gray-a))}:root{--igc-theme: material;--igc-radius-factor: 1;--igc-spacing-small: 0.125rem;--igc-spacing-medium: 0.25rem;--igc-spacing-large: 0.5rem}:root{--igc-primary-h: 204deg;--igc-primary-s: 100%;--igc-primary-l: 50%;--igc-primary-a: 1;--igc-secondary-h: 333deg;--igc-secondary-s: 79%;--igc-secondary-l: 50%;--igc-secondary-a: 1;--igc-gray-h: 0deg;--igc-gray-s: 0%;--igc-gray-l: 0%;--igc-gray-a: 1;--igc-surface-h: 0deg;--igc-surface-s: 0%;--igc-surface-l: 100%;--igc-surface-a: 1;--igc-info-h: 209deg;--igc-info-s: 84%;--igc-info-l: 45%;--igc-info-a: 1;--igc-success-h: 131deg;--igc-success-s: 43%;--igc-success-l: 51%;--igc-success-a: 1;--igc-warn-h: 37deg;--igc-warn-s: 96%;--igc-warn-l: 61%;--igc-warn-a: 1;--igc-error-h: 346deg;--igc-error-s: 100%;--igc-error-l: 54%;--igc-error-a: 1;--igc-primary-50: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * 1.78);--igc-primary-50-contrast: black;--igc-primary-100: var(--igc-primary-h), calc(var(--igc-primary-s) / 1.25), calc(var(--igc-primary-l) * 1.66);--igc-primary-100-contrast: black;--igc-primary-200: var(--igc-primary-h), calc(var(--igc-primary-s) * .64), calc(var(--igc-primary-l) * 1.43);--igc-primary-200-contrast: black;--igc-primary-300: var(--igc-primary-h), calc(var(--igc-primary-s) * .73), calc(var(--igc-primary-l) * 1.19);--igc-primary-300-contrast: black;--igc-primary-400: var(--igc-primary-h), calc(var(--igc-primary-s) * .875), calc(var(--igc-primary-l) * 1.08);--igc-primary-400-contrast: black;--igc-primary-500: var(--igc-primary-h), var(--igc-primary-s), var(--igc-primary-l);--igc-primary-500-contrast: black;--igc-primary-600: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.26), calc(var(--igc-primary-l) * .89);--igc-primary-600-contrast: black;--igc-primary-700: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.52), calc(var(--igc-primary-l) * .81);--igc-primary-700-contrast: black;--igc-primary-800: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.5), calc(var(--igc-primary-l) * .73);--igc-primary-800-contrast: white;--igc-primary-900: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.34), calc(var(--igc-primary-l) * .64);--igc-primary-900-contrast: white;--igc-primary-A100: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * 1.34);--igc-primary-A100-contrast: black;--igc-primary-A200: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.22), calc(var(--igc-primary-l) * 1.16);--igc-primary-A200-contrast: black;--igc-primary-A400: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.23), calc(var(--igc-primary-l) * .91);--igc-primary-A400-contrast: black;--igc-primary-A700: var(--igc-primary-h), calc(var(--igc-primary-s) * 1.22), calc(var(--igc-primary-l) * .65);--igc-primary-A700-contrast: white;--igc-secondary-50: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * 1.78);--igc-secondary-50-contrast: black;--igc-secondary-100: var(--igc-secondary-h), calc(var(--igc-secondary-s) / 1.25), calc(var(--igc-secondary-l) * 1.66);--igc-secondary-100-contrast: black;--igc-secondary-200: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .64), calc(var(--igc-secondary-l) * 1.43);--igc-secondary-200-contrast: black;--igc-secondary-300: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .73), calc(var(--igc-secondary-l) * 1.19);--igc-secondary-300-contrast: black;--igc-secondary-400: var(--igc-secondary-h), calc(var(--igc-secondary-s) * .875), calc(var(--igc-secondary-l) * 1.08);--igc-secondary-400-contrast: black;--igc-secondary-500: var(--igc-secondary-h), var(--igc-secondary-s), var(--igc-secondary-l);--igc-secondary-500-contrast: black;--igc-secondary-600: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.26), calc(var(--igc-secondary-l) * .89);--igc-secondary-600-contrast: white;--igc-secondary-700: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.52), calc(var(--igc-secondary-l) * .81);--igc-secondary-700-contrast: white;--igc-secondary-800: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.5), calc(var(--igc-secondary-l) * .73);--igc-secondary-800-contrast: white;--igc-secondary-900: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.34), calc(var(--igc-secondary-l) * .64);--igc-secondary-900-contrast: white;--igc-secondary-A100: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * 1.34);--igc-secondary-A100-contrast: black;--igc-secondary-A200: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.22), calc(var(--igc-secondary-l) * 1.16);--igc-secondary-A200-contrast: black;--igc-secondary-A400: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.23), calc(var(--igc-secondary-l) * .91);--igc-secondary-A400-contrast: white;--igc-secondary-A700: var(--igc-secondary-h), calc(var(--igc-secondary-s) * 1.22), calc(var(--igc-secondary-l) * .65);--igc-secondary-A700-contrast: white;--igc-gray-50: var(--igc-gray-h), var(--igc-gray-s), 98%;--igc-gray-50-contrast: black;--igc-gray-100: var(--igc-gray-h), var(--igc-gray-s), 96%;--igc-gray-100-contrast: black;--igc-gray-200: var(--igc-gray-h), var(--igc-gray-s), 93%;--igc-gray-200-contrast: black;--igc-gray-300: var(--igc-gray-h), var(--igc-gray-s), 88%;--igc-gray-300-contrast: black;--igc-gray-400: var(--igc-gray-h), var(--igc-gray-s), 74%;--igc-gray-400-contrast: black;--igc-gray-500: var(--igc-gray-h), var(--igc-gray-s), 62%;--igc-gray-500-contrast: black;--igc-gray-600: var(--igc-gray-h), var(--igc-gray-s), 54%;--igc-gray-600-contrast: black;--igc-gray-700: var(--igc-gray-h), var(--igc-gray-s), 38%;--igc-gray-700-contrast: white;--igc-gray-800: var(--igc-gray-h), var(--igc-gray-s), 26%;--igc-gray-800-contrast: white;--igc-gray-900: var(--igc-gray-h), var(--igc-gray-s), 13%;--igc-gray-900-contrast: white;--igc-surface-50: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * 1.78);--igc-surface-50-contrast: black;--igc-surface-100: var(--igc-surface-h), calc(var(--igc-surface-s) / 1.25), calc(var(--igc-surface-l) * 1.66);--igc-surface-100-contrast: black;--igc-surface-200: var(--igc-surface-h), calc(var(--igc-surface-s) * .64), calc(var(--igc-surface-l) * 1.43);--igc-surface-200-contrast: black;--igc-surface-300: var(--igc-surface-h), calc(var(--igc-surface-s) * .73), calc(var(--igc-surface-l) * 1.19);--igc-surface-300-contrast: black;--igc-surface-400: var(--igc-surface-h), calc(var(--igc-surface-s) * .875), calc(var(--igc-surface-l) * 1.08);--igc-surface-400-contrast: black;--igc-surface-500: var(--igc-surface-h), var(--igc-surface-s), var(--igc-surface-l);--igc-surface-500-contrast: black;--igc-surface-600: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.26), calc(var(--igc-surface-l) * .89);--igc-surface-600-contrast: black;--igc-surface-700: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.52), calc(var(--igc-surface-l) * .81);--igc-surface-700-contrast: black;--igc-surface-800: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.5), calc(var(--igc-surface-l) * .73);--igc-surface-800-contrast: black;--igc-surface-900: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.34), calc(var(--igc-surface-l) * .64);--igc-surface-900-contrast: black;--igc-surface-A100: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * 1.34);--igc-surface-A100-contrast: black;--igc-surface-A200: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.22), calc(var(--igc-surface-l) * 1.16);--igc-surface-A200-contrast: black;--igc-surface-A400: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.23), calc(var(--igc-surface-l) * .91);--igc-surface-A400-contrast: black;--igc-surface-A700: var(--igc-surface-h), calc(var(--igc-surface-s) * 1.22), calc(var(--igc-surface-l) * .65);--igc-surface-A700-contrast: black;--igc-info-50: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * 1.78);--igc-info-50-contrast: black;--igc-info-100: var(--igc-info-h), calc(var(--igc-info-s) / 1.25), calc(var(--igc-info-l) * 1.66);--igc-info-100-contrast: black;--igc-info-200: var(--igc-info-h), calc(var(--igc-info-s) * .64), calc(var(--igc-info-l) * 1.43);--igc-info-200-contrast: black;--igc-info-300: var(--igc-info-h), calc(var(--igc-info-s) * .73), calc(var(--igc-info-l) * 1.19);--igc-info-300-contrast: black;--igc-info-400: var(--igc-info-h), calc(var(--igc-info-s) * .875), calc(var(--igc-info-l) * 1.08);--igc-info-400-contrast: black;--igc-info-500: var(--igc-info-h), var(--igc-info-s), var(--igc-info-l);--igc-info-500-contrast: black;--igc-info-600: var(--igc-info-h), calc(var(--igc-info-s) * 1.26), calc(var(--igc-info-l) * .89);--igc-info-600-contrast: white;--igc-info-700: var(--igc-info-h), calc(var(--igc-info-s) * 1.52), calc(var(--igc-info-l) * .81);--igc-info-700-contrast: white;--igc-info-800: var(--igc-info-h), calc(var(--igc-info-s) * 1.5), calc(var(--igc-info-l) * .73);--igc-info-800-contrast: white;--igc-info-900: var(--igc-info-h), calc(var(--igc-info-s) * 1.34), calc(var(--igc-info-l) * .64);--igc-info-900-contrast: white;--igc-info-A100: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * 1.34);--igc-info-A100-contrast: black;--igc-info-A200: var(--igc-info-h), calc(var(--igc-info-s) * 1.22), calc(var(--igc-info-l) * 1.16);--igc-info-A200-contrast: black;--igc-info-A400: var(--igc-info-h), calc(var(--igc-info-s) * 1.23), calc(var(--igc-info-l) * .91);--igc-info-A400-contrast: white;--igc-info-A700: var(--igc-info-h), calc(var(--igc-info-s) * 1.22), calc(var(--igc-info-l) * .65);--igc-info-A700-contrast: white;--igc-success-50: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * 1.78);--igc-success-50-contrast: black;--igc-success-100: var(--igc-success-h), calc(var(--igc-success-s) / 1.25), calc(var(--igc-success-l) * 1.66);--igc-success-100-contrast: black;--igc-success-200: var(--igc-success-h), calc(var(--igc-success-s) * .64), calc(var(--igc-success-l) * 1.43);--igc-success-200-contrast: black;--igc-success-300: var(--igc-success-h), calc(var(--igc-success-s) * .73), calc(var(--igc-success-l) * 1.19);--igc-success-300-contrast: black;--igc-success-400: var(--igc-success-h), calc(var(--igc-success-s) * .875), calc(var(--igc-success-l) * 1.08);--igc-success-400-contrast: black;--igc-success-500: var(--igc-success-h), var(--igc-success-s), var(--igc-success-l);--igc-success-500-contrast: black;--igc-success-600: var(--igc-success-h), calc(var(--igc-success-s) * 1.26), calc(var(--igc-success-l) * .89);--igc-success-600-contrast: black;--igc-success-700: var(--igc-success-h), calc(var(--igc-success-s) * 1.52), calc(var(--igc-success-l) * .81);--igc-success-700-contrast: black;--igc-success-800: var(--igc-success-h), calc(var(--igc-success-s) * 1.5), calc(var(--igc-success-l) * .73);--igc-success-800-contrast: black;--igc-success-900: var(--igc-success-h), calc(var(--igc-success-s) * 1.34), calc(var(--igc-success-l) * .64);--igc-success-900-contrast: black;--igc-success-A100: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * 1.34);--igc-success-A100-contrast: black;--igc-success-A200: var(--igc-success-h), calc(var(--igc-success-s) * 1.22), calc(var(--igc-success-l) * 1.16);--igc-success-A200-contrast: black;--igc-success-A400: var(--igc-success-h), calc(var(--igc-success-s) * 1.23), calc(var(--igc-success-l) * .91);--igc-success-A400-contrast: black;--igc-success-A700: var(--igc-success-h), calc(var(--igc-success-s) * 1.22), calc(var(--igc-success-l) * .65);--igc-success-A700-contrast: black;--igc-warn-50: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * 1.78);--igc-warn-50-contrast: black;--igc-warn-100: var(--igc-warn-h), calc(var(--igc-warn-s) / 1.25), calc(var(--igc-warn-l) * 1.66);--igc-warn-100-contrast: black;--igc-warn-200: var(--igc-warn-h), calc(var(--igc-warn-s) * .64), calc(var(--igc-warn-l) * 1.43);--igc-warn-200-contrast: black;--igc-warn-300: var(--igc-warn-h), calc(var(--igc-warn-s) * .73), calc(var(--igc-warn-l) * 1.19);--igc-warn-300-contrast: black;--igc-warn-400: var(--igc-warn-h), calc(var(--igc-warn-s) * .875), calc(var(--igc-warn-l) * 1.08);--igc-warn-400-contrast: black;--igc-warn-500: var(--igc-warn-h), var(--igc-warn-s), var(--igc-warn-l);--igc-warn-500-contrast: black;--igc-warn-600: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.26), calc(var(--igc-warn-l) * .89);--igc-warn-600-contrast: black;--igc-warn-700: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.52), calc(var(--igc-warn-l) * .81);--igc-warn-700-contrast: black;--igc-warn-800: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.5), calc(var(--igc-warn-l) * .73);--igc-warn-800-contrast: black;--igc-warn-900: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.34), calc(var(--igc-warn-l) * .64);--igc-warn-900-contrast: black;--igc-warn-A100: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * 1.34);--igc-warn-A100-contrast: black;--igc-warn-A200: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.22), calc(var(--igc-warn-l) * 1.16);--igc-warn-A200-contrast: black;--igc-warn-A400: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.23), calc(var(--igc-warn-l) * .91);--igc-warn-A400-contrast: black;--igc-warn-A700: var(--igc-warn-h), calc(var(--igc-warn-s) * 1.22), calc(var(--igc-warn-l) * .65);--igc-warn-A700-contrast: black;--igc-error-50: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * 1.78);--igc-error-50-contrast: black;--igc-error-100: var(--igc-error-h), calc(var(--igc-error-s) / 1.25), calc(var(--igc-error-l) * 1.66);--igc-error-100-contrast: black;--igc-error-200: var(--igc-error-h), calc(var(--igc-error-s) * .64), calc(var(--igc-error-l) * 1.43);--igc-error-200-contrast: black;--igc-error-300: var(--igc-error-h), calc(var(--igc-error-s) * .73), calc(var(--igc-error-l) * 1.19);--igc-error-300-contrast: black;--igc-error-400: var(--igc-error-h), calc(var(--igc-error-s) * .875), calc(var(--igc-error-l) * 1.08);--igc-error-400-contrast: black;--igc-error-500: var(--igc-error-h), var(--igc-error-s), var(--igc-error-l);--igc-error-500-contrast: black;--igc-error-600: var(--igc-error-h), calc(var(--igc-error-s) * 1.26), calc(var(--igc-error-l) * .89);--igc-error-600-contrast: black;--igc-error-700: var(--igc-error-h), calc(var(--igc-error-s) * 1.52), calc(var(--igc-error-l) * .81);--igc-error-700-contrast: white;--igc-error-800: var(--igc-error-h), calc(var(--igc-error-s) * 1.5), calc(var(--igc-error-l) * .73);--igc-error-800-contrast: white;--igc-error-900: var(--igc-error-h), calc(var(--igc-error-s) * 1.34), calc(var(--igc-error-l) * .64);--igc-error-900-contrast: white;--igc-error-A100: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * 1.34);--igc-error-A100-contrast: black;--igc-error-A200: var(--igc-error-h), calc(var(--igc-error-s) * 1.22), calc(var(--igc-error-l) * 1.16);--igc-error-A200-contrast: black;--igc-error-A400: var(--igc-error-h), calc(var(--igc-error-s) * 1.23), calc(var(--igc-error-l) * .91);--igc-error-A400-contrast: black;--igc-error-A700: var(--igc-error-h), calc(var(--igc-error-s) * 1.22), calc(var(--igc-error-l) * .65);--igc-error-A700-contrast: white}:root{--igc-elevation-0: none;--igc-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08);--igc-elevation-2: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);--igc-elevation-3: 0 1px 8px 0 rgba(0, 0, 0, 0.26), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.08);--igc-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, 0.26), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.08);--igc-elevation-5: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 5px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 14px 0 rgba(0, 0, 0, 0.08);--igc-elevation-6: 0 3px 5px -1px rgba(0, 0, 0, 0.26), 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 1px 18px 0 rgba(0, 0, 0, 0.08);--igc-elevation-7: 0 4px 5px -2px rgba(0, 0, 0, 0.26), 0 7px 10px 1px rgba(0, 0, 0, 0.12), 0 2px 16px 1px rgba(0, 0, 0, 0.08);--igc-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, 0.26), 0 8px 10px 1px rgba(0, 0, 0, 0.12), 0 3px 14px 2px rgba(0, 0, 0, 0.08);--igc-elevation-9: 0 5px 6px -3px rgba(0, 0, 0, 0.26), 0 9px 12px 1px rgba(0, 0, 0, 0.12), 0 3px 16px 2px rgba(0, 0, 0, 0.08);--igc-elevation-10: 0 6px 6px -3px rgba(0, 0, 0, 0.26), 0 10px 14px 1px rgba(0, 0, 0, 0.12), 0 4px 18px 3px rgba(0, 0, 0, 0.08);--igc-elevation-11: 0 6px 7px -4px rgba(0, 0, 0, 0.26), 0 11px 15px 1px rgba(0, 0, 0, 0.12), 0 4px 20px 3px rgba(0, 0, 0, 0.08);--igc-elevation-12: 0 7px 8px -4px rgba(0, 0, 0, 0.26), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 5px 22px 4px rgba(0, 0, 0, 0.08);--igc-elevation-13: 0 7px 8px -4px rgba(0, 0, 0, 0.26), 0 13px 19px 2px rgba(0, 0, 0, 0.12), 0 5px 24px 4px rgba(0, 0, 0, 0.08);--igc-elevation-14: 0 7px 9px -4px rgba(0, 0, 0, 0.26), 0 14px 21px 2px rgba(0, 0, 0, 0.12), 0 5px 26px 4px rgba(0, 0, 0, 0.08);--igc-elevation-15: 0 8px 9px -5px rgba(0, 0, 0, 0.26), 0 15px 22px 2px rgba(0, 0, 0, 0.12), 0 6px 28px 5px rgba(0, 0, 0, 0.08);--igc-elevation-16: 0 8px 10px -5px rgba(0, 0, 0, 0.26), 0 16px 24px 2px rgba(0, 0, 0, 0.12), 0 6px 30px 5px rgba(0, 0, 0, 0.08);--igc-elevation-17: 0 8px 11px -5px rgba(0, 0, 0, 0.26), 0 17px 26px 2px rgba(0, 0, 0, 0.12), 0 6px 32px 5px rgba(0, 0, 0, 0.08);--igc-elevation-18: 0 9px 11px -5px rgba(0, 0, 0, 0.26), 0 18px 28px 2px rgba(0, 0, 0, 0.12), 0 7px 34px 6px rgba(0, 0, 0, 0.08);--igc-elevation-19: 0 9px 12px -6px rgba(0, 0, 0, 0.26), 0 19px 29px 2px rgba(0, 0, 0, 0.12), 0 7px 36px 6px rgba(0, 0, 0, 0.08);--igc-elevation-20: 0 10px 13px -6px rgba(0, 0, 0, 0.26), 0 20px 31px 3px rgba(0, 0, 0, 0.12), 0 8px 38px 7px rgba(0, 0, 0, 0.08);--igc-elevation-21: 0 10px 13px -6px rgba(0, 0, 0, 0.26), 0 21px 33px 3px rgba(0, 0, 0, 0.12), 0 8px 40px 7px rgba(0, 0, 0, 0.08);--igc-elevation-22: 0 10px 14px -6px rgba(0, 0, 0, 0.26), 0 22px 35px 3px rgba(0, 0, 0, 0.12), 0 8px 42px 7px rgba(0, 0, 0, 0.08);--igc-elevation-23: 0 11px 14px -7px rgba(0, 0, 0, 0.26), 0 23px 36px 3px rgba(0, 0, 0, 0.12), 0 9px 44px 8px rgba(0, 0, 0, 0.08);--igc-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 9px 46px 8px rgba(0, 0, 0, 0.08)}:root{--igc-font-family: Roboto, sans-serif;--igc-h1-font-family: var(--igc-font-family);--igc-h1-font-weight: 300;--igc-h1-font-size: 6rem;--igc-h1-font-style: normal;--igc-h1-letter-spacing: -0.09375rem;--igc-h1-text-transform: none;--igc-h1-line-height: 7rem;--igc-h1-margin-top: 1.75rem;--igc-h1-margin-bottom: 3.5rem;--igc-h2-font-family: var(--igc-font-family);--igc-h2-font-weight: 300;--igc-h2-font-size: 3.75rem;--igc-h2-font-style: normal;--igc-h2-letter-spacing: -0.03125rem;--igc-h2-text-transform: none;--igc-h2-line-height: 4.4375rem;--igc-h2-margin-top: 1.75rem;--igc-h2-margin-bottom: 1.75rem;--igc-h3-font-family: var(--igc-font-family);--igc-h3-font-weight: 400;--igc-h3-font-size: 3rem;--igc-h3-font-style: normal;--igc-h3-letter-spacing: 0;--igc-h3-text-transform: none;--igc-h3-line-height: 3.5625rem;--igc-h3-margin-top: 1.75rem;--igc-h3-margin-bottom: 0;--igc-h4-font-family: var(--igc-font-family);--igc-h4-font-weight: 400;--igc-h4-font-size: 2.125rem;--igc-h4-font-style: normal;--igc-h4-letter-spacing: 0.015625rem;--igc-h4-text-transform: none;--igc-h4-line-height: 2.5rem;--igc-h4-margin-top: 1.75rem;--igc-h4-margin-bottom: 0;--igc-h5-font-family: var(--igc-font-family);--igc-h5-font-weight: 400;--igc-h5-font-size: 1.5rem;--igc-h5-font-style: normal;--igc-h5-letter-spacing: 0;--igc-h5-text-transform: none;--igc-h5-line-height: 1.75rem;--igc-h5-margin-top: 1.75rem;--igc-h5-margin-bottom: 0;--igc-h6-font-family: var(--igc-font-family);--igc-h6-font-weight: 600;--igc-h6-font-size: 1.25rem;--igc-h6-font-style: normal;--igc-h6-letter-spacing: 0.009375rem;--igc-h6-text-transform: none;--igc-h6-line-height: 1.5rem;--igc-h6-margin-top: 0;--igc-h6-margin-bottom: 0;--igc-subtitle-1-font-family: var(--igc-font-family);--igc-subtitle-1-font-weight: 400;--igc-subtitle-1-font-size: 1rem;--igc-subtitle-1-font-style: normal;--igc-subtitle-1-letter-spacing: 0.009375rem;--igc-subtitle-1-text-transform: none;--igc-subtitle-1-line-height: 1.5rem;--igc-subtitle-2-font-family: var(--igc-font-family);--igc-subtitle-2-font-weight: 600;--igc-subtitle-2-font-size: 0.875rem;--igc-subtitle-2-font-style: normal;--igc-subtitle-2-letter-spacing: 0.00625rem;--igc-subtitle-2-text-transform: none;--igc-subtitle-2-line-height: 1.5rem;--igc-body-1-font-family: var(--igc-font-family);--igc-body-1-font-weight: 400;--igc-body-1-font-size: 1rem;--igc-body-1-font-style: normal;--igc-body-1-letter-spacing: 0.03125rem;--igc-body-1-text-transform: none;--igc-body-1-line-height: 1.75rem;--igc-body-1-margin-top: 1.75rem;--igc-body-1-margin-bottom: 1rem;--igc-body-2-font-family: var(--igc-font-family);--igc-body-2-font-weight: 400;--igc-body-2-font-size: 0.875rem;--igc-body-2-font-style: normal;--igc-body-2-letter-spacing: 0.015625rem;--igc-body-2-text-transform: none;--igc-body-2-line-height: 1.25rem;--igc-button-font-family: var(--igc-font-family);--igc-button-font-weight: 600;--igc-button-font-size: 0.875rem;--igc-button-font-style: normal;--igc-button-letter-spacing: 0.046875rem;--igc-button-text-transform: uppercase;--igc-button-line-height: 1rem;--igc-caption-font-family: var(--igc-font-family);--igc-caption-font-weight: 400;--igc-caption-font-size: 0.75rem;--igc-caption-font-style: normal;--igc-caption-letter-spacing: 0.025rem;--igc-caption-text-transform: none;--igc-caption-line-height: 1rem;--igc-overline-font-family: var(--igc-font-family);--igc-overline-font-weight: 400;--igc-overline-font-size: 0.625rem;--igc-overline-font-style: normal;--igc-overline-letter-spacing: 0.09375rem;--igc-overline-text-transform: uppercase;--igc-overline-line-height: 1rem}

package/theming/config.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from './types';
+export declare const getTheme: () => Theme;
+export declare const setTheme: (value: Theme) => void;
+/**
+ * Allows the global configuration of the active theme.
+ *
+ * Usage:
+ *  ```ts
+ *  import { configureTheme } from 'igniteui-webcomponents';
+ *
+ *  configureTheme({ theme: 'material' });
+ *  ```
+ */
+export declare const configureTheme: (t: Theme) => void;

package/theming/config.js

@@ -0,0 +1,27 @@
+import { CHANGE_THEME_EVENT } from './theming-event';
+import { getAllCSSVariables } from './utils';
+let theme;
+function dispatchThemingEvent(detail) {
+    window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));
+}
+function isOfTypeTheme(theme) {
+    return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);
+}
+export const getTheme = () => {
+    if (!theme) {
+        const [_, t] = Object.entries(getAllCSSVariables()).find(([v]) => v === 'igcTheme') ||
+            [];
+        theme = t && isOfTypeTheme(t) ? t : 'bootstrap';
+    }
+    return theme;
+};
+export const setTheme = (value) => {
+    theme = value;
+};
+export const configureTheme = (t) => {
+    if (isOfTypeTheme(t)) {
+        setTheme(t);
+    }
+    dispatchThemingEvent({ theme });
+};
+//# sourceMappingURL=config.js.map

package/theming/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/theming/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,IAAI,KAAY,CAAC;AAKjB,SAAS,oBAAoB,CAAC,MAA8B;IAC1D,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;IAClC,OAAO,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgB,GAAG,EAAE;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC;YACpE,EAAE,CAAC;QAEL,KAAK,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAW,CAAC,CAAC,CAAC,WAAW,CAAC;KAC5D;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,GAAG,KAAK,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;IACzC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE;QACpB,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb;IAED,oBAAoB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { ChangeThemeEventDetail, CHANGE_THEME_EVENT } from './theming-event';\nimport { Theme } from './types';\nimport { getAllCSSVariables } from './utils';\n\nlet theme: Theme;\n\n/**\n * Dispatch an \"igc-change-theme\" event to `window` with the given detail.\n */\nfunction dispatchThemingEvent(detail: ChangeThemeEventDetail) {\n  window.dispatchEvent(new CustomEvent(CHANGE_THEME_EVENT, { detail }));\n}\n\nfunction isOfTypeTheme(theme: string): theme is Theme {\n  return ['bootstrap', 'material', 'indigo', 'fluent'].includes(theme);\n}\n\nexport const getTheme: () => Theme = () => {\n  if (!theme) {\n    const [_, t] =\n      Object.entries(getAllCSSVariables()).find(([v]) => v === 'igcTheme') ||\n      [];\n\n    theme = t && isOfTypeTheme(t) ? (t as Theme) : 'bootstrap';\n  }\n\n  return theme;\n};\n\nexport const setTheme = (value: Theme) => {\n  theme = value;\n};\n\n/**\n * Allows the global configuration of the active theme.\n *\n * Usage:\n *  ```ts\n *  import { configureTheme } from 'igniteui-webcomponents';\n *\n *  configureTheme({ theme: 'material' });\n *  ```\n */\nexport const configureTheme = (t: Theme) => {\n  if (isOfTypeTheme(t)) {\n    setTheme(t);\n  }\n\n  dispatchThemingEvent({ theme });\n};\n"]}

package/theming/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './theming-controlller';
+export * from './theming-decorator';
+export * from './types';

package/theming/index.js

@@ -0,0 +1,5 @@
+export * from './config';
+export * from './theming-controlller';
+export * from './theming-decorator';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/theming/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC","sourcesContent":["export * from './config';\nexport * from './theming-controlller';\nexport * from './theming-decorator';\nexport * from './types';\n"]}

package/theming/theming-controlller.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveController, ReactiveControllerHost, ReactiveElement } from 'lit';
+import { Theme, ThemeController, Themes } from './types';
+declare class ThemingController implements ReactiveController, ThemeController {
+    private themes;
+    private host;
+    theme: Theme;
+    constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
+    private readonly __themingEventHandler;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    protected adoptStyles(): void;
+}
+declare const _updateWhenThemeChanges: (host: ReactiveControllerHost & ReactiveElement, themes: Themes) => ThemingController;
+export declare const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {
+    _THEMING_CONTROLLER_FN_?: never;
+};
+export {};

package/theming/theming-controlller.js

@@ -0,0 +1,49 @@
+import { adoptStyles, css, } from 'lit';
+import { getTheme } from './config';
+import { CHANGE_THEME_EVENT } from './theming-event';
+class ThemingController {
+    constructor(host, themes) {
+        this.__themingEventHandler = () => {
+            this.adoptStyles();
+            this.host.requestUpdate();
+        };
+        this.host = host;
+        this.themes = themes;
+    }
+    hostConnected() {
+        this.adoptStyles();
+        window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+    }
+    hostDisconnected() {
+        window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+    }
+    adoptStyles() {
+        this.theme = getTheme();
+        const ctor = this.host.constructor;
+        const supportsAdoptingStyleSheets = window.ShadowRoot &&
+            'adoptedStyleSheets' in Document.prototype &&
+            'replace' in CSSStyleSheet.prototype;
+        let styleSheet = css ``;
+        const [theme] = Object.entries(this.themes).filter(([name]) => name === this.theme);
+        if (theme) {
+            const [_, cssResult] = theme;
+            styleSheet = cssResult;
+        }
+        if (!supportsAdoptingStyleSheets) {
+            [...this.host.renderRoot.querySelectorAll('style')]
+                .slice(1)
+                .forEach((tag) => tag.remove());
+        }
+        adoptStyles(this.host.shadowRoot, [
+            ...ctor.elementStyles,
+            styleSheet,
+        ]);
+    }
+}
+const _updateWhenThemeChanges = (host, themes) => {
+    const controller = new ThemingController(host, themes);
+    host.addController(controller);
+    return controller;
+};
+export const updateWhenThemeChanges = _updateWhenThemeChanges;
+//# sourceMappingURL=theming-controlller.js.map

package/theming/theming-controlller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-controlller.js","sourceRoot":"","sources":["../../src/theming/theming-controlller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,iBAAiB;IAKrB,YAAY,IAA8C,EAAE,MAAc;QAKzD,0BAAqB,GAAG,GAAG,EAAE;YAC5C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5B,CAAC,CAAC;QAPA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAOM,aAAa;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC1E,CAAC;IAEM,gBAAgB;QACrB,MAAM,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC7E,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAgC,CAAC;QACxD,MAAM,2BAA2B,GAC/B,MAAM,CAAC,UAAU;YACjB,oBAAoB,IAAI,QAAQ,CAAC,SAAS;YAC1C,SAAS,IAAI,aAAa,CAAC,SAAS,CAAC;QAEvC,IAAI,UAAU,GAAG,GAAG,CAAA,EAAE,CAAC;QAEvB,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAChD,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAChC,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;YAC7B,UAAU,GAAG,SAAS,CAAC;SACxB;QAOD,IAAI,CAAC,2BAA2B,EAAE;YAChC,CAAC,GAAG,IAAI,CAAC,IAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;iBACjD,KAAK,CAAC,CAAC,CAAC;iBACR,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;SACnC;QAED,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAwB,EAAE;YAC9C,GAAG,IAAI,CAAC,aAAa;YACrB,UAAU;SACX,CAAC,CAAC;IACL,CAAC;CACF;AAED,MAAM,uBAAuB,GAAG,CAC9B,IAA8C,EAC9C,MAAc,EACd,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACvD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAE/B,uBAAuB,CAAC","sourcesContent":["import {\n  adoptStyles,\n  css,\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n  ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config';\nimport { CHANGE_THEME_EVENT } from './theming-event';\nimport { Theme, ThemeController, Themes } from './types';\n\nclass ThemingController implements ReactiveController, ThemeController {\n  private themes: Themes;\n  private host: ReactiveControllerHost & ReactiveElement;\n  public theme!: Theme;\n\n  constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes) {\n    this.host = host;\n    this.themes = themes;\n  }\n\n  private readonly __themingEventHandler = () => {\n    this.adoptStyles();\n    this.host.requestUpdate();\n  };\n\n  public hostConnected() {\n    this.adoptStyles();\n    window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  public hostDisconnected() {\n    window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);\n  }\n\n  protected adoptStyles() {\n    this.theme = getTheme();\n    const ctor = this.host.constructor as typeof LitElement;\n    const supportsAdoptingStyleSheets =\n      window.ShadowRoot &&\n      'adoptedStyleSheets' in Document.prototype &&\n      'replace' in CSSStyleSheet.prototype;\n\n    let styleSheet = css``;\n\n    const [theme] = Object.entries(this.themes).filter(\n      ([name]) => name === this.theme\n    );\n\n    if (theme) {\n      const [_, cssResult] = theme;\n      styleSheet = cssResult;\n    }\n\n    // Firefox and Safari don't support the adoptedStyleSheets API yet,\n    // and the lit framework appends the resolved stylesheets indiscriminately\n    // when using the adoptStyles API below. Hence, we need to remove all previously\n    // defined style tags in the shadow root as changing the themes at runtime just\n    // keeps stacking the resolved styles one over the other, resulting in broken themes.\n    if (!supportsAdoptingStyleSheets) {\n      [...this.host!.renderRoot.querySelectorAll('style')]\n        .slice(1)\n        .forEach((tag) => tag.remove());\n    }\n\n    adoptStyles(this.host.shadowRoot as ShadowRoot, [\n      ...ctor.elementStyles,\n      styleSheet,\n    ]);\n  }\n}\n\nconst _updateWhenThemeChanges = (\n  host: ReactiveControllerHost & ReactiveElement,\n  themes: Themes\n) => {\n  const controller = new ThemingController(host, themes);\n  host.addController(controller);\n  return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n  _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n"]}

package/theming/theming-decorator.d.ts

@@ -0,0 +1,24 @@
+import { Themes } from './types';
+/**
+ * Class decorator to enable multiple theme support for a component.
+ * The component will re-render on theme changes.
+ *
+ * See also {@link updateWhenThemeChanges} for the same functionallity
+ * without the use of this decorator.
+ *
+ * Usage:
+ *  ```ts
+ *  import { LitElement, html } from 'lit';
+ *  import { themes } from 'igniteui-webcomponents/themes';
+ *  import { styles } from './themes/my-element.base.css';
+ *  import { styles as material } from './themes/my-element.material.css';
+ *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';
+ *  import { styles as indigo } from './themes/my-element.indigo.css';
+ *
+ *  @themes({ material, bootstrap, indigo })
+ *  class MyElement extends LitElement {
+ *    public static styles = styles;
+ *  }
+ *  ```
+ */
+export declare function themes(themes: Themes): (clazz: any) => any;

package/theming/theming-decorator.js

@@ -0,0 +1,13 @@
+import { updateWhenThemeChanges } from './theming-controlller';
+export function themes(themes) {
+    return (clazz) => {
+        clazz.addInitializer((instance) => {
+            const controller = updateWhenThemeChanges(instance, themes);
+            if ('themeAdopted' in instance) {
+                instance.themeAdopted(controller);
+            }
+        });
+        return clazz;
+    };
+}
+//# sourceMappingURL=theming-decorator.js.map

package/theming/theming-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-decorator.js","sourceRoot":"","sources":["../../src/theming/theming-decorator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAyB/D,MAAM,UAAU,MAAM,CAAC,MAAc;IACnC,OAAO,CAAC,KAAU,EAAE,EAAE;QACpB,KAAK,CAAC,cAAc,CAAC,CAAC,QAAyC,EAAE,EAAE;YACjE,MAAM,UAAU,GAAG,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAE5D,IAAI,cAAc,IAAI,QAAQ,EAAE;gBAC9B,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;aACnC;QACH,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { ReactiveElement } from 'lit';\nimport { updateWhenThemeChanges } from './theming-controlller';\nimport { ReactiveTheme, Themes } from './types';\n\n/**\n * Class decorator to enable multiple theme support for a component.\n * The component will re-render on theme changes.\n *\n * See also {@link updateWhenThemeChanges} for the same functionallity\n * without the use of this decorator.\n *\n * Usage:\n *  ```ts\n *  import { LitElement, html } from 'lit';\n *  import { themes } from 'igniteui-webcomponents/themes';\n *  import { styles } from './themes/my-element.base.css';\n *  import { styles as material } from './themes/my-element.material.css';\n *  import { styles as bootstrap } from './themes/my-element.bootstrap.css';\n *  import { styles as indigo } from './themes/my-element.indigo.css';\n *\n *  @themes({ material, bootstrap, indigo })\n *  class MyElement extends LitElement {\n *    public static styles = styles;\n *  }\n *  ```\n */\nexport function themes(themes: Themes) {\n  return (clazz: any) => {\n    clazz.addInitializer((instance: ReactiveElement & ReactiveTheme) => {\n      const controller = updateWhenThemeChanges(instance, themes);\n\n      if ('themeAdopted' in instance) {\n        instance.themeAdopted(controller);\n      }\n    });\n    return clazz;\n  };\n}\n"]}

package/theming/theming-event.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from './types';
+export declare const CHANGE_THEME_EVENT = "igc-change-theme";
+declare global {
+    interface WindowEventMap {
+        [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;
+    }
+}
+/**
+ * The possible details of the "igc-change-theme" event.
+ */
+export declare type ChangeThemeEventDetail = {
+    theme: Theme;
+};

package/theming/theming-event.js

@@ -0,0 +1,2 @@
+export const CHANGE_THEME_EVENT = 'igc-change-theme';
+//# sourceMappingURL=theming-event.js.map

package/theming/theming-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming-event.js","sourceRoot":"","sources":["../../src/theming/theming-event.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAAC","sourcesContent":["import { Theme } from './types';\n\nexport const CHANGE_THEME_EVENT = 'igc-change-theme';\n\n// Misfiring eslint rule\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ndeclare global {\n  interface WindowEventMap {\n    [CHANGE_THEME_EVENT]: CustomEvent<ChangeThemeEventDetail>;\n  }\n}\n\n/**\n * The possible details of the \"igc-change-theme\" event.\n */\nexport type ChangeThemeEventDetail = {\n  theme: Theme;\n};\n"]}

package/theming/types.d.ts

@@ -0,0 +1,23 @@
+import { CSSResult } from 'lit';
+export declare type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';
+export declare type Themes = {
+    [K in Theme]?: CSSResult;
+};
+/**
+ * A controller responsible for adopting various comopnent themes;
+ * See also {@link updateWhenThemeChanges}.
+ */
+export interface ThemeController {
+    /**
+     * The name of the currently adopted theme. See {@link Theme}.
+     */
+    theme: Theme;
+}
+export interface ReactiveTheme {
+    /**
+     *  Provides the attached ThemeController to the component instance.
+     *  Can be used to get the currently adopted theme name.
+     *  See also {@link ThemeController}
+     */
+    themeAdopted(controller: ThemeController): void;
+}

package/theming/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/theming/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theming/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSResult } from 'lit';\n\nexport type Theme = 'material' | 'bootstrap' | 'indigo' | 'fluent';\n\nexport type Themes = {\n  [K in Theme]?: CSSResult;\n};\n\n/**\n * A controller responsible for adopting various comopnent themes;\n * See also {@link updateWhenThemeChanges}.\n */\nexport interface ThemeController {\n  /**\n   * The name of the currently adopted theme. See {@link Theme}.\n   */\n  theme: Theme;\n}\n\nexport interface ReactiveTheme {\n  /**\n   *  Provides the attached ThemeController to the component instance.\n   *  Can be used to get the currently adopted theme name.\n   *  See also {@link ThemeController}\n   */\n  themeAdopted(controller: ThemeController): void;\n}\n"]}

package/theming/utils.d.ts

@@ -0,0 +1 @@
+export declare const getAllCSSVariables: () => Record<string, string>;

package/theming/utils.js

@@ -0,0 +1,36 @@
+const CssKeyToJsKey = (key) => key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);
+const getAllCSSVariableNames = (styleSheets = document.styleSheets) => {
+    const cssVars = [];
+    Array.from(styleSheets).forEach((styleSheet) => {
+        try {
+            Array.from(styleSheet.cssRules).forEach((rule) => {
+                if (!rule || !rule['style']) {
+                    return;
+                }
+                Array.from(rule['style']).forEach((style) => {
+                    if (style.startsWith('--') && cssVars.indexOf(style) == -1) {
+                        cssVars.push(style);
+                    }
+                });
+            });
+        }
+        catch (e) { }
+    });
+    return cssVars;
+};
+const getElementCSSVariables = (allCSSVars, element = document.body, pseudo = '') => {
+    const elStyles = window.getComputedStyle(element, pseudo);
+    const cssVars = {};
+    allCSSVars.forEach((key) => {
+        const value = elStyles.getPropertyValue(key);
+        if (value) {
+            cssVars[CssKeyToJsKey(key)] = value.trim();
+        }
+    });
+    return cssVars;
+};
+export const getAllCSSVariables = () => {
+    const cssVars = getAllCSSVariableNames();
+    return getElementCSSVariables(cssVars, document.documentElement);
+};
+//# sourceMappingURL=utils.js.map

package/theming/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/theming/utils.ts"],"names":[],"mappings":"AACA,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CACpC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,MAAM,sBAAsB,GAAG,CAC7B,cAA8B,QAAQ,CAAC,WAAW,EAClD,EAAE;IACF,MAAM,OAAO,GAAa,EAAE,CAAC;IAE7B,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QAC7C,IAAI;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;gBACpD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAC3B,OAAO;iBACR;gBAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;oBAC/C,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE;wBAC1D,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;qBACrB;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QAAC,OAAO,CAAC,EAAE,GAAE;IAChB,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAC7B,UAAyB,EACzB,UAAuB,QAAQ,CAAC,IAAI,EACpC,SAA6B,EAAE,EAC/B,EAAE;IACF,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACzB,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAE7C,IAAI,KAAK,EAAE;YACR,OAAe,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;SACrD;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAA2B,EAAE;IAC7D,MAAM,OAAO,GAAG,sBAAsB,EAAE,CAAC;IACzC,OAAO,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;AACnE,CAAC,CAAC","sourcesContent":["/*eslint no-empty: ['error', {allowEmptyCatch: true}]*/\nconst CssKeyToJsKey = (key: string) =>\n  key.replace('--', '').replace(/-./g, (x) => x.toUpperCase()[1]);\n\nconst getAllCSSVariableNames = (\n  styleSheets: StyleSheetList = document.styleSheets\n) => {\n  const cssVars: string[] = [];\n\n  Array.from(styleSheets).forEach((styleSheet) => {\n    try {\n      Array.from(styleSheet.cssRules).forEach((rule: any) => {\n        if (!rule || !rule['style']) {\n          return;\n        }\n\n        Array.from(rule['style']).forEach((style: any) => {\n          if (style.startsWith('--') && cssVars.indexOf(style) == -1) {\n            cssVars.push(style);\n          }\n        });\n      });\n    } catch (e) {}\n  });\n\n  return cssVars;\n};\n\nconst getElementCSSVariables = (\n  allCSSVars: Array<string>,\n  element: HTMLElement = document.body,\n  pseudo: string | undefined = ''\n) => {\n  const elStyles = window.getComputedStyle(element, pseudo);\n  const cssVars = {};\n\n  allCSSVars.forEach((key) => {\n    const value = elStyles.getPropertyValue(key);\n\n    if (value) {\n      (cssVars as any)[CssKeyToJsKey(key)] = value.trim();\n    }\n  });\n\n  return cssVars;\n};\n\nexport const getAllCSSVariables = (): Record<string, string> => {\n  const cssVars = getAllCSSVariableNames();\n  return getElementCSSVariables(cssVars, document.documentElement);\n};\n"]}