carbon-react 104.26.1 → 104.29.0

package/lib/__internal__/sticky-footer/sticky-footer.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; }
@@ -20,24 +16,20 @@ const FormButtonAnimation = (0, _styledComponents.keyframes)`
   100% { transform: translateY(0px); }
 `;
 const StyledStickyFooter = _styledComponents.default.div`
+  padding: var(--spacing200) var(--spacing400);
+  box-sizing: border-box;
+  width: 100%;
   ${({
-  sticky,
-  theme
-}) => (0, _styledComponents.css)`
-    ${sticky && (0, _styledComponents.css)`
+  sticky
+}) => sticky && (0, _styledComponents.css)`
       animation: ${FormButtonAnimation} 0.25s ease;
       position: sticky;
-      width: 100%;
       bottom: 0;
       left: 0;
-      background-color: ${theme.colors.white};
-      box-shadow: 0 -4px 12px rgba(153, 173, 182, 0.05);
+      background-color: var(--colorsComponentsNavigationYang100);
+      box-shadow: var(--boxShadow150);
       z-index: 1000;
     `}
-  `}
 `;
-StyledStickyFooter.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledStickyFooter;
 exports.default = _default;

package/lib/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -18,7 +18,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   display: block;
   width: 25px;
   height: 25px;
-  border: 1px solid #516562;
+  border: 1px solid var(--colorsUtilityYin090);
   ${({
   color
 }) => color && (0, _styledComponents.css)`
