carbon-react 104.48.0 → 104.50.0

package/esm/__internal__/character-count/character-count.style.js

@@ -1,14 +1,12 @@
 import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
 const StyledCharacterCount = styled.div`
   text-align: right;
   font-size: 12px;
   margin-top: 4px;
   margin-bottom: 4px;
   color: ${({
-  theme,
   isOverLimit
-}) => isOverLimit ? theme.colors.error : theme.disabled.disabled};
+}) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
 
   ${({
   isOverLimit
@@ -16,7 +14,4 @@ const StyledCharacterCount = styled.div`
       font-weight: 700;
     `}
 `;
-StyledCharacterCount.defaultProps = {
-  theme: baseTheme
-};
 export default StyledCharacterCount;

package/esm/__internal__/checkable-input/checkable-input.style.js

@@ -5,7 +5,6 @@ import { FieldLineStyle } from "../form-field/form-field.style";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
 import StyledHelp from "../../components/help/help.style";
-import baseTheme from "../../style/themes/base";
 import StyledValidationIcon from "../validations/validation-icon.style";
 const StyledCheckableInput = styled.div`
   display: inline-block;
@@ -18,8 +17,7 @@ const StyledCheckableInputWrapper = styled.div`
   inputWidth,
   labelWidth,
   labelInline,
-  reverse,
-  theme
+  reverse
 }) => css`
     ${FieldLineStyle} {
       display: flex;
@@ -33,12 +31,12 @@ const StyledCheckableInputWrapper = styled.div`
       width: auto;
 
       & ${StyledHelp}, & ${StyledValidationIcon} {
-        color: ${theme.help.color};
+        color: var(--colorsUtilityYin065);
         vertical-align: middle;
 
         &:hover,
         &:focus {
-          color: ${theme.text.color};
+          color: var(--colorsUtilityYin090);
         }
       }
     }
@@ -103,10 +101,6 @@ StyledCheckableInputWrapper.propTypes = {
   disabled: PropTypes.bool,
   fieldHelpInline: PropTypes.bool,
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  theme: PropTypes.object
-};
-StyledCheckableInputWrapper.defaultProps = {
-  theme: baseTheme
+  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 export { StyledCheckableInput, StyledCheckableInputWrapper };

package/esm/__internal__/input/input-presentation.style.js

@@ -10,7 +10,7 @@ export const StyledInputPresentationContainer = styled.div`
 `;
 const InputPresentationStyle = styled.div`
   align-items: stretch;
-  background: #fff;
+  background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -1,5 +1,4 @@
 export default InputIconToggleStyle;
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
     onKeyDown: (e: import("react").KeyboardEvent<HTMLSpanElement>) => any;
-    theme: import("../../style/themes/base").ThemeObject;
-}, "theme" | "onKeyDown">;
+}, "onKeyDown">;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-import BaseTheme from "../../style/themes/base";
 import sizes from "../input/input-sizes.style";
 const InputIconToggleStyle = styled.span.attrs(({
   onClick
@@ -11,8 +10,7 @@ const InputIconToggleStyle = styled.span.attrs(({
       e.preventDefault();
       return onClick(e);
     }
-  },
-  theme: BaseTheme
+  }
 }))`
   align-items: center;
   cursor: pointer;
@@ -28,15 +26,12 @@ const InputIconToggleStyle = styled.span.attrs(({
   `}
 
   &:focus {
-    outline: solid 3px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 `;
 InputIconToggleStyle.safeProps = ["size", "error", "warning", "info"];
 InputIconToggleStyle.defaultProps = {
-  size: "medium",
-  theme: BaseTheme
+  size: "medium"
 };
 InputIconToggleStyle.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"]),

package/esm/components/icon/icon.style.js

@@ -69,7 +69,7 @@ const StyledIcon = styled.span`
       finalColor = renderedColor;
       finalHoverColor = shade(0.2, renderedColor);
     } else {
-      finalColor = "var(--colorsYin065)";
+      finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
     }
 
@@ -82,9 +82,6 @@ const StyledIcon = styled.span`
       });
       bgColor = backgroundColor;
       bgHoverColor = shade(0.2, backgroundColor);
-    } else if (disabled) {
-      bgColor = "var(--colorsYin030)";
-      bgHoverColor = "var(--colorsYin030)";
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

package/esm/components/scrollable-list/scrollable-list-item.component.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import propTypes from "prop-types";
-import baseTheme from "../../style/themes/base";
 const ScrollableListItem = styled.li`
   ${({
   isSelectable
@@ -8,10 +7,9 @@ const ScrollableListItem = styled.li`
       cursor: pointer;
     `}
   ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && css`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor025);
     `}
   box-sizing: content-box;
   padding: 5px 6px;
@@ -19,12 +17,10 @@ const ScrollableListItem = styled.li`
 `;
 ScrollableListItem.propTypes = {
   id: propTypes.any,
-  isSelected: propTypes.bool,
-  theme: propTypes.object
+  isSelected: propTypes.bool
 };
 ScrollableListItem.defaultProps = {
-  isSelectable: true,
-  // defaulted to true so it integrates with ScrollableList by default,
-  theme: baseTheme
+  isSelectable: true // defaulted to true so it integrates with ScrollableList by default,
+
 };
 export default ScrollableListItem;

package/lib/__internal__/character-count/character-count.style.js

@@ -7,10 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -21,9 +17,8 @@ const StyledCharacterCount = _styledComponents.default.div`
   margin-top: 4px;
   margin-bottom: 4px;
   color: ${({
-  theme,
   isOverLimit
-}) => isOverLimit ? theme.colors.error : theme.disabled.disabled};
+}) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
 
   ${({
   isOverLimit
@@ -31,8 +26,5 @@ const StyledCharacterCount = _styledComponents.default.div`
       font-weight: 700;
     `}
 `;
-StyledCharacterCount.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledCharacterCount;
 exports.default = _default;

package/lib/__internal__/checkable-input/checkable-input.style.js

@@ -19,8 +19,6 @@ var _label = _interopRequireWildcard(require("../label/label.style"));
 
 var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,8 +39,7 @@ const StyledCheckableInputWrapper = _styledComponents.default.div`
   inputWidth,
   labelWidth,
   labelInline,
-  reverse,
-  theme
+  reverse
 }) => (0, _styledComponents.css)`
     ${_formField.FieldLineStyle} {
       display: flex;
@@ -56,12 +53,12 @@ const StyledCheckableInputWrapper = _styledComponents.default.div`
       width: auto;
 
       & ${_help.default}, & ${_validationIcon.default} {
-        color: ${theme.help.color};
+        color: var(--colorsUtilityYin065);
         vertical-align: middle;
 
         &:hover,
         &:focus {
-          color: ${theme.text.color};
+          color: var(--colorsUtilityYin090);
         }
       }
     }
