npm - igniteui-webcomponents - Versions diffs - 4.3.0 → 4.4.0 - Mend

igniteui-webcomponents 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (702) hide show

package/themes/light/bootstrap.css CHANGED Viewed

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,9 +22,13 @@
     height: auto;
   }
 }
+:root {
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
 :root {
   --ig-theme: bootstrap;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -78,8 +36,6 @@
   --ig-size-medium: 2;
   --ig-size-large: 3;
   --ig-scrollbar-size: 1rem;
-  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 :root {

package/themes/light/fluent.css CHANGED Viewed

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,9 +22,13 @@
     height: auto;
   }
 }
+:root {
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
 :root {
   --ig-theme: fluent;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -78,8 +36,6 @@
   --ig-size-medium: 2;
   --ig-size-large: 3;
   --ig-scrollbar-size: 1rem;
-  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 :root {

package/themes/light/indigo.css CHANGED Viewed

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,9 +22,13 @@
     height: auto;
   }
 }
+:root {
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
 :root {
   --ig-theme: indigo;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -78,9 +36,8 @@
   --ig-size-medium: 2;
   --ig-size-large: 3;
   --ig-scrollbar-size: 1rem;
-  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 :root {
   --ig-primary-50: hsl(230.85, 59.48%, 85.16%);
   --ig-primary-50-contrast: black;
@@ -439,6 +396,7 @@
   --ig-error-A700-contrast: white;
   --ig-error-A700: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.65);
 }
 :root {
   --ig-elevation-0: none;
   --ig-elevation-1: 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08);
@@ -466,6 +424,7 @@
   --ig-elevation-23: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08);
   --ig-elevation-24: 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08);
 }
 :root {
   --ig-font-family: 'Nunito Sans', sans-serif;
   --ig-h1-font-size: 6rem;
@@ -572,4 +531,225 @@
   --ig-overline-text-transform: uppercase;
   --ig-overline-margin-top: 0;
   --ig-overline-margin-bottom: 0;
+}
+.ig-typography h1 {
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
+  font-size: var(--ig-h1-font-size);
+  font-weight: var(--ig-h1-font-weight);
+  font-style: var(--ig-h1-font-style);
+  line-height: var(--ig-h1-line-height);
+  letter-spacing: var(--ig-h1-letter-spacing);
+  text-transform: var(--ig-h1-text-transform);
+  margin-top: var(--ig-h1-margin-top);
+  margin-bottom: var(--ig-h1-margin-bottom);
+}
+.ig-typography h2 {
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
+  font-size: var(--ig-h2-font-size);
+  font-weight: var(--ig-h2-font-weight);
+  font-style: var(--ig-h2-font-style);
+  line-height: var(--ig-h2-line-height);
+  letter-spacing: var(--ig-h2-letter-spacing);
+  text-transform: var(--ig-h2-text-transform);
+  margin-top: var(--ig-h2-margin-top);
+  margin-bottom: var(--ig-h2-margin-bottom);
+}
+.ig-typography h3 {
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
+  font-size: var(--ig-h3-font-size);
+  font-weight: var(--ig-h3-font-weight);
+  font-style: var(--ig-h3-font-style);
+  line-height: var(--ig-h3-line-height);
+  letter-spacing: var(--ig-h3-letter-spacing);
+  text-transform: var(--ig-h3-text-transform);
+  margin-top: var(--ig-h3-margin-top);
+  margin-bottom: var(--ig-h3-margin-bottom);
+}
+.ig-typography h4 {
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
+  font-size: var(--ig-h4-font-size);
+  font-weight: var(--ig-h4-font-weight);
+  font-style: var(--ig-h4-font-style);
+  line-height: var(--ig-h4-line-height);
+  letter-spacing: var(--ig-h4-letter-spacing);
+  text-transform: var(--ig-h4-text-transform);
+  margin-top: var(--ig-h4-margin-top);
+  margin-bottom: var(--ig-h4-margin-bottom);
+}
+.ig-typography h5 {
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+}
+.ig-typography h6 {
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
+  font-size: var(--ig-h6-font-size);
+  font-weight: var(--ig-h6-font-weight);
+  font-style: var(--ig-h6-font-style);
+  line-height: var(--ig-h6-line-height);
+  letter-spacing: var(--ig-h6-letter-spacing);
+  text-transform: var(--ig-h6-text-transform);
+  margin-top: var(--ig-h6-margin-top);
+  margin-bottom: var(--ig-h6-margin-bottom);
+}
+.ig-typography p {
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-1-font-size);
+  font-weight: var(--ig-body-1-font-weight);
+  font-style: var(--ig-body-1-font-style);
+  line-height: var(--ig-body-1-line-height);
+  letter-spacing: var(--ig-body-1-letter-spacing);
+  text-transform: var(--ig-body-1-text-transform);
+  margin-top: var(--ig-body-1-margin-top);
+  margin-bottom: var(--ig-body-1-margin-bottom);
+}
+.ig-typography .ig-typography__h1 {
+  font-family: var(--ig-h1-font-family, var(--ig-font-family));
+  font-size: var(--ig-h1-font-size);
+  font-weight: var(--ig-h1-font-weight);
+  font-style: var(--ig-h1-font-style);
+  line-height: var(--ig-h1-line-height);
+  letter-spacing: var(--ig-h1-letter-spacing);
+  text-transform: var(--ig-h1-text-transform);
+  margin-top: var(--ig-h1-margin-top);
+  margin-bottom: var(--ig-h1-margin-bottom);
+}
+.ig-typography .ig-typography__h2 {
+  font-family: var(--ig-h2-font-family, var(--ig-font-family));
+  font-size: var(--ig-h2-font-size);
+  font-weight: var(--ig-h2-font-weight);
+  font-style: var(--ig-h2-font-style);
+  line-height: var(--ig-h2-line-height);
+  letter-spacing: var(--ig-h2-letter-spacing);
+  text-transform: var(--ig-h2-text-transform);
+  margin-top: var(--ig-h2-margin-top);
+  margin-bottom: var(--ig-h2-margin-bottom);
+}
+.ig-typography .ig-typography__h3 {
+  font-family: var(--ig-h3-font-family, var(--ig-font-family));
+  font-size: var(--ig-h3-font-size);
+  font-weight: var(--ig-h3-font-weight);
+  font-style: var(--ig-h3-font-style);
+  line-height: var(--ig-h3-line-height);
+  letter-spacing: var(--ig-h3-letter-spacing);
+  text-transform: var(--ig-h3-text-transform);
+  margin-top: var(--ig-h3-margin-top);
+  margin-bottom: var(--ig-h3-margin-bottom);
+}
+.ig-typography .ig-typography__h4 {
+  font-family: var(--ig-h4-font-family, var(--ig-font-family));
+  font-size: var(--ig-h4-font-size);
+  font-weight: var(--ig-h4-font-weight);
+  font-style: var(--ig-h4-font-style);
+  line-height: var(--ig-h4-line-height);
+  letter-spacing: var(--ig-h4-letter-spacing);
+  text-transform: var(--ig-h4-text-transform);
+  margin-top: var(--ig-h4-margin-top);
+  margin-bottom: var(--ig-h4-margin-bottom);
+}
+.ig-typography .ig-typography__h5 {
+  font-family: var(--ig-h5-font-family, var(--ig-font-family));
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+}
+.ig-typography .ig-typography__h6 {
+  font-family: var(--ig-h6-font-family, var(--ig-font-family));
+  font-size: var(--ig-h6-font-size);
+  font-weight: var(--ig-h6-font-weight);
+  font-style: var(--ig-h6-font-style);
+  line-height: var(--ig-h6-line-height);
+  letter-spacing: var(--ig-h6-letter-spacing);
+  text-transform: var(--ig-h6-text-transform);
+  margin-top: var(--ig-h6-margin-top);
+  margin-bottom: var(--ig-h6-margin-bottom);
+}
+.ig-typography .ig-typography__subtitle-1 {
+  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+}
+.ig-typography .ig-typography__subtitle-2 {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+}
+.ig-typography .ig-typography__body-1 {
+  font-family: var(--ig-body-1-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-1-font-size);
+  font-weight: var(--ig-body-1-font-weight);
+  font-style: var(--ig-body-1-font-style);
+  line-height: var(--ig-body-1-line-height);
+  letter-spacing: var(--ig-body-1-letter-spacing);
+  text-transform: var(--ig-body-1-text-transform);
+  margin-top: var(--ig-body-1-margin-top);
+  margin-bottom: var(--ig-body-1-margin-bottom);
+}
+.ig-typography .ig-typography__body-2 {
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+}
+.ig-typography .ig-typography__button {
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+}
+.ig-typography .ig-typography__caption {
+  font-family: var(--ig-caption-font-family, var(--ig-font-family));
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+}
+.ig-typography .ig-typography__overline {
+  font-family: var(--ig-overline-font-family, var(--ig-font-family));
+  font-size: var(--ig-overline-font-size);
+  font-weight: var(--ig-overline-font-weight);
+  font-style: var(--ig-overline-font-style);
+  line-height: var(--ig-overline-line-height);
+  letter-spacing: var(--ig-overline-letter-spacing);
+  text-transform: var(--ig-overline-text-transform);
+  margin-top: var(--ig-overline-margin-top);
+  margin-bottom: var(--ig-overline-margin-bottom);
 }

