baseui 0.0.0-next-e19fc5fd2 → 0.0.0-next-ff0c2b52d

package/tag/styled-components.js

@@ -9,6 +9,9 @@ var _tint = _interopRequireDefault(require("polished/lib/color/tint.js"));
 var _shade = _interopRequireDefault(require("polished/lib/color/shade.js"));
 var _styles = require("../styles");
 var _constants = require("./constants");
+var DeprecatedStyles = _interopRequireWildcard(require("./deprecated-styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -58,257 +61,174 @@ const COLOR_STATE = {
 // Probably best to bake this into the theme once we hit our next major.
 // @ts-ignore
 const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
-const neutralColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagNeutralFontDisabled,
-    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
-    borderColor: null
-  }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagNeutralSolidFont,
-    backgroundColor: theme.colors.tagNeutralSolidBackground,
-    borderColor: null
-  }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagNeutralOutlinedFont,
-    backgroundColor: theme.colors.tagNeutralOutlinedBackground,
-    borderColor: null
-  })
-};
-const primaryColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagPrimaryFontDisabled,
-    backgroundColor: pick(theme, theme.colors.gray50, theme.colors.gray100Dark),
-    borderColor: null
-  }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagPrimarySolidFont,
-    backgroundColor: theme.colors.tagPrimarySolidBackground,
-    borderColor: null
-  }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagPrimaryOutlinedFont,
-    backgroundColor: theme.colors.tagPrimaryOutlinedBackground,
-    borderColor: null
-  })
-};
 const blueColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagAccentFontDisabled,
-    backgroundColor: pick(theme, theme.colors.blue50, theme.colors.blue100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagBlueContentStateDisabled,
+    backgroundColor: theme.colors.tagBlueBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagAccentSolidFont,
-    backgroundColor: theme.colors.tagAccentSolidBackground,
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagBlueContentPrimary,
+    backgroundColor: theme.colors.tagBlueBackgroundPrimary,
+    borderColor: theme.colors.tagBlueBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagAccentOutlinedFont,
-    backgroundColor: theme.colors.tagAccentOutlinedBackground,
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagBlueContentSecondary,
+    backgroundColor: theme.colors.tagBlueBackgroundSecondary,
+    borderColor: theme.colors.tagBlueBorderSecondaryUnselected
   })
 };
 const greenColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagPositiveFontDisabled,
-    backgroundColor: pick(theme, theme.colors.green50, theme.colors.green100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagGreenContentStateDisabled,
+    backgroundColor: theme.colors.tagGreenBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagPositiveSolidFont,
-    backgroundColor: theme.colors.tagPositiveSolidBackground,
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagGreenContentPrimary,
+    backgroundColor: theme.colors.tagGreenBackgroundPrimary,
+    borderColor: theme.colors.tagGreenBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagPositiveOutlinedFont,
-    backgroundColor: theme.colors.tagPositiveOutlinedBackground,
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagGreenContentSecondary,
+    backgroundColor: theme.colors.tagGreenBackgroundSecondary,
+    borderColor: theme.colors.tagGreenBorderSecondaryUnselected
   })
 };
 const yellowColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagWarningFontDisabled,
-    backgroundColor: pick(theme, theme.colors.yellow50, theme.colors.yellow100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagYellowContentStateDisabled,
+    backgroundColor: theme.colors.tagYellowBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagWarningSolidFont,
-    backgroundColor: theme.colors.tagWarningSolidBackground,
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagYellowContentPrimary,
+    backgroundColor: theme.colors.tagYellowBackgroundPrimary,
+    borderColor: theme.colors.tagYellowBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagWarningOutlinedFont,
-    backgroundColor: theme.colors.tagWarningOutlinedBackground,
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagYellowContentSecondary,
+    backgroundColor: theme.colors.tagYellowBackgroundSecondary,
+    borderColor: theme.colors.tagYellowBorderSecondaryUnselected
   })
 };
 const redColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: theme.colors.tagNegativeFontDisabled,
