console: Fix font and weight values

TheThingsNetwork · Jul 30, 2024 · 5aed9c2 · 5aed9c2
1 parent 29d26c7
commit 5aed9c2
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 43 deletions.
diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl
@@ -31,7 +31,7 @@
 
   .title
     width: 100%
-    font-weight: $fwv2.bold
+    font-weight: $fw.bolder
     color: var(--c-text-neutral-heavy)
     overflow: hidden
     display: -webkit-box

diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
@@ -35,15 +35,15 @@
     flex-shrink: 0
 
     &-title
-      font-weight: $fwv2.bold
-      font-size: $fsv2.l
+      font-weight: $fw.bolder
+      font-size: $fs.l
       line-height: 1.3
       white-space: nowrap
       text-overflow: ellipsis
       overflow: hidden
 
   &-button
-    font-weight: $fwv2.semibold
+    font-weight: $fw.bold
     text-decoration: none transparent
     transition: text-decoration $ad.s ease-in-out
     align-self: center

diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl
@@ -43,7 +43,7 @@
     &-active
       box-shadow: var(--shadow-box-button-normal)
       background: var(--c-bg-neutral-min)
-      font-weight: $fwv2.regular
+      font-weight: $fw.normal
       border: 1px solid var(--c-border-neutral-light)
 
     &:hover:not(.toggle-button-active)

diff --git a/pkg/webui/components/search-panel/search-panel.styl b/pkg/webui/components/search-panel/search-panel.styl
@@ -68,7 +68,7 @@
 
   .result-header
     text-transform: uppercase
-    font-size: $fsv2.s
+    font-size: $fs.s
     color: var(--c-text-neutral-light)
     font-weight: $fw.bold
     padding: $cs.m $cs.xl $cs.xs $cs.xl
@@ -123,4 +123,3 @@
       line-height: 1
       width: fit-content
       margin: 0 auto
-
diff --git a/pkg/webui/components/sidebar/side-footer/side-footer.styl b/pkg/webui/components/sidebar/side-footer/side-footer.styl
@@ -19,7 +19,7 @@
     &-content
       display: flex
       width: 100%
-      font-weight: $fwv2.bold
+      font-weight: $fw.bolder
       white-space: nowrap
 
   .support-button
@@ -53,7 +53,7 @@
   .side-footer-version
     margin-left: $cs.xxs
     color: var(--c-text-neutral-semilight)
-    font-weight: $fwv2.regular
+    font-weight: $fw.normal
     overflow: hidden
     text-overflow: ellipsis
 

diff --git a/pkg/webui/components/table/cell/cell.styl b/pkg/webui/components/table/cell/cell.styl
@@ -59,7 +59,7 @@
     white-space: nowrap
 
     &-panel-style
-      font-size: $fsv2.s
+      font-size: $fs.s
 
   &-data
     height: 4rem

diff --git a/pkg/webui/components/tabs/tab/tab.styl b/pkg/webui/components/tabs/tab/tab.styl
@@ -46,7 +46,7 @@
     &-active
       box-shadow: var(--shadow-box-button-normal)
       background: var(--c-bg-neutral-min)
-      font-weight: $fwv2.regular
+      font-weight: $fw.normal
       border: 1px solid var(--c-border-neutral-light)
       color: var(--c-text-neutral-heavy)
 

diff --git a/pkg/webui/console/containers/application-overview-header/application-overview-header.styl b/pkg/webui/console/containers/application-overview-header/application-overview-header.styl
@@ -29,7 +29,7 @@
     white-space: nowrap
     color: var(--c-text-neutral-heavy)
     font-weight: $fw.bold
-    font-size: $fsv2.l
+    font-size: $fs.l
     margin: 0
 
   .id

diff --git a/pkg/webui/console/containers/device-overview-header/device-overview-header.styl b/pkg/webui/console/containers/device-overview-header/device-overview-header.styl
@@ -29,7 +29,7 @@
     white-space: nowrap
     color: var(--c-text-neutral-heavy)
     font-weight: $fw.bold
-    font-size: $fsv2.l
+    font-size: $fs.l
     margin: 0
 
   .id

diff --git a/pkg/webui/console/containers/gateway-overview-header/gateway-overview-header.styl b/pkg/webui/console/containers/gateway-overview-header/gateway-overview-header.styl
@@ -31,7 +31,7 @@
     text-overflow: ellipsis
     color: var(--c-text-neutral-heavy)
     font-weight: $fw.bold
-    font-size: $fsv2.l
+    font-size: $fs.l
     margin: 0
 
   .id
@@ -49,4 +49,3 @@
 
   .created-at-status > span
     display: none
