carbon-react 104.49.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/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/package.json

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