carbon-react 104.35.0 → 104.38.0

package/esm/__internal__/field-help/field-help.style.js

@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
-import BaseTheme from "../../style/themes/base";
 const FieldHelpStyle = styled.span`
   display: block;
   flex: 1;
@@ -16,8 +15,7 @@ const FieldHelpStyle = styled.span`
     `}
 `;
 FieldHelpStyle.defaultProps = {
-  labelWidth: 30,
-  theme: BaseTheme
+  labelWidth: 30
 };
 FieldHelpStyle.propTypes = {
   labelWidth: PropTypes.number,

package/esm/__internal__/fieldset/fieldset.style.js

@@ -16,48 +16,40 @@ const StyledLegendContent = styled.span`
   display: flex;
   align-items: center;
   line-height: 24px;
-
   ${({
-  isRequired,
-  theme
+  isRequired
 }) => isRequired && css`
       ::after {
         content: "*";
         line-height: 24px;
-        color: ${theme.colors.asterisk};
+        color: var(--colorsSemanticNegative500);
         font-weight: 700;
-        margin-left: ${theme.spacing}px;
+        margin-left: var(--spacing100);
       }
     `}
 `;
-StyledLegendContent.defaultProps = {
-  theme: BaseTheme
-};
 const StyledLegend = styled.legend`
   display: flex;
   align-items: center;
   margin-bottom: 8px;
   padding: 0;
   font-weight: 600;
-
   ${({
   inline,
   width,
   align,
-  rightPadding,
-  theme
+  rightPadding
 }) => inline && css`
       float: left;
       box-sizing: border-box;
       margin: 0;
       ${width && `width: ${width}%`};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      padding-right: ${rightPadding * theme.spacing}px;
+      padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
 `;
 StyledLegend.defaultProps = {
-  align: "right",
-  theme: BaseTheme
+  align: "right"
 };
 StyledLegend.propTypes = {
   inline: PropTypes.bool,

package/esm/components/confirm/confirm.style.js

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import StyledIcon from "../icon/icon.style";
-import baseTheme from "../../style/themes/base";
 import { StyledHeadingTitle } from "../heading/heading.style";
 export const StyledConfirmButtons = styled.div`
   margin-top: 48px;
@@ -22,12 +21,12 @@ export const StyledConfirmHeading = styled.div`
     ${({
   type
 }) => type === "warning" && css`
-        color: ${baseTheme.colors.warning};
+        color: var(--colorsSemanticCaution500);
       `}
     ${({
   type
 }) => type === "error" && css`
-        color: ${baseTheme.colors.error};
+        color: var(--colorsSemanticNegative500);
       `}
   }
 `;

package/esm/components/hr/hr.style.js

@@ -6,9 +6,7 @@ const StyledHr = styled.hr`
   width: inherit;
   border: 0;
   height: 1px;
-  background: ${({
-  theme
-}) => theme.hr.background};
+  background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {
   theme: baseTheme

package/esm/components/tile-select/__internal__/accordion/accordion.style.js

@@ -1,17 +1,11 @@
 import styled from "styled-components";
 import { StyledAccordionContentContainer, StyledAccordionContent } from "../../../accordion/accordion.style";
-import baseTheme from "../../../../style/themes/base";
 const StyledContentContainer = styled(StyledAccordionContentContainer)`
-  background-color: ${({
-  theme
-}) => theme.tileSelect.hoverBackground};
+  background-color: var(--colorsActionMinor050);
 `;
 const StyledContent = styled(StyledAccordionContent)`
   padding: 24px;
   position: relative;
   z-index: 200;
 `;
-StyledContentContainer.defaultProps = {
-  theme: baseTheme
-};
 export { StyledContentContainer, StyledContent };

package/lib/__internal__/field-help/field-help.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; }
@@ -32,8 +30,7 @@ const FieldHelpStyle = _styledComponents.default.span`
     `}
 `;
 FieldHelpStyle.defaultProps = {
-  labelWidth: 30,
-  theme: _base.default
+  labelWidth: 30
 };
 FieldHelpStyle.propTypes = {
   labelWidth: _propTypes.default.number,

package/lib/__internal__/fieldset/fieldset.style.js

@@ -34,50 +34,42 @@ const StyledLegendContent = _styledComponents.default.span`
   display: flex;
   align-items: center;
   line-height: 24px;
-
   ${({
-  isRequired,
-  theme
+  isRequired
 }) => isRequired && (0, _styledComponents.css)`
       ::after {
         content: "*";
         line-height: 24px;
-        color: ${theme.colors.asterisk};
+        color: var(--colorsSemanticNegative500);
         font-weight: 700;
-        margin-left: ${theme.spacing}px;
+        margin-left: var(--spacing100);
       }
     `}
 `;
 exports.StyledLegendContent = StyledLegendContent;
-StyledLegendContent.defaultProps = {
-  theme: _base.default
-};
 const StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
   margin-bottom: 8px;
   padding: 0;
   font-weight: 600;
-
   ${({
   inline,
   width,
   align,
-  rightPadding,
-  theme
+  rightPadding
 }) => inline && (0, _styledComponents.css)`
       float: left;
       box-sizing: border-box;
       margin: 0;
       ${width && `width: ${width}%`};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      padding-right: ${rightPadding * theme.spacing}px;
+      padding-right: ${rightPadding === 1 ? "var(--spacing100)" : "var(--spacing200)"};
     `}
 `;
 exports.StyledLegend = StyledLegend;
 StyledLegend.defaultProps = {
-  align: "right",
-  theme: _base.default
+  align: "right"
 };
 StyledLegend.propTypes = {
   inline: _propTypes.default.bool,

package/lib/components/confirm/confirm.style.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _heading = require("../heading/heading.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,12 +39,12 @@ const StyledConfirmHeading = _styledComponents.default.div`
     ${({
   type
 }) => type === "warning" && (0, _styledComponents.css)`
-        color: ${_base.default.colors.warning};
+        color: var(--colorsSemanticCaution500);
       `}
     ${({
   type
 }) => type === "error" && (0, _styledComponents.css)`
-        color: ${_base.default.colors.error};
+        color: var(--colorsSemanticNegative500);
       `}
   }
 `;

package/lib/components/hr/hr.style.js

@@ -18,9 +18,7 @@ const StyledHr = _styledComponents.default.hr`
   width: inherit;
   border: 0;
   height: 1px;
-  background: ${({
-  theme
-}) => theme.hr.background};
+  background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {
   theme: _base.default

package/lib/components/tile-select/__internal__/accordion/accordion.style.js

@@ -9,14 +9,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _accordion = require("../../../accordion/accordion.style");
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledContentContainer = (0, _styledComponents.default)(_accordion.StyledAccordionContentContainer)`
-  background-color: ${({
-  theme
-}) => theme.tileSelect.hoverBackground};
+  background-color: var(--colorsActionMinor050);
 `;
 exports.StyledContentContainer = StyledContentContainer;
 const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionContent)`
@@ -24,7 +20,4 @@ const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionC
   position: relative;
   z-index: 200;
 `;
-exports.StyledContent = StyledContent;
-StyledContentContainer.defaultProps = {
-  theme: _base.default
-};
+exports.StyledContent = StyledContent;

package/package.json

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