[PBNTR-187] [PBNTR-250] Power Centra in Playbook Part 2 (Change Varia…

…ble Settings) (#3134) **What does this PR do?** A clear and concise description with your runway ticket url. - Updates typography variables to align closer to Proxima - Fixes graphs using improper font weight - Fixes button sizes from rem to px's **Screenshots:** Screenshots to visualize your addition/change <img width="1437" alt="image" src="https://github.com/powerhome/playbook/assets/863031/249ee81c-54d9-4453-ade9-8361e53440ad"> **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change #### Checklist: - [ ] **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: nickamantia <nick.amantia@powerhrg.com> Co-authored-by: Carlos Lima <carloslimasd@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com>
powerhome · Jul 10, 2024 · 774b484 · 774b484
1 parent b3557a0
commit 774b484
Show file tree

Hide file tree

Showing 75 changed files with 103 additions and 294 deletions.
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Bold.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Bold.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-BoldItalic.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-BoldItalic.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Book.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Book.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-BookItalic.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-BookItalic.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Light.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/PowerCentra-Light.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Black.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Black.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-BlackIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-BlackIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Bold.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Bold.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-BoldIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-BoldIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Extrabld.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Extrabld.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-ExtrabldIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-ExtrabldIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Light.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Light.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-LightIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-LightIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Regular.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Regular.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-RegularIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-RegularIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Semibold.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Semibold.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-SemiboldIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-SemiboldIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Thin.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-Thin.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-ThinIt.woff2 b/examples/playbook-rails-webpack/app/assets/fonts/ProximaNova-ThinIt.woff2
diff --git a/examples/playbook-rails-webpack/app/assets/stylesheets/_fonts.scss b/examples/playbook-rails-webpack/app/assets/stylesheets/_fonts.scss
@@ -1,97 +1,34 @@
 @font-face {
-    src: font-url('ProximaNova-Regular.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 500;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Light.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 400;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Thin.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 100;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Semibold.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 600;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Bold.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 700;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Extrabld.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 800;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-Black.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: normal;
-      font-weight: 900;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-RegularIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 500;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-LightIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 400;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-ThinIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 100;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-SemiboldIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 600;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-BoldIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 700;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-ExtrabldIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 800;
-
-  }
-  @font-face {
-    src: font-url('ProximaNova-BlackIt.woff2') format('woff2');
-      font-family: 'Proxima Nova';
-      font-style: italic;
-      font-weight: 900;
-  }
+  src: font-url('PowerCentra-Light.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 300;
+}
+
+@font-face {
+  src: font-url('PowerCentra-Book.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  src: font-url('PowerCentra-BookItalic.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: italic;
+  font-weight: 400;
+}
+
+@font-face {
+  src: font-url('PowerCentra-Bold.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  src: font-url('PowerCentra-BoldItalic.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: italic;
+  font-weight: 700;
+}
diff --git a/examples/playbook-rails/app/assets/fonts/PowerCentra-Bold.woff2 b/examples/playbook-rails/app/assets/fonts/PowerCentra-Bold.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/PowerCentra-BoldItalic.woff2 b/examples/playbook-rails/app/assets/fonts/PowerCentra-BoldItalic.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/PowerCentra-Book.woff2 b/examples/playbook-rails/app/assets/fonts/PowerCentra-Book.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/PowerCentra-BookItalic.woff2 b/examples/playbook-rails/app/assets/fonts/PowerCentra-BookItalic.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/PowerCentra-Light.woff2 b/examples/playbook-rails/app/assets/fonts/PowerCentra-Light.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Black.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Black.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-BlackIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-BlackIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Bold.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Bold.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-BoldIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-BoldIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Extrabld.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Extrabld.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-ExtrabldIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-ExtrabldIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Light.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Light.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-LightIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-LightIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Regular.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Regular.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-RegularIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-RegularIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Semibold.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Semibold.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-SemiboldIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-SemiboldIt.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-Thin.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-Thin.woff2
diff --git a/examples/playbook-rails/app/assets/fonts/ProximaNova-ThinIt.woff2 b/examples/playbook-rails/app/assets/fonts/ProximaNova-ThinIt.woff2
diff --git a/examples/playbook-rails/app/assets/stylesheets/_fonts.scss b/examples/playbook-rails/app/assets/stylesheets/_fonts.scss
@@ -1,98 +1,34 @@
 @font-face {
-  src: font-url('ProximaNova-Regular.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 500;
-
+  src: font-url('PowerCentra-Light.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 300;
 }
+
 @font-face {
-  src: font-url('ProximaNova-Light.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 400;
-
+  src: font-url('PowerCentra-Book.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 400;
 }
+
 @font-face {
-  src: font-url('ProximaNova-Thin.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 100;
-
+  src: font-url('PowerCentra-BookItalic.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: italic;
+  font-weight: 400;
 }
+
 @font-face {
-  src: font-url('ProximaNova-Semibold.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 600;
-
+  src: font-url('PowerCentra-Bold.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: normal;
+  font-weight: 700;
 }
+
 @font-face {
-  src: font-url('ProximaNova-Bold.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 700;
-
-}
-@font-face {
-  src: font-url('ProximaNova-Extrabld.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 800;
-
-}
-@font-face {
-  src: font-url('ProximaNova-Black.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: normal;
-    font-weight: 900;
-
-}
-@font-face {
-  src: font-url('ProximaNova-RegularIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 500;
-
-}
-@font-face {
-  src: font-url('ProximaNova-LightIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 400;
-
-}
-@font-face {
-  src: font-url('ProximaNova-ThinIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 100;
-
-}
-@font-face {
-  src: font-url('ProximaNova-SemiboldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 600;
-
-}
-@font-face {
-  src: font-url('ProximaNova-BoldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 700;
-
-}
-@font-face {
-  src: font-url('ProximaNova-ExtrabldIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 800;
-
-}
-@font-face {
-  src: font-url('ProximaNova-BlackIt.woff2') format('woff2');
-    font-family: 'Proxima Nova';
-    font-style: italic;
-    font-weight: 900;
-
+  src: font-url('PowerCentra-BoldItalic.woff2') format('woff2');
+  font-family: 'Power Centra';
+  font-style: italic;
+  font-weight: 700;
 }
diff --git a/playbook-website/app/javascript/components/KitDocs/index.tsx b/playbook-website/app/javascript/components/KitDocs/index.tsx
@@ -54,7 +54,7 @@ const KitDocs = ({ source, exampleTitle, css }) => {
           style={{
             backgroundColor: "white",
             border: "none",
-            fontFamily: "Proxima Nova",
+            fontFamily: "Power Centra",
           }}
         >
           <div style={{ width: "100%" }}>

diff --git a/playbook-website/app/javascript/components/Website/src/components/Sandbox/index.tsx b/playbook-website/app/javascript/components/Website/src/components/Sandbox/index.tsx
@@ -31,7 +31,7 @@ export default function Sandbox({ backgroundColor = "white" }) {
       className={`sandbox-layout`}
       style={{
         border: "none",
-        fontFamily: "Proxima Nova",
+        fontFamily: "Power Centra",
       }}
     >
       <Flex orientation='column' alignSelf='stretch'>

diff --git a/playbook-website/app/javascript/site_styles/_kits_show.scss b/playbook-website/app/javascript/site_styles/_kits_show.scss
@@ -6,7 +6,7 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
   }
   .sample-ui-link-wrapper {
-    max-width: 275px;
+    max-width: 295px;
     cursor: pointer;
     .dropdown-icon {
       color: $primary;

diff --git a/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Bold.woff b/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Bold.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/PowerCentra-BoldItalic.woff b/playbook-website/app/javascript/site_styles/fonts/PowerCentra-BoldItalic.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Book.woff b/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Book.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/PowerCentra-BookItalic.woff b/playbook-website/app/javascript/site_styles/fonts/PowerCentra-BookItalic.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Light.woff b/playbook-website/app/javascript/site_styles/fonts/PowerCentra-Light.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Black-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Black-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Black.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Black.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Bold-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Bold-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Bold.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Bold.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Light-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Light-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Light.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Light.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Reg-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Reg-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Reg.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Reg.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Sbold-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Sbold-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Sbold.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Sbold.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Thin-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Thin-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Thin.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Thin.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Xbold-It.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Xbold-It.woff
diff --git a/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Xbold.woff b/playbook-website/app/javascript/site_styles/fonts/Proxima-Nova-Xbold.woff