@codecademy/gamut-styles 17.6.0 → 17.6.1-alpha.08b620.0

package/core/index.scss

@@ -1,4 +1,4 @@
-@import "../utils";
-@import "reboot";
-@import "fonts";
-@import "typography";
+@use "../utils";
+@use "reboot";
+@use "fonts";
+@use "typography";

package/core.scss

@@ -1 +1 @@
-@import "core/index";
+@use "core/index";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.6.0",
+  "version": "17.6.1-alpha.08b620.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
@@ -25,6 +25,7 @@
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.5",
     "react": "^17.0.2 || ^18.2.0",
+    "sass": "^1.85.0",
     "stylis": "^4.0.7"
   },
   "publishConfig": {
@@ -34,5 +35,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "74d89a5287fe289fcd615bde0418c0b53611f582"
+  "gitHead": "0ac300b04e37c7d40d5c4e066ed3640c615544ba"
 }

package/utils/index.scss

@@ -1,5 +1,5 @@
 // import order is unfortunately important here
 // variables needs to access functions, and mixins needs to access variables
-@import "functions/index";
-@import "variables/index";
-@import "mixins/index";
+@forward "functions/index";
+@forward "variables/index";
+@forward "mixins/index";

package/utils/mixins/_responsive.scss

@@ -1,4 +1,5 @@
 // Try to use these simple mixins if possible for your responsive needs
+@use '../variables/index.scss' as *;
 
 // Example usage:
 //

package/utils/mixins/index.scss

@@ -1,6 +1,6 @@
-@import "font-smoothing";
-@import "no-select";
-@import "responsive";
-@import "shadow";
-@import "sr-only";
-@import "legacy";
+@forward "font-smoothing";
+@forward "no-select";
+@forward "responsive";
+@forward "shadow";
+@forward "sr-only";
+@forward "legacy";

package/utils/mixins/legacy.scss

@@ -1,3 +1,5 @@
+@use "responsive";
+
 // Legacy Helper mixins
 
 // these variables should be located in ../variables
