feat: icon-only menu items

package.json

@@ -86,6 +86,7 @@
     "onchange": "^7.0.2",
     "prettier": "^2.8.7",
     "react-test-renderer": "18.3.1",
+    "sass-migrator": "^2.3.1",
     "storybook": "^8.3.6",
     "style-loader": "^4.0.0",
     "svgo": "^1.3.2",

packages/gamut-styles/core.scss

@@ -1 +1,3 @@
-@import "core/index";
+@use "core/index";
+
+@forward "utils";

packages/gamut-styles/core/_reboot.scss

@@ -1,3 +1,5 @@
+@use "../utils";
+
 // https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_reboot.scss
 
 // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@@ -61,12 +63,12 @@ section {
 
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $color-body;
+  font-family: utils.$font-family-base;
+  font-weight: utils.$font-weight-base;
+  line-height: utils.$line-height-base;
+  color: utils.$color-body;
   text-align: left; // 3
-  background-color: $bg-body; // 2
+  background-color: utils.$bg-body; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
@@ -105,7 +107,7 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: $margin-bottom-headings;
+  margin-bottom: utils.$margin-bottom-headings;
 }
 // stylelint-enable selector-list-comma-newline-after
 
@@ -115,7 +117,7 @@ h6 {
 // bottom margin to use `rem` units instead of `em`.
 p {
   margin-top: 0;
-  margin-bottom: $margin-bottom-paragraph;
+  margin-bottom: utils.$margin-bottom-paragraph;
 }
 
 // Abbreviations
@@ -155,7 +157,7 @@ ul ol {
 }
 
 dt {
-  font-weight: $font-weight-dt;
+  font-weight: utils.$font-weight-dt;
 }
 
 dd {
@@ -174,12 +176,12 @@ dfn {
 // stylelint-disable font-weight-notation
 b,
 strong {
-  font-weight: $font-weight-bold; // Add the correct font weight in Chrome, Edge, and Safari
+  font-weight: utils.$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: utils.$font-size-small; // Add the correct font size in all browsers
 }
 
 //
@@ -207,13 +209,13 @@ sup {
 //
 
 a {
-  color: $color-link;
-  text-decoration: $decoration-link;
+  color: utils.$color-link;
+  text-decoration: utils.$decoration-link;
   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: utils.$hover-decoration-link;
   }
 }
 
@@ -295,9 +297,9 @@ table {
 }
 
 caption {
-  padding-top: $spacer;
-  padding-bottom: $spacer;
-  color: $spacer;
+  padding-top: utils.$spacer;
+  padding-bottom: utils.$spacer;
+  color: utils.$spacer;
   text-align: left;
   caption-side: bottom;
 }
@@ -315,7 +317,7 @@ th {
 label {
   // Allow labels to use `margin` for spacing.
   display: inline-block;
-  margin-bottom: $margin-bottom-label;
+  margin-bottom: utils.$margin-bottom-label;
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.

packages/gamut-styles/core/_typography.scss

@@ -1,3 +1,5 @@
+@use "../utils";
+
 // https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_type.scss
 
 h1,
@@ -6,31 +8,31 @@ h3,
 h4,
 h5,
 h6 {
-  margin-bottom: $margin-bottom-headings;
-  font-weight: $font-weight-headings;
-  line-height: $line-height-headings;
+  margin-bottom: utils.$margin-bottom-headings;
+  font-weight: utils.$font-weight-headings;
+  line-height: utils.$line-height-headings;
 }
 
 h1 {
-  font-size: $font-size-h1;
+  font-size: utils.$font-size-h1;
 }
 h2 {
-  font-size: $font-size-h2;
+  font-size: utils.$font-size-h2;
 }
 h3 {
-  font-size: $font-size-h3;
+  font-size: utils.$font-size-h3;
 }
 h4 {
-  font-size: $font-size-h4;
+  font-size: utils.$font-size-h4;
 }
 h5 {
-  font-size: $font-size-h5;
+  font-size: utils.$font-size-h5;
 }
 h6 {
-  font-size: $font-size-h6;
+  font-size: utils.$font-size-h6;
 }
 
 small {
-  font-size: $font-size-small;
-  font-weight: $font-weight-normal;
+  font-size: utils.$font-size-small;
+  font-weight: utils.$font-weight-normal;
 }

packages/gamut-styles/core/index.scss

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

packages/gamut-styles/utils.scss

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

packages/gamut-styles/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";

packages/gamut-styles/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";

packages/gamut-styles/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;
   }
 }

packages/gamut-styles/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;

packages/gamut-styles/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,75 +177,75 @@ $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%
 );
 
 $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%
 );
 
 $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;