package/themes/light/material.css CHANGED Viewed

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,9 +22,13 @@
     height: auto;
   }
 }
+:root {
+  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
 :root {
   --ig-theme: material;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -78,8 +36,6 @@
   --ig-size-medium: 2;
   --ig-size-large: 3;
   --ig-scrollbar-size: 1rem;
-  --ig-scrollbar-thumb-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-  --ig-scrollbar-track-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 :root {

package/theming/theming-controller.d.ts CHANGED Viewed

@@ -5,13 +5,14 @@ declare class ThemingController implements ReactiveController, ThemeController {
     private host;
     theme: Theme;
     constructor(host: ReactiveControllerHost & ReactiveElement, themes: Themes);
-    private readonly __themingEventHandler;
     hostConnected(): void;
     hostDisconnected(): void;
     protected adoptStyles(): void;
+    private themeChanged;
 }
-declare const _updateWhenThemeChanges: (host: ReactiveControllerHost & ReactiveElement, themes: Themes) => ThemingController;
+declare const _updateWhenThemeChanges: (host: ReactiveControllerHost & ReactiveElement, themes: Themes, exposeTheme?: boolean) => ThemingController;
 export declare const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {
     _THEMING_CONTROLLER_FN_?: never;
 };
+export declare const themeSymbol: unique symbol;
 export {};

package/theming/theming-controller.js CHANGED Viewed

@@ -1,9 +1,30 @@
 import { adoptStyles, css, } from 'lit';
 import { getTheme } from './config.js';
 import { CHANGE_THEME_EVENT } from './theming-event.js';
+class ThemeEventListeners {
+    constructor() {
+        this.listeners = new Set();
+        this.handleEvent = () => {
+            for (const listener of this.listeners) {
+                listener();
+            }
+        };
+    }
+    add(listener) {
+        window.addEventListener(CHANGE_THEME_EVENT, this);
+        this.listeners.add(listener);
+    }
+    remove(listener) {
+        this.listeners.delete(listener);
+        if (this.listeners.size < 1) {
+            window.removeEventListener(CHANGE_THEME_EVENT, this);
+        }
+    }
+}
+const _themingEventListeners = new ThemeEventListeners();
 class ThemingController {
     constructor(host, themes) {
-        this.__themingEventHandler = () => {
+        this.themeChanged = () => {
             this.adoptStyles();
             this.host.requestUpdate();
         };
@@ -12,38 +33,36 @@ class ThemingController {
     }
     hostConnected() {
         this.adoptStyles();
-        window.addEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+        _themingEventListeners.add(this.themeChanged);
     }
     hostDisconnected() {
-        window.removeEventListener(CHANGE_THEME_EVENT, this.__themingEventHandler);
+        _themingEventListeners.remove(this.themeChanged);
     }
     adoptStyles() {
+        var _a;
         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());
-        }
+        const [_, cssResult] = (_a = Object.entries(this.themes).find(([name]) => name === this.theme)) !== null && _a !== void 0 ? _a : [];
         adoptStyles(this.host.shadowRoot, [
             ...ctor.elementStyles,
-            styleSheet,
+            cssResult !== null && cssResult !== void 0 ? cssResult : css ``,
         ]);
     }
 }
-const _updateWhenThemeChanges = (host, themes) => {
+const _updateWhenThemeChanges = (host, themes, exposeTheme) => {
     const controller = new ThemingController(host, themes);
     host.addController(controller);
+    if (exposeTheme) {
+        Object.defineProperty(host, themeSymbol, {
+            get() {
+                return controller.theme;
+            },
+            configurable: true,
+            enumerable: false,
+        });
+    }
     return controller;
 };
 export const updateWhenThemeChanges = _updateWhenThemeChanges;
+export const themeSymbol = Symbol('Current active theme');
 //# sourceMappingURL=theming-controller.js.map

package/theming/theming-controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,GAAG,GAKJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,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.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\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"]}
1	+ {"version":3,"file":"theming-controller.js","sourceRoot":"","sources":["../../src/theming/theming-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n adoptStyles,\n css,\n LitElement,\n ReactiveController,\n ReactiveControllerHost,\n ReactiveElement,\n} from 'lit';\nimport { getTheme } from './config.js';\nimport { CHANGE_THEME_EVENT } from './theming-event.js';\nimport type { Theme, ThemeController, Themes } from './types.js';\n\nclass ThemeEventListeners {\n private readonly listeners = new Set<Function>();\n\n public add(listener: Function) {\n window.addEventListener(CHANGE_THEME_EVENT, this);\n this.listeners.add(listener);\n }\n\n public remove(listener: Function) {\n this.listeners.delete(listener);\n if (this.listeners.size < 1) {\n window.removeEventListener(CHANGE_THEME_EVENT, this);\n }\n }\n\n public handleEvent = () => {\n for (const listener of this.listeners) {\n listener();\n }\n };\n}\n\nconst _themingEventListeners = new ThemeEventListeners();\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 public hostConnected() {\n this.adoptStyles();\n _themingEventListeners.add(this.themeChanged);\n }\n\n public hostDisconnected() {\n _themingEventListeners.remove(this.themeChanged);\n }\n\n protected adoptStyles() {\n this.theme = getTheme();\n const ctor = this.host.constructor as typeof LitElement;\n\n const [_, cssResult] =\n Object.entries(this.themes).find(([name]) => name === this.theme) ?? [];\n\n adoptStyles(this.host.shadowRoot as ShadowRoot, [\n ...ctor.elementStyles,\n cssResult ?? css``,\n ]);\n }\n\n private themeChanged = () => {\n this.adoptStyles();\n this.host.requestUpdate();\n };\n}\n\nconst _updateWhenThemeChanges = (\n host: ReactiveControllerHost & ReactiveElement,\n themes: Themes,\n exposeTheme?: boolean\n) => {\n const controller = new ThemingController(host, themes);\n host.addController(controller);\n\n if (exposeTheme) {\n Object.defineProperty(host, themeSymbol, {\n get() {\n return controller.theme;\n },\n configurable: true,\n enumerable: false,\n });\n }\n\n return controller;\n};\n\nexport const updateWhenThemeChanges: typeof _updateWhenThemeChanges & {\n _THEMING_CONTROLLER_FN_?: never;\n} = _updateWhenThemeChanges;\n\nexport const themeSymbol = Symbol('Current active theme');\n"]}