carbon-react 102.4.6 → 102.5.0

package/lib/components/button/button-types.style.js

@@ -19,140 +19,127 @@ function makeColors(color) {
   `;
 }
 
-var _default = ({
-  colors,
-  disabled
-}, isDisabled, destructive) => ({
+var _default = (isDisabled, destructive) => ({
   primary: `
-    background: ${colors.primary};
+    background: var(--colorsActionMajor500);
     border-color: transparent;
-    color: ${colors.white};
+    ${makeColors("var(--colorsActionMajorYang100)")};
     &:hover {
-      background: ${colors.secondary};
+      background: var(--colorsActionMajor600);
     }
 
     ${isDisabled ? `
-    background: ${disabled.button};
-    color: ${disabled.text};
+    background: var(--colorsActionDisabled500);
+    ${makeColors("var(--colorsYin030)")};
     &:hover {
-      background: ${disabled.button};
-      border-color: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
     }
   ` : ""}
 
-    ${destructive ? `background: ${colors.error};
-    border-color: transparent;
-    color: ${colors.white};
+    ${destructive ? `background: var(--colorsSemanticNegative500);
+    ${makeColors("var(--colorsSemanticNegativeYang100)")};
     &:hover {
-      background: ${colors.destructive.hover};
+      background: var(--colorsSemanticNegative600);
     }
 
     ${isDisabled ? `
-      background: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        background: ${disabled.button};
-        color: ${disabled.text};
+        background: var(--colorsActionDisabled500);
       }
     ` : ""}` : ""}
   `,
   secondary: `
       background: transparent;
-      border-color: ${colors.primary};
-      color: ${colors.primary};
+      border-color: var(--colorsActionMajor500);
+      ${makeColors("var(--colorsActionMajor500)")};
       &:hover {
-        background: ${colors.secondary};
-        border-color: ${colors.secondary};
-       ${makeColors(colors.white)}
+        background: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajorTransparent);
+        ${makeColors("var(--colorsActionMajorYang100)")};
       }
 
       ${destructive ? `
-        border-color: ${colors.error};
-        ${makeColors(colors.error)}
-        &:focus {
-          ${makeColors(colors.white)}
-          background: ${colors.destructive.hover};
-        }
+        border-color: var(--colorsSemanticNegative500);
+        ${makeColors("var(--colorsSemanticNegative500)")}
         &:hover {
-          ${makeColors(colors.white)}
-          border-color: ${colors.destructive.hover};
-          background: ${colors.destructive.hover};
+          background: var(--colorsSemanticNegative600);
+          border-color: var(--colorsSemanticNegativeTransparent);
+          ${makeColors("var(--colorsSemanticNegativeYang100)")};
         }
       ` : ""}
 
       ${isDisabled ? `
-        border-color: ${disabled.button};
-        color: ${disabled.text};
+        border-color: var(--colorsActionDisabled500);
+        ${makeColors("var(--colorsYin030)")};
         &:hover {
-          background: transparent
-          border-color: ${disabled.button};
-          ${makeColors(disabled.text)}
+          background: transparent;
+          border-color: var(--colorsActionDisabled500);
+          ${makeColors("var(--colorsYin030)")};
         }
     ` : ""}
   `,
   tertiary: `
     background: transparent;
     border-color: transparent;
-    color: ${colors.primary};
+    ${makeColors("var(--colorsActionMajor500)")};
     &:hover {
-      ${makeColors(colors.secondary)}
+      background: var(--colorsActionMajor600);
+      ${makeColors("var(--colorsActionMajorYang100)")};
     }
 
     ${destructive ? `
-      ${makeColors(colors.error)}
+      ${makeColors("var(--colorsSemanticNegative500)")};
       &:hover {
-        ${makeColors(colors.destructive.hover)}
+        background: var(--colorsSemanticNegative600);
+        ${makeColors("var(--colorsSemanticNegativeYang100)")};
       }
       ` : ""}
 
     ${isDisabled ? `
-      color: ${disabled.text};
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        ${makeColors(disabled.text)}
+        background: var(--colorsActionMajorTransparent);
+        ${makeColors("var(--colorsYin030)")};
       }
     ` : ""}
   `,
   dashed: `
     background: transparent;
-    border: 2px solid ${colors.dashedBorder}
-    border-style: dashed;
-    color: ${colors.dashedButtonText};
+    border: 2px dashed var(--colorsActionMinor500);
+    ${makeColors("var(--colorsActionMinor500)")};
     &:hover {
-      background-color: ${colors.dashedHoverBackground}
+      background-color: var(--colorsActionMinor200);
     }
 
     ${destructive ? `
-      ${makeColors(colors.error)}
-      &:hover {
-        ${makeColors(colors.destructive.hover)}
-      }
+      border-color: var(--colorsSemanticNegative500);
       ` : ""}
 
     ${isDisabled ? `
-      border-color: ${disabled.button};
-      color: ${disabled.text};
+      border-color: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
         background-color: transparent;
-        ${makeColors(disabled.text)}
       }
     ` : ""}
   `,
   darkBackground: `
-    background: ${colors.white};
+    background: var(--colorsActionMajorYang100);
     border-color: transparent;
-    color: ${colors.primary};
+    ${makeColors("var(--colorsActionMajor500)")};
     &:hover {
-      background: ${colors.secondary};
-      ${makeColors(colors.white)}
+      background: var(--colorsActionMajor600);
+      ${makeColors("var(--colorsActionMajorYang100)")}
     }
 
     ${isDisabled ? `