@@ -127,9 +124,5 @@ StyledCheckableInputWrapper.propTypes = {
   disabled: _propTypes.default.bool,
   fieldHelpInline: _propTypes.default.bool,
   inputWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  theme: _propTypes.default.object
-};
-StyledCheckableInputWrapper.defaultProps = {
-  theme: _base.default
+  labelWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };

package/lib/__internal__/input/input-presentation.style.js

@@ -27,7 +27,7 @@ const StyledInputPresentationContainer = _styledComponents.default.div`
 exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
-  background: #fff;
+  background: var(--colorsUtilityYang100);
   border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -1,5 +1,4 @@
 export default InputIconToggleStyle;
 declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
     onKeyDown: (e: import("react").KeyboardEvent<HTMLSpanElement>) => any;
-    theme: import("../../style/themes/base").ThemeObject;
-}, "theme" | "onKeyDown">;
+}, "onKeyDown">;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _inputSizes = _interopRequireDefault(require("../input/input-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,8 +26,7 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
       e.preventDefault();
       return onClick(e);
     }
-  },
-  theme: _base.default
+  }
 }))`
   align-items: center;
   cursor: pointer;
@@ -45,15 +42,12 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   `}
 
   &:focus {
-    outline: solid 3px ${({
-  theme
-}) => theme.colors.focus};
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 `;
 InputIconToggleStyle.safeProps = ["size", "error", "warning", "info"];
 InputIconToggleStyle.defaultProps = {
-  size: "medium",
-  theme: _base.default
+  size: "medium"
 };
 InputIconToggleStyle.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"]),

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

@@ -90,7 +90,7 @@ const StyledIcon = _styledComponents.default.span`
       finalColor = renderedColor;
       finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
     } else {
-      finalColor = "var(--colorsYin065)";
+      finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
     }
 
@@ -103,9 +103,6 @@ const StyledIcon = _styledComponents.default.span`
       });
       bgColor = backgroundColor;
       bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
-    } else if (disabled) {
-      bgColor = "var(--colorsYin030)";
-      bgHoverColor = "var(--colorsYin030)";
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";

package/lib/components/scrollable-list/scrollable-list-item.component.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-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; }
@@ -24,10 +22,9 @@ const ScrollableListItem = _styledComponents.default.li`
       cursor: pointer;
     `}
   ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor025);
     `}
   box-sizing: content-box;
   padding: 5px 6px;
@@ -35,13 +32,11 @@ const ScrollableListItem = _styledComponents.default.li`
 `;
 ScrollableListItem.propTypes = {
   id: _propTypes.default.any,
-  isSelected: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  isSelected: _propTypes.default.bool
 };
 ScrollableListItem.defaultProps = {
-  isSelectable: true,
-  // defaulted to true so it integrates with ScrollableList by default,
-  theme: _base.default
+  isSelectable: true // defaulted to true so it integrates with ScrollableList by default,
+
 };
 var _default = ScrollableListItem;
 exports.default = _default;

package/package.json

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