@primer/components 0.0.0-202192021539 → 0.0.0-2021921142939

package/lib/TextInputWithTokens.js

@@ -175,7 +175,15 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    sx: { ...(block ? {
+    ref: containerRef,
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      gap: '0.25rem',
+      '> *': {
+        flexShrink: 0
+      },
+      ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -188,21 +196,6 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    ref: containerRef,
-    display: "flex",
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      marginLeft: '-0.25rem',
-      marginBottom: '-0.25rem',
-      flexGrow: 1,
-      '> *': {
-        flexShrink: 0,
-        marginLeft: '0.25rem',
-        marginBottom: '0.25rem'
-      }
-    }
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
       order: 1,
@@ -234,7 +227,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null));
+  }, tokenRest))) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/Token/IssueLabelToken.js

@@ -129,10 +129,18 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
     size: size,
     "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
     isParentInteractive: (0, _TokenBase.isTokenInteractive)(props),
-    sx: hasMultipleActionTargets ? {
-      position: 'relative',
-      zIndex: '1'
-    } : {}
+    sx: {
+      '&:hover, &:focus': {
+        backgroundColor: 'hsla(0, 0%, calc(var(--lightness-switch) * 100%), 0.1)'
+      },
+      '&:active': {
+        backgroundColor: 'hsla(0, 0%, calc(var(--lightness-switch) * 100%), 0.2)'
+      },
+      ...(hasMultipleActionTargets ? {
+        position: 'relative',
+        zIndex: '1'
+      } : {})
+    }
   }) : null);
 });
 IssueLabelToken.defaultProps = {

package/lib/Token/Token.js

@@ -39,16 +39,7 @@ const DefaultTokenStyled = (0, _styledComponents.default)(_TokenBase.default).wi
 const LeadingVisualContainer = (0, _styledComponents.default)('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;", ""], props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return (0, _styledComponents.css)(["padding-right:", ";"], (0, _constants.get)('space.2'));
-
-    default:
-      return (0, _styledComponents.css)(["padding-right:", ";"], (0, _constants.get)('space.1'));
-  }
-});
+})(["flex-shrink:0;line-height:0;"]);
 const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
   const {
     as,
@@ -83,9 +74,7 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
     isTokenInteractive: (0, _TokenBase.isTokenInteractive)(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
-    size: size
-  }, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
+  }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib/Token/TokenBase.js