-    backgroundColor: pick(theme, theme.colors.red50, theme.colors.red100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagRedContentStateDisabled,
+    backgroundColor: theme.colors.tagRedBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: theme.colors.tagNegativeSolidFont,
-    backgroundColor: theme.colors.tagNegativeSolidBackground,
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagRedContentPrimary,
+    backgroundColor: theme.colors.tagRedBackgroundPrimary,
+    borderColor: theme.colors.tagRedBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: theme.colors.tagNegativeOutlinedFont,
-    backgroundColor: theme.colors.tagNegativeOutlinedBackground,
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagRedContentSecondary,
+    backgroundColor: theme.colors.tagRedBackgroundSecondary,
+    borderColor: theme.colors.tagRedBorderSecondaryUnselected
   })
 };
 const limeColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.lime300, theme.colors.lime400Dark),
-    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagLimeContentStateDisabled,
+    backgroundColor: theme.colors.tagLimeBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: pick(theme, theme.colors.white, theme.colors.lime900Dark),
-    backgroundColor: pick(theme, theme.colors.lime600, theme.colors.lime400Dark),
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagLimeContentPrimary,
+    backgroundColor: theme.colors.tagLimeBackgroundPrimary,
+    borderColor: theme.colors.tagLimeBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: pick(theme, theme.colors.lime700, theme.colors.lime700Dark),
-    backgroundColor: pick(theme, theme.colors.lime50, theme.colors.lime100Dark),
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagLimeContentSecondary,
+    backgroundColor: theme.colors.tagLimeBackgroundSecondary,
+    borderColor: theme.colors.tagLimeBorderSecondaryUnselected
   })
 };
 const tealColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.teal300, theme.colors.teal400Dark),
-    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagTealContentStateDisabled,
+    backgroundColor: theme.colors.tagTealBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: pick(theme, theme.colors.white, theme.colors.teal900Dark),
-    backgroundColor: pick(theme, theme.colors.teal600, theme.colors.teal400Dark),
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagTealContentPrimary,
+    backgroundColor: theme.colors.tagTealBackgroundPrimary,
+    borderColor: theme.colors.tagTealBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: pick(theme, theme.colors.teal700, theme.colors.teal700Dark),
-    backgroundColor: pick(theme, theme.colors.teal50, theme.colors.teal100Dark),
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagTealContentSecondary,
+    backgroundColor: theme.colors.tagTealBackgroundSecondary,
+    borderColor: theme.colors.tagTealBorderSecondaryUnselected
   })
 };
 const orangeColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.orange300, theme.colors.orange400Dark),
-    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagOrangeContentStateDisabled,
+    backgroundColor: theme.colors.tagOrangeBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: pick(theme, theme.colors.white, theme.colors.orange900Dark),
-    backgroundColor: pick(theme, theme.colors.orange600, theme.colors.orange400Dark),
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagOrangeContentPrimary,
+    backgroundColor: theme.colors.tagOrangeBackgroundPrimary,
+    borderColor: theme.colors.tagOrangeBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: pick(theme, theme.colors.orange700, theme.colors.orange700Dark),
-    backgroundColor: pick(theme, theme.colors.orange50, theme.colors.orange100Dark),
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagOrangeContentSecondary,
+    backgroundColor: theme.colors.tagOrangeBackgroundSecondary,
+    borderColor: theme.colors.tagOrangeBorderSecondaryUnselected
   })
 };
 const purpleColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.purple300, theme.colors.purple400Dark),
-    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagPurpleContentStateDisabled,
+    backgroundColor: theme.colors.tagPurpleBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: pick(theme, theme.colors.white, theme.colors.purple900Dark),
-    backgroundColor: pick(theme, theme.colors.purple600, theme.colors.purple400Dark),
-    borderColor: null
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagPurpleContentPrimary,
+    backgroundColor: theme.colors.tagPurpleBackgroundPrimary,
+    borderColor: theme.colors.tagPurpleBorderPrimaryUnselected
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: pick(theme, theme.colors.purple700, theme.colors.purple700Dark),
-    backgroundColor: pick(theme, theme.colors.purple50, theme.colors.purple100Dark),
-    borderColor: null
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagPurpleContentSecondary,
+    backgroundColor: theme.colors.tagPurpleBackgroundSecondary,
+    borderColor: theme.colors.tagPurpleBorderSecondaryUnselected
   })
 };