@@ -8,19 +10,19 @@ $bp-tablet: 736px;
 $bp-desktop: 960px;
 
 @mixin device-phone {
-  @include screen-size-between($bp-phone, $bp-tablet - 1) {
+  @include responsive.screen-size-between($bp-phone, $bp-tablet - 1) {
     @content;
   }
 }
 
 @mixin device-tablet {
-  @include screen-size-between($bp-tablet, $bp-desktop - 1) {
+  @include responsive.screen-size-between($bp-tablet, $bp-desktop - 1) {
     @content;
   }
 }
 
 @mixin device-desktop {
-  @include screen-size-gte($bp-desktop) {
+  @include responsive.screen-size-gte($bp-desktop) {
     @content;
   }
 }

package/utils/variables/_base.scss

@@ -1,5 +1,7 @@
+@use "colors";
+
 $base-unit: 1rem;
 $spacer: $base-unit;
-$box-shadow: 0 1px 4px 0 $color-shadow;
-$box-shadow-hovered: 0 4px 10px 0 $color-shadow;
+$box-shadow: 0 1px 4px 0 colors.$color-shadow;
+$box-shadow-hovered: 0 4px 10px 0 colors.$color-shadow;
 $height-header: 4rem;

package/utils/variables/_colors.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // NOTE: When updating, make sure you also update the gamut-styles/variables/index.js file
 
 // =======================================
@@ -41,18 +42,18 @@ $color-shadow: rgba($color-black, 0.15);
 
 $platform-mint-500: #37c3be;
 
-$platform-mint-600: mix($color-black, $platform-mint-500, 20%);
-$platform-mint-700: mix($color-black, $platform-mint-500, 40%);
+$platform-mint-600: color.mix($color-black, $platform-mint-500, 20%);
+$platform-mint-700: color.mix($color-black, $platform-mint-500, 40%);
 
 $platform-purple-500: #69639a;
 
-$platform-purple-200: mix($color-white, $platform-purple-500, 60%);
-$platform-purple-300: mix($color-white, $platform-purple-500, 40%);
-$platform-purple-400: mix($color-white, $platform-purple-500, 20%);
-$platform-purple-600: mix($color-black, $platform-purple-500, 20%);
-$platform-purple-700: mix($color-black, $platform-purple-500, 40%);
-$platform-purple-800: mix($color-black, $platform-purple-500, 60%);
-$platform-purple-900: mix($color-black, $platform-purple-500, 80%);
+$platform-purple-200: color.mix($color-white, $platform-purple-500, 60%);
+$platform-purple-300: color.mix($color-white, $platform-purple-500, 40%);
+$platform-purple-400: color.mix($color-white, $platform-purple-500, 20%);
+$platform-purple-600: color.mix($color-black, $platform-purple-500, 20%);
+$platform-purple-700: color.mix($color-black, $platform-purple-500, 40%);
+$platform-purple-800: color.mix($color-black, $platform-purple-500, 60%);
+$platform-purple-900: color.mix($color-black, $platform-purple-500, 80%);
 
 // =======================================
 //      EDITOR COLORS
@@ -176,42 +177,42 @@ $deprecated-color-black: #000000;
 
 $deprecated-gamut-purple-500: #69639a;
 
-$deprecated-gamut-purple-100: mix(
+$deprecated-gamut-purple-100: color.mix(
   $color-white,
   $deprecated-gamut-purple-500,
   80%
 );
-$deprecated-gamut-purple-200: mix(
+$deprecated-gamut-purple-200: color.mix(
   $color-white,
   $deprecated-gamut-purple-500,
   60%
 );
-$deprecated-gamut-purple-300: mix(
+$deprecated-gamut-purple-300: color.mix(
   $color-white,
   $deprecated-gamut-purple-500,
   40%
 );
-$deprecated-gamut-purple-400: mix(
+$deprecated-gamut-purple-400: color.mix(
   $color-white,
   $deprecated-gamut-purple-500,
   20%
 );
-$deprecated-gamut-purple-600: mix(
+$deprecated-gamut-purple-600: color.mix(
   $color-black,
   $deprecated-gamut-purple-500,
   20%
 );
-$deprecated-gamut-purple-700: mix(
+$deprecated-gamut-purple-700: color.mix(
   $color-black,
   $deprecated-gamut-purple-500,
   40%
 );
-$deprecated-gamut-purple-800: mix(
+$deprecated-gamut-purple-800: color.mix(
   $color-black,
   $deprecated-gamut-purple-500,
   60%
 );
-$deprecated-gamut-purple-900: mix(
+$deprecated-gamut-purple-900: color.mix(
   $color-black,
   $deprecated-gamut-purple-500,
   80%
@@ -219,17 +220,17 @@ $deprecated-gamut-purple-900: mix(
 
 $deprecated-gamut-royal-blue-500: #4b35ef;
 
-$deprecated-gamut-royal-blue-600: mix(
+$deprecated-gamut-royal-blue-600: color.mix(
   $color-black,
   $deprecated-gamut-royal-blue-500,
   20%
 );
-$deprecated-gamut-royal-blue-700: mix(
+$deprecated-gamut-royal-blue-700: color.mix(
   $color-black,
   $deprecated-gamut-royal-blue-500,
   40%
 );
-$deprecated-gamut-royal-blue-800: mix(
+$deprecated-gamut-royal-blue-800: color.mix(
   $color-black,
   $deprecated-gamut-royal-blue-500,
   60%
@@ -237,14 +238,46 @@ $deprecated-gamut-royal-blue-800: mix(
 
 $deprecated-gamut-mint-500: #37c3be;
 
-$deprecated-gamut-mint-100: mix($color-white, $deprecated-gamut-mint-500, 80%);
-$deprecated-gamut-mint-200: mix($color-white, $deprecated-gamut-mint-500, 60%);
-$deprecated-gamut-mint-300: mix($color-white, $deprecated-gamut-mint-500, 40%);
-$deprecated-gamut-mint-400: mix($color-white, $deprecated-gamut-mint-500, 20%);
-$deprecated-gamut-mint-600: mix($color-black, $deprecated-gamut-mint-500, 20%);
-$deprecated-gamut-mint-700: mix($color-black, $deprecated-gamut-mint-500, 40%);
-$deprecated-gamut-mint-800: mix($color-black, $deprecated-gamut-mint-500, 60%);
-$deprecated-gamut-mint-900: 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/_typography.scss

@@ -1,3 +1,6 @@
+@use "base";
+@use "colors";
+
 // Font Families:
 
 $font-family-accent: "Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
@@ -25,25 +28,25 @@ $font-weight-dt: $font-weight-bold;
 
 // Font colors
 
-$color-body: $color-navy;
-$color-headings: $color-gray-900;
-$bg-body: $color-white;
-$color-link: $deprecated-gamut-royal-blue-500;
-$hover-color-link: $deprecated-gamut-royal-blue-600;
+$color-body: colors.$color-navy;
+$color-headings: colors.$color-gray-900;
+$bg-body: colors.$color-white;
+$color-link: colors.$deprecated-gamut-royal-blue-500;
+$hover-color-link: colors.$deprecated-gamut-royal-blue-600;
 $decoration-link: none;
 $hover-decoration-link: underline;
 
 // Font margins
 
-$margin-bottom-paragraph: $spacer;
-$margin-bottom-headings: $spacer;
+$margin-bottom-paragraph: base.$spacer;
+$margin-bottom-headings: base.$spacer;
 $margin-bottom-label: 0;
 $line-height-base: 1.5;
 $line-height-headings: 1.1;
 
 // Font sizes
 
-$font-size-base: $base-unit;
+$font-size-base: base.$base-unit;
 $font-size-h1: px-rem(64);
 $font-size-h2: px-rem(44);
 $font-size-h3: px-rem(34);

package/utils/variables/index.scss

@@ -1,5 +1,5 @@
-@import "colors";
-@import "base";
-@import "grid";
-@import "typography";
-@import "responsive";
+@forward "colors";
+@forward "base";
+@forward "grid";
+@forward "typography";
+@forward "responsive";

package/utils.scss

@@ -1 +1 @@
-@import "utils/index";
+@forward "utils/index";