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);
-}

addons/rose/tests/dummy/app/styles/app.scss

@@ -16,7 +16,7 @@
   width: 9rem;
 
   // border: 1px solid var(--ui-gray-subtler-4);
-  border-radius: 4px;
+  border-radius: var(--token-border-radius-small);
   margin: 0 0.5rem 0.5rem 0 !important;
   box-shadow: 0 3px 6px rgba(var(--stark-components), var(--opacity-3));
   list-style-type: none;
@@ -36,7 +36,7 @@
 .swatch-chip {
   height: 5rem;
   border: 0.5rem solid var(--subtle);
-  border-radius: 4px;
+  border-radius: var(--token-border-radius-small);
 }
 
 .swatch-detail {

ui/admin/app/styles/app.scss

@@ -171,7 +171,7 @@
 
 .worker-create-section {
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
-  border-radius: sizing.rems(xxs);
+  border-radius: var(--token-border-radius-small);
   margin-bottom: sizing.rems(xl);
   padding: sizing.rems(l);
 
@@ -181,7 +181,7 @@
 
   > p span {
     background-color: var(--token-color-surface-strong);
-    border-radius: 5px;
+    border-radius: var(--token-border-radius-small);
     padding: sizing.rems(xxxs) sizing.rems(xxs);
   }
 
@@ -231,7 +231,7 @@
     grid-template-areas: 'label' 'text-input' 'helper-text';
 
     .hds-form-label {
-      font-size: sizing.rems(m);
+      font-size: var(--token-typography-body-300-font-size);
       grid-area: label;
       line-height: sizing.rems(m) + sizing.rems(xxs);
     }
@@ -241,7 +241,7 @@
       border: 0;
       color: var(--token-form-label-color);
       grid-area: text-input;
-      font-size: sizing.rems(m);
+      font-size: var(--token-typography-body-300-font-size);
       padding: 0;
     }
 
@@ -274,14 +274,14 @@
   --secret-editor-height: 210px;
 
   background: var(--secret-editor-body);
-  border-radius: sizing.rems(xxs);
+  border-radius: var(--token-border-radius-small);
   height: var(--secret-editor-height);
   margin-bottom: sizing.rems(l);
   width: 100%;
 
   .secret-editor-json {
     .CodeMirror {
-      border-radius: sizing.rems(xxs);
+      border-radius: var(--token-border-radius-small);
       height: var(--secret-editor-height);
       display: block;
     }
@@ -303,7 +303,8 @@
 
   .secret-editor-skeleton-gutter {
     background: var(--secret-editor-gutter);
-    border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs);
+    border-radius: var(--token-border-radius-small) 0 0
+      var(--token-border-radius-small);
     width: sizing.rems(xxl) + sizing.rems(xxs); // 52
   }
 
@@ -343,7 +344,7 @@
   }
 
   .secret-editor-skeleton-message {
-    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
+    font-size: var(--token-typography-body-200-font-size);
     left: 50%;
     position: absolute;
     top: 50%;
@@ -605,7 +606,7 @@
     position: absolute;
     bottom: 2.15rem;
     left: 0.5rem;
-    border-radius: 0.25rem;
+    border-radius: var(--token-border-radius-small);
     z-index: 1;
     background-color: var(--token-color-palette-neutral-200);
   }
@@ -688,7 +689,7 @@
         .ap-playback-button {
           background: var(--player-play-button);
           border: var(--player-play-button-border) 0.063rem solid;
-          border-radius: 0.313rem;
+          border-radius: var(--token-border-radius-small);
           margin: 0.75rem;
           padding: 0.625rem 1rem;
 

ui/desktop/app/styles/app.scss

@@ -160,7 +160,7 @@
 
 .branded-card {
   border: 1px solid var(--ui-border-subtler-1);
-  border-radius: sizing.rems(xxxs);
+  border-radius: var(--token-border-radius-x-small);
   margin: 0 auto;
   margin-top: sizing.rems(l) * 1.25;
   padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2)
@@ -173,8 +173,8 @@
     background-image: url('/brand-background.svg');
     background-position: right;
     background-repeat: no-repeat;
-    border-top-left-radius: sizing.rems(xxxs);
-    border-top-right-radius: sizing.rems(xxxs);
+    border-top-left-radius: var(--token-border-radius-x-small);
+    border-top-right-radius: var(--token-border-radius-x-small);
     content: ' ';
     height: sizing.rems(l) * 3.25;
     left: 0;
@@ -246,7 +246,7 @@
 
 .details-sidebar {
   background-color: var(--token-color-palette-neutral-50);
-  border-radius: 0.313rem;
+  border-radius: var(--token-border-radius-small);
   padding: 1.5rem 2.5rem;
 
   > :not(:last-child) {
@@ -324,7 +324,7 @@
 
 .credential-panel-body {
   border: 1px solid var(--token-color-border-primary);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   display: flex;
   margin-top: 0.75rem;