-
diff --git a/pkg/webui/console/containers/gateway-status-panel/gateway-status-panel.styl b/pkg/webui/console/containers/gateway-status-panel/gateway-status-panel.styl
@@ -23,7 +23,7 @@
     .gtw-status-panel-upgrade-button
       background: var(--c-bg-brand-extralight)
       color: var(--c-text-brand-normal)
-      font-weight: $fwv2.medium
+      font-weight: $fw.medium
       box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
       margin-top: $cs.m
       width: fit-content

diff --git a/pkg/webui/console/containers/latest-decoded-payload-panel/latest-decoded-payload-panel.styl b/pkg/webui/console/containers/latest-decoded-payload-panel/latest-decoded-payload-panel.styl
@@ -27,21 +27,21 @@
   top: $cs.s
 
 .source
-  font-size: $fsv2.s
+  font-size: $fs.s
   font-weight: $fw.bold
 
 .received
   color: var(--c-text-neutral-light)
-  font-size: $fsv2.s
+  font-size: $fs.s
   font-weight: $fw.bold
   text-transform: uppercase
 
 .received-status > span
   display: none
 
 .header-title
-  font-weight: $fwv2.bold
-  font-size: $fsv2.l
+  font-weight: $fw.bolder
+  font-size: $fs.l
   white-space: nowrap
   text-overflow: ellipsis
   overflow: hidden

diff --git a/...webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl b/...webui/console/containers/notifications-dashboard-panel/notifications-dashboard-panel.styl
@@ -25,7 +25,7 @@
 
   &-preview
     margin-top: $cs.xxs
-    font-weight: $fwv2.regular
+    font-weight: $fw.normal
     color: var(--c-text-neutral-light)
 
   &-total

diff --git a/pkg/webui/console/containers/notifications/notifications.styl b/pkg/webui/console/containers/notifications/notifications.styl
@@ -42,7 +42,7 @@
     padding: $cs.xs
 
   &-date
-    font-weight: $fwv2.regular
+    font-weight: $fw.normal
     color: var(--c-text-neutral-light)
 
     +media-query($bp.sm)
@@ -79,7 +79,7 @@
       max-width: fit-content
 
   &-title
-    font-weight: $fwv2.semibold
+    font-weight: $fw.bold
     align-items: center
 
     +media-query($bp.lg)

diff --git a/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/console/containers/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -25,7 +25,7 @@
   background: var(--c-bg-brand-normal)
   color: var(--c-text-neutral-min)
   font-size: $fs.m
-  font-weight: $fwv2.semibold
+  font-weight: $fw.bold
   transition: $ad.s background ease-in-out
 
   &-title-wrapper

diff --git a/pkg/webui/console/views/organization/organization-header.styl b/pkg/webui/console/views/organization/organization-header.styl
@@ -29,7 +29,7 @@
     white-space: nowrap
     color: var(--c-text-neutral-heavy)
     font-weight: $fw.bold
-    font-size: $fsv2.l
+    font-size: $fs.l
     margin: 0
 
   .id

diff --git a/pkg/webui/containers/fetch-table/fetch-table.styl b/pkg/webui/containers/fetch-table/fetch-table.styl
@@ -93,4 +93,4 @@
   color: var(--c-text-error-normal)
 
 .add-button
-  font-weight: $fwv2.medium
+  font-weight: $fw.medium
diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl
@@ -62,22 +62,16 @@ $line-height-margin-factor = .3rem // Used for margin calculations on text eleme
 // ## Font Scale
 
 $fs = {
-  's': .857rem, // ~12px
+  's': .75rem, // 10.5px
   'm': 1rem, // 14px
-  'l': 1.286rem, // ~18p
+  'l': 1.25rem, // 17.5px
   'xl': 1.57rem, // ~22px
   'xxl': 1.857rem, // ~26px
   'xl3': 2.285rem, // ~32px
   'xl4': 3rem, // 48px
   'xl5': 3.428rem,
 }
 
-$fsv2 = {
-  's': .75rem,
-  'm': 1rem,
-  'l': 1.25rem,
-}
-
 // Corresponding default line heights.
 $lh = {
   's': $line-height-base,
@@ -89,16 +83,10 @@ $lh = {
 
 // Font weights for body copy
 $fw = {
-  'normal': 500,
-  'bold': 600, // Prefer this over `bolder`.
-  'bolder': 800,
-}
-
-$fwv2 = {
-  'regular': 400,
+  'normal': 400,
   'medium': 500,
-  'semibold': 600,
-  'bold': 700,
+  'bold': 600, // Prefer this over `bolder`.
+  'bolder': 700,
 }
 
 // Font weights for headings