feat(@dpc-sdp/ripple-ui-core): added css var for heading font

falls back to regular font
dpc-sdp · Sep 28, 2023 · 5dbd704 · 5dbd704
1 parent ae9efa7
commit 5dbd704
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/packages/ripple-ui-core/src/styles/utilities/_typography.css b/packages/ripple-ui-core/src/styles/utilities/_typography.css
@@ -21,6 +21,7 @@ html {
   background-color: var(--rpl-clr-accent);
   box-decoration-break: clone;
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     padding: 0.2rem var(--rpl-sp-4); /* [1] */
@@ -40,6 +41,7 @@ html {
   background-color: var(--rpl-clr-accent);
   box-decoration-break: clone;
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 .rpl-type-h1,
@@ -50,6 +52,7 @@ html {
   letter-spacing: var(--rpl-type-ls-5);
   color: var(--rpl-clr-primary);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     font-size: var(--rpl-type-size-8);
@@ -65,6 +68,7 @@ html {
   letter-spacing: var(--rpl-type-ls-5);
   color: var(--rpl-clr-primary);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 /* h2 */
@@ -75,6 +79,7 @@ html {
   line-height: var(--rpl-type-lh-6);
   letter-spacing: var(--rpl-type-ls-4);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     font-size: var(--rpl-type-size-6);
@@ -89,6 +94,7 @@ html {
   line-height: var(--rpl-type-lh-6);
   letter-spacing: var(--rpl-type-ls-4);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 /* h3 */
@@ -103,6 +109,7 @@ html {
   background-color: var(--rpl-clr-primary);
   box-decoration-break: clone;
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     padding: 0 var(--rpl-sp-2);
@@ -123,6 +130,7 @@ html {
   background-color: var(--rpl-clr-primary);
   box-decoration-break: clone;
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 .rpl-type-h3,
@@ -132,6 +140,7 @@ html {
   line-height: var(--rpl-type-lh-5);
   letter-spacing: var(--rpl-type-ls-2);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     font-size: var(--rpl-type-size-4);
@@ -146,6 +155,7 @@ html {
   line-height: var(--rpl-type-lh-5);
   letter-spacing: var(--rpl-type-ls-2);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 /* h4 */
@@ -156,6 +166,7 @@ html {
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     font-size: var(--rpl-type-size-3);
@@ -170,6 +181,7 @@ html {
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 /* h5 */
@@ -180,6 +192,7 @@ html {
   line-height: var(--rpl-type-lh-3);
   letter-spacing: var(--rpl-type-ls-1);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
     font-size: var(--rpl-type-size-2);
@@ -194,6 +207,7 @@ html {
   line-height: var(--rpl-type-lh-3);
   letter-spacing: var(--rpl-type-ls-1);
   hyphens: auto;
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 /* Paragraphs */
@@ -260,6 +274,7 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-3);
   letter-spacing: var(--rpl-type-ls-6);
+  font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
 .rpl-type-label {