npm - igniteui-webcomponents - Versions diffs - 4.2.0 → 4.2.2 - Mend

igniteui-webcomponents 4.2.0 → 4.2.2

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 (226) hide show

package/themes/dark/fluent.css CHANGED Viewed

@@ -363,7 +363,6 @@
 :root {
   --ig-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
-  --ig-h1-font-family: var(--ig-font-family);
   --ig-h1-font-size: 4.25rem;
   --ig-h1-font-weight: 700;
   --ig-h1-font-style: normal;
@@ -372,7 +371,6 @@
   --ig-h1-text-transform: none;
   --ig-h1-margin-top: 0;
   --ig-h1-margin-bottom: 0;
-  --ig-h2-font-family: var(--ig-font-family);
   --ig-h2-font-size: 2.625rem;
   --ig-h2-font-weight: 700;
   --ig-h2-font-style: normal;
@@ -381,7 +379,6 @@
   --ig-h2-text-transform: none;
   --ig-h2-margin-top: 0;
   --ig-h2-margin-bottom: 0;
-  --ig-h3-font-family: var(--ig-font-family);
   --ig-h3-font-size: 2rem;
   --ig-h3-font-weight: 600;
   --ig-h3-font-style: normal;
@@ -390,7 +387,6 @@
   --ig-h3-text-transform: none;
   --ig-h3-margin-top: 0;
   --ig-h3-margin-bottom: 0;
-  --ig-h4-font-family: var(--ig-font-family);
   --ig-h4-font-size: 1.75rem;
   --ig-h4-font-weight: 400;
   --ig-h4-font-style: normal;
@@ -399,7 +395,6 @@
   --ig-h4-text-transform: none;
   --ig-h4-margin-top: 0;
   --ig-h4-margin-bottom: 0;
-  --ig-h5-font-family: var(--ig-font-family);
   --ig-h5-font-size: 1.5rem;
   --ig-h5-font-weight: 400;
   --ig-h5-font-style: normal;
@@ -408,7 +403,6 @@
   --ig-h5-text-transform: none;
   --ig-h5-margin-top: 0;
   --ig-h5-margin-bottom: 0;
-  --ig-h6-font-family: var(--ig-font-family);
   --ig-h6-font-size: 1.25rem;
   --ig-h6-font-weight: 400;
   --ig-h6-font-style: normal;
@@ -417,7 +411,6 @@
   --ig-h6-text-transform: none;
   --ig-h6-margin-top: 0;
   --ig-h6-margin-bottom: 0;
-  --ig-subtitle-1-font-family: var(--ig-font-family);
   --ig-subtitle-1-font-size: 1.125rem;
   --ig-subtitle-1-font-weight: 400;
   --ig-subtitle-1-font-style: normal;
@@ -426,7 +419,6 @@
   --ig-subtitle-1-text-transform: none;
   --ig-subtitle-1-margin-top: 0;
   --ig-subtitle-1-margin-bottom: 0;
-  --ig-subtitle-2-font-family: var(--ig-font-family);
   --ig-subtitle-2-font-size: 0.875rem;
   --ig-subtitle-2-font-weight: 600;
   --ig-subtitle-2-font-style: normal;
@@ -435,7 +427,6 @@
   --ig-subtitle-2-text-transform: none;
   --ig-subtitle-2-margin-top: 0;
   --ig-subtitle-2-margin-bottom: 0;
-  --ig-body-1-font-family: var(--ig-font-family);
   --ig-body-1-font-size: 1rem;
   --ig-body-1-font-weight: 400;
   --ig-body-1-font-style: normal;
@@ -444,7 +435,6 @@
   --ig-body-1-text-transform: none;
   --ig-body-1-margin-top: 0;
   --ig-body-1-margin-bottom: 0;
-  --ig-body-2-font-family: var(--ig-font-family);
   --ig-body-2-font-size: 0.875rem;
   --ig-body-2-font-weight: 400;
   --ig-body-2-font-style: normal;
@@ -453,7 +443,6 @@
   --ig-body-2-text-transform: none;
   --ig-body-2-margin-top: 0;
   --ig-body-2-margin-bottom: 0;
-  --ig-button-font-family: var(--ig-font-family);
   --ig-button-font-size: 0.875rem;
   --ig-button-font-weight: 400;
   --ig-button-font-style: normal;
@@ -462,7 +451,6 @@
   --ig-button-text-transform: capitalize;
   --ig-button-margin-top: 0;
   --ig-button-margin-bottom: 0;
-  --ig-caption-font-family: var(--ig-font-family);
   --ig-caption-font-size: 0.75rem;
   --ig-caption-font-weight: 400;
   --ig-caption-font-style: normal;
@@ -471,7 +459,6 @@
   --ig-caption-text-transform: none;
   --ig-caption-margin-top: 0;
   --ig-caption-margin-bottom: 0;
-  --ig-overline-font-family: var(--ig-font-family);
   --ig-overline-font-size: 0.625rem;
   --ig-overline-font-weight: 400;
   --ig-overline-font-style: normal;
@@ -483,7 +470,7 @@
 }
 .ig-typography h1 {
-  font-family: var(--ig-h1-font-family);
+  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);
@@ -494,7 +481,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography h2 {
-  font-family: var(--ig-h2-font-family);
+  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);
@@ -505,7 +492,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography h3 {
-  font-family: var(--ig-h3-font-family);
+  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);
@@ -516,7 +503,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography h4 {
-  font-family: var(--ig-h4-font-family);
+  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);
@@ -527,7 +514,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography h5 {
-  font-family: var(--ig-h5-font-family);
+  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);
@@ -538,7 +525,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography h6 {
-  font-family: var(--ig-h6-font-family);
+  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);
@@ -549,7 +536,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography p {
-  font-family: var(--ig-body-1-font-family);
+  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);
@@ -560,7 +547,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__h1 {
-  font-family: var(--ig-h1-font-family);
+  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);
@@ -571,7 +558,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography .ig-typography__h2 {
-  font-family: var(--ig-h2-font-family);
+  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);
@@ -582,7 +569,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography .ig-typography__h3 {
-  font-family: var(--ig-h3-font-family);
+  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);
@@ -593,7 +580,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography .ig-typography__h4 {
-  font-family: var(--ig-h4-font-family);
+  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);
@@ -604,7 +591,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography .ig-typography__h5 {
-  font-family: var(--ig-h5-font-family);
+  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);
@@ -615,7 +602,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography .ig-typography__h6 {
-  font-family: var(--ig-h6-font-family);
+  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);
@@ -626,7 +613,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-font-family);
+  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);
@@ -637,7 +624,7 @@
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-2 {
-  font-family: var(--ig-subtitle-2-font-family);
+  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);
@@ -648,7 +635,7 @@
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 .ig-typography .ig-typography__body-1 {
-  font-family: var(--ig-body-1-font-family);
+  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);
@@ -659,7 +646,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__body-2 {
-  font-family: var(--ig-body-2-font-family);
+  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);
@@ -670,7 +657,7 @@
   margin-bottom: var(--ig-body-2-margin-bottom);
 }
 .ig-typography .ig-typography__button {
-  font-family: var(--ig-button-font-family);
+  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);
@@ -681,7 +668,7 @@
   margin-bottom: var(--ig-button-margin-bottom);
 }
 .ig-typography .ig-typography__caption {
-  font-family: var(--ig-caption-font-family);
+  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);
@@ -692,7 +679,7 @@
   margin-bottom: var(--ig-caption-margin-bottom);
 }
 .ig-typography .ig-typography__overline {
-  font-family: var(--ig-overline-font-family);
+  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);
@@ -714,6 +701,24 @@ igc-icon-button {
   --hover-background: hsla(var(--ig-primary-300), var(--ig-primary-a));
 }
