carbon-react 102.13.2 → 102.14.0

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -1,7 +1,6 @@
 export const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default InputPresentationStyle;
 declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, {
-    theme: any;
     error: any;
     warning: any;
     info: any;

package/lib/__internal__/input/input-presentation.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-sizes.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,9 +28,7 @@ exports.StyledInputPresentationContainer = StyledInputPresentationContainer;
 const InputPresentationStyle = _styledComponents.default.div`
   align-items: stretch;
   background: #fff;
-  border: 1px solid ${({
-  theme
-}) => theme.colors.border};
+  border: 1px solid var(--colorsUtilityMajor300);
   box-sizing: border-box;
   cursor: text;
   display: flex;
@@ -50,21 +46,19 @@ const InputPresentationStyle = _styledComponents.default.div`
 }) => _inputSizes.default[size].horizontalPadding};
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      background: ${theme.disabled.input};
-      border-color: ${theme.disabled.border};
+      background: var(--colorsUtilityDisabled400);
+      border-color: var(--colorsUtilityDisabled600);
       cursor: not-allowed;
     `}
 
   ${({
   hasFocus,
-  theme,
   disabled
 }) => hasFocus && !disabled && (0, _styledComponents.css)`
-      && {
-        outline: 3px solid ${theme.colors.focus};
+      & {
+        outline: 3px solid var(--colorsSemanticFocus500);
         z-index: 2;
       }
     `}
@@ -72,11 +66,10 @@ const InputPresentationStyle = _styledComponents.default.div`
   ${stylingForValidations}
 
   ${({
-  readOnly,
-  theme
+  readOnly
 }) => readOnly && (0, _styledComponents.css)`
-      background-color: ${theme.readOnly.textboxBackground};
-      border-color: ${theme.readOnly.textboxBorder};
+      background-color: var(--colorsUtilityReadOnly400);
+      border-color: var(--colorsUtilityReadOnly600);
     `}
 
   ${({
@@ -92,7 +85,6 @@ const InputPresentationStyle = _styledComponents.default.div`
 `;
 
 function stylingForValidations({
-  theme,
   error,
   warning,
   info,
@@ -105,11 +97,11 @@ function stylingForValidations({
   }
 
   if (error) {
-    validationColor = theme.colors.error;
+    validationColor = "var(--colorsSemanticNegative500)";
   } else if (warning) {
-    validationColor = theme.colors.warning;
+    validationColor = "var(--colorsSemanticCaution500)";
   } else if (info) {
-    validationColor = theme.colors.info;
+    validationColor = "var(--colorsSemanticInfo500)";
   } else {
     return "";
   }
@@ -122,8 +114,7 @@ function stylingForValidations({
 }
 
 InputPresentationStyle.defaultProps = {
-  size: "medium",
-  theme: _base.default
+  size: "medium"
 };
 InputPresentationStyle.propTypes = {
   align: _propTypes.default.string,

package/lib/__internal__/input/input-sizes.style.d.ts

@@ -1,34 +1,19 @@
 declare namespace _default {
     namespace small {
         const height: string;
-        const verticalPadding: string;
         const horizontalPadding: string;
-        const tooltipVerticalOffset: number;
-        const tooltipHorizontalOffset: number;
     }
     namespace medium {
         const height_1: string;
         export { height_1 as height };
-        const verticalPadding_1: string;
-        export { verticalPadding_1 as verticalPadding };
         const horizontalPadding_1: string;
         export { horizontalPadding_1 as horizontalPadding };
-        const tooltipVerticalOffset_1: number;
-        export { tooltipVerticalOffset_1 as tooltipVerticalOffset };
-        const tooltipHorizontalOffset_1: number;
-        export { tooltipHorizontalOffset_1 as tooltipHorizontalOffset };
     }
     namespace large {
         const height_2: string;
         export { height_2 as height };
-        const verticalPadding_2: string;
-        export { verticalPadding_2 as verticalPadding };
         const horizontalPadding_2: string;
         export { horizontalPadding_2 as horizontalPadding };
-        const tooltipVerticalOffset_2: number;
-        export { tooltipVerticalOffset_2 as tooltipVerticalOffset };
-        const tooltipHorizontalOffset_2: number;
-        export { tooltipHorizontalOffset_2 as tooltipHorizontalOffset };
     }
 }
 export default _default;

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

@@ -6,25 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = {
   small: {
-    height: "32px",
-    verticalPadding: "7px",
-    horizontalPadding: "8px",
-    tooltipVerticalOffset: 3,
-    tooltipHorizontalOffset: 1
+    height: "var(--sizing400)",
+    horizontalPadding: "var(--spacing100)"
   },
   medium: {
-    height: "40px",
-    verticalPadding: "12px",
-    horizontalPadding: "11px",
-    tooltipVerticalOffset: 6,
-    tooltipHorizontalOffset: 4
+    height: "var(--sizing500)",
+    horizontalPadding: "var(--spacing150)"
   },
   large: {
-    height: "48px",
-    verticalPadding: "15px",
-    horizontalPadding: "13px",
-    tooltipVerticalOffset: 10,
-    tooltipHorizontalOffset: 6
+    height: "var(--sizing600)",
+    horizontalPadding: "var(--spacing200)"
   }
 };
 exports.default = _default;

package/lib/__internal__/input/input.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"));
-
 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; }
@@ -20,13 +18,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledInput = _styledComponents.default.input`
   background: transparent;
   border: none;
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsUtilityYin090);
   flex-grow: 1;
-  font-size: ${({
-  theme
-}) => theme.text.size};
+  font-size: var(--fontSizes100);
   outline: none;
   padding: 0;
   margin: 0;
@@ -44,29 +38,22 @@ const StyledInput = _styledComponents.default.input`
     `}
 
   &::placeholder {
-    color: ${({
-  theme
-}) => theme.text.placeholder};
+    color: var(--colorsUtilityYin030);
   }
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: ${theme.disabled.disabled};
+      color: var(--colorsUtilityYin030);
       cursor: not-allowed;
     `}
 
   ${({
-  readOnly,
-  theme
+  readOnly
 }) => readOnly && (0, _styledComponents.css)`
-      color: ${theme.readOnly.textboxText};
+      color: var(--colorsActionMinorYin090);
     `}
 `;
-StyledInput.defaultProps = {
-  theme: _base.default
-};
 StyledInput.propTypes = {
   disabled: _propTypes.default.bool
 };

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

@@ -39,8 +39,8 @@ const InputIconToggleStyle = _styledComponents.default.span.attrs(({
   ${({
   size
 }) => (0, _styledComponents.css)`
-    margin-right: -${_inputSizes.default[size].horizontalPadding};
-    margin-left: -${_inputSizes.default[size].horizontalPadding};
+    margin-right: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
+    margin-left: calc(-1 * ${_inputSizes.default[size].horizontalPadding});
     width: ${_inputSizes.default[size].height};
   `}
 

package/package.json

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