@codecademy/gamut-styles 17.6.2-alpha.0733bd.0 → 17.6.2-alpha.08d860.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.6.2-alpha.0733bd.0",
+  "version": "17.6.2-alpha.08d860.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "93d27575c9a3ce2974f62b967cd34dac8c7cda76"
+  "gitHead": "0c50df1e9a8f13cdfc09afdac274ad19a71b80ce"
 }

package/utils/mixins/legacy.scss

@@ -1,5 +1,5 @@
 // Legacy Helper mixins
-@use "../variables/index.scss";
+@use "../variables/index.scss" as *;
 
 // these variables should be located in ../variables
 // instead, they're co-located with their legacy functions so they can be removed more easily

package/utils/variables/_colors.scss

@@ -1,6 +1,6 @@
 // NOTE:  These are actively being deprecated. Use with caution.
 
-@use 'sass:color';
+@use "sass:color";
 // =======================================
 //      STANDARD COLORS
 // =======================================
@@ -238,14 +238,46 @@ $deprecated-gamut-royal-blue-800: color.mix(
 
 $deprecated-gamut-mint-500: #37c3be;
 
-$deprecated-gamut-mint-100: color.mix($color-white, $deprecated-gamut-mint-500, 80%);
-$deprecated-gamut-mint-200: color.mix($color-white, $deprecated-gamut-mint-500, 60%);
-$deprecated-gamut-mint-300: color.mix($color-white, $deprecated-gamut-mint-500, 40%);
-$deprecated-gamut-mint-400: color.mix($color-white, $deprecated-gamut-mint-500, 20%);
-$deprecated-gamut-mint-600: color.mix($color-black, $deprecated-gamut-mint-500, 20%);
-$deprecated-gamut-mint-700: color.mix($color-black, $deprecated-gamut-mint-500, 40%);
-$deprecated-gamut-mint-800: color.mix($color-black, $deprecated-gamut-mint-500, 60%);
-$deprecated-gamut-mint-900: color.mix($color-black, $deprecated-gamut-mint-500, 80%);
+$deprecated-gamut-mint-100: color.mix(
+  $color-white,
+  $deprecated-gamut-mint-500,
+  80%
+);
+$deprecated-gamut-mint-200: color.mix(
+  $color-white,
+  $deprecated-gamut-mint-500,
+  60%
+);
+$deprecated-gamut-mint-300: color.mix(
+  $color-white,
+  $deprecated-gamut-mint-500,
+  40%
+);
+$deprecated-gamut-mint-400: color.mix(
+  $color-white,
+  $deprecated-gamut-mint-500,
+  20%
+);
+$deprecated-gamut-mint-600: color.mix(
+  $color-black,
+  $deprecated-gamut-mint-500,
+  20%
+);
+$deprecated-gamut-mint-700: color.mix(
+  $color-black,
+  $deprecated-gamut-mint-500,
+  40%
+);
+$deprecated-gamut-mint-800: color.mix(
+  $color-black,
+  $deprecated-gamut-mint-500,
+  60%
+);
+$deprecated-gamut-mint-900: color.mix(
+  $color-black,
+  $deprecated-gamut-mint-500,
+  80%
+);
 
 $deprecated-gamut-purple: $deprecated-gamut-purple-500;
 $deprecated-gamut-royal-blue: $deprecated-gamut-royal-blue-500;

package/utils/variables/_grid.scss

@@ -1,6 +1,8 @@
 // Overrides for the Grid component
+@use "../functions/index.scss" as *;
 
 // NOTE: When updating, make sure you also update the gamut-styles/variables.js file
+
 $max-content-width: 1440px;
 
 $grid-cols: 12;