style: 💄 align typography and border styles to HDS tokens (#3051)

* Feat: Convert font-family styles to HDS tokens

* Feat: Convert font-size styles to HDS tokens

* Feat: Convert font-weight styles to HDS tokens

* Feat: Convert border-radius styles to HDS tokens

---------

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

addons/rose/app/styles/rose/_typography.scss

@@ -14,7 +14,7 @@ html {
 body {
   // Used by Rose::Tabs and '/' in breadcrumbs
   // and link list panel
-  font-family: typography.$family-primary;
+  font-family: var(--token-typography-font-stack-text);
 
   // this is used across the app
   line-height: typography.line-height(m);

addons/rose/app/styles/rose/components/code-editor/_index.scss

@@ -15,7 +15,7 @@
   max-width: 100%;
   display: flex;
   flex: 1;
-  font-family: ui-monospace, Menlo, monospace;
+  font-family: var(--token-typography-font-stack-code);
 }
 
 .rose-autosize {

addons/rose/app/styles/rose/components/form/_checkbox.scss

@@ -28,9 +28,10 @@
 
   .rose-form-checkbox-label {
     // label styles
-    @include type.type(s, semibold);
+    @include type.type(s);
 
     color: currentcolor;
+    font-weight: var(--token-typography-font-weight-semibold);
 
     &,
     .rose-form-checkbox-label-description {
@@ -53,7 +54,7 @@
       pointer-events: none;
       content: ' ';
       border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-      border-radius: sizing.rems(xxxs);
+      border-radius: var(--token-form-checkbox-border-radius);
     }
 
     &::after {

addons/rose/app/styles/rose/components/form/_fieldset.scss

@@ -10,7 +10,9 @@
   margin-bottom: sizing.rems(m);
 
   .rose-form-fieldset-title {
-    @include type.type(s, semibold);
+    @include type.type(s);
+
+    font-weight: var(--token-typography-font-weight-semibold);
   }
 
   .rose-form-fieldset-body {

addons/rose/app/styles/rose/components/form/_select.scss

@@ -21,7 +21,7 @@
   margin-bottom: sizing.rems(xs);
   padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-  border-radius: sizing.rems(xxxs);
+  border-radius: var(--token-border-radius-x-small);
   box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs)
     rgba(var(--stark-components), var(--opacity-2));
   background: var(--ui-gray-subtler-5)

addons/rose/app/styles/rose/components/header/_brand.scss

@@ -20,8 +20,9 @@
   }
 
   .rose-header-brand-text {
-    @include type.type(m, normal);
+    @include type.type(m);
 
+    font-weight: var(--token-typography-font-weight-regular);
     margin: 0;
     margin-left: sizing.rems(s);
     white-space: nowrap;

addons/rose/app/styles/rose/components/list/_key-value.scss

@@ -43,7 +43,7 @@
     // First cell (key) is approximately 25%
     &:nth-child(1) {
       width: 25%;
-      font-weight: typography.font-weight(semibold);
+      font-weight: var(--token-typography-font-weight-semibold);
     }
 
     // Second cell (value) is approximately 75%

addons/rose/app/styles/rose/components/nav/_sidebar.scss

@@ -22,10 +22,11 @@
 
   // TODO revisit the title
   .rose-nav-title {
-    @include type.type(xs, semibold);
+    @include type.type(xs);
 
     display: none;
     color: #{sass.color(ui-gray, 400)};
+    font-weight: var(--token-typography-font-weight-semibold);
     text-transform: uppercase;
 
     $line-height: math.div(20, 12);

addons/rose/app/styles/rose/components/nav/_tabs.scss

@@ -17,8 +17,9 @@
     --background: transparent;
     --box-shadow-color: transparent;
 
-    @include type.type(s, semibold);
+    @include type.type(s);
 
+    font-weight: var(--token-typography-font-weight-semibold);
     display: inline-block;
     color: var(--color);
     background-color: var(--background);

addons/rose/app/styles/rose/utilities/_type.scss

@@ -9,10 +9,7 @@
  * Mixin for specifying a font-size/line-height size on an element, with
  * an option for specifying weight.
  */
-@mixin type($size, $weight: &) {
+@mixin type($size) {
   font-size: typography.font-size($size);
   line-height: typography.line-height($size);
-  @if $weight {
-    font-weight: typography.font-weight($weight);
-  }
 }

addons/rose/app/styles/rose/variables/_typography.scss

@@ -11,29 +11,6 @@
  * SASS variables defining typography.
  */
 
-$family-primary:
-  system-ui,
-  -apple-system,
-  blinkmacsystemfont,
-  'Segoe UI',
-  'Roboto',
-  'Oxygen',
-  'Ubuntu',
-  'Cantarell',
-  'Fira Sans',
-  'Droid Sans',
-  'Helvetica Neue',
-  sans-serif;
-$family-monospace:
-  'SFMono-Regular', consolas, 'Liberation Mono', menlo, courier, monospace;
-
-// Available font weights by name
-$font-weights: (
-  normal: 400,
-  semibold: 600,
-  bold: 700,
-);
-
 // unitless value to start, but think pixels or points
 $base-font-size: 16;
 
@@ -84,10 +61,3 @@ $line-heights: (
 @function line-height($name) {
   @return map.get($line-heights, $name);
 }
-
-/**
- * Returns a named font weight.
- */
-@function font-weight($name) {
-  @return map.get($font-weights, $name);
-}