[PLAY-865] Font weight tokens updates (#2609)

[PLAY-865](https://nitro.powerhrg.com/runway/backlog_items/PLAY-865) This PR updates any `font-weight` that doesn't use one of our tokens **Screenshots:** Screenshots to visualize your addition/change **How to test?** Steps to confirm the desired behavior: 1. Go to any of the kits that got updated -Date Picker -Form Pill -Rich Test Editor 2. Check to see if it still has the correct `font-weight` #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. Co-authored-by: Nida Ghuman <[email protected]>
powerhome · Jun 27, 2023 · 4318758 · 4318758
1 parent a4aa36f
commit 4318758
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 62 deletions.
diff --git a/playbook-website/app/javascript/site_styles/_site-style.scss b/playbook-website/app/javascript/site_styles/_site-style.scss
@@ -3,6 +3,7 @@
 @import "playbook-ui/dist/tokens/screen_sizes";
 @import "playbook-ui/dist/tokens/border_radius";
 @import "playbook-ui/dist/tokens/shadows";
+@import "playbook-ui/dist/tokens/typography";
 
 $selector: ".pb--page";
 $nav_breakpoint: breakpoint("lg");
@@ -242,7 +243,7 @@ body {
     padding: 0 10px;
     line-height: 34px;
     font-size: 14px;
-    font-weight: 400;
+    font-weight: $regular;
     display: inline-block;
     position: relative;
 
@@ -259,7 +260,7 @@ body {
     }
 
     &.active {
-      font-weight: 600;
+      font-weight: $bold;
 
       &::after {
         background: $primary;

diff --git a/playbook-website/app/javascript/site_styles/docs/_code_snippet.scss b/playbook-website/app/javascript/site_styles/docs/_code_snippet.scss
@@ -39,7 +39,7 @@
   /* Generic */
   .highlight .k {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword */
   .highlight .l {
@@ -74,7 +74,7 @@
   /* Comment.Multiline */
   .highlight .cp {
     color: #5bb3ff;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Comment.Preproc */
   .highlight .cpf {
@@ -89,7 +89,7 @@
   /* Comment.Single */
   .highlight .cs {
     color: #e50808;
-    font-weight: bold;
+    font-weight: $bolder;
     background-color: #520000
   }
   /* Comment.Special */
@@ -108,7 +108,7 @@
   /* Generic.Error */
   .highlight .gh {
     color: #ffffff;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Generic.Heading */
   .highlight .gi {
@@ -125,7 +125,7 @@
   /* Generic.Prompt */
   .highlight .gs {
     color: #d0d0d0;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Generic.Strong */
   .highlight .gu {
@@ -139,17 +139,17 @@
   /* Generic.Traceback */
   .highlight .kc {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword.Constant */
   .highlight .kd {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword.Declaration */
   .highlight .kn {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword.Namespace */
   .highlight .kp {
@@ -158,12 +158,12 @@
   /* Keyword.Pseudo */
   .highlight .kr {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword.Reserved */
   .highlight .kt {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Keyword.Type */
   .highlight .ld {
@@ -230,7 +230,7 @@
   /* Name.Property */
   .highlight .nt {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Name.Tag */
   .highlight .nv {
@@ -239,7 +239,7 @@
   /* Name.Variable */
   .highlight .ow {
     color: #6ab825;
-    font-weight: bold
+    font-weight: $bolder;
   }
   /* Operator.Word */
   .highlight .w {
@@ -367,7 +367,7 @@
   }
   .highlight .cp {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
     font-style: italic;
   }
   .highlight .err {
@@ -382,7 +382,7 @@
   .highlight .kd,
   .highlight .kv {
     color: #f6dd62;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .o,
   .highlight .ow {
@@ -402,71 +402,71 @@
     font-style: italic;
   }
   .highlight .gs {
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .gt {
     color: #dee5e7;
     background-color: #4e5d62;
   }
   .highlight .kc {
     color: #f696db;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .kn {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .kp {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .kr {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .gh {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .gu {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .kt {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .no {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nc {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nd {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nn {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .bp {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .ne {
     color: #b2fd6d;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nl {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nt {
     color: #ffb000;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .m,
   .highlight .mf,
@@ -477,15 +477,15 @@
   .highlight .mb,
   .highlight .mx {
     color: #f696db;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .ld {
     color: #f696db;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .ss {
     color: #f696db;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .s,
   .highlight .sb,
@@ -496,26 +496,26 @@
   .highlight .sr,
   .highlight .s1 {
     color: #fff0a6;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .se {
     color: #4df4ff;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .sc {
     color: #4df4ff;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .si {
     color: #4df4ff;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .nb {
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .ni {
     color: #999999;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .highlight .w {
     color: #BBBBBB;
@@ -534,7 +534,7 @@
   .highlight .vg,
   .highlight .vi {
     color: #a8e1fe;
-    font-weight: bold;
+    font-weight: $bolder;
   }
   .codeSnippetGuidelines {
     overflow-x: auto;
@@ -556,7 +556,7 @@
   height: 100vh;
   &-Editor {
     background: $bg_dark;
-    font-weight: 700;
+    font-weight: $bolder;
     padding-top: $space_lg;
     padding-left: $space_md;
     flex: 1;

diff --git a/playbook-website/app/javascript/site_styles/docs/_color_utilities.scss b/playbook-website/app/javascript/site_styles/docs/_color_utilities.scss
@@ -1,4 +1,5 @@
 @import "playbook-ui/dist/tokens/colors";
+@import "playbook-ui/dist/tokens/typography";
 
 // Only used for our documentation site.
 // Creates color classes for color utilities.
@@ -63,7 +64,7 @@ ul {
         width: 100%;
         text-align: center;
         font-size: 14px;
-        font-weight: 600;
+        font-weight: $bold;
       }
 
       p.var {

diff --git a/playbook-website/app/javascript/site_styles/docs/_kit_doc.scss b/playbook-website/app/javascript/site_styles/docs/_kit_doc.scss
@@ -1,6 +1,7 @@
 @import "playbook-ui/dist/tokens/colors";
 @import "playbook-ui/dist/tokens/spacing";
 
+
 .pb--doc {
   margin-bottom: 20px;
   border-radius: 6px;
@@ -32,7 +33,7 @@
     justify-content: center;
     align-items: center;
     font-size: 12px;
-    font-weight: 600;
+    font-weight: $bold;
   }
 
   .pb--copy-code {
@@ -100,7 +101,7 @@
         }
 
         &.active {
-          font-weight: 600;
+          font-weight: $bold;
 
           &::after {
             background-color: $primary_action;

diff --git a/playbook-website/app/javascript/site_styles/visual_guidelines/_line_height_guidelines.scss b/playbook-website/app/javascript/site_styles/visual_guidelines/_line_height_guidelines.scss
@@ -1,7 +1,7 @@
 @mixin line_height_tiken_visual {
   font-size: 28px;
   letter-spacing: -0.03em;
-  font-weight: 100;
+  font-weight: $lighter;
   color: #242B42;
   margin: 0;
   font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;

diff --git a/playbook-website/app/javascript/site_styles/visual_guidelines/_spacing_tokens.scss b/playbook-website/app/javascript/site_styles/visual_guidelines/_spacing_tokens.scss
@@ -26,7 +26,7 @@
       left: 0;
       text-align: center;
       font-size: 14px;
-      font-weight: 600;
+      font-weight: $bold;
 
     }
     &::after {