@@ -38,7 +38,7 @@ const variants = (0, _styledSystem.variant)({
   variants: {
     small: {
       fontSize: 0,
-      // gap: 1,
+      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -51,7 +51,7 @@ const variants = (0, _styledSystem.variant)({
     },
     medium: {
       fontSize: 0,
-      // gap: 1,
+      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -61,7 +61,7 @@ const variants = (0, _styledSystem.variant)({
     },
     large: {
       fontSize: 0,
-      // gap: 2,
+      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -71,7 +71,7 @@ const variants = (0, _styledSystem.variant)({
     },
     extralarge: {
       fontSize: 1,
-      // gap: 2,
+      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib/Token/_RemoveTokenButton.js

@@ -50,7 +50,7 @@ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _T
 const StyledTokenButton = _styledComponents.default.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";background-color:", ";}&:active{background-color:", ";background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.shade.muted'), (0, _constants.get)('colors.neutral.subtle'), (0, _constants.get)('colors.shade.default'), variants, _sx.default);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib/theme-preval.js

@@ -406,6 +406,11 @@ module.exports = {
             "muted": "hsla(210,18%,87%,1)",
             "subtle": "rgba(27,31,36,0.15)"
           },
+          "shade": {
+            "default": "rgba(208,215,222,0.48)",
+            "muted": "rgba(208,215,222,0.32)",
+            "subtle": "rgba(208,215,222,0.24)"
+          },
           "neutral": {
             "emphasisPlus": "#24292f",
             "emphasis": "#6e7781",
@@ -889,6 +894,11 @@ module.exports = {
             "muted": "hsla(210,18%,87%,1)",
             "subtle": "rgba(27,31,36,0.15)"
           },
+          "shade": {
+            "default": "rgba(208,215,222,0.48)",
+            "muted": "rgba(208,215,222,0.32)",
+            "subtle": "rgba(208,215,222,0.24)"
+          },
           "neutral": {
             "emphasisPlus": "#24292f",
             "emphasis": "#6e7781",
@@ -1372,6 +1382,11 @@ module.exports = {
             "muted": "#21262d",
             "subtle": "rgba(240,246,252,0.1)"
           },
+          "shade": {
+            "default": "rgba(177,186,196,0.2)",
+            "muted": "rgba(177,186,196,0.12)",
+            "subtle": "rgba(177,186,196,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#6e7681",
             "emphasis": "#6e7681",
@@ -1858,6 +1873,11 @@ module.exports = {
             "muted": "#373e47",
             "subtle": "rgba(205,217,229,0.1)"
           },
+          "shade": {
+            "default": "rgba(144,157,171,0.2)",
+            "muted": "rgba(144,157,171,0.12)",
+            "subtle": "rgba(144,157,171,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#636e7b",
             "emphasis": "#636e7b",
@@ -2344,6 +2364,11 @@ module.exports = {
             "muted": "#7a828e",
             "subtle": "#7a828e"
           },
+          "shade": {
+            "default": "rgba(217,222,227,0.2)",
+            "muted": "rgba(217,222,227,0.12)",
+            "subtle": "rgba(217,222,227,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#ffffff",
             "emphasis": "#9ea7b3",
@@ -2830,6 +2855,11 @@ module.exports = {
             "muted": "#21262d",
             "subtle": "rgba(240,246,252,0.1)"
           },
+          "shade": {
+            "default": "rgba(177,186,196,0.2)",
+            "muted": "rgba(177,186,196,0.12)",
+            "subtle": "rgba(177,186,196,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#6e7681",
             "emphasis": "#6e7681",

package/lib/utils/testing.d.ts

@@ -451,6 +451,11 @@ export declare function render(component: React.ReactElement, theme?: {
             muted: string;
             subtle: string;
         };
+        shade: {
+            default: string;
+            muted: string;
+            subtle: string;
+        };
         shadow: {
             small: string;
             medium: string;

package/lib-esm/TextInputWithTokens.js

@@ -153,7 +153,15 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    sx: { ...(block ? {
+    ref: containerRef,
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      gap: '0.25rem',
+      '> *': {
+        flexShrink: 0
+      },
+      ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -166,21 +174,6 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
-  }, /*#__PURE__*/React.createElement(Box, {
-    ref: containerRef,
-    display: "flex",
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      marginLeft: '-0.25rem',
-      marginBottom: '-0.25rem',
-      flexGrow: 1,
-      '> *': {
-        flexShrink: 0,
-        marginLeft: '0.25rem',
-        marginBottom: '0.25rem'
-      }
-    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       order: 1,
@@ -212,7 +205,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null));
+  }, tokenRest))) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/Token/IssueLabelToken.js

@@ -110,10 +110,18 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     size: size,
     "aria-hidden": hasMultipleActionTargets ? 'true' : 'false',
     isParentInteractive: isTokenInteractive(props),
-    sx: hasMultipleActionTargets ? {
-      position: 'relative',
-      zIndex: '1'
-    } : {}
+    sx: {
+      '&:hover, &:focus': {
+        backgroundColor: 'hsla(0, 0%, calc(var(--lightness-switch) * 100%), 0.1)'
+      },
+      '&:active': {
+        backgroundColor: 'hsla(0, 0%, calc(var(--lightness-switch) * 100%), 0.2)'
+      },
+      ...(hasMultipleActionTargets ? {
+        position: 'relative',
+        zIndex: '1'
+      } : {})
+    }
   }) : null);
 });
 IssueLabelToken.defaultProps = {

package/lib-esm/Token/Token.js

@@ -19,16 +19,7 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
 const LeadingVisualContainer = styled('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;", ""], props => {
-  switch (props.size) {
-    case 'large':
-    case 'extralarge':
-      return css(["padding-right:", ";"], get('space.2'));
-
-    default:
-      return css(["padding-right:", ";"], get('space.1'));
-  }
-});
+})(["flex-shrink:0;line-height:0;"]);
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -63,9 +54,7 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTokenInteractive: isTokenInteractive(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
-    size: size
-  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib-esm/Token/TokenBase.js

@@ -20,7 +20,7 @@ const variants = variant({
   variants: {
     small: {
       fontSize: 0,
-      // gap: 1,
+      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -33,7 +33,7 @@ const variants = variant({
     },
     medium: {
       fontSize: 0,
-      // gap: 1,
+      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -43,7 +43,7 @@ const variants = variant({
     },
     large: {
       fontSize: 0,
-      // gap: 2,
+      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -53,7 +53,7 @@ const variants = variant({
     },
     extralarge: {
       fontSize: 1,
-      // gap: 2,
+      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -34,7 +34,7 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";background-color:", ";}&:active{background-color:", ";background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.shade.muted'), get('colors.neutral.subtle'), get('colors.shade.default'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/theme-preval.js

@@ -406,6 +406,11 @@ module.exports = {
             "muted": "hsla(210,18%,87%,1)",
             "subtle": "rgba(27,31,36,0.15)"
           },
+          "shade": {
+            "default": "rgba(208,215,222,0.48)",
+            "muted": "rgba(208,215,222,0.32)",
+            "subtle": "rgba(208,215,222,0.24)"
+          },
           "neutral": {
             "emphasisPlus": "#24292f",
             "emphasis": "#6e7781",
@@ -889,6 +894,11 @@ module.exports = {
             "muted": "hsla(210,18%,87%,1)",
             "subtle": "rgba(27,31,36,0.15)"
           },
+          "shade": {
+            "default": "rgba(208,215,222,0.48)",
+            "muted": "rgba(208,215,222,0.32)",
+            "subtle": "rgba(208,215,222,0.24)"
+          },
           "neutral": {
             "emphasisPlus": "#24292f",
             "emphasis": "#6e7781",
@@ -1372,6 +1382,11 @@ module.exports = {
             "muted": "#21262d",
             "subtle": "rgba(240,246,252,0.1)"
           },
+          "shade": {
+            "default": "rgba(177,186,196,0.2)",
+            "muted": "rgba(177,186,196,0.12)",
+            "subtle": "rgba(177,186,196,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#6e7681",
             "emphasis": "#6e7681",
@@ -1858,6 +1873,11 @@ module.exports = {
             "muted": "#373e47",
             "subtle": "rgba(205,217,229,0.1)"
           },
+          "shade": {
+            "default": "rgba(144,157,171,0.2)",
+            "muted": "rgba(144,157,171,0.12)",
+            "subtle": "rgba(144,157,171,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#636e7b",
             "emphasis": "#636e7b",
@@ -2344,6 +2364,11 @@ module.exports = {
             "muted": "#7a828e",
             "subtle": "#7a828e"
           },
+          "shade": {
+            "default": "rgba(217,222,227,0.2)",
+            "muted": "rgba(217,222,227,0.12)",
+            "subtle": "rgba(217,222,227,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#ffffff",
             "emphasis": "#9ea7b3",
@@ -2830,6 +2855,11 @@ module.exports = {
             "muted": "#21262d",
             "subtle": "rgba(240,246,252,0.1)"
           },
+          "shade": {
+            "default": "rgba(177,186,196,0.2)",
+            "muted": "rgba(177,186,196,0.12)",
+            "subtle": "rgba(177,186,196,0.08)"
+          },
           "neutral": {
             "emphasisPlus": "#6e7681",
             "emphasis": "#6e7681",

package/lib-esm/utils/testing.d.ts

@@ -451,6 +451,11 @@ export declare function render(component: React.ReactElement, theme?: {
             muted: string;
             subtle: string;
         };
+        shade: {
+            default: string;
+            muted: string;
+            subtle: string;
+        };
         shadow: {
             small: string;
             medium: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202192021539",
+  "version": "0.0.0-2021921142939",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/primitives": "0.0.0-2021921131312",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",