+igc-calendar::part(header) {
+  --header-color: var(--ig-primary-500-contrast);
+}
+igc-calendar::part(days-view) {
+  --date-current-color: var(--ig-secondary-500-contrast);
+  --date-color-hover: var(--ig-gray-100-contrast);
+}
+igc-calendar::part(months-view), igc-calendar::part(years-view) {
+  --current-month-year-bg: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  --current-month-year-color: var(--ig-gray-100-contrast);
+  --current-month-year-bg-hover: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  --current-month-year-color-hover: var(--ig-gray-200-contrast);
+  --selected-month-year-bg: hsla(var(--ig-primary-900), var(--ig-primary-a));
+  --selected-month-year-color: var(--ig-primary-900-contrast);
+  --selected-month-year-bg-hover: hsla(var(--ig-primary-800), var(--ig-primary-a));
+  --selected-month-year-color-hover: var(--ig-primary-800-contrast);
+}
 igc-checkbox {
   --border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
   --hover-color: hsla(var(--ig-gray-900), var(--ig-gray-a));

package/themes/dark/indigo.css CHANGED Viewed

@@ -360,7 +360,6 @@
 }
 :root {
   --ig-font-family: 'Nunito Sans', sans-serif;
-  --ig-h1-font-family: var(--ig-font-family);
   --ig-h1-font-size: 6rem;
   --ig-h1-font-weight: 200;
   --ig-h1-font-style: normal;
@@ -369,7 +368,6 @@
   --ig-h1-text-transform: none;
   --ig-h1-margin-top: 0;
   --ig-h1-margin-bottom: 0;
-  --ig-h2-font-family: var(--ig-font-family);
   --ig-h2-font-size: 3.75rem;
   --ig-h2-font-weight: 200;
   --ig-h2-font-style: normal;
@@ -378,7 +376,6 @@
   --ig-h2-text-transform: none;
   --ig-h2-margin-top: 0;
   --ig-h2-margin-bottom: 0;
-  --ig-h3-font-family: var(--ig-font-family);
   --ig-h3-font-size: 3rem;
   --ig-h3-font-weight: 200;
   --ig-h3-font-style: normal;
@@ -387,7 +384,6 @@
   --ig-h3-text-transform: none;
   --ig-h3-margin-top: 0;
   --ig-h3-margin-bottom: 0;
-  --ig-h4-font-family: var(--ig-font-family);
   --ig-h4-font-size: 2.25rem;
   --ig-h4-font-weight: 200;
   --ig-h4-font-style: normal;
@@ -396,7 +392,6 @@
   --ig-h4-text-transform: none;
   --ig-h4-margin-top: 0;
   --ig-h4-margin-bottom: 0;
-  --ig-h5-font-family: var(--ig-font-family);
   --ig-h5-font-size: 1.5rem;
   --ig-h5-font-weight: 200;
   --ig-h5-font-style: normal;
@@ -405,7 +400,6 @@
   --ig-h5-text-transform: none;
   --ig-h5-margin-top: 0;
   --ig-h5-margin-bottom: 0;
-  --ig-h6-font-family: var(--ig-font-family);
   --ig-h6-font-size: 1.25rem;
   --ig-h6-font-weight: 600;
   --ig-h6-font-style: normal;
@@ -414,7 +408,6 @@
   --ig-h6-text-transform: none;
   --ig-h6-margin-top: 0;
   --ig-h6-margin-bottom: 0;
-  --ig-subtitle-1-font-family: var(--ig-font-family);
   --ig-subtitle-1-font-size: 1rem;
   --ig-subtitle-1-font-weight: 600;
   --ig-subtitle-1-font-style: normal;
@@ -423,7 +416,6 @@
   --ig-subtitle-1-text-transform: none;
   --ig-subtitle-1-margin-top: 0;
   --ig-subtitle-1-margin-bottom: 0;
-  --ig-subtitle-2-font-family: var(--ig-font-family);
   --ig-subtitle-2-font-size: 0.875rem;
   --ig-subtitle-2-font-weight: 700;
   --ig-subtitle-2-font-style: normal;
@@ -432,7 +424,6 @@
   --ig-subtitle-2-text-transform: none;
   --ig-subtitle-2-margin-top: 0;
   --ig-subtitle-2-margin-bottom: 0;
-  --ig-body-1-font-family: var(--ig-font-family);
   --ig-body-1-font-size: 1rem;
   --ig-body-1-font-weight: 400;
   --ig-body-1-font-style: normal;
@@ -441,7 +432,6 @@
   --ig-body-1-text-transform: none;
   --ig-body-1-margin-top: 0;
   --ig-body-1-margin-bottom: 0;
-  --ig-body-2-font-family: var(--ig-font-family);
   --ig-body-2-font-size: 0.875rem;
   --ig-body-2-font-weight: 400;
   --ig-body-2-font-style: normal;
@@ -450,7 +440,6 @@
   --ig-body-2-text-transform: none;
   --ig-body-2-margin-top: 0;
   --ig-body-2-margin-bottom: 0;
-  --ig-button-font-family: var(--ig-font-family);
   --ig-button-font-size: 0.75rem;
   --ig-button-font-weight: 700;
   --ig-button-font-style: normal;
@@ -459,7 +448,6 @@
   --ig-button-text-transform: uppercase;
   --ig-button-margin-top: 0;
   --ig-button-margin-bottom: 0;
-  --ig-caption-font-family: var(--ig-font-family);
   --ig-caption-font-size: 0.75rem;
   --ig-caption-font-weight: 400;
   --ig-caption-font-style: normal;
@@ -468,7 +456,6 @@
   --ig-caption-text-transform: normal;
   --ig-caption-margin-top: 0;
   --ig-caption-margin-bottom: 0;
-  --ig-overline-font-family: var(--ig-font-family);
   --ig-overline-font-size: 0.625rem;
   --ig-overline-font-weight: 700;
   --ig-overline-font-style: normal;

package/themes/dark/material.css CHANGED Viewed

@@ -363,7 +363,6 @@
 :root {
   --ig-font-family: 'Titillium Web', sans-serif;
-  --ig-h1-font-family: var(--ig-font-family);
   --ig-h1-font-size: 6rem;
   --ig-h1-font-weight: 300;
   --ig-h1-font-style: normal;
@@ -372,7 +371,6 @@
   --ig-h1-text-transform: none;
   --ig-h1-margin-top: 1.75rem;
   --ig-h1-margin-bottom: 3.5rem;
-  --ig-h2-font-family: var(--ig-font-family);
   --ig-h2-font-size: 3.75rem;
   --ig-h2-font-weight: 300;
   --ig-h2-font-style: normal;
@@ -381,7 +379,6 @@
   --ig-h2-text-transform: none;
   --ig-h2-margin-top: 1.75rem;
   --ig-h2-margin-bottom: 1.75rem;
-  --ig-h3-font-family: var(--ig-font-family);
   --ig-h3-font-size: 3rem;
   --ig-h3-font-weight: 400;
   --ig-h3-font-style: normal;
@@ -390,7 +387,6 @@
   --ig-h3-text-transform: none;
   --ig-h3-margin-top: 1.75rem;
   --ig-h3-margin-bottom: 0;
-  --ig-h4-font-family: var(--ig-font-family);
   --ig-h4-font-size: 2.125rem;
   --ig-h4-font-weight: 400;
   --ig-h4-font-style: normal;
@@ -399,7 +395,6 @@
   --ig-h4-text-transform: none;
   --ig-h4-margin-top: 1.75rem;
   --ig-h4-margin-bottom: 0;
-  --ig-h5-font-family: var(--ig-font-family);
   --ig-h5-font-size: 1.5rem;
   --ig-h5-font-weight: 400;
   --ig-h5-font-style: normal;
@@ -408,7 +403,6 @@
   --ig-h5-text-transform: none;
   --ig-h5-margin-top: 1.75rem;
   --ig-h5-margin-bottom: 0;
-  --ig-h6-font-family: var(--ig-font-family);
   --ig-h6-font-size: 1.25rem;
   --ig-h6-font-weight: 600;
   --ig-h6-font-style: normal;
@@ -417,7 +411,6 @@
   --ig-h6-text-transform: none;
   --ig-h6-margin-top: 0;
   --ig-h6-margin-bottom: 0;
-  --ig-subtitle-1-font-family: var(--ig-font-family);
   --ig-subtitle-1-font-size: 1rem;
   --ig-subtitle-1-font-weight: 400;
   --ig-subtitle-1-font-style: normal;
@@ -426,7 +419,6 @@
   --ig-subtitle-1-text-transform: none;
   --ig-subtitle-1-margin-top: 0;
   --ig-subtitle-1-margin-bottom: 0;
-  --ig-subtitle-2-font-family: var(--ig-font-family);
   --ig-subtitle-2-font-size: 0.875rem;
   --ig-subtitle-2-font-weight: 600;
   --ig-subtitle-2-font-style: normal;
@@ -435,7 +427,6 @@
   --ig-subtitle-2-text-transform: none;
   --ig-subtitle-2-margin-top: 0;
   --ig-subtitle-2-margin-bottom: 0;
-  --ig-body-1-font-family: var(--ig-font-family);
   --ig-body-1-font-size: 1rem;
   --ig-body-1-font-weight: 400;
   --ig-body-1-font-style: normal;
@@ -444,7 +435,6 @@
   --ig-body-1-text-transform: none;
   --ig-body-1-margin-top: 1.75rem;
   --ig-body-1-margin-bottom: 1rem;
-  --ig-body-2-font-family: var(--ig-font-family);
   --ig-body-2-font-size: 0.875rem;
   --ig-body-2-font-weight: 400;
   --ig-body-2-font-style: normal;
@@ -453,7 +443,6 @@
   --ig-body-2-text-transform: none;
   --ig-body-2-margin-top: 0;
   --ig-body-2-margin-bottom: 0;
-  --ig-button-font-family: var(--ig-font-family);
   --ig-button-font-size: 0.875rem;
   --ig-button-font-weight: 600;
   --ig-button-font-style: normal;
@@ -462,7 +451,6 @@
   --ig-button-text-transform: uppercase;
   --ig-button-margin-top: 0;
   --ig-button-margin-bottom: 0;
-  --ig-caption-font-family: var(--ig-font-family);
   --ig-caption-font-size: 0.75rem;
   --ig-caption-font-weight: 400;
   --ig-caption-font-style: normal;
@@ -471,7 +459,6 @@
   --ig-caption-text-transform: none;
   --ig-caption-margin-top: 0;
   --ig-caption-margin-bottom: 0;
-  --ig-overline-font-family: var(--ig-font-family);
   --ig-overline-font-size: 0.625rem;
   --ig-overline-font-weight: 400;
   --ig-overline-font-style: normal;
@@ -483,7 +470,7 @@
 }
 .ig-typography h1 {
-  font-family: var(--ig-h1-font-family);
+  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);
@@ -494,7 +481,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography h2 {
-  font-family: var(--ig-h2-font-family);
+  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);
@@ -505,7 +492,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography h3 {
-  font-family: var(--ig-h3-font-family);
+  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);
@@ -516,7 +503,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography h4 {
-  font-family: var(--ig-h4-font-family);
+  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);
@@ -527,7 +514,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography h5 {
-  font-family: var(--ig-h5-font-family);
+  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);
@@ -538,7 +525,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography h6 {
-  font-family: var(--ig-h6-font-family);
+  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);
@@ -549,7 +536,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography p {
-  font-family: var(--ig-body-1-font-family);
+  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);
@@ -560,7 +547,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__h1 {
-  font-family: var(--ig-h1-font-family);
+  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);
@@ -571,7 +558,7 @@
   margin-bottom: var(--ig-h1-margin-bottom);
 }
 .ig-typography .ig-typography__h2 {
-  font-family: var(--ig-h2-font-family);
+  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);
@@ -582,7 +569,7 @@
   margin-bottom: var(--ig-h2-margin-bottom);
 }
 .ig-typography .ig-typography__h3 {
-  font-family: var(--ig-h3-font-family);
+  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);
@@ -593,7 +580,7 @@
   margin-bottom: var(--ig-h3-margin-bottom);
 }
 .ig-typography .ig-typography__h4 {
-  font-family: var(--ig-h4-font-family);
+  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);
@@ -604,7 +591,7 @@
   margin-bottom: var(--ig-h4-margin-bottom);
 }
 .ig-typography .ig-typography__h5 {
-  font-family: var(--ig-h5-font-family);
+  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);
@@ -615,7 +602,7 @@
   margin-bottom: var(--ig-h5-margin-bottom);
 }
 .ig-typography .ig-typography__h6 {
-  font-family: var(--ig-h6-font-family);
+  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);
@@ -626,7 +613,7 @@
   margin-bottom: var(--ig-h6-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-1 {
-  font-family: var(--ig-subtitle-1-font-family);
+  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);
@@ -637,7 +624,7 @@
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
 }
 .ig-typography .ig-typography__subtitle-2 {
-  font-family: var(--ig-subtitle-2-font-family);
+  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);
@@ -648,7 +635,7 @@
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 .ig-typography .ig-typography__body-1 {
-  font-family: var(--ig-body-1-font-family);
+  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);
@@ -659,7 +646,7 @@
   margin-bottom: var(--ig-body-1-margin-bottom);
 }
 .ig-typography .ig-typography__body-2 {
-  font-family: var(--ig-body-2-font-family);
+  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);
@@ -670,7 +657,7 @@
   margin-bottom: var(--ig-body-2-margin-bottom);
 }
 .ig-typography .ig-typography__button {
-  font-family: var(--ig-button-font-family);
+  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);
@@ -681,7 +668,7 @@
   margin-bottom: var(--ig-button-margin-bottom);
 }
 .ig-typography .ig-typography__caption {
-  font-family: var(--ig-caption-font-family);
+  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);
@@ -692,7 +679,7 @@
   margin-bottom: var(--ig-caption-margin-bottom);
 }
 .ig-typography .ig-typography__overline {
-  font-family: var(--ig-overline-font-family);
+  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);