igniteui-webcomponents 4.0.0-alpha.3 → 4.0.0

package/themes/dark/bootstrap.css

@@ -1,13 +1,75 @@
-/* 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: bootstrap;
+  --ig-theme: bootstrap;
   --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
@@ -15,6 +77,9 @@
   --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 {
@@ -426,7 +491,7 @@
   --ig-calendar-labels-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);
@@ -437,7 +502,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);
@@ -448,7 +513,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);
@@ -459,7 +524,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);
@@ -470,7 +535,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);
@@ -481,7 +546,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);
@@ -492,29 +557,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);
@@ -525,51 +568,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);
@@ -580,7 +579,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);
@@ -591,7 +590,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);
@@ -602,7 +601,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);
@@ -613,7 +612,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);
@@ -624,7 +623,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);
@@ -635,7 +634,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);
@@ -646,6 +667,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-dropdown {
   --border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));

package/themes/dark/fluent.css

@@ -1,13 +1,75 @@
-/* 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;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
@@ -15,6 +77,9 @@
   --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 {
@@ -417,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);
@@ -428,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);
@@ -439,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);
@@ -450,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);
@@ -461,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);
@@ -472,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);
@@ -483,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);
@@ -516,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);
@@ -571,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);
@@ -582,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);
@@ -593,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);
@@ -604,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);
@@ -615,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);
@@ -626,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);
@@ -637,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));