-const brownColorStates = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.disabled]: (theme, color) => ({
-    color: pick(theme, theme.colors.amber200, theme.colors.amber400Dark),
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.amber200, theme.colors.amber400Dark)
+const magentaColorStates = {
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagMagentaContentStateDisabled,
+    backgroundColor: theme.colors.tagMagentaBackgroundStateDisabled,
+    borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.primary]: (theme, color) => ({
-    color: pick(theme, theme.colors.white, theme.colors.gray900Dark),
-    backgroundColor: pick(theme, theme.colors.amber600, theme.colors.amber400Dark),
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagMagentaContentPrimary,
+    backgroundColor: theme.colors.tagMagentaBackgroundPrimary,
+    borderColor: theme.colors.tagMagentaBorderPrimaryUnselected
+  }),
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagMagentaContentSecondary,
+    backgroundColor: theme.colors.tagMagentaBackgroundSecondary,
+    borderColor: theme.colors.tagMagentaBorderSecondaryUnselected
+  })
+};
+const grayColorStates = {
+  [COLOR_STATE.disabled]: theme => ({
+    color: theme.colors.tagGrayContentStateDisabled,
+    backgroundColor: theme.colors.tagGrayBackgroundStateDisabled,
     borderColor: null
   }),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // @ts-ignore
-  [COLOR_STATE.secondary]: (theme, color) => ({
-    color: pick(theme, theme.colors.amber600, theme.colors.amber600Dark),
-    backgroundColor: null,
-    borderColor: pick(theme, theme.colors.amber600, theme.colors.amber600Dark)
+  [COLOR_STATE.primary]: theme => ({
+    color: theme.colors.tagGrayContentPrimary,
+    backgroundColor: theme.colors.tagGrayBackgroundPrimary,
+    borderColor: theme.colors.tagGrayBorderPrimaryUnselected
+  }),
+  [COLOR_STATE.secondary]: theme => ({
+    color: theme.colors.tagGrayContentSecondary,
+    backgroundColor: theme.colors.tagGrayBackgroundSecondary,
+    borderColor: theme.colors.tagGrayBorderSecondaryUnselected
   })
 };
 const customColorStates = {
@@ -332,22 +252,24 @@ const customColorStates = {
   })
 };
 const colorMap = {
-  [_constants.KIND.neutral]: neutralColorStates,
-  [_constants.KIND.primary]: primaryColorStates,
-  [_constants.KIND.accent]: blueColorStates,
-  [_constants.KIND.positive]: greenColorStates,
-  [_constants.KIND.warning]: yellowColorStates,
-  [_constants.KIND.negative]: redColorStates,
-  [_constants.KIND.black]: primaryColorStates,
+  [_constants.KIND.neutral]: DeprecatedStyles.deprecatedNeutralColorStates,
+  [_constants.KIND.primary]: DeprecatedStyles.deprecatedPrimaryColorStates,
+  [_constants.KIND.accent]: DeprecatedStyles.deprecatedBlueColorStates,
+  [_constants.KIND.positive]: DeprecatedStyles.deprecatedGreenColorStates,
+  [_constants.KIND.warning]: DeprecatedStyles.deprecatedYellowColorStates,
+  [_constants.KIND.negative]: DeprecatedStyles.deprecatedRedColorStates,
+  [_constants.KIND.black]: DeprecatedStyles.deprecatedPrimaryColorStates,
   [_constants.KIND.blue]: blueColorStates,
   [_constants.KIND.green]: greenColorStates,
   [_constants.KIND.red]: redColorStates,
   [_constants.KIND.yellow]: yellowColorStates,
   [_constants.KIND.orange]: orangeColorStates,
   [_constants.KIND.purple]: purpleColorStates,
-  [_constants.KIND.brown]: brownColorStates,
+  [_constants.KIND.brown]: DeprecatedStyles.deprecatedBrownColorStates,
   [_constants.KIND.lime]: limeColorStates,
   [_constants.KIND.teal]: tealColorStates,
+  [_constants.KIND.magenta]: magentaColorStates,
+  [_constants.KIND.gray]: grayColorStates,
   [_constants.KIND.custom]: customColorStates
 };
 
@@ -373,9 +295,10 @@ const Action = exports.Action = (0, _styles.styled)('span', props => {
     cursor: $disabled ? 'not-allowed' : 'pointer',
     display: 'flex',
     [marginDir]: {
-      [_constants.SIZE.small]: '8px',
-      [_constants.SIZE.medium]: '12px',
-      [_constants.SIZE.large]: '16px'
+      [_constants.SIZE.xSmall]: $theme.sizing.scale100,
+      [_constants.SIZE.small]: $theme.sizing.scale300,
+      [_constants.SIZE.medium]: $theme.sizing.scale300,
+      [_constants.SIZE.large]: $theme.sizing.scale500
     }[$size],
     outline: 'none',
     transitionProperty: 'all',
@@ -389,12 +312,12 @@ const StartEnhancerContainer = exports.StartEnhancerContainer = (0, _styles.styl
   $theme,
   $size = _constants.SIZE.small
 }) => {
-  let paddingMagnitude = $theme.sizing.scale300;
-  if ($size === _constants.SIZE.medium) {
-    paddingMagnitude = $theme.sizing.scale400;
-  } else if ($size === _constants.SIZE.large) {
-    paddingMagnitude = $theme.sizing.scale600;
-  }
+  const paddingMagnitude = {
+    [_constants.SIZE.xSmall]: $theme.sizing.scale100,
+    [_constants.SIZE.small]: $theme.sizing.scale300,
+    [_constants.SIZE.medium]: $theme.sizing.scale300,
+    [_constants.SIZE.large]: $theme.sizing.scale500
+  }[$size];
   const paddingDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
   return {
     alignItems: 'center',
@@ -429,23 +352,40 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
     $closeable,
     $isFocusVisible,
     $color,
-    $size = _constants.SIZE.small,
-    $contentMaxWidth
+    $size = _constants.SIZE.small
   } = props;
-  const borderRadius = $size === _constants.SIZE.small ? $theme.borders.radius200 : $theme.borders.radius300;
+  const borderRadius = $size === _constants.SIZE.small || $size === _constants.SIZE.xSmall ? $theme.borders.radius200 : $theme.borders.radius300;
   const paddingMagnitude = {
-    [_constants.SIZE.small]: $theme.sizing.scale300,
-    [_constants.SIZE.medium]: $theme.sizing.scale500,
-    [_constants.SIZE.large]: $theme.sizing.scale600
+    [_constants.SIZE.xSmall]: $theme.sizing.scale100,
+    [_constants.SIZE.small]: $theme.sizing.scale200,
+    [_constants.SIZE.medium]: $theme.sizing.scale300,
+    [_constants.SIZE.large]: $theme.sizing.scale400
+  }[$size];
+  const paddingLongitude = {
+    [_constants.SIZE.xSmall]: $theme.sizing.scale0,
+    [_constants.SIZE.small]: $theme.sizing.scale100,
+    [_constants.SIZE.medium]: $theme.sizing.scale100,
+    [_constants.SIZE.large]: $theme.sizing.scale300
+  }[$size];
+  const isActionable = !$disabled && ($clickable || $closeable);
+  const borderWidthValue = {
+    [_constants.SIZE.xSmall]: '1px',
+    [_constants.SIZE.small]: '1px',
+    [_constants.SIZE.medium]: '1px',
+    [_constants.SIZE.large]: '2px'
   }[$size];
-  const borderWidth = !$disabled && $hierarchy === _constants.HIERARCHY.primary || $kind !== _constants.KIND.custom ? 0 : '2px';
   const {
     color,
     backgroundColor,
     borderColor
   } = colorMap[$kind][getColorStateFromProps(props)]($theme, $color);
+  // previously, only secondary and disabled custom tags had borders
+  // now, it extends to actionable tags as well
+  const showBorder = $kind === _constants.KIND.custom && ($hierarchy === _constants.HIERARCHY.secondary || $disabled) || $kind !== _constants.KIND.custom && isActionable && !!borderColor;
+  const borderWidth = showBorder ? borderWidthValue : 0;
   return {
     ...{
+      [_constants.SIZE.xSmall]: $theme.typography.LabelXSmall,
       [_constants.SIZE.small]: $theme.typography.LabelSmall,
       [_constants.SIZE.medium]: $theme.typography.LabelMedium,
       [_constants.SIZE.large]: $theme.typography.LabelLarge
@@ -473,24 +413,53 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
     cursor: $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
     display: 'inline-flex',
     height: {
+      [_constants.SIZE.xSmall]: '20px',
       [_constants.SIZE.small]: '24px',
       [_constants.SIZE.medium]: '32px',
       [_constants.SIZE.large]: '40px'
     }[$size],
     justifyContent: 'space-between',
-    maxWith: $contentMaxWidth === null ? '100%' : 'auto',
     marginTop: '5px',
     marginBottom: '5px',
     marginLeft: '5px',
     marginRight: '5px',
-    paddingTop: $theme.sizing.scale0,
-    paddingBottom: $theme.sizing.scale0,
+    paddingTop: paddingLongitude,
+    paddingBottom: paddingLongitude,
     paddingLeft: paddingMagnitude,
     paddingRight: paddingMagnitude,
     outline: 'none',
-    ':hover': $disabled || !$clickable ? {} : {
-      boxShadow: `inset 0px 0px 100px ${pick($theme, `rgba(0, 0, 0, 0.08)`, `rgba(255, 255, 255, 0.2)`)}`
-    },
+    ...(isActionable ? {
+      // adding overlay component to cover both border and content area for hovered and pressed state
+      position: 'relative',
+      '::before': {
+        content: "''",
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderTopLeftRadius: 'inherit',
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+        backgroundColor: 'transparent',
+        pointerEvents: 'none'
+      },
+      // end of overlay
+      // Applies only on devices that support hovering, like desktop computers.
+      '@media (hover: hover)': {
+        ':hover::before': {
+          backgroundColor: $theme.colors.hoverOverlayAlpha,
+          // this box shadow is used to extend the overlay to the border
+          boxShadow: `0 0 0 ${borderWidth} ${$theme.colors.hoverOverlayAlpha}`
+        }
+      },
+      ':active::before': {
+        backgroundColor: $theme.colors.pressedOverlayAlpha,
+        // this box shadow is used to extend the overlay to the border
+        boxShadow: `0 0 0 ${borderWidth} ${$theme.colors.pressedOverlayAlpha}`
+      }
+    } : {}),
     ':focus': $disabled || !$clickable && !$closeable ? {} : {
       boxShadow: $isFocusVisible ? `0 0 0 3px ${$kind === _constants.KIND.accent ? $theme.colors.backgroundInversePrimary : $theme.colors.backgroundAccent}` : 'none'
     }

package/tag/tag.js

@@ -36,7 +36,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled = false,
     isFocused = false,
     isHovered = false,
-    kind = _constants.KIND.primary,
+    kind = _constants.KIND.gray,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionClick = event => {},
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -66,7 +66,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
       return;
     }
     const key = event.key;
-    if (onClick && key === 'Enter') {
+    if (onClick && (key === 'Enter' || key === ' ')) {
       onClick(event);
     }
     if (closeable && (key === 'Backspace' || key === 'Delete')) {
@@ -110,6 +110,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   const titleText = title || (0, _utils.getTextFromChildren)(children);
   const isButton = (clickable || closeable) && !disabled;
   const actionSize = {
+    [_constants.SIZE.xSmall]: 12,
     [_constants.SIZE.small]: 12,
     [_constants.SIZE.medium]: 16,
     [_constants.SIZE.large]: 20
@@ -122,7 +123,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   , _extends({
     ref: ref,
     "data-baseweb": "tag",
-    "aria-label": isButton && closeable ? `${typeof children === 'string' ? `${children}, ` : ''}close by backspace` : null,
+    "aria-label": isButton && closeable ? `Remove${typeof children === 'string' ? ` ${children}` : ''}` : null,
     "aria-disabled": disabled ? true : null,
     role: isButton ? 'button' : null,
     tabIndex: isButton ? 0 : null
@@ -132,7 +133,12 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     $contentMaxWidth: contentMaxWidth
   }), StartEnhancer &&
   // @ts-expect-error todo(flow->ts) it is not expected to be a number
-  StartEnhancer !== 0 && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
+  StartEnhancer !== 0 && /*#__PURE__*/React.createElement(StartEnhancerContainer, _extends({
+    "aria-hidden": true,
+    role: "presentation"
+  }, startEnhancerContainerProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+    size: actionSize
+  })), /*#__PURE__*/React.createElement(Text, _extends({
     $contentMaxWidth: contentMaxWidth,
     title: titleText
   }, textProps), children), closeable ? /*#__PURE__*/React.createElement(Action, _extends({