@@ -37,7 +37,7 @@ const StyledAdvancedColorPickerCell = _styledComponents.default.button.attrs({
   }
 
   &:focus {
-    outline: solid 3px #ffb500;
+    outline: solid 3px var(--colorsSemanticFocus500);
   }
 
   &::-moz-focus-inner {

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -49,7 +49,7 @@ const StyledAdvancedColorPickerPreview = _styledComponents.default.div`
   width: 25px;
   height: 25px;
   margin-bottom: 15px;
-  border: 1px solid #516562;
+  border: 1px solid var(--colorsUtilityYin090);
 
   ${({
   color
@@ -82,7 +82,7 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
   ${_simpleColorPicker.StyledColorOptions} {
     max-width: 285px;
     ${_simpleColor.default} {
-      border: 1px solid #3c514e;
+      border: 1px solid var(--colorsUtilityYin090);
       margin-right: -1px;
       margin-bottom: -1px;
       transition: all 0.2s ease;
@@ -101,5 +101,9 @@ const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
     top: 20px;
     right: 13px;
   }
+
+  [data-component="icon"] {
+    color: var(--colorsActionMinorYin065);
+  }
 `;
 exports.DialogStyle = DialogStyle;

package/lib/components/drawer/drawer.style.js

@@ -7,8 +7,6 @@ exports.StyledButton = exports.StyledSidebarTitle = exports.StyledDrawerSidebar
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _tabs = _interopRequireDefault(require("../tabs/tabs.style"));
 
 var _box = _interopRequireDefault(require("../box"));
@@ -21,6 +19,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
+const defaultExpandedWidth = "var(--sizing500)";
 const StyledSidebarHeader = _styledComponents.default.div`
   ${({
   isExpanded
@@ -29,14 +28,14 @@ const StyledSidebarHeader = _styledComponents.default.div`
     top: 0;
 
     ${isExpanded && (0, _styledComponents.css)`
-      border-bottom: 1px solid #ccd6db;
+      border-bottom: var(--sizing010) solid #ccd6db;
     `}
   `}
 `;
 exports.StyledSidebarHeader = StyledSidebarHeader;
 const StyledSidebarTitle = _styledComponents.default.div`
   white-space: nowrap;
-  padding: 24px 36px 24px 40px;
+  padding: var(--spacing300) var(--spacing500);
 `;
 exports.StyledSidebarTitle = StyledSidebarTitle;
 const StyledDrawerChildren = _styledComponents.default.div`
@@ -90,9 +89,9 @@ const sidebarHidden = () => (0, _styledComponents.keyframes)`
 
 const drawerOpen = expandedWidth => (0, _styledComponents.keyframes)`
   0% {
-    width: 40px;
+    width: ${defaultExpandedWidth};
     overflow: hidden;
-    min-width: 40px;
+    min-width: ${defaultExpandedWidth};
   }
   100% {
     width: ${expandedWidth};
@@ -102,7 +101,7 @@ const drawerOpen = expandedWidth => (0, _styledComponents.keyframes)`
 
 const drawerClose = expandedWidth => (0, _styledComponents.keyframes)`
   0% {width: ${expandedWidth};}
-  100% {width: 40px;}
+  100% {width: ${defaultExpandedWidth};}
 `;
 
 const buttonOpen = () => (0, _styledComponents.keyframes)`
@@ -119,19 +118,19 @@ const buttonClose = () => (0, _styledComponents.keyframes)`
 const StyledDrawerContent = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
-  min-width: 40px;
-  width: 40px;
+  min-width: ${defaultExpandedWidth};
+  width: ${defaultExpandedWidth};
   min-height: 40px;
   height: auto;
   position: relative;
   overflow: auto;
-  border-right: 1px solid ${({
-  theme
-}) => theme.drawer.divider};
-  background-color: ${({
-  backgroundColor,
-  theme
-}) => backgroundColor || theme.drawer.background}};
+
+  ${({
+  backgroundColor
+}) => (0, _styledComponents.css)`
+    background-color: ${backgroundColor || "var(--colorsUtilityMajor040)"};
+    border-right: 1px solid ${backgroundColor || "var(--colorsUtilityMajor075)"};
+  `};
 
   &.open {
     min-width: 52px;
@@ -150,11 +149,13 @@ const StyledDrawerContent = _styledComponents.default.div`
   animationDuration,
   expandedWidth
 }) => (0, _styledComponents.css)`
-      ${drawerOpen(expandedWidth)} ${animationDuration}
-    `} ease-in-out;
+        ${drawerOpen(expandedWidth)} ${animationDuration}
+      `}
+      ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      animation: ${sidebarVisible} ${({
+      animation: ${sidebarVisible}
+        ${({
   animationDuration
 }) => animationDuration} ease-in-out;
     }
@@ -173,11 +174,13 @@ const StyledDrawerContent = _styledComponents.default.div`
   animationDuration,
   expandedWidth
 }) => (0, _styledComponents.css)`
-      ${drawerClose(expandedWidth)} ${animationDuration}
-    `} ease-in-out;
+        ${drawerClose(expandedWidth)} ${animationDuration}
+      `}
+      ease-in-out;
 
     ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${_stickyFooter.default} {
-      animation: ${sidebarHidden} ${({
+      animation: ${sidebarHidden}
+        ${({
   animationDuration
 }) => animationDuration} ease-in-out;
     }
@@ -189,15 +192,17 @@ const StyledButton = _styledComponents.default.button.attrs({
 })`
   ${({
   animationDuration,
-  isExpanded,
-  theme
+  isExpanded
 }) => (0, _styledComponents.css)`
     position: absolute;
-    top: 24px;
+    top: var(--spacing300);
     right: 8px;
-    padding: 0;
-    width: 24px;
-    height: 24px;
+    padding: var(--spacing100);
+    width: var(--spacing300);
+    height: var(--spacing300);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     transition: margin-right ${animationDuration} ease-in-out;
     background-color: transparent;
     border: none;
@@ -205,7 +210,7 @@ const StyledButton = _styledComponents.default.button.attrs({
     animation: ${buttonClose} ${animationDuration} ease-in-out;
 
     &:focus {
-      outline: 3px solid ${theme.colors.focus};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
@@ -225,10 +230,4 @@ const StyledDrawerWrapper = _styledComponents.default.div`
   height
 }) => height};
 `;
-exports.StyledDrawerWrapper = StyledDrawerWrapper;
-StyledDrawerContent.defaultProps = {
-  theme: _base.default
-};
-StyledButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledDrawerWrapper = StyledDrawerWrapper;

package/lib/components/heading/heading.component.d.ts

@@ -1,7 +1,7 @@
 export default Heading;
 declare class Heading extends React.Component<any, any, any> {
-    constructor(props: Readonly<any>);
-    constructor(props: any, context?: any);
+    constructor(props: any);
+    constructor(props: any, context: any);
     /**
      * Returns the help component.
      *

package/lib/components/multi-step-wizard/step/step.d.ts

@@ -10,8 +10,8 @@ export default Step;
  * @constructor
  */
 declare class Step extends React.Component<any, any, any> {
-    constructor(props: Readonly<any>);
-    constructor(props: any, context?: any);
+    constructor(props: any);
+    constructor(props: any, context: any);
     /**
      * Completes the step's wizard and triggers the custom submit event handler of the step's wizard
      *

package/lib/components/pod/pod.style.js

@@ -46,17 +46,16 @@ const StyledPod = _styledComponents.default.div`
 `;
 exports.StyledPod = StyledPod;
 
-const blockBackgrounds = (variant, theme) => ({
-  primary: theme.colors.white,
-  secondary: theme.pod.secondaryBackground,
-  tertiary: theme.pod.tertiaryBackground,
-  transparent: "transparent",
-  tile: theme.colors.white
+const blockBackgrounds = variant => ({
+  primary: "var(--colorsUtilityYang100)",
+  secondary: "var(--colorsUtilityMajor025)",
+  tertiary: "var(--colorsUtilityMajor050)",
+  transparent: "var(--colorsUtilityMajorTransparent)",
+  tile: "var(--colorsUtilityYang100)"
 })[variant];
 
 const StyledBlock = _styledComponents.default.div`
   ${({
-  theme,
   variant,
   softDelete,
   noBorder,
@@ -70,33 +69,33 @@ const StyledBlock = _styledComponents.default.div`
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      background-color: ${blockBackgrounds(variant, theme)};
+      background-color: ${blockBackgrounds(variant)};
       width: 100%;
       height: 100%;
 
       ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
 
-      ${noBorder ? "border: none" : `border: 1px solid ${theme.pod.border}`};
+      ${noBorder ? "border: none" : `border: 1px solid var(--colorsUtilityMajor100)`};
 
       ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
 
       ${contentTriggersEdit && "cursor: pointer"};
 
       ${(isHovered || isFocused) && (0, _styledComponents.css)`
-        background-color: ${theme.pod.hoverBackground};
+        background-color: var(--colorsUtilityMajor075);
 
-        ${internalEditButton && variant === "tile" && "background-color: transparent;"}
+        ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
 
         ${contentTriggersEdit && (0, _styledComponents.css)`
-          background-color: ${theme.colors.secondary};
+          background-color: var(--colorsActionMajor600);
           * {
-            color: ${theme.colors.white};
+            color: var(--colorsUtilityYang100);
           }
         `}
       `}
 
       ${isFocused && (!internalEditButton || contentTriggersEdit) && (0, _styledComponents.css)`
-        outline: 3px solid ${theme.colors.focus};
+        outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
         ${noBorder ? "" : "padding: 1px"};
       `};
@@ -106,8 +105,8 @@ const StyledBlock = _styledComponents.default.div`
       `};
 
       ${softDelete && (0, _styledComponents.css)`
-        color: ${theme.pod.softDeleteText};
-        background-color: ${theme.pod.tertiaryBackground};
+        color: var(--colorsUtilityYin030);
+        background-color: var(--colorsUtilityMajor050);
       `};
     `}
 `;
@@ -136,22 +135,21 @@ const footerPaddings = {
 };
 const StyledFooter = _styledComponents.default.div`
   ${({
-  theme,
   variant,
   size,
   softDelete
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.pod.footerBackground};
+    background-color: var(--colorsUtilityMajor025);
     box-shadow: inset 0px 1px 1px 0 rgba(0, 0, 0, 0.1);
-    color: ${theme.text.color};
+    color: var(--colorsUtilityYin090);
     padding: ${footerPaddings[size]};
 
     ${softDelete && (0, _styledComponents.css)`
-      color: ${theme.pod.softDeleteText};
+      color: var(--colorsUtilityYin030);
     `}
 
     ${variant === "tile" && (0, _styledComponents.css)`
-      border-top: 1px solid ${theme.pod.border};
+      border-top: 1px solid var(--colorsUtilityMajor100);
     `};
   `}
 `;
@@ -178,16 +176,15 @@ const actionButtonPaddings = {
   "extra-large": 16
 };
 
-const actionButtonBackgrounds = (variant, theme) => ({
-  primary: theme.colors.white,
-  secondary: theme.pod.secondaryBackground,
-  tertiary: theme.pod.tertiaryBackground,
-  transparent: "transparent",
-  tile: theme.colors.white
+const actionButtonBackgrounds = variant => ({
+  primary: "var(--colorsActionMajorYang100)",
+  secondary: "var(--colorsActionMinor050)",
+  tertiary: "var(--colorsActionMinor100)",
+  transparent: "var(--colorsActionMajorTransparent)",
+  tile: "var(--colorsActionMajorYang100)"
 })[variant];
 
 const getButtonStyles = ({
-  theme,
   size,
   variant,
   noBorder,
@@ -198,8 +195,8 @@ const getButtonStyles = ({
   hoverBackgroundColor
 }) => (0, _styledComponents.css)`
   cursor: pointer;
-  background-color: ${actionButtonBackgrounds(variant, theme)};
-  border: 1px solid ${theme.pod.border};
+  background-color: ${actionButtonBackgrounds(variant)};
+  border: 1px solid var(--colorsActionMinor200);
   margin-left: 8px;
   margin-bottom: 8px;
   box-sizing: content-box;
@@ -218,20 +215,20 @@ const getButtonStyles = ({
 
   ${internalEditButton && (0, _styledComponents.css)`
     border: none;
-    background: transparent;
+    background: var(--colorsActionMajorTransparent);
   `}
     
   ${(isHovered || isFocused) && !internalEditButton && (0, _styledComponents.css)`
     background-color: ${hoverBackgroundColor};
-    color: ${theme.colors.white};
+    color: var(--colorsActionMajorYang100);
 
     ${_icon.default} {
-      color: ${theme.colors.white};
+      color: var(--colorsActionMajorYang100);
     }
   `}
   
   ${isFocused && (0, _styledComponents.css)`
-    outline: 3px solid ${theme.colors.focus};
+    outline: 3px solid var(--colorsSemanticFocus500);
     border: none;
     padding: ${actionButtonPaddings[size] + (noBorder || internalEditButton ? 0 : 1)}px;
   `};
@@ -247,8 +244,8 @@ const StyledEditAction = (0, _styledComponents.default)(_link.default)`
 }) => displayOnlyOnHover && !(isHovered || isFocused) && "display: none;"}
 
     ${props => getButtonStyles({ ...props,
-  iconColor: props.theme.colors.primary,
-  hoverBackgroundColor: props.theme.colors.secondary
+  iconColor: "var(--colorsActionMajor500)",
+  hoverBackgroundColor: "var(--colorsActionMajor600)"
 })}
   }
 
@@ -264,8 +261,8 @@ const StyledDeleteButton = (0, _styledComponents.default)(_iconButton.default)`
   displayOnlyOnHover
 }) => displayOnlyOnHover && "display: none;"}
     ${props => getButtonStyles({ ...props,
-  iconColor: props.theme.colors.error,
-  hoverBackgroundColor: props.theme.colors.destructive.hover
+  iconColor: "var(--colorsSemanticNegative500)",
+  hoverBackgroundColor: "var(--colorsSemanticNegative600)"
 })}
   }
 `;
@@ -278,8 +275,8 @@ const StyledUndoButton = (0, _styledComponents.default)(_iconButton.default)`
   isFocused
 }) => displayOnlyOnHover && !(isHovered || isFocused) && "display: none;"}
     ${props => getButtonStyles({ ...props,
-  iconColor: props.theme.colors.primary,
-  hoverBackgroundColor: props.theme.colors.secondary
+  iconColor: "var(--colorsActionMajor500)",
+  hoverBackgroundColor: "var(--colorsActionMajor600)"
 })}
   }
 `;
@@ -318,36 +315,6 @@ const StyledTitle = _styledComponents.default.h4`
   font-weight: 600;
 `;
 exports.StyledTitle = StyledTitle;
-StyledBlock.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledContent.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledEditAction.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledDeleteButton.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledUndoButton.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledActionsContainer.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledFooter.defaultProps = {
-  theme: _themes.baseTheme
-};
 StyledPod.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledHeader.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledSubtitle.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledTitle.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -19,8 +19,6 @@ var _form = _interopRequireDefault(require("../form"));
 
 var _button = _interopRequireDefault(require("../button"));
 
-var _deleteButton = _interopRequireDefault(require("./delete-button.style"));
-
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
@@ -111,8 +109,9 @@ const ShowEditPod = ({
 
   const deleteButton = () => {
     const label = deleteText || locale.actions.delete();
-    return /*#__PURE__*/_react.default.createElement(_deleteButton.default, {
+    return /*#__PURE__*/_react.default.createElement(_button.default, {
       buttonType: "tertiary",
+      destructive: true,
       "data-element": "delete-button",
       size: "small",
       onClick: onDelete

package/lib/components/show-edit-pod/show-edit-pod.style.js

@@ -13,10 +13,6 @@ var _podStyle = require("../pod/pod.style.js");
 
 var _pod = _interopRequireDefault(require("../pod"));
 
-var _deleteButtonStyle = _interopRequireDefault(require("./delete-button.style.js"));
-
-var _themes = require("../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledPod = (0, _styledComponents.default)(_pod.default)`
@@ -28,18 +24,6 @@ const StyledPod = (0, _styledComponents.default)(_pod.default)`
     padding: 16px;
   }
 
-  ${_deleteButtonStyle.default} {
-    color: ${({
-  theme
-}) => theme.colors.error};
-
-    &:hover {
-      color: ${({
-  theme
-}) => theme.colors.destructive.hover};
-    }
-  }
-
   .common-input__prefix {
     z-index: 5;
   }
@@ -58,8 +42,5 @@ const StyledPod = (0, _styledComponents.default)(_pod.default)`
     position: absolute;
   }
 `;
-StyledPod.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledPod;
 exports.default = _default;

package/lib/components/simple-color-picker/simple-color/simple-color.style.js

@@ -10,8 +10,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledSimpleColor = _styledComponents.default.div`
-  width: 56px;
-  height: 56px;
+  width: var(--sizing700);
+  height: var(--sizing700);
   margin-right: 2px;
   margin-bottom: 2px;
 

package/lib/components/simple-color-picker/simple-color-input/simple-color-input.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _input = require("../../../__internal__/input");
 
 var _colorSampleBox = _interopRequireDefault(require("../color-sample-box/color-sample-box.style"));
@@ -18,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   position: absolute;
   opacity: 0;
-  height: 56px;
-  width: 56px;
+  height: var(--sizing700);
+  width: var(--sizing700);
   margin: 0;
 
   &:hover {
@@ -31,16 +29,10 @@ const StyledSimpleColorInput = (0, _styledComponents.default)(_input.Input)`
   }
 
   &:focus + ${_colorSampleBox.default} {
-    box-shadow: inset 0px 0px 0px 3px ${({
-  theme
-}) => theme.colors.white};
-    border: 2px solid ${({
-  theme
-}) => theme.colors.focus};
+    box-shadow: inset 0px 0px 0px var(--borderWidth200)
+      var(--colorsActionMajorYang100);
+    border: 2px solid var(--colorsSemanticFocus500);
   }
 `;
-StyledSimpleColorInput.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledSimpleColorInput;
 exports.default = _default;

package/lib/components/simple-color-picker/simple-color-picker.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 
-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; }
@@ -43,24 +41,20 @@ const StyledColorOptions = _styledComponents.default.div`
   border-top: ${BORDER_WIDTH}px solid transparent;
 
   ${({
-  theme,
   error,
   info,
   warning
 }) => {
   if (error) return (0, _styledComponents.css)`
-        outline: 2px solid ${theme.colors.error};
+        outline: var(--borderWidth200) solid var(--colorsSemanticNegative500);
       `;
   if (warning) return (0, _styledComponents.css)`
-        outline: 1px solid ${theme.colors.warning};
+        outline: var(--borderWidth200) solid var(--colorsSemanticCaution500);
       `;
   if (info) return (0, _styledComponents.css)`
-        outline: 1px solid ${theme.colors.info};
+        outline: var(--borderWidth200) solid var(--colorsSemanticInfo500);
       `;
   return "";
 }}
 `;
-exports.StyledColorOptions = StyledColorOptions;
-StyledColorOptions.defaultProps = {
-  theme: _base.default
-};
+exports.StyledColorOptions = StyledColorOptions;

package/lib/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -11,15 +11,13 @@ var _icon = _interopRequireDefault(require("../../icon"));
 
 var _getRgbValues = _interopRequireDefault(require("../../../style/utils/get-rgb-values"));
 
-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; }
 
-const getIconColor = (color, theme) => {
+const getIconColor = color => {
   const rgbValues = (0, _getRgbValues.default)(color);
   const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
 
@@ -27,8 +25,8 @@ const getIconColor = (color, theme) => {
         greenMultiplier = 587,
         blueMultiplier = 114;
   const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return theme.colors.white;
-  return theme.text.color;
+  if (contrast < 128) return "var(--colorsActionMajorYang100)";
+  return "var(--colorsActionMajorYin090)";
 };
 
 const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
@@ -40,9 +38,8 @@ const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
   &::before {
     font-size: 22px;
     color: ${({
-  color,
-  theme
-}) => getIconColor(color, theme)};
+  color
+}) => getIconColor(color)};
   }
 
   ${({
@@ -53,8 +50,5 @@ const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
       }
     `}
 `;
-StyledTickIcon.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledTickIcon;
 exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -169,15 +169,6 @@ declare function _default(palette: any): {
         color: any;
         hover: any;
     };
-    pod: {
-        border: any;
-        secondaryBackground: any;
-        tertiaryBackground: any;
-        softDeleteText: any;
-        tileBackground: string;
-        footerBackground: any;
-        hoverBackground: any;
-    };
     text: {
         color: any;
         placeholder: any;

package/lib/style/themes/base/base-theme.config.js

@@ -188,15 +188,6 @@ var _default = palette => {
       color: palette.blackOpacity(0.65),
       hover: palette.blackOpacity(0.9)
     },
-    pod: {
-      border: palette.slateTint(80),
-      secondaryBackground: palette.slateTint(95),
-      tertiaryBackground: palette.slateTint(90),
-      softDeleteText: palette.blackOpacity(0.3),
-      tileBackground: "#FFFFFF",
-      footerBackground: palette.slateTint(95),
-      hoverBackground: palette.slateTint(85)
-    },
     text: {
       color: palette.blackOpacity(0.9),
       placeholder: palette.blackOpacity(0.55),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.26.1",
+  "version": "104.29.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -51,8 +51,8 @@
   "homepage": "https://carbon.sage.com",
   "peerDependencies": {
     "draft-js": "^0.11.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
@@ -87,8 +87,8 @@
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",
     "@types/node": "10.12.18",
-    "@types/react": "16.9.31",
-    "@types/react-dom": "16.0.11",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.8",
     "@types/styled-components": "^5.1.9",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -139,9 +139,9 @@
     "mockdate": "^2.0.2",
     "prettier": "^2.1.2",
     "raf": "^3.4.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
     "semantic-release": "^19.0.2",
     "semver": "^7.3.5",

package/lib/components/show-edit-pod/delete-button.style.d.ts

@@ -1,3 +0,0 @@
-export default StyledDeleteButton;
-declare const StyledDeleteButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
-import Button from "../button";

package/lib/components/show-edit-pod/delete-button.style.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _button = _interopRequireDefault(require("../button"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const StyledDeleteButton = (0, _styledComponents.default)(_button.default)`
-  padding-right: 0px;
-  padding-left: 0px;
-  margin-right: 0px;
-`;
-var _default = StyledDeleteButton;
-exports.default = _default;