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

igniteui-webcomponents 4.3.1 → 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 (369) hide show

package/themes/light/indigo.css CHANGED Viewed

@@ -22,6 +22,11 @@
     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-spacing: 1;
@@ -31,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;
@@ -392,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);
@@ -419,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;
@@ -525,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

@@ -22,6 +22,11 @@
     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-spacing: 1;
@@ -31,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 {