igniteui-webcomponents 4.0.0-alpha.2 → 4.0.0

package/themes/dark/fluent.css

@@ -1,17 +1,85 @@
-/* stylelint-disable max-line-length */
-/* stylelint-disable-next-line max-line-length */
-.igc-scrollbar {
-  --scrolbar-size: 1rem;
-  --igc-scrollbar-track-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --igc-scrollbar-thumb-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+/**
+ * @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 */
+/**
+ * @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)));
+  --track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  scrollbar-width: var(--size);
+  scrollbar-color: var(--thumb-background) var(--track-background);
 }
 
+.ig-scrollbar ::-webkit-scrollbar {
+  width: var(--size);
+  height: var(--size);
+  background: var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+  background: var(--thumb-background);
+}
+
+@media (hover: none) {
+  .ig-scrollbar ::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
 :root {
-  --igc-theme: fluent;
+  --ig-theme: fluent;
   --ig-radius-factor: 1;
-  --igc-spacing-small: 0.125rem;
-  --igc-spacing-medium: 0.25rem;
-  --igc-spacing-large: 0.5rem;
+  --ig-spacing: 1;
+  --ig-spacing-inline: 1;
+  --ig-spacing-block: 1;
+  --ig-size-small: 1;
+  --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 {
@@ -414,7 +482,7 @@
   --ig-overline-margin-bottom: 0;
 }
 
-.ig-typography__h1 {
+.ig-typography h1 {
   font-family: var(--ig-h1-font-family);
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
@@ -425,7 +493,7 @@
   margin-top: var(--ig-h1-margin-top);
   margin-bottom: var(--ig-h1-margin-bottom);
 }
-.ig-typography__h2 {
+.ig-typography h2 {
   font-family: var(--ig-h2-font-family);
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
@@ -436,7 +504,7 @@
   margin-top: var(--ig-h2-margin-top);
   margin-bottom: var(--ig-h2-margin-bottom);
 }
-.ig-typography__h3 {
+.ig-typography h3 {
   font-family: var(--ig-h3-font-family);
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
@@ -447,7 +515,7 @@
   margin-top: var(--ig-h3-margin-top);
   margin-bottom: var(--ig-h3-margin-bottom);
 }
-.ig-typography__h4 {
+.ig-typography h4 {
   font-family: var(--ig-h4-font-family);
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
@@ -458,7 +526,7 @@
   margin-top: var(--ig-h4-margin-top);
   margin-bottom: var(--ig-h4-margin-bottom);
 }
-.ig-typography__h5 {
+.ig-typography h5 {
   font-family: var(--ig-h5-font-family);
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
@@ -469,7 +537,7 @@
   margin-top: var(--ig-h5-margin-top);
   margin-bottom: var(--ig-h5-margin-bottom);
 }
-.ig-typography__h6 {
+.ig-typography h6 {
   font-family: var(--ig-h6-font-family);
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
@@ -480,29 +548,7 @@
   margin-top: var(--ig-h6-margin-top);
   margin-bottom: var(--ig-h6-margin-bottom);
 }
-.ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-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__subtitle-2 {
-  font-family: var(--ig-subtitle-2-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__body-1 {
+.ig-typography p {
   font-family: var(--ig-body-1-font-family);
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
@@ -513,51 +559,7 @@
   margin-top: var(--ig-body-1-margin-top);
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
-.ig-typography__body-2 {
-  font-family: var(--ig-body-2-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__button {
-  font-family: var(--ig-button-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__caption {
-  font-family: var(--ig-caption-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__overline {
-  font-family: var(--ig-overline-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);
-}
-.ig-typography h1 {
+.ig-typography .ig-typography__h1 {
   font-family: var(--ig-h1-font-family);
   font-size: var(--ig-h1-font-size);
   font-weight: var(--ig-h1-font-weight);
@@ -568,7 +570,7 @@
   margin-top: var(--ig-h1-margin-top);
   margin-bottom: var(--ig-h1-margin-bottom);
 }
-.ig-typography h2 {
+.ig-typography .ig-typography__h2 {
   font-family: var(--ig-h2-font-family);
   font-size: var(--ig-h2-font-size);
   font-weight: var(--ig-h2-font-weight);
@@ -579,7 +581,7 @@
   margin-top: var(--ig-h2-margin-top);
   margin-bottom: var(--ig-h2-margin-bottom);
 }
-.ig-typography h3 {
+.ig-typography .ig-typography__h3 {
   font-family: var(--ig-h3-font-family);
   font-size: var(--ig-h3-font-size);
   font-weight: var(--ig-h3-font-weight);
@@ -590,7 +592,7 @@
   margin-top: var(--ig-h3-margin-top);
   margin-bottom: var(--ig-h3-margin-bottom);
 }
-.ig-typography h4 {
+.ig-typography .ig-typography__h4 {
   font-family: var(--ig-h4-font-family);
   font-size: var(--ig-h4-font-size);
   font-weight: var(--ig-h4-font-weight);
@@ -601,7 +603,7 @@
   margin-top: var(--ig-h4-margin-top);
   margin-bottom: var(--ig-h4-margin-bottom);
 }
-.ig-typography h5 {
+.ig-typography .ig-typography__h5 {
   font-family: var(--ig-h5-font-family);
   font-size: var(--ig-h5-font-size);
   font-weight: var(--ig-h5-font-weight);
@@ -612,7 +614,7 @@
   margin-top: var(--ig-h5-margin-top);
   margin-bottom: var(--ig-h5-margin-bottom);
 }
-.ig-typography h6 {
+.ig-typography .ig-typography__h6 {
   font-family: var(--ig-h6-font-family);
   font-size: var(--ig-h6-font-size);
   font-weight: var(--ig-h6-font-weight);
@@ -623,7 +625,29 @@
   margin-top: var(--ig-h6-margin-top);
   margin-bottom: var(--ig-h6-margin-bottom);
 }
-.ig-typography p {
+.ig-typography .ig-typography__subtitle-1 {
+  font-family: var(--ig-subtitle-1-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);
+  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);
   font-size: var(--ig-body-1-font-size);
   font-weight: var(--ig-body-1-font-weight);
@@ -634,6 +658,50 @@
   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);
+  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);
+  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);
+  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);
+  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);
+}
 
 igc-button {
   --text-color: hsla(var(--ig-surface-500), var(--ig-surface-a));
@@ -686,11 +754,11 @@ igc-radio {
 }
 
 igc-slider {
-  --inactive-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --fill-background: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --inactive-background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  --fill-background: hsla(var(--ig-gray-600), var(--ig-gray-a));
   --thumb-border: hsla(var(--ig-gray-400), var(--ig-gray-a));
   --fill-hover-background: hsla(var(--ig-primary-300), var(--ig-primary-a));
-  --thumb-hover-border: hsla(var(--ig-primary-300), var(--ig-primary-a));
+  --thumb-hover-border: hsla(var(--ig-primary-100), var(--ig-primary-a));
   --inactive-disabled-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
   --fill-disabled-background: hsla(var(--ig-gray-300), var(--ig-gray-a));
   --thumb-disabled-border: hsla(var(--ig-gray-200), var(--ig-gray-a));
@@ -725,7 +793,7 @@ igc-nav-drawer-item {
   --active-text-color: hsla(var(--ig-primary-200), var(--ig-primary-a));
 }
 
-igc-grid {
+apx-grid {
   --header-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
   --header-text-color: var(--ig-gray-100-contrast);
   --header-border-color: hsla(var(--ig-gray-200), 0.24);

package/themes/dark/indigo.css

@@ -1,17 +1,85 @@
-/* stylelint-disable max-line-length */
-/* stylelint-disable-next-line max-line-length */
-.igc-scrollbar {
-  --scrolbar-size: 1rem;
-  --igc-scrollbar-track-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
-  --igc-scrollbar-thumb-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+/**
+ * @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 */
+/**
+ * @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)));
+  --track-background: var(--ig-scrollbar-track-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  scrollbar-width: var(--size);
+  scrollbar-color: var(--thumb-background) var(--track-background);
 }
 
+.ig-scrollbar ::-webkit-scrollbar {
+  width: var(--size);
+  height: var(--size);
+  background: var(--track-background);
+}
+
+.ig-scrollbar ::-webkit-scrollbar-thumb {
+  background: var(--thumb-background);
+}
+
+@media (hover: none) {
+  .ig-scrollbar ::-webkit-scrollbar {
+    width: auto;
+    height: auto;
+  }
+}
 :root {
-  --igc-theme: indigo;
+  --ig-theme: indigo;
   --ig-radius-factor: 1;
-  --igc-spacing-small: 0.125rem;
-  --igc-spacing-medium: 0.25rem;
-  --igc-spacing-large: 0.5rem;
+  --ig-spacing: 1;
+  --ig-spacing-inline: 1;
+  --ig-spacing-block: 1;
+  --ig-size-small: 1;
+  --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-contrast: black;
@@ -470,7 +538,7 @@ igc-snackbar {
   --text-color: var(--ig-gray-200-contrast);
 }
 
-igc-grid {
+apx-grid {
   --content-background: hsla(var(--ig-gray-50), var(--ig-gray-a));
   --content-text-color: var(--ig-gray-50-contrast);
   --header-background: hsla(var(--ig-surface-500), var(--ig-surface-a));