Dan font update (#1411)

chillenberger · web-flow · commit a5349e44c791 · 2024-04-19T12:23:22.000-06:00
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
@@ -1,6 +1,6 @@
 
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
-<div class="leftnav-container py-3" data-controller="navigation-left-nav-web-app">
+<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app">
   <nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
     <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
       <div class="d-flex flex-column">
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
@@ -4,7 +4,7 @@
   use crate::components::{Dropdown, ProfileIcon}; 
 %>
 
-  <div class="fixed-top-nav" data-controller="navigation-navbar-web-app">
+  <div class="fixed-top-nav font-family-primary" data-controller="navigation-navbar-web-app">
     <nav class="navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
       
       <div class="controls">
diff --git a/pgml-dashboard/static/css/scss/base/_base.scss b/pgml-dashboard/static/css/scss/base/_base.scss
@@ -66,8 +66,6 @@ html, body, main {
 }
 
 article {
-    font-family: "Roboto", Helvetica;
-
     p {
         line-height: 1.6rem;
         print-color-adjust: exact;
diff --git a/pgml-dashboard/static/css/scss/base/_font.scss b/pgml-dashboard/static/css/scss/base/_font.scss
@@ -1,5 +1,3 @@
-$font-family-base: 'silka', 'Roboto', 'sans-serif';
-
 @font-face {
     font-family: 'silka';
     src: url('/api/flow.js?q=https%3A%2F%2Fgithub.com%2Fdashboard%2Fstatic%2Ffonts%2Fsilka-bold-webfont.eot');
diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss
@@ -1,90 +1,102 @@
 // all other displays are default bootstrap styling
 .display-2 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold;
     font-size: 4rem;
     line-height: 80px;
 }
 
 .h1-big {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h1-big-font-size); line-height: var(--h1-big-line-height);
     @include media-breakpoint-down(md) {
         font-size: 48px; line-height: 52px;
     } 
 }
 h1, .h1 { 
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h1-font-size); line-height: var(--h1-line-height);
     @include media-breakpoint-down(md) {
         font-size: $h1-font-size; line-height: 48px;
     }
 }
 h2, .h2 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h2-font-size); line-height: var(--h2-line-height);
     @include media-breakpoint-down(md) {
         font-size: 40px; line-height: 44px;
     }
 }
 h3, .h3 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h3-font-size); line-height: var(--h3-line-height);
     @include media-breakpoint-down(md) {
         font-size: 32px; line-height: 36px;
     }
 }
 h4, .h4 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h4-font-size); line-height: var(--h4-line-height);
     @include media-breakpoint-down(md) {
         font-size: 28px; line-height: 32px;
     }
 }
 h5, .h5 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h5-font-size); line-height: var(--h5-line-height);
     @include media-breakpoint-down(md) {
         font-size: 24px; line-height: 28px;
     }
 }
 h6, .h6 {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--h6-font-size); line-height: var(--h6-line-height);
     @include media-breakpoint-down(md) {
         font-size: 20px; line-height: 26px;
     }
 }
 
 .eyebrow-text {
+    font-family: var(--font-family-primary);
     font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height);
     @include media-breakpoint-down(md) {
         font-size: 16px; line-height: 22px;
     }
 }
 
 .subcopy-text {
-    font-family: 'inter', sans-serif;
+    font-family: var(--font-family-secondary);
     font-size: 18px;
     line-height: 22px;
 }
 
 .body-large-text {
+    font-family: var(--font-family-secondary);
     font-size: var(--body-large-font-size); line-height: var(--body-large-line-height);
     @include media-breakpoint-down(md) {
         font-size: 18px; line-height: 24px;
     }
 }
 
