carbon-react 104.23.1 → 104.24.0

package/lib/components/text-editor/__internal__/editor-counter/editor-counter.style.js

@@ -7,15 +7,12 @@ exports.StyledCounterWrapper = exports.StyledCounter = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledCounter = _styledComponents.default.span`
   color: ${({
-  theme,
   hasError
-}) => hasError ? `${theme.colors.error};` : `${theme.editor.counter};`}
+}) => hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
   width: 100%;
 `;
 exports.StyledCounter = StyledCounter;
@@ -29,7 +26,4 @@ const StyledCounterWrapper = _styledComponents.default.div`
   text-align: right;
   align-items: center;
 `;
-exports.StyledCounterWrapper = StyledCounterWrapper;
-StyledCounter.defaultProps = {
-  theme: _base.default
-};
+exports.StyledCounterWrapper = StyledCounterWrapper;

package/lib/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../../style/themes/base"));
-
 var _icon = _interopRequireDefault(require("../../../../icon/icon.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,26 +30,22 @@ const StyledToolbarButton = _styledComponents.default.button.attrs({
   }
 
   ${({
-  theme,
   isActive
 }) => (0, _styledComponents.css)`
     :focus,
     :active {
-      outline: 2px solid ${theme.colors.focus};
+      outline: 2px solid var(--colorsSemanticFocus500);
       outline-offset: -2px;
     }
 
     :hover {
-      background-color: ${theme.editor.button.hover};
+      background-color: var(--colorsActionMinor200);
     }
 
     ${isActive && (0, _styledComponents.css)`
-      background-color: ${theme.editor.button.hover};
+      background-color: var(--colorsActionMinor200);
     `}
   `}
 `;
-StyledToolbarButton.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledToolbarButton;
 exports.default = _default;

package/lib/components/text-editor/__internal__/toolbar/toolbar.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _button = _interopRequireDefault(require("../../../button/button.style"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledToolbar = _styledComponents.default.div`
@@ -23,19 +21,12 @@ const StyledToolbar = _styledComponents.default.div`
   user-select: none;
   order: 2;
   border: none;
-  ${({
-  theme
-}) => `
-    background-color: ${theme.editor.toolbar.background};
-    border-top: 1px solid ${theme.editor.border};
-  `}
+  border-top: 1px solid var(--colorsUtilityMajor200);
+  background-color: var(--colorsUtilityMajor025);
   min-width: 290px;
   z-index: 10;
 `;
 exports.StyledToolbar = StyledToolbar;
-StyledToolbar.defaultProps = {
-  theme: _base.default
-};
 const StyledEditorStyleControls = _styledComponents.default.div`
   display: inline-block;
   text-align: left;
@@ -44,9 +35,6 @@ const StyledEditorStyleControls = _styledComponents.default.div`
   margin-left: -2px;
 `;
 exports.StyledEditorStyleControls = StyledEditorStyleControls;
-StyledEditorStyleControls.defaultProps = {
-  theme: _base.default
-};
 const StyledEditorActionControls = _styledComponents.default.div`
   display: inline-block;
   text-align: right;
@@ -58,7 +46,4 @@ const StyledEditorActionControls = _styledComponents.default.div`
     min-height: 33px;
   }
 `;
-exports.StyledEditorActionControls = StyledEditorActionControls;
-StyledEditorActionControls.defaultProps = {
-  theme: _base.default
-};
+exports.StyledEditorActionControls = StyledEditorActionControls;

package/lib/components/text-editor/text-editor.style.js

@@ -29,7 +29,6 @@ StyledEditorWrapper.defaultProps = {
 };
 const StyledEditorContainer = _styledComponents.default.div`
   ${({
-  theme,
   hasError,
   rows,
   hasPreview
@@ -50,7 +49,7 @@ const StyledEditorContainer = _styledComponents.default.div`
       min-height: inherit;
       height: 100%;
       min-width: 290px;
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       line-height: ${lineHeight}px;
 
       ${!(0, _browserTypeCheck.isSafari)(navigator) && (0, _styledComponents.css)`
@@ -70,17 +69,13 @@ const StyledEditorContainer = _styledComponents.default.div`
       padding: 14px 8px;
     }
 
-    background-color: ${theme.colors.white};
-    outline: ${hasError ? `2px solid ${theme.colors.error};` : `1px solid ${theme.editor.border};`};
+    background-color: var(--colorsUtilityYang100);
+    outline: ${hasError ? "2px solid var(--colorsSemanticNegative500)" : "1px solid var(--colorsUtilityMajor200)"};
   `}
 `;
 exports.StyledEditorContainer = StyledEditorContainer;
-StyledEditorContainer.defaultProps = {
-  theme: _base.default
-};
 const StyledEditorOutline = _styledComponents.default.div`
   ${({
-  theme,
   isFocused,
   hasError
 }) => (0, _styledComponents.css)`
@@ -88,12 +83,9 @@ const StyledEditorOutline = _styledComponents.default.div`
     min-width: 320px;
 
     ${isFocused && (0, _styledComponents.css)`
-      outline: 3px solid ${theme.colors.focus};
+      outline: 3px solid var(--colorsSemanticFocus500);
       outline-offset: ${hasError ? "2px;" : "1px;"};
     `}
   `}
 `;
-exports.StyledEditorOutline = StyledEditorOutline;
-StyledEditorOutline.defaultProps = {
-  theme: _base.default
-};
+exports.StyledEditorOutline = StyledEditorOutline;

package/package.json

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