@sproutsocial/racine 10.0.3-menuhotfix.0 → 11.0.0-mixin-beta.0

package/__flow__/Listbox/__snapshots__/index.test.js.snap

@@ -388,6 +388,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 .c2 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
   padding: 8px;
 }
 
@@ -685,6 +686,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 .c2 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
   padding: 8px;
 }
 

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -22,6 +22,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 .c4 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  margin: 8px;
   padding: 8px;
 }
 

package/__flow__/Menu/index.js

@@ -287,7 +287,7 @@ export const MenuGroup = ({
         </Text>
       </Box>
     )}
-    <Box {...props} p={300} role="group">
+    <Box {...props} m={300} p={300} role="group">
       {children}
     </Box>
   </>

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/commonjs/Menu/index.js

@@ -278,6 +278,7 @@ var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
   }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
+    m: 300,
     p: 300,
     role: "group"
   }), children));

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/lib/Menu/index.js

@@ -245,6 +245,7 @@ export var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && disabled
   }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    m: 300,
     p: 300,
     role: "group"
   }), children));

package/package.json

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