[UI] Convert font-size styles to HDS tokens (HDS-5060)

dchyun · dchyun · commit 71e79ae27fe9 · 2025-10-17T09:09:07.000-04:00
diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
@@ -63,7 +63,7 @@ $console-close-height: 35px;
     color: hsl(0, 0%, 100%);
     flex: 1 1 auto;
     font-family: var(--token-typography-font-stack-code);
-    font-size: size_variables.$size-6;
+    font-size: var(--token-typography-body-300-font-size);
     font-weight: var(--tokens-typography-font-weight-bold);
     outline: none;
     padding: size_variables.$spacing-8;
diff --git a/ui/app/styles/components/empty-state-component.scss b/ui/app/styles/components/empty-state-component.scss
@@ -31,7 +31,7 @@
 
 .empty-state-title {
   color: var(--token-color-palette-neutral-400);
-  font-size: size_variables.$size-4;
+  font-size: var(--token-typography-display-400-font-size);
   font-weight: var(--token-typography-font-weight-semibold);
   line-height: 1.2;
   margin-bottom: size_variables.$spacing-8;
diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss
@@ -93,7 +93,7 @@
 
 .info-table-row-header {
   margin: 0;
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   color: var(--token-color-palette-neutral-400);
   font-weight: var(--token-typography-font-weight-semibold);
 
diff --git a/ui/app/styles/components/list-item-row.scss b/ui/app/styles/components/list-item-row.scss
@@ -23,7 +23,7 @@
   .center-inside-row {
     width: 50%;
     margin-left: auto;
-    font-size: size_variables.$size-8;
+    font-size: var(--token-typography-body-200-font-size);
     font-weight: var(--token-typography-font-weight-semibold);
     color: var(--token-color-palette-neutral-400);
   }
diff --git a/ui/app/styles/components/radio-card.scss b/ui/app/styles/components/radio-card.scss
@@ -89,7 +89,7 @@
 .radio-card-message-body {
   line-height: 1.2;
   color: var(--token-color-foreground-faint);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
 }
 
 .radio-card-radio-row {
diff --git a/ui/app/styles/components/raft-join.scss b/ui/app/styles/components/raft-join.scss
@@ -14,6 +14,6 @@
 }
 .raft-join-unseal {
   color: var(--token-color-palette-amber-200);
-  font-size: size_variables.$size-6;
+  font-size: var(--token-typography-body-300-font-size);
   display: inline-block;
 }
diff --git a/ui/app/styles/components/regex-validator.scss b/ui/app/styles/components/regex-validator.scss
@@ -17,7 +17,7 @@
 }
 .regex-group {
   font-family: var(--token-typography-font-stack-code);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   color: var(--token-color-palette-neutral-500);
 }
 .regex-group-position {
diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss
@@ -86,7 +86,7 @@
 
     .ember-power-select-option--no-matches-message {
       color: var(--token-color-palette-neutral-400);
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-semibold);
       text-transform: uppercase;
 
@@ -130,7 +130,7 @@
 
 .search-select-list-key {
   color: var(--token-color-foreground-faint);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
 }
 
 .search-select .search-icon {
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
@@ -11,7 +11,7 @@
   .popup-menu-content {
     .menu-label {
       color: hsl(0, 0%, 4%);
-      font-size: 14px;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-bold);
       text-transform: unset;
     }
diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
@@ -14,13 +14,13 @@
   &.l,
   &.m {
     .stat-label {
-      font-size: size_variables.$size-6;
+      font-size: var(--token-typography-body-300-font-size);
       font-weight: var(--token-typography-font-weight-semibold);
       margin-bottom: size_variables.$spacing-4;
       line-height: inherit;
     }
     .stat-text {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-500);
       line-height: inherit;
@@ -39,7 +39,7 @@
       line-height: inherit;
     }
     .stat-text {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-500);
       line-height: inherit;
@@ -58,7 +58,7 @@
       line-height: inherit;
     }
     .stat-text {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-500);
       line-height: inherit;
@@ -72,12 +72,12 @@
 
   &.m-no-subText {
     .stat-label {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-bold);
       line-height: inherit;
     }
     .stat-text {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-500);
       line-height: inherit;
@@ -91,19 +91,19 @@
 
   &.s-no-subText {
     .stat-label {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-400);
       line-height: inherit;
     }
     .stat-text {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
-      font-size: size_variables.$size-8;
+      font-size: var(--token-typography-body-200-font-size);
       font-weight: var(--token-typography-font-weight-regular);
       color: var(--token-color-palette-neutral-600);
       line-height: inherit;
diff --git a/ui/app/styles/components/tool-tip.scss b/ui/app/styles/components/tool-tip.scss
@@ -41,7 +41,7 @@
     animation: drop-fade-below 0.15s reverse;
   }
   &.smaller-font {
-    font-size: size_variables.$size-8;
+    font-size: var(--token-typography-body-200-font-size);
   }
 }
 
diff --git a/ui/app/styles/components/transit-card.scss b/ui/app/styles/components/transit-card.scss
@@ -29,7 +29,7 @@
 
   .transit-action-description {
     font-family: var(--token-typography-font-stack-text);
-    font-size: size_variables.$size-8;
+    font-size: var(--token-typography-body-200-font-size);
     color: var(--token-color-palette-neutral-400);
   }
 
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
@@ -16,7 +16,7 @@
   cursor: pointer;
   color: var(--token-color-palette-neutral-600);
   display: inline-block;
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   font-weight: var(--token-typography-font-weight-semibold);
   min-height: 2.25rem;
   min-width: 6rem;
diff --git a/ui/app/styles/core/control.scss b/ui/app/styles/core/control.scss
@@ -15,7 +15,7 @@
 }
 
 .control {
-  font-size: 1rem;
+  font-size: var(--token-typography-body-300-font-size);
   max-width: 100%;
   position: relative;
   text-align: left;
diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
@@ -83,7 +83,7 @@ object {
 
 html {
   background-color: hsl(0, 0%, 100%);
-  font-size: size_variables.$base-font-size; // 16px
+  font-size: var(--token-typography-body-300-font-size); // 16px
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -123,7 +123,7 @@ pre code {
 }
 
 body {
-  font-size: size_variables.$size-6;
+  font-size: var(--token-typography-body-300-font-size);
   line-height: 1.5;
   overflow-x: hidden;
   overflow-y: scroll;
diff --git a/ui/app/styles/core/field.scss b/ui/app/styles/core/field.scss
@@ -136,7 +136,7 @@ fieldset.form-fieldset {
     }
 
     &.is-large {
-      font-size: 1.5rem;
+      font-size: var(--token-typography-display-400-font-size);
       padding-top: 0.375em;
     }
   }
diff --git a/ui/app/styles/core/inputs.scss b/ui/app/styles/core/inputs.scss
@@ -17,7 +17,7 @@
   box-shadow: 0 4px 1px rgba(hsl(0, 0%, 4%), 0.06) inset;
   color: var(--token-color-palette-neutral-500);
   display: inline-flex;
-  font-size: size_variables.$size-6;
+  font-size: var(--token-typography-body-300-font-size);
   height: size_variables.$size-2;
   line-height: 1.5;
   max-width: 100%;
@@ -42,7 +42,7 @@
   }
 
   @include mixins.until(size_variables.$desktop) {
-    font-size: size_variables.$size-6;
+    font-size: var(--token-typography-body-300-font-size);
   }
 
   &::placeholder {
@@ -84,6 +84,6 @@
 // custom input
 .input-hint {
   padding: 0 size_variables.$spacing-10;
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   color: var(--token-color-foreground-faint);
 }
diff --git a/ui/app/styles/core/label.scss b/ui/app/styles/core/label.scss
@@ -9,7 +9,7 @@
 
 .is-label {
   color: var(--token-color-palette-neutral-600);
-  font-size: 14px;
+  font-size: var(--token-typography-body-200-font-size);
   font-weight: var(--token-typography-font-weight-bold);
   display: flex;
   align-items: center;
diff --git a/ui/app/styles/core/lists.scss b/ui/app/styles/core/lists.scss
@@ -21,7 +21,7 @@
 .list-header {
   margin: size_variables.$spacing-10 size_variables.$spacing-10 0;
   color: var(--token-color-palette-neutral-400);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   font-weight: var(--token-typography-font-weight-semibold);
   text-transform: uppercase;
 }
diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss
@@ -6,7 +6,7 @@
  */
 
 .menu {
-  font-size: size_variables.$size-6;
+  font-size: var(--token-typography-body-300-font-size);
 }
 
 .menu a {
diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss
@@ -29,7 +29,7 @@
 
   .message-title {
     color: var(--token-color-palette-blue-200);
-    font-size: 16px;
+    font-size: var(--token-typography-body-300-font-size);
     font-weight: var(--token-typography-font-weight-bold);
     line-height: 1.25;
   }
diff --git a/ui/app/styles/core/select.scss b/ui/app/styles/core/select.scss
@@ -29,7 +29,7 @@ select {
   text-rendering: auto !important;
 
   @include mixins.until(size_variables.$desktop) {
-    font-size: 1rem;
+    font-size: var(--token-typography-body-300-font-size);
   }
 
   &::placeholder {
diff --git a/ui/app/styles/core/title.scss b/ui/app/styles/core/title.scss
@@ -35,23 +35,23 @@
   }
 
   &.is-4 {
-    font-size: size_variables.$size-4;
+    font-size: var(--token-typography-display-400-font-size);
   }
 
   &.is-5 {
     font-size: size_variables.$size-5;
   }
 
   &.is-6 {
-    font-size: size_variables.$size-6;
+    font-size: var(--token-typography-display-200-font-size);
   }
 
   &.is-7 {
     font-size: size_variables.$size-7;
   }
 
   &.is-8 {
-    font-size: size_variables.$size-8;
+    font-size: var(--token-typography-body-200-font-size);
   }
 }
 
diff --git a/ui/app/styles/docs.scss b/ui/app/styles/docs.scss
@@ -19,7 +19,7 @@
 }
 
 #docfy-content {
-  font-size: 16px;
+  font-size: var(--token-typography-body-300-font-size);
   font-family: var(--token-typography-font-stack-text);
   margin-left: 1.5rem;
   margin-right: 2rem;
diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
@@ -70,13 +70,13 @@
 // large grouped css blocks
 .is-hint {
   color: var(--token-color-palette-neutral-400);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   padding: size_variables.$spacing-12 0;
 }
 
 .is-optional {
   color: var(--token-color-palette-neutral-400);
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   text-transform: lowercase;
 }
 
diff --git a/ui/app/styles/helper-classes/typography.scss b/ui/app/styles/helper-classes/typography.scss
@@ -10,23 +10,23 @@
 
 // font size helpers
 .is-size-4 {
-  font-size: size_variables.$size-4 !important;
+  font-size: var(--token-typography-display-400-font-size) !important;
 }
 
 .is-size-5 {
   font-size: size_variables.$size-5 !important;
 }
 
 .is-size-6 {
-  font-size: size_variables.$size-6 !important;
+  font-size: var(--token-typography-body-300-font-size) !important;
 }
 
 .is-size-7 {
   font-size: size_variables.$size-7 !important;
 }
 
 .is-size-8 {
-  font-size: size_variables.$size-8 !important;
+  font-size: var(--token-typography-body-200-font-size) !important;
 }
 
 .is-size-9 {
@@ -95,7 +95,7 @@
 
 // Text color or styling
 .is-help {
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
   margin-top: size_variables.$size-11;
 }
 
@@ -108,7 +108,7 @@
 .sub-text {
   color: var(--token-color-foreground-faint);
   margin-bottom: size_variables.$size-11;
-  font-size: size_variables.$size-8;
+  font-size: var(--token-typography-body-200-font-size);
 
   strong {
     color: inherit;
diff --git a/ui/app/styles/utils/_size_variables.scss b/ui/app/styles/utils/_size_variables.scss

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`.center-inside-row {`
`24`	`24`	`width: 50%;`
`25`	`25`	`margin-left: auto;`
`26`		`- font-size: size_variables.$size-8;`
	`26`	`+ font-size: var(--token-typography-body-200-font-size);`
`27`	`27`	`font-weight: var(--token-typography-font-weight-semibold);`
`28`	`28`	`color: var(--token-color-palette-neutral-400);`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@`
`89`	`89`	`.radio-card-message-body {`
`90`	`90`	`line-height: 1.2;`
`91`	`91`	`color: var(--token-color-foreground-faint);`
`92`		`- font-size: size_variables.$size-8;`
	`92`	`+ font-size: var(--token-typography-body-200-font-size);`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`.radio-card-radio-row {`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,6 @@`
`14`	`14`	`}`
`15`	`15`	`.raft-join-unseal {`
`16`	`16`	`color: var(--token-color-palette-amber-200);`
`17`		`- font-size: size_variables.$size-6;`
	`17`	`+ font-size: var(--token-typography-body-300-font-size);`
`18`	`18`	`display: inline-block;`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`}`
`18`	`18`	`.regex-group {`
`19`	`19`	`font-family: var(--token-typography-font-stack-code);`
`20`		`- font-size: size_variables.$size-8;`
	`20`	`+ font-size: var(--token-typography-body-200-font-size);`
`21`	`21`	`color: var(--token-color-palette-neutral-500);`
`22`	`22`	`}`
`23`	`23`	`.regex-group-position {`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`.popup-menu-content {`
`12`	`12`	`.menu-label {`
`13`	`13`	`color: hsl(0, 0%, 4%);`
`14`		`- font-size: 14px;`
	`14`	`+ font-size: var(--token-typography-body-200-font-size);`
`15`	`15`	`font-weight: var(--token-typography-font-weight-bold);`
`16`	`16`	`text-transform: unset;`
`17`	`17`	`}`