@codecademy/gamut-styles

Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.14.0",
+  "version": "17.14.1-alpha.0ee3d6.0",
   "author": "Jake Hiller <[email protected]>",
   "dependencies": {
-    "@codecademy/variance": "0.26.1",
+    "@codecademy/variance": "0.26.2-alpha.0ee3d6.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",
     "polished": "^4.1.2"

Index: package/README.md
===================================================================
--- package/README.md
+++ package/README.md
@@ -1,23 +1,8 @@
 # Gamut Styles
 
 Base SCSS for Codecademy
 
-## Variables/
-
-This folder houses all shared SCSS style variables.
-It also contains a JavaScript file with color variables.
-
 ## Core/
 
 This folder contains a base stylesheet for the app.
 This should be imported **once** in your application.
-
-## Utils/
-
-This folder contains Sass functions (pure utilities with no stylesheet output values) and mixins (outputs CSS)
-to be used as needed both in Gamut and across the Codecademy app.
-
-The `utils.scss` and `core.scss` just import the index files from their respective folders, to make the syntax to import them from elsewhere easier, e.g.:
-
-`@use "~@codecademy/gamut-styles/utils";`
-`@use "~@codecademy/gamut-styles/core";`

Index: package/core/_reboot.scss
===================================================================
--- package/core/_reboot.scss
+++ package/core/_reboot.scss
@@ -60,14 +60,16 @@
 //    the `inherit` value on things like `<th>` elements.
 
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $color-body;
+  font-family: "Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-weight: normal;
+  line-height: 1.5;
+  color: #10162f;
   text-align: left; // 3
-  background-color: $bg-body; // 2
+  background-color: #ffffff; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
 // This prevents an unwanted focus outline from appearing around elements that
@@ -104,9 +106,9 @@
 h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: $margin-bottom-headings;
+  margin-bottom: 1rem;
 }
 // stylelint-enable selector-list-comma-newline-after
 
 // Reset margins on paragraphs
@@ -114,9 +116,9 @@
 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
 // bottom margin to use `rem` units instead of `em`.
 p {
   margin-top: 0;
-  margin-bottom: $margin-bottom-paragraph;
+  margin-bottom: 1rem;
 }
 
 // Abbreviations
 //
@@ -154,9 +156,9 @@
   margin-bottom: 0;
 }
 
 dt {
-  font-weight: $font-weight-dt;
+  font-weight: bold;
 }
 
 dd {
   margin-bottom: 0.5rem;
@@ -173,14 +175,14 @@
 
 // stylelint-disable font-weight-notation
 b,
 strong {
-  font-weight: $font-weight-bold; // Add the correct font weight in Chrome, Edge, and Safari
+  font-weight: bold; // Add the correct font weight in Chrome, Edge, and Safari
 }
 // stylelint-enable font-weight-notation
 
 small {
-  font-size: $font-size-small; // Add the correct font size in all browsers
+  font-size: 85%; // Add the correct font size in all browsers
 }
 
 //
 // Prevent `sub` and `sup` elements from affecting the line height in
@@ -206,15 +208,15 @@
 // Links
 //
 
 a {
-  color: $color-link;
-  text-decoration: $decoration-link;
+  color: #4b35ef;
+  text-decoration: none;
   background-color: transparent; // Remove the gray background on active links in IE 10.
   -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
 
   &:hover {
-    text-decoration: $hover-decoration-link;
+    text-decoration: underline;
   }
 }
 
 // And undo these styles for placeholder links/named anchors (without href)
@@ -294,11 +296,10 @@
   border-collapse: collapse; // Prevent double borders
 }
 
 caption {
-  padding-top: $spacer;
-  padding-bottom: $spacer;
-  color: $spacer;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   text-align: left;
   caption-side: bottom;
 }
 
@@ -314,9 +315,9 @@
 
 label {
   // Allow labels to use `margin` for spacing.
   display: inline-block;
-  margin-bottom: $margin-bottom-label;
+  margin-bottom: 0;
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
 //

Index: package/core/index.scss
===================================================================
--- package/core/index.scss
+++ package/core/index.scss
@@ -1,4 +1,2 @@
-@forward "../utils";
 @forward "reboot";
 @forward "fonts";
-@forward "typography";