-      background: ${disabled.button};
-      color: ${disabled.text};
+      background: var(--colorsActionDisabled500);
+      ${makeColors("var(--colorsYin030)")};
       &:hover {
-        background: ${disabled.button};
-        ${makeColors(disabled.text)}
+        background: var(--colorsActionDisabled500);
+        ${makeColors("var(--colorsYin030)")};
       }
     ` : ""}
   `

package/lib/components/button/button.component.js

@@ -7,8 +7,6 @@ exports.default = exports.ButtonWithForwardRef = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
@@ -19,8 +17,6 @@ var _button = _interopRequireWildcard(require("./button.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -39,16 +35,15 @@ function renderChildren({
   disabled,
   buttonType,
   iconTooltipMessage,
-  iconTooltipPosition,
-  theme
+  iconTooltipPosition
   /* eslint-enable */
 
 }) {
   const iconColorMap = {
-    primary: theme.colors.white,
-    secondary: theme.colors.primary,
-    tertiary: theme.colors.primary,
-    darkBackground: theme.colors.primary
+    primary: "var(--colorsActionMajorYang100)",
+    secondary: "var(--colorsActionMajor500)",
+    tertiary: "var(--colorsActionMajor500)",
+    darkBackground: "var(--colorsActionMajor500)"
   };
   const iconProps = {
     "aria-hidden": true,
@@ -74,7 +69,6 @@ const renderStyledButton = buttonProps => {
     disabled,
     buttonType,
     iconType,
-    theme,
     href,
     ref,
     m = 0,
@@ -136,8 +130,6 @@ const renderStyledButton = buttonProps => {
 };
 
 const Button = props => {
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _base.default;
-
   const {
     size,
     subtext
@@ -151,8 +143,7 @@ const Button = props => {
   } = props;
   const propsWithoutAs = { ...rest,
     buttonType: buttonType || as,
-    ref: forwardRef || linkRef,
-    theme
+    ref: forwardRef || linkRef
   };
 
   if (subtext.length > 0 && size !== "large") {

package/lib/components/button/button.style.js

@@ -51,15 +51,6 @@ const StyledButton = _styledComponents.default.button`
     ${stylingForType}
   `}
 
-  &&& {
-    ${({
-  mb,
-  theme
-}) => (mb || mb === 0) && (0, _styledComponents.css)`
-        margin-bottom: ${mb * theme.spacing}px;
-      `}
-  }
-
   ${({
   fullWidth
 }) => fullWidth && (0, _styledComponents.css)`
@@ -68,12 +59,11 @@ const StyledButton = _styledComponents.default.button`
 
   ${({
   iconOnly,
-  iconPosition,
-  theme
+  iconPosition
 }) => (0, _styledComponents.css)`
     ${_icon.default} {
-      margin-left: ${!iconOnly && iconPosition === "after" ? `${theme.spacing}px` : "0px"};
-      margin-right: ${!iconOnly && iconPosition === "before" ? `${theme.spacing}px` : "0px"};
+      margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
+      margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
       margin-bottom: ${iconOnly ? "1px" : "0px"};
       height: ${additionalIconStyle};
       svg {
@@ -123,7 +113,6 @@ function stylingForType({
   iconOnly,
   disabled,
   buttonType,
-  theme,
   size,
   destructive
 }) {
@@ -133,18 +122,18 @@ function stylingForType({
     font-weight: 600;
     text-decoration: none;
     &:focus {
-      outline: solid 3px ${theme.colors.focus};
+      outline: solid 3px var(--colorsSemanticFocus500);
     }
 
-    ${(0, _buttonTypes.default)(theme, disabled, destructive)[buttonType]};
+    ${(0, _buttonTypes.default)(disabled, destructive)[buttonType]};
 
     ${size === "small" && (0, _styledComponents.css)`
-      font-size: ${theme.text.size};
+      font-size: var(--fontSizes100);
       min-height: 32px;
     `}
 
     ${size === "medium" && (0, _styledComponents.css)`
-      font-size: ${theme.text.size};
+      font-size: var(--fontSizes100);
       min-height: 40px;
     `}
     
@@ -171,15 +160,27 @@ StyledButton.propTypes = {
   /** The text the button displays */
   children: _propTypes.default.node.isRequired,
 
+  /** Apply destructive style to the button */
+  destructive: _propTypes.default.bool,
+
   /** Apply disabled state to the button */
   disabled: _propTypes.default.bool,
 
+  /** Apply fullWidth style to the button */
+  fullWidth: _propTypes.default.bool,
+
+  /** Apply iconOnly to display button with the icon only  */
+  iconOnly: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+
   /** Defines an Icon position within the button */
   iconPosition: _propTypes.default.oneOf([..._button.BUTTON_ICON_POSITIONS, ""]),
 
   /** Defines an Icon type within the button (see Icon for options) */
   iconType: _propTypes.default.oneOf([..._iconConfig.ICONS, ""]),
 
+  /** If provided, the text inside a button will not wrap */
+  noWrap: _propTypes.default.bool,
+
   /** Assigns a size to the button */
   size: _propTypes.default.oneOf(_button.BUTTON_SIZES),
 

package/lib/components/icon/icon.style.js

@@ -77,6 +77,9 @@ const StyledIcon = _styledComponents.default.span`
     if (disabled) {
       finalColor = theme.icon.disabled;
       finalHoverColor = theme.icon.disabled;
+    } else if (typeof color === "string" && color.startsWith("var")) {
+      finalColor = color;
+      finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
     } else if (color) {
       const {
         color: renderedColor

package/package.json

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