igniteui-webcomponents 4.0.0-alpha.2 → 4.0.0

package/themes/light/bootstrap.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: bootstrap;
+  --ig-theme: bootstrap;
   --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 {
@@ -423,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);
@@ -434,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);
@@ -445,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);
@@ -456,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);
@@ -467,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);
@@ -478,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);
@@ -489,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);
@@ -522,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);
@@ -577,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);
@@ -588,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);
@@ -599,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);
@@ -610,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);
@@ -621,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);
@@ -632,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);
@@ -642,4 +666,48 @@
   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);
+  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);
 }

package/themes/light/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);
@@ -633,4 +657,48 @@
   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);
+  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);
 }