@sproutsocial/racine 10.0.3-menuhotfix.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Change Log
 
+## 11.0.0
+
+### Major Changes
+
+- 3f25fab: Remove themed mixin in favor of functions only
+
+  - Changes in 10.0.0 made the mixin unnecessary
+  - The functions that were created for use with the mixin can now be used standalone for the same purpose.
+  - Migration requires removal of all `@include themed` mixin calls. The code inside can stay the same. For example:
+
+  ```scss
+  @include themed {
+    color: colors("text.body");
+  }
+  ```
+
+  becomes
+
+  ```scss
+  color: colors("text.body");
+  ```
+
+### Patch Changes
+
+- f28456b: Add overlay theme object
+- a3ed9eb: Patches Menu Group margin issue
+
 ## 10.0.0
 
 ### Major Changes

package/__flow__/themes/dark/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($dark, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/__flow__/themes/light/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($light, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($light, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/dist/themes/dark/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($dark, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/dist/themes/light/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($light, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($light, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.3-menuhotfix.0",
+  "version": "11.0.0",
   "license": "MIT",
   "files": [
     "__flow__",