carbon-react 102.15.0 → 102.16.0

package/lib/components/pill/pill.style.config.d.ts

@@ -1,26 +1,31 @@
-declare function _default(theme: any): {
+declare function _default(): {
     status: {
         neutral: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         negative: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         warning: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
         positive: {
             varietyColor: string;
             buttonFocus: string;
+            content: string;
         };
     };
     tag: {
         primary: {
-            varietyColor: any;
-            buttonFocus: any;
+            varietyColor: string;
+            buttonFocus: string;
+            content: string;
         };
     };
 };

package/lib/components/pill/pill.style.config.js

@@ -5,39 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  colors,
-  pill
-} = _base.default;
-
-var _default = theme => {
+var _default = () => {
   return {
     status: {
       neutral: {
-        varietyColor: pill.neutral,
-        buttonFocus: pill.neutralBackgroundFocus
+        varietyColor: "var(--colorsSemanticNeutral500)",
+        buttonFocus: "var(--colorsSemanticNeutral600)",
+        content: "var(--colorsSemanticNeutralYang100)"
       },
       negative: {
-        varietyColor: colors.error,
-        buttonFocus: pill.errorButtonFocus
+        varietyColor: "var(--colorsSemanticNegative500)",
+        buttonFocus: "var(--colorsSemanticNegative600)",
+        content: "var(--colorsSemanticNegativeYang100)"
       },
       warning: {
-        varietyColor: pill.warning,
-        buttonFocus: pill.warningButtonFocus
+        varietyColor: "var(--colorsSemanticCaution400)",
+        buttonFocus: "var(--colorsSemanticCaution600)",
+        content: "var(--colorsSemanticCautionYin090)"
       },
       positive: {
-        varietyColor: colors.secondary,
-        buttonFocus: colors.tertiary
+        varietyColor: "var(--colorsSemanticPositive500)",
+        buttonFocus: "var(--colorsSemanticPositive600)",
+        content: "var(--colorsSemanticPositiveYang100)"
       }
     },
     tag: {
       primary: {
-        varietyColor: theme.colors.primary,
-        buttonFocus: theme.colors.secondary
+        varietyColor: "var(--colorsActionMajor500)",
+        buttonFocus: "var(--colorsActionMajor600)",
+        content: "var(--colorsActionMajorYang100)"
       }
     }
   };

package/lib/components/pill/pill.style.js

@@ -49,10 +49,6 @@ const PillStyle = _styledComponents.default.span`
   size
 }) => {
   const isStatus = pillRole === "status";
-  const {
-    colors,
-    text
-  } = _themes.baseTheme;
   const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
@@ -62,16 +58,17 @@ const PillStyle = _styledComponents.default.span`
     if (borderColor) {
       pillColor = (0, _color.toColor)(theme, borderColor);
       buttonFocusColor = (0, _polished.shade)(0.2, pillColor);
+      contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
       const {
         varietyColor,
-        buttonFocus
+        buttonFocus,
+        content
       } = (0, _pillStyle.default)(theme)[pillRole][variety];
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
+      contentColor = content;
     }
-
-    contentColor = (0, _polished.meetsContrastGuidelines)(pillColor, text.color).AAA ? text.color : colors.white;
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);
@@ -90,10 +87,14 @@ const PillStyle = _styledComponents.default.span`
       border: 2px solid ${pillColor};
       height: auto;
       white-space: nowrap;
+      color: ${contentColor};
 
       ${inFill && (0, _styledComponents.css)`
         background-color: ${pillColor};
-        color: ${contentColor};
+      `}
+
+      ${!inFill && (0, _styledComponents.css)`
+        color: var(--colorsUtilityYin090);
       `}
 
       ${size === "S" && (0, _styledComponents.css)`
@@ -134,21 +135,9 @@ const PillStyle = _styledComponents.default.span`
           margin: 0;
           line-height: 16px;
 
-          ${inFill && (0, _styledComponents.css)`
-            color: ${contentColor};
-            ${_icon.default} {
-              color: ${contentColor};
-            }
-          `}
-
-          ${!inFill && (0, _styledComponents.css)`
-            background-color: transparent;
-            color: ${text.color};
-          `}
-
           &:focus {
             outline: none;
-            box-shadow: 0 0 0 3px ${colors.focus};
+            box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
             & {
               color: ${contentColor};
@@ -175,12 +164,19 @@ const PillStyle = _styledComponents.default.span`
             padding: 0 4px;
             height: unset;
             width: unset;
+            color: ${contentColor};
 
             &:hover,
             &:focus {
               color: ${contentColor};
             }
           }
+
+          ${!inFill && (0, _styledComponents.css)`
+            ${_icon.default} {
+              color: var(--colorsUtilityYin090);
+            }
+          `}
         }
 
         ${size === "S" && (0, _styledComponents.css)`
@@ -293,7 +289,10 @@ PillStyle.propTypes = {
   inFill: _propTypes.default.bool,
   colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
   isDeletable: _propTypes.default.func,
-  size: _propTypes.default.oneOf(["S", "M", "L", "XL"])
+  size: _propTypes.default.oneOf(["S", "M", "L", "XL"]),
+  pillRole: _propTypes.default.oneOf(["tag", "status"]),
+  borderColor: _propTypes.default.string,
+  theme: _propTypes.default.object
 };
 var _default = PillStyle;
 exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -361,7 +361,6 @@ declare function _default(palette: any): {
         colorsActionMajor600: any;
         colorsActionDisabled500: any;
         colorsSemanticFocus500: any;
-        colorsSemanticPositive500: any;
         colorsSemanticNegative500: any;
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
@@ -471,6 +470,7 @@ declare function _default(palette: any): {
         colorsSemanticNeutralYang100: string;
         colorsSemanticFocus250: string;
         colorsSemanticFocusTransparent: string;
+        colorsSemanticPositive500: string;
         colorsSemanticPositive600: string;
         colorsSemanticPositiveTransparent: string;
         colorsSemanticPositiveYin030: string;

package/lib/style/themes/base/base-theme.config.js

@@ -384,7 +384,6 @@ var _default = palette => {
         colorsActionMajor600: this.colors.secondary,
         colorsActionDisabled500: this.disabled.background,
         colorsSemanticFocus500: this.colors.focus,
-        colorsSemanticPositive500: this.colors.success,
         colorsSemanticNegative500: this.colors.error,
         colorsSemanticNegative600: this.colors.destructive.hover,
         colorsSemanticCaution500: this.colors.warning,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.15.0",
+  "version": "102.16.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {