global font

matt8707 · Mar 4, 2022 · 94292ba · 94292ba
1 parent 3ab9da4
commit 94292ba
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 40 deletions.
diff --git a/button_card_templates.yaml b/button_card_templates.yaml
@@ -99,7 +99,6 @@
         - justify-self: start
         - line-height: 115%
       card:
-        - font-family: Sf Display, Roboto
         - border-radius: var(--custom-button-card-border-radius)
         - -webkit-tap-highlight-color: rgba(0,0,0,0)
         - transition: none
@@ -149,8 +148,8 @@
             text-align: left !important;
           }
           #name, #state {
-            font-size: 1.34vw;
-            letter-spacing: 0.05vw;
+            font-size: 1.32vw;
+            letter-spacing: -0.02vw;
           }
           #state::first-letter {
             text-transform: uppercase;
@@ -237,6 +236,7 @@
     extra_styles: |
       #card {
         padding: 0;
+        font-family: SF Display, Roboto, system-ui;
       }
       #container {
         display: flex !important;
@@ -251,26 +251,27 @@
         color: rgba(255, 255, 255, 0.8);
       }
       .time {
-        font-family: SF Text, Roboto;
         font-size: var(--sidebar-time-font-size);
         font-weight: 200;
         line-height: var(--sidebar-time-line-height);
-        letter-spacing: -0.05vw;
+        letter-spacing: 0.11vw;
         margin-left: -0.3vw;
         color: rgba(255, 255, 255, 0.8);
       }
       .time-colon {
         position: relative;
-        top: -.09em;
+        top: -.11em;
       }
       p {
-        font-family: SF Display, Roboto;
         font-size: var(--sidebar-font-size);
         line-height: var(--sidebar-line-height);
         font-weight: 300;
-        letter-spacing: 0.06vw;
+        letter-spacing: 0.07vw;
         color: #6a7377;
       }
+      b {
+        font-weight: 700;
+      }
       p > b {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -324,12 +325,9 @@
           }
         ]]]
     styles:
-      name:
-        - font-family: SF Display, Roboto
       card:
         - color: rgba(157,160,162, 0.55)
         - width: fit-content
-        - background: rgba(115, 115, 115, 0.04)
         - border: 0.12vw solid rgba(58, 69, 73, 0.2)
         - transition: none
         - padding: 0 0 0.05vw 0
@@ -352,7 +350,6 @@
           - position: absolute
           - top: -0.9vw
           - right: -1vw
-          - font-family: SF Display, Roboto
           - font-weight: 700
           - color: '#d6d6d6'
           - background: '#8b3333'
@@ -472,7 +469,6 @@
         circle:
           - display: initial
           - width: 90%
-          - letter-spacing: 0.03vw
           - margin: -6% -5% 0 0
           - justify-self: end
           - opacity: 1
@@ -557,6 +553,7 @@
       card:
         - cursor: default
         - padding: 0.2em 0 0 0.6em
+        - letter-spacing: var(--mdc-typography-body1-letter-spacing)
     tap_action:
       href:
     extra_styles: |
@@ -570,29 +567,22 @@
         padding-right: 2px;
       }
       .title {
-        font-family: SF Text, Roboto;
         font-size: 1.3em;
         font-weight: 500;
       }
       .subtitle {
-        font-family: SF Text, Roboto;
-        font-size: 0.9em;
+        font-size: 0.95em;
         line-height: 0.7em;
         padding-left: 3px;
         padding-bottom: 10px;
         font-weight: 500;
-        letter-spacing: 0.5px;
         color: #828383;
       }
       a {
         color: var(--primary-color);
       }