-// default body text size
-.body-regular-text, p {
+// default body text
+.body-regular-text, p, body {
+    font-family: var(--font-family-secondary);
     font-size: var(--body-regular-font-size); line-height: var(--body-regular-line-height);
     @include media-breakpoint-down(md) {
         font-size: 16px; line-height: 20px;
     }
 }
 
 .body-small-text {
+    font-family: var(--font-family-secondary);
     font-size: var(--body-small-font-size); line-height: var(--body-small-line-height);
     @include media-breakpoint-down(md) {
         font-size: 14px; line-height: 18px;
     }
 }
 
 .legal-text {
-    font-family: Inter;
+    font-family: var(--font-family-secondary);
     font-size: var(--legal-font-size);
     line-height: var(--legal-line-height);
     @include media-breakpoint-down(md) {
@@ -110,7 +122,6 @@ h6, .h6 {
 .text-white, .text-white-100 {
     color: #{$gray-100} !important;
 }
-
 .text-purple {
     color: #{$purple} !important;
 }
@@ -140,3 +151,11 @@ h6, .h6 {
 .text-gradient-party, .party-time {
     @include text-gradient($gradient-text);
 }
+
+.font-family-primary {
+    font-family: var(--font-family-primary) !important;
+}
+
+.font-family-secondary {
+    font-family: var(--font-family-secondary) !important;
+}
diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -1,5 +1,6 @@
 .btn {
     font-weight: $font-weight-semibold;
+    font-family: var(--font-family-primary);
 
     display: flex;
     justify-content: center;
diff --git a/pgml-dashboard/static/css/scss/themes/docs.scss b/pgml-dashboard/static/css/scss/themes/docs.scss
@@ -24,4 +24,7 @@
   --body-large-line-height: 26px;
   --body-regular-line-height: 22px;
   --body-small-line-height: 20px;
+
+  --font-family-primary: 'silka', 'Roboto', 'sans-serif';
+  --font-family-secondary: 'inter', 'sans-serif';
 }
diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss
@@ -25,4 +25,7 @@
   --body-large-line-height: 26px;
   --body-regular-line-height: 22px;
   --body-small-line-height: 20px;
+
+  --font-family-primary: 'silka', 'Roboto', 'sans-serif';
+  --font-family-secondary: 'inter', 'sans-serif';
 }
diff --git a/pgml-dashboard/static/css/scss/themes/product.scss b/pgml-dashboard/static/css/scss/themes/product.scss
@@ -24,4 +24,7 @@
   --body-large-line-height: 24px;
   --body-regular-line-height: 20px;
   --body-small-line-height: 18px;
+
+  --font-family-primary: 'silka', 'Roboto', 'sans-serif';
+  --font-family-secondary: 'inter', 'sans-serif';
 }

Original file line number	Diff line number	Diff line change
`@@ -66,8 +66,6 @@ html, body, main {`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`article {`
`69`		`- font-family: "Roboto", Helvetica;`
`70`		`-`
`71`	`69`	`p {`
`72`	`70`	`line-height: 1.6rem;`
`73`	`71`	`print-color-adjust: exact;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-$font-family-base: 'silka', 'Roboto', 'sans-serif';`
`2`		`-`
`3`	`1`	`@font-face {`
`4`	`2`	`font-family: 'silka';`
`5`	`3`	`src: url('/dashboard/static/fonts/silka-bold-webfont.eot');`
Original file line number	Diff line number	Diff line change
`@@ -1,90 +1,102 @@`
`1`	`1`	`// all other displays are default bootstrap styling`
`2`	`2`	`.display-2 {`
	`3`	`+ font-family: var(--font-family-primary);`
`3`	`4`	`font-weight: $font-weight-bold;`
`4`	`5`	`font-size: 4rem;`
`5`	`6`	`line-height: 80px;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.h1-big {`
	`10`	`+ font-family: var(--font-family-primary);`
`9`	`11`	`font-weight: $font-weight-bold; font-size: var(--h1-big-font-size); line-height: var(--h1-big-line-height);`
`10`	`12`	`@include media-breakpoint-down(md) {`
`11`	`13`	`font-size: 48px; line-height: 52px;`
`12`	`14`	`}`
`13`	`15`	`}`
`14`	`16`	`h1, .h1 {`
	`17`	`+ font-family: var(--font-family-primary);`
`15`	`18`	`font-weight: $font-weight-bold; font-size: var(--h1-font-size); line-height: var(--h1-line-height);`
`16`	`19`	`@include media-breakpoint-down(md) {`
`17`	`20`	`font-size: $h1-font-size; line-height: 48px;`
`18`	`21`	`}`
`19`	`22`	`}`
`20`	`23`	`h2, .h2 {`
	`24`	`+ font-family: var(--font-family-primary);`
`21`	`25`	`font-weight: $font-weight-bold; font-size: var(--h2-font-size); line-height: var(--h2-line-height);`
`22`	`26`	`@include media-breakpoint-down(md) {`
`23`	`27`	`font-size: 40px; line-height: 44px;`
`24`	`28`	`}`
`25`	`29`	`}`
`26`	`30`	`h3, .h3 {`
	`31`	`+ font-family: var(--font-family-primary);`
`27`	`32`	`font-weight: $font-weight-bold; font-size: var(--h3-font-size); line-height: var(--h3-line-height);`
`28`	`33`	`@include media-breakpoint-down(md) {`
`29`	`34`	`font-size: 32px; line-height: 36px;`
`30`	`35`	`}`
`31`	`36`	`}`
`32`	`37`	`h4, .h4 {`
	`38`	`+ font-family: var(--font-family-primary);`
`33`	`39`	`font-weight: $font-weight-bold; font-size: var(--h4-font-size); line-height: var(--h4-line-height);`
`34`	`40`	`@include media-breakpoint-down(md) {`
`35`	`41`	`font-size: 28px; line-height: 32px;`
`36`	`42`	`}`
`37`	`43`	`}`
`38`	`44`	`h5, .h5 {`
	`45`	`+ font-family: var(--font-family-primary);`
`39`	`46`	`font-weight: $font-weight-bold; font-size: var(--h5-font-size); line-height: var(--h5-line-height);`
`40`	`47`	`@include media-breakpoint-down(md) {`
`41`	`48`	`font-size: 24px; line-height: 28px;`
`42`	`49`	`}`
`43`	`50`	`}`
`44`	`51`	`h6, .h6 {`
	`52`	`+ font-family: var(--font-family-primary);`
`45`	`53`	`font-weight: $font-weight-bold; font-size: var(--h6-font-size); line-height: var(--h6-line-height);`
`46`	`54`	`@include media-breakpoint-down(md) {`
`47`	`55`	`font-size: 20px; line-height: 26px;`
`48`	`56`	`}`
`49`	`57`	`}`
`50`	`58`
`51`	`59`	`.eyebrow-text {`
	`60`	`+ font-family: var(--font-family-primary);`
`52`	`61`	`font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height);`
`53`	`62`	`@include media-breakpoint-down(md) {`
`54`	`63`	`font-size: 16px; line-height: 22px;`
`55`	`64`	`}`
`56`	`65`	`}`
`57`	`66`
`58`	`67`	`.subcopy-text {`
`59`		`- font-family: 'inter', sans-serif;`
	`68`	`+ font-family: var(--font-family-secondary);`
`60`	`69`	`font-size: 18px;`
`61`	`70`	`line-height: 22px;`
`62`	`71`	`}`
`63`	`72`
`64`	`73`	`.body-large-text {`
	`74`	`+ font-family: var(--font-family-secondary);`
`65`	`75`	`font-size: var(--body-large-font-size); line-height: var(--body-large-line-height);`
`66`	`76`	`@include media-breakpoint-down(md) {`
`67`	`77`	`font-size: 18px; line-height: 24px;`
`68`	`78`	`}`
`69`	`79`	`}`
`70`	`80`
`71`		`-// default body text size`
`72`		`-.body-regular-text, p {`
	`81`	`+// default body text`
	`82`	`+.body-regular-text, p, body {`
	`83`	`+ font-family: var(--font-family-secondary);`
`73`	`84`	`font-size: var(--body-regular-font-size); line-height: var(--body-regular-line-height);`
`74`	`85`	`@include media-breakpoint-down(md) {`
`75`	`86`	`font-size: 16px; line-height: 20px;`
`76`	`87`	`}`
`77`	`88`	`}`
`78`	`89`
`79`	`90`	`.body-small-text {`
	`91`	`+ font-family: var(--font-family-secondary);`
`80`	`92`	`font-size: var(--body-small-font-size); line-height: var(--body-small-line-height);`
`81`	`93`	`@include media-breakpoint-down(md) {`
`82`	`94`	`font-size: 14px; line-height: 18px;`
`83`	`95`	`}`
`84`	`96`	`}`
`85`	`97`
`86`	`98`	`.legal-text {`
`87`		`- font-family: Inter;`
	`99`	`+ font-family: var(--font-family-secondary);`
`88`	`100`	`font-size: var(--legal-font-size);`
`89`	`101`	`line-height: var(--legal-line-height);`
`90`	`102`	`@include media-breakpoint-down(md) {`
`@@ -110,7 +122,6 @@ h6, .h6 {`
`110`	`122`	`.text-white, .text-white-100 {`
`111`	`123`	`color: #{$gray-100} !important;`
`112`	`124`	`}`
`113`		`-`
`114`	`125`	`.text-purple {`
`115`	`126`	`color: #{$purple} !important;`
`116`	`127`	`}`
`@@ -140,3 +151,11 @@ h6, .h6 {`
`140`	`151`	`.text-gradient-party, .party-time {`
`141`	`152`	`@include text-gradient($gradient-text);`
`142`	`153`	`}`
	`154`	`+`
	`155`	`+.font-family-primary {`
	`156`	`+ font-family: var(--font-family-primary) !important;`
	`157`	`+}`
	`158`	`+`
	`159`	`+.font-family-secondary {`
	`160`	`+ font-family: var(--font-family-secondary) !important;`
	`161`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,7 @@`
`24`	`24`	`--body-large-line-height: 26px;`
`25`	`25`	`--body-regular-line-height: 22px;`
`26`	`26`	`--body-small-line-height: 20px;`
	`27`	`+`
	`28`	`+ --font-family-primary: 'silka', 'Roboto', 'sans-serif';`
	`29`	`+ --font-family-secondary: 'inter', 'sans-serif';`
`27`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,7 @@`
`25`	`25`	`--body-large-line-height: 26px;`
`26`	`26`	`--body-regular-line-height: 22px;`
`27`	`27`	`--body-small-line-height: 20px;`
	`28`	`+`
	`29`	`+ --font-family-primary: 'silka', 'Roboto', 'sans-serif';`
	`30`	`+ --font-family-secondary: 'inter', 'sans-serif';`
`28`	`31`	`}`