-      li {
-        padding-bottom: 0.5em;
-      }
       ul {
         margin-top: -0.6em;
-        font-family: SF Text, Roboto;
         font-size: 0.88em;
         letter-spacing: 0.5px;
         line-height: 1.6em;

diff --git a/include/themes.yaml b/include/themes.yaml
@@ -35,16 +35,28 @@ frontend:
       paper-toast-background-color: '#1b1b1bf2'
       vertical-stack-card-margin: 0
 
+      #font
+      primary-font-family: SF Text, Roboto, system-ui
+      paper-font-common-base_-_font-family: var(--primary-font-family)
+      paper-font-common-code_-_font-family: var(--primary-font-family)
+      paper-font-body1_-_font-family: var(--primary-font-family)
+      paper-font-subhead_-_font-family: var(--primary-font-family)
+      paper-font-headline_-_font-family: var(--primary-font-family)
+      paper-font-caption_-_font-family: var(--primary-font-family)
+      paper-font-title_-_font-family: var(--primary-font-family)
+      ha-card-header-font-family: var(--primary-font-family)
+      mdc-typography-body1-font-family: var(--primary-font-family)
+      mdc-typography-font-family: var(--primary-font-family)
+
       #custom variables
       ha-card-background-color: rgba(34,38,39,0.9)
       ha-card-header-background-color: rgba(48,52,52,0.8)
       custom-layout-card-padding: 3.3vw
-      custom-button-card-border-radius: 8%
-      sidebar-time-font-size: 5vw
-      sidebar-time-line-height: 4vw
-      sidebar-font-size: 1.5vw
-      sidebar-line-height: 2.1vw
-      media-blur-height: 24.5%
+      custom-button-card-border-radius: 9.5%
+      sidebar-time-font-size: 5.2vw
+      sidebar-time-line-height: 4.3vw
+      sidebar-font-size: 1.42vw
+      sidebar-line-height: 2vw
       card-content-padding: 1.4em 2.2em 1.6em 1.5em
       bar-card-color: '#303435'
 
@@ -82,10 +94,10 @@ frontend:
               h1 {
                 font-size: 2.4vw !important;
                 line-height: 0 !important;
-                font-family: SF Text, Roboto !important;
                 font-weight: 500 !important;
                 color: rgba(255, 255, 255, 0.8) !important;
                 padding: 1vw 0 2vw 0 !important;
+                letter-spacing: 0.006vw !important;
               }
               /* portrait */
               @media screen and (max-width: 1200px) {
@@ -191,7 +203,6 @@ frontend:
 
       card-mod-card: |
         .header .card-header {
-          font-family: SF Text, Roboto;
           letter-spacing: 0.005em;
           font-size: 1.6em;
           font-weight: 500;
@@ -202,7 +213,6 @@ frontend:
 
         .content .card-content {
           padding: var(--card-content-padding);
-          font-family: SF Text, Roboto;
           letter-spacing: normal;
         }
 
@@ -238,7 +248,6 @@ frontend:
 
         .type-custom-bar-card bar-card-name {
           padding-left: 0.25em;
-          font-family: SF Text, Roboto;
           letter-spacing: normal;
         }
 
@@ -274,8 +283,7 @@ frontend:
 
           .main-title {
             margin-top: 5px;
-            font-family: SF Text, Roboto;
-            letter-spacing: 0.005em;
+            font-family: var(--primary-font-family);
           }
 
           mwc-icon-button {
@@ -342,8 +350,7 @@ frontend:
             font-weight: 400;
             position: absolute;
             z-index: 1;
-            font-family: SF Display, Roboto;
-            letter-spacing: 0.02em;
+            letter-spacing: -0.01em;
             pointer-events: none;
             mix-blend-mode: difference;
             text-align: center;

diff --git a/popup/footer/nas.yaml b/popup/footer/nas.yaml
@@ -199,13 +199,10 @@ browser_mod:
           layout: minimal
           graph_span: 1h
           locale: se
-          show:
-            loading: false
           apex_config:
             chart:
-              fontFamily: Roboto
+              fontFamily: var(--primary-font-family)
               height: 135px
-              offsetY: -20px
             tooltip:
               style:
                 fontSize: 14px

diff --git a/popup/footer/vacuum.yaml b/popup/footer/vacuum.yaml
@@ -36,6 +36,7 @@ browser_mod:
         $hui-entities-card$: |
           .card-content {
             padding: var(--card-content-padding);
+            letter-spacing: normal;
           }
         $hui-horizontal-stack-card$: |
           #root {
@@ -48,7 +49,6 @@ browser_mod:
             padding: var(--card-content-padding);
             padding-top: 0;
             padding-bottom: 0;
-            font-family: SF Text, Roboto;
             letter-spacing: normal;
           }
           div.tiles-wrapper, div.vacuum-controls, #map-zoomer-overlay {