carbon-react 104.21.1 → 104.24.0

package/lib/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -9,10 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _heading = require("../../components/heading/heading.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; }
 
 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; }
@@ -26,9 +22,7 @@ const StyledFullScreenHeading = _styledComponents.default.div`
   ${({
   hasContent
 }) => hasContent && (0, _styledComponents.css)`
-      border-bottom: 1px solid ${({
-  theme
-}) => theme.disabled.border};
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
     `}
   display: flex;
   justify-content: space-between;
@@ -56,8 +50,5 @@ const StyledFullScreenHeading = _styledComponents.default.div`
     }
   }
 `;
-StyledFullScreenHeading.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledFullScreenHeading;
 exports.default = _default;

package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -37,19 +37,30 @@ const FlatTableCheckbox = ({
     }
   }, [reportCellWidth, cellIndex]);
   const dataElement = `flat-table-checkbox-${as === "td" ? "cell" : "header"}`;
+
+  const handleClick = event => {
+    event.stopPropagation();
+    if (onClick) onClick(event);
+  };
+
+  const handleKeyDown = event => {
+    event.stopPropagation();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, {
     ref: ref,
     makeCellSticky: !!reportCellWidth,
     leftPosition: leftPosition || 0,
     "data-element": dataElement,
-    as: as,
-    onClick: onClick
+    as: as
   }, selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",
     mb: 0,
-    ariaLabelledBy: ariaLabelledBy
+    ariaLabelledBy: ariaLabelledBy,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
   }));
 };
 

package/lib/components/heading/heading.style.js

@@ -78,9 +78,7 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
 
     &:focus {
       background-color: transparent;
-      outline: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      outline: 3px solid var(--colorsSemanticFocus500);
     }
 
     ${_icon2.default} {
@@ -90,9 +88,6 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
   }
 `;
 exports.StyledHeadingBackButton = StyledHeadingBackButton;
-StyledHeadingBackButton.defaultProps = {
-  theme: _base.default
-};
 const StyledHeadingTitle = (0, _styledComponents.default)(_typography.default)`
   line-height: 32px;
   ${({
@@ -127,9 +122,7 @@ const StyledSubHeader = _styledComponents.default.div`
 `;
 exports.StyledSubHeader = StyledSubHeader;
 const StyledHeadingIcon = (0, _styledComponents.default)(_icon.default)`
-  color: ${({
-  theme
-}) => theme.colors.border};
+  color: var(--colorsActionMinor500);
   height: 30px;
 
   &:before,
@@ -138,19 +131,12 @@ const StyledHeadingIcon = (0, _styledComponents.default)(_icon.default)`
   }
 
   &:hover {
-    color: ${({
-  theme
-}) => theme.icon.focus};
+    color: var(--colorsActionMinor600);
   }
 `;
 exports.StyledHeadingIcon = StyledHeadingIcon;
-StyledHeadingIcon.defaultProps = {
-  theme: _base.default
-};
 const StyledSeparator = _styledComponents.default.hr`
-  border-top: 2px solid ${({
-  theme
-}) => theme.palette.slateTint(80)};
+  border-top: 2px solid var(--colorsUtilityMajor100);
   margin: 10px 0 8px;
   text-align: left;
   width: 50px;
@@ -160,9 +146,6 @@ const StyledDivider = (0, _styledComponents.default)(_hr.default)`
   margin: 15px 0 20px;
 `;
 exports.StyledDivider = StyledDivider;
-StyledSeparator.defaultProps = {
-  theme: _base.default
-};
 const StyledHeaderHelp = (0, _styledComponents.default)(_help.default)`
   display: inline-block;
   margin-left: -6px;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -17,10 +17,10 @@ var _menuItem = _interopRequireDefault(require("../../menu-item/menu-item.style"
 
 var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
 
-var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block/scrollable-block.style"));
-
 var _search = _interopRequireDefault(require("../../../search/search.style"));
 
+var _menu2 = _interopRequireDefault(require("../../menu.config"));
+
 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; }
@@ -42,15 +42,14 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
   ${({
   inFullscreenView,
   menuType,
-  asPassiveItem,
-  theme
+  asPassiveItem
 }) => inFullscreenView && (0, _styledComponents.css)`
       width: 100%;
 
       ${asPassiveItem && (0, _styledComponents.css)`
         ${_menuItem.default} {
           outline: none;
-          color: ${theme.menu[menuType].title};
+          color: ${_menu2.default[menuType].title};
         }
       `}
     `}
@@ -59,16 +58,14 @@ exports.StyledSubmenuWrapper = StyledSubmenuWrapper;
 const StyledSubmenu = _styledComponents.default.ul`
   ${({
   menuType,
-  theme,
   submenuDirection,
   variant,
   inFullscreenView
 }) => (0, _styledComponents.css)`
     ${!inFullscreenView && (0, _styledComponents.css)`
-      box-shadow: 0 5px 5px 0 rgba(0, 20, 29, 0.2),
-        0 10px 10px 0 rgba(0, 20, 29, 0.1);
+      box-shadow: var(--boxShadow100);
       position: absolute;
-      background: ${variant === "default" ? theme.menu[menuType].submenuBackground : theme.menu[menuType].background};
+      background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
       a,
       button,
       ${_link.StyledLink} a,
@@ -93,17 +90,6 @@ const StyledSubmenu = _styledComponents.default.ul`
       display: none;
     }
 
-    .carbon-menu-item--has-link:hover {
-      background: ${theme.colors.primary};
-      cursor: pointer;
-      color: white;
-      text-decoration: none;
-
-      [data-component="icon"] {
-        color: white;
-      }
-    }
-
     ${_menuItem.default} {
       display: flex;
       align-items: center;
@@ -112,13 +98,24 @@ const StyledSubmenu = _styledComponents.default.ul`
       white-space: nowrap;
       cursor: pointer;
 
-      ${!inFullscreenView && `background-color: ${theme.menu[menuType].submenuBackground};`}
+      ${!inFullscreenView && (0, _styledComponents.css)`
+        background-color: ${_menu2.default[menuType].submenuItemBackground};
 
-      &:hover,
-      &:hover a,
-      a &:hover {
-        color: ${theme.colors.white};
-      }
+        a:focus,
+        button:focus {
+          background-color: ${_menu2.default[menuType].submenuItemBackground};
+        }
+
+        a:hover,
+        button:hover {
+          background-color: ${_menu2.default[menuType].submenuItemBackgroundHover};
+          color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
+        }
+      `}
 
       a {
         text-decoration: none;
@@ -131,10 +128,16 @@ const StyledSubmenu = _styledComponents.default.ul`
       }
 
       ${_search.default} span > [data-component="icon"] {
-        color: ${theme.menu[menuType].searchIcon};
+        color: var(--colorsUtilityMajor200);
 
         &:hover {
-          color: ${theme.menu[menuType].searchIconHover};
+          color: var(--colorsUtilityMajor150);
+        }
+      }
+
+      ${_search.default} {
+        :hover {
+          border-bottom-color: var(--colorsUtilityMajor150);
         }
       }
     }
@@ -167,24 +170,12 @@ const StyledSubmenu = _styledComponents.default.ul`
       width: 100%;
     }
 
-    > *:not(${_menu.StyledMenuItem}):not(${_scrollableBlock.default}) {
-      padding: 8px 15px 10px;
-      background-color: ${theme.colors.white};
-
-      ${menuType === "dark" && (0, _styledComponents.css)`
-        background-color: #1b1d21;
-      `}
-    }
-
     ${submenuDirection === "left" && (0, _styledComponents.css)`
       right: 0;
     `}
   `}
 `;
 exports.StyledSubmenu = StyledSubmenu;
-StyledSubmenu.defaultProps = {
-  theme: _themes.baseTheme
-};
 StyledSubmenuWrapper.defaultProps = {
   theme: _themes.baseTheme
 };

package/lib/components/menu/menu-divider/menu-divider.style.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
+var _menu = _interopRequireDefault(require("../menu.config"));
+
+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; }
 
@@ -17,16 +19,12 @@ const StyledDivider = _styledComponents.default.div`
   cursor: default;
   ${({
   menuType,
-  theme,
   size
 }) => (0, _styledComponents.css)`
     margin: 0px ${size === "large" ? "" : "16px"};
     height: ${size === "large" ? "4px" : "1px"};
-    background: ${theme.menu[menuType].divider};
+    background-color: ${_menu.default[menuType].divider};
   `}
 `;
-StyledDivider.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledDivider;
 exports.default = _default;

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -19,6 +19,8 @@ var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
 var _button = _interopRequireDefault(require("../../button/button.style"));
 
+var _menu = _interopRequireDefault(require("../menu.config"));
+
 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; }
@@ -44,25 +46,25 @@ const StyledMenuFullscreen = _styledComponents.default.div`
   startPosition,
   theme
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.menu[menuType].background};
+    background-color: ${_menu.default[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
     ${menuType === "dark" && (0, _styledComponents.css)`
       ${_search.default} span > [data-component="icon"] {
-        color: ${theme.menu.dark.searchIcon};
+        color: var(--colorsUtilityMajor200);
 
         &:hover {
-          color: ${theme.menu.dark.searchIconHover};
+          color: var(--colorsUtilityMajor150);
         }
       }
     `}
 
     ${menuType === "light" && (0, _styledComponents.css)`
       ${_search.default} span > [data-component="icon"] {
-        color: ${theme.search.icon};
+        color: var(--colorsUtilityMajor200);
 
         &:hover {
-          color: ${theme.search.iconHover};
+          color: var(--colorsUtilityMajor400);
         }
       }
     `}
@@ -117,16 +119,12 @@ const StyledMenuFullscreenHeader = _styledComponents.default.div`
   }
 
   ${({
-  menuType,
-  theme
+  menuType
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.menu[menuType].submenuBackground};
+    background-color: ${_menu.default[menuType].submenuItemBackground};
   `}
 `;
 exports.StyledMenuFullscreenHeader = StyledMenuFullscreenHeader;
 StyledMenuFullscreen.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledMenuFullscreenHeader.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/components/menu/menu-item/menu-item.style.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 var _link = require("../../link/link.style");
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
+var _menu = _interopRequireDefault(require("../menu.config"));
+
 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; }
@@ -22,7 +22,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledMenuItemWrapper = _styledComponents.default.a`
   ${({
   menuType,
-  theme,
   selected,
   hasSubmenu,
   isOpen,
@@ -41,7 +40,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${theme.menu[menuType].background};
+    background-color: ${_menu.default[menuType].background};
 
     ${!inFullscreenView && (0, _styledComponents.css)`
       max-width: inherit;
@@ -57,21 +56,27 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           vertical-align: bottom;
         `}
       }
-    `}
 
-    && a:focus,
-    && button:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px ${theme.colors.focus};
-      background: ${theme.colors.primary};
-      color: ${theme.colors.white};
-      z-index: 1;
-      position: relative;
-
-      [data-component="icon"] {
-        color: ${theme.colors.white};
+      a:focus,
+      button:focus {
+        box-shadow: inset 0 0 0 var(--borderWidth300)
+          var(--colorsSemanticFocus500);
+        background-color: ${_menu.default[menuType].background};
+        color: ${_menu.default[menuType].color};
+        z-index: 1;
+        position: relative;
       }
-    }
+
+      a:hover,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+        color: var(--colorsComponentsMenuYang100);
+
+        [data-component="icon"] {
+          color: var(--colorsComponentsMenuYang100);
+        }
+      }
+    `}
 
     a,
     ${_link.StyledLink} a,
@@ -96,86 +101,93 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     ${_link.StyledLink} [data-component="icon"] {
       font-weight: 700;
       text-decoration: none;
-      color: ${theme.menu[menuType].text};
-    }
-
-    a:hover,
-    a:focus,
-    button:hover,
-    button:focus {
-      color: ${theme.colors.white};
-      background: transparent;
-    }
-
-    a:focus,
-    button:focus,
-    ${_link.StyledLink} a:focus,
-    ${_link.StyledLink} button:focus {
-      color: ${theme.colors.white};
-      box-shadow: inset 0 0 0 2px ${theme.colors.focus};
-      background: ${theme.colors.primary};
-      z-index: 1;
-      position: relative;
+      color: ${_menu.default[menuType].color};
     }
 
     ${_icon.default} {
       bottom: 1px;
     }
 
-    :hover {
-      background: ${theme.colors.primary};
+    ${selected && (0, _styledComponents.css)`
+      background-color: ${_menu.default[menuType].selected};
 
-      a,
-      button,
-      [data-component="icon"] {
-        color: ${theme.colors.white};
+      a:focus,
+      button:focus {
+        background-color: ${_menu.default[menuType].selected};
       }
-    }
 
-    ${variant === "alternate" && (0, _styledComponents.css)`
-      &&& {
-        background-color: ${theme.menu[menuType].alternate};
+      a:hover,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
       }
     `}
 
-    ${selected && (0, _styledComponents.css)`
-      background-color: ${theme.menu[menuType].selected};
+    ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
+      &&& {
+        background-color: ${_menu.default[menuType].alternate};
+      }
+
+      &&& a:focus,
+      &&& button:focus {
+        background-color: ${_menu.default[menuType].alternate};
+      }
+
+      &&& a:hover,
+      &&& button:hover {
+        background-color: ${_menu.default[menuType].alternateHover};
+      }
     `}
 
     ${isOpen && (0, _styledComponents.css)`
-      background-color: ${theme.menu[menuType].submenuBackground};
-      color: ${theme.colors.white};
+      a,
+      button {
+        background-color: ${_menu.default[menuType].submenuOpenedBackground};
+        color: ${_menu.default[menuType].color};
+      }
     `} 
     
     ${hasSubmenu && (0, _styledComponents.css)`
+      background-color: ${_menu.default[menuType].submenuBackground};
+
+      a:focus,
+      button:focus {
+        background-color: ${_menu.default[menuType].submenuBackground};
+        color: ${_menu.default[menuType].color};
+
+        [data-component="icon"] {
+          color: ${_menu.default[menuType].color};
+        }
+
+        ${clickToOpen && isOpen && (0, _styledComponents.css)`
+          background-color: ${_menu.default[menuType].submenuOpenedBackground};
+        `}
+      }
+
       a:hover,
       button:hover {
         ${!(href || clickToOpen) && (0, _styledComponents.css)`
           cursor: default;
         `}
+        background-color: ${_menu.default[menuType].submenuOpenedBackground};
+        color: ${_menu.default[menuType].color};
+
+        [data-component="icon"] {
+          color: ${_menu.default[menuType].color};
+        }
       }
 
-      ${!href && (0, _styledComponents.css)`
-        && a:hover,
-        && button:hover {
-          background-color: ${theme.menu[menuType].submenuBackground};
-          color: ${theme.menu[menuType].text};
+      ${selected && (0, _styledComponents.css)`
+        background-color: ${_menu.default[menuType].submenuSelected};
 
-          [data-component="icon"] {
-            color: ${theme.menu[menuType].text};
-          }
+        a:focus,
+        button:focus {
+          background-color: ${_menu.default[menuType].submenuSelected};
         }
 
-        && a:focus,
-        && button:focus {
-          background-color: ${theme.menu[menuType].submenuBackground};
-          color: ${theme.menu[menuType].text};
-
-          a,
-          button,
-          [data-component="icon"] {
-            color: ${theme.menu[menuType].text};
-          }
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          color: var(--colorsComponentsMenuYang100);
         }
       `}
 
@@ -183,13 +195,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
         > a,
         > button {
           padding-right: 32px;
-
-          ${href && (0, _styledComponents.css)`
-            &:hover::before,
-            &:focus::before {
-              border-top-color: ${theme.colors.white};
-            }
-          `}
         }
 
         a::before,
@@ -204,7 +209,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           content: "";
           width: 0;
           height: 0;
-          border-top: 5px solid ${theme.menu[menuType].text};
+          border-top: 5px solid ${_menu.default[menuType].text};
           border-right: 4px solid transparent;
           border-bottom: 4px solid transparent;
           border-left: 4px solid transparent;
@@ -225,11 +230,36 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           background: transparent;
         }
       `}
+
+      a,
+      ${_link.StyledLink} a,
+      button,
+      ${_link.StyledLink} button {
+        width: 100vw;
+        box-sizing: border-box;
+      }
+
+      a:focus,
+      button:focus {
+        box-shadow: inset 0 0 0 var(--borderWidth300)
+          var(--colorsSemanticFocus500);
+        z-index: 1;
+        position: relative;
+      }
+
+      a:focus,
+      a:hover,
+      button:focus,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+        color: var(--colorsComponentsMenuYang100);
+
+        [data-component="icon"] {
+          color: var(--colorsComponentsMenuYang100);
+        }
+      }
     `}
   `}
 `;
-StyledMenuItemWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledMenuItemWrapper;
 exports.default = _default;

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
+var _menu = _interopRequireDefault(require("../menu.config"));
+
+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; }
 
@@ -16,7 +18,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledTitle = _styledComponents.default.div`
   ${({
   menuType,
-  theme,
   variant
 }) => (0, _styledComponents.css)`
     padding: 16px 16px 8px;
@@ -25,12 +26,9 @@ const StyledTitle = _styledComponents.default.div`
     text-transform: uppercase;
     line-height: 12px;
     cursor: default;
-    color: ${theme.menu[menuType].title};
-    ${variant === "alternate" ? `background: ${theme.menu[menuType].alternate};` : ""};
+    color: ${_menu.default[menuType].title};
+    ${variant === "alternate" && `background-color: ${_menu.default[menuType].alternate};`};
   `}
 `;
-StyledTitle.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledTitle;
 exports.default = _default;

package/lib/components/menu/menu.config.d.ts

@@ -0,0 +1,95 @@
+declare namespace _default {
+    namespace light {
+        const background: string;
+        const color: string;
+        const selected: string;
+        const submenuOpenedBackground: string;
+        const submenuBackground: string;
+        const submenuSelected: string;
+        const submenuItemBackground: string;
+        const submenuItemBackgroundHover: string;
+        const title: string;
+        const alternate: string;
+        const alternateHover: string;
+        const divider: string;
+    }
+    namespace dark {
+        const background_1: string;
+        export { background_1 as background };
+        const color_1: string;
+        export { color_1 as color };
+        const selected_1: string;
+        export { selected_1 as selected };
+        const submenuOpenedBackground_1: string;
+        export { submenuOpenedBackground_1 as submenuOpenedBackground };
+        const submenuBackground_1: string;
+        export { submenuBackground_1 as submenuBackground };
+        const submenuSelected_1: string;
+        export { submenuSelected_1 as submenuSelected };
+        const submenuItemBackground_1: string;
+        export { submenuItemBackground_1 as submenuItemBackground };
+        const submenuItemBackgroundHover_1: string;
+        export { submenuItemBackgroundHover_1 as submenuItemBackgroundHover };
+        const title_1: string;
+        export { title_1 as title };
+        const alternate_1: string;
+        export { alternate_1 as alternate };
+        const alternateHover_1: string;
+        export { alternateHover_1 as alternateHover };
+        const divider_1: string;
+        export { divider_1 as divider };
+    }
+    namespace black {
+        const background_2: string;
+        export { background_2 as background };
+        const color_2: string;
+        export { color_2 as color };
+        const selected_2: string;
+        export { selected_2 as selected };
+        const submenuOpenedBackground_2: string;
+        export { submenuOpenedBackground_2 as submenuOpenedBackground };
+        const submenuBackground_2: string;
+        export { submenuBackground_2 as submenuBackground };
+        const submenuSelected_2: string;
+        export { submenuSelected_2 as submenuSelected };
+        const submenuItemBackground_2: string;
+        export { submenuItemBackground_2 as submenuItemBackground };
+        const submenuItemBackgroundHover_2: string;
+        export { submenuItemBackgroundHover_2 as submenuItemBackgroundHover };
+        const title_2: string;
+        export { title_2 as title };
+        const alternate_2: string;
+        export { alternate_2 as alternate };
+        const alternateHover_2: string;
+        export { alternateHover_2 as alternateHover };
+        const divider_2: string;
+        export { divider_2 as divider };
+    }
+    namespace white {
+        const background_3: string;
+        export { background_3 as background };
+        const color_3: string;
+        export { color_3 as color };
+        const selected_3: string;
+        export { selected_3 as selected };
+        const submenuOpenedBackground_3: string;
+        export { submenuOpenedBackground_3 as submenuOpenedBackground };
+        const submenuBackground_3: string;
+        export { submenuBackground_3 as submenuBackground };
+        const submenuSelected_3: string;
+        export { submenuSelected_3 as submenuSelected };
+        const submenuItemBackground_3: string;
+        export { submenuItemBackground_3 as submenuItemBackground };
+        const submenuItemBackgroundHover_3: string;
+        export { submenuItemBackgroundHover_3 as submenuItemBackgroundHover };
+        const title_3: string;
+        export { title_3 as title };
+        const alternate_3: string;
+        export { alternate_3 as alternate };
+        const alternateHover_3: string;
+        export { alternateHover_3 as alternateHover };
+        const divider_3: string;
+        export { divider_3 as divider };
+    }
+}
+export default _default;

package/lib/components/menu/menu.config.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  light: {
+    background: "var(--colorsComponentsMenuSpringStandard500)",
+    color: "var(--colorsComponentsMenuYin090)",
+    selected: "var(--colorsComponentsMenuSpringStandard700)",
+    submenuOpenedBackground: "var(--colorsComponentsMenuSpringParent600)",
+    submenuBackground: "var(--colorsComponentsMenuSpringParent500)",
+    submenuSelected: "var(--colorsComponentsMenuSpringParent700)",
+    submenuItemBackground: "var(--colorsComponentsMenuSpringChild500)",
+    submenuItemBackgroundHover: "var(--colorsComponentsMenuSpringChild600)",
+    title: "var(--colorsComponentsMenuYin065)",
+    alternate: "var(--colorsComponentsMenuSpringChildAlt500)",
+    alternateHover: "var(--colorsComponentsMenuSpringChildAlt600)",
+    divider: "var(--colorsComponentsMenuSpringChild400)"
+  },
+  dark: {
+    background: "var(--colorsComponentsMenuAutumnStandard500)",
+    color: "var(--colorsComponentsMenuYang100)",
+    selected: "var(--colorsComponentsMenuAutumnStandard700)",
+    submenuOpenedBackground: "var(--colorsComponentsMenuAutumnParent600)",
+    submenuBackground: "var(--colorsComponentsMenuAutumnParent500)",
+    submenuSelected: "var(--colorsComponentsMenuAutumnParent700)",
+    submenuItemBackground: "var(--colorsComponentsMenuAutumnChild500)",
+    submenuItemBackgroundHover: "var(--colorsComponentsMenuAutumnChild600)",
+    title: "var(--colorsComponentsMenuYang080)",
+    alternate: "var(--colorsComponentsMenuAutumnChildAlt500)",
+    alternateHover: "var(--colorsComponentsMenuAutumnChildAlt600)",
+    divider: "var(--colorsComponentsMenuAutumnChild400)"
+  },
+  black: {
+    background: "var(--colorsComponentsMenuWinterStandard500)",
+    color: "var(--colorsComponentsMenuYang100)",
+    selected: "var(--colorsComponentsMenuWinterStandard700)",
+    submenuOpenedBackground: "var(--colorsComponentsMenuWinterParent600)",
+    submenuBackground: "var(--colorsComponentsMenuWinterParent500)",
+    submenuSelected: "var(--colorsComponentsMenuWinterParent700)",
+    submenuItemBackground: "var(--colorsComponentsMenuWinterChild500)",
+    submenuItemBackgroundHover: "var(--colorsComponentsMenuWinterChild600)",
+    title: "var(--colorsComponentsMenuYang080)",
+    alternate: "var(--colorsComponentsMenuWinterChildAlt500)",
+    alternateHover: "var(--colorsComponentsMenuWinterChildAlt600)",
+    divider: "var(--colorsComponentsMenuWinterChild400)"
+  },
+  white: {
+    background: "var(--colorsComponentsMenuSummerStandard500)",
+    color: "var(--colorsComponentsMenuYin090)",
+    selected: "var(--colorsComponentsMenuSummerStandard700)",
+    submenuOpenedBackground: "var(--colorsComponentsMenuSummerParent600)",
+    submenuBackground: "var(--colorsComponentsMenuSummerParent500)",
+    submenuSelected: "var(--colorsComponentsMenuSummerParent700)",
+    submenuItemBackground: "var(--colorsComponentsMenuSummerChild500)",
+    submenuItemBackgroundHover: "var(--colorsComponentsMenuSummerChild600)",
+    title: "var(--colorsComponentsMenuYin065)",
+    alternate: "var(--colorsComponentsMenuSummerChildAlt500)",
+    alternateHover: "var(--colorsComponentsMenuSummerChildAlt600)",
+    divider: "var(--colorsComponentsMenuSummerChild400)"
+  }
+};
+exports.default = _default;

package/lib/components/menu/menu.style.js

@@ -9,12 +9,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-var _verticalDivider = require("../vertical-divider/vertical-divider.style");
+var _menu = _interopRequireDefault(require("./menu.config"));
 
-var _themes = require("../../style/themes");
+var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 
 var _link = require("../link/link.style");
 
+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; }
@@ -31,15 +33,14 @@ const StyledMenuWrapper = _styledComponents.default.ul`
 
   ${_verticalDivider.StyledVerticalWrapper} {
     ${({
-  menuType,
-  theme
+  menuType
 }) => (0, _styledComponents.css)`
       display: inline-block;
       vertical-align: bottom;
-      background-color: ${theme.menu[menuType].background};
+      background-color: ${_menu.default[menuType].background};
 
       ${menuType === "dark" && (0, _styledComponents.css)`
-        color: ${theme.colors.white};
+        color: ${_menu.default[menuType].color};
       `}
     `}
 
@@ -80,7 +81,4 @@ const StyledMenuItem = _styledComponents.default.li`
       }
     `}
 `;
-exports.StyledMenuItem = StyledMenuItem;
-StyledMenuWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledMenuItem = StyledMenuItem;

package/lib/components/menu/scrollable-block/scrollable-block.style.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 var _menuItem = _interopRequireDefault(require("../menu-item/menu-item.style"));
 
+var _menu = _interopRequireDefault(require("../menu.config"));
+
 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,16 +20,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledScrollableBlock = _styledComponents.default.div`
   ${({
   menuType,
-  variant,
-  theme
+  variant
 }) => (0, _styledComponents.css)`
     && ${_menuItem.default} {
-      background-color: ${variant === "default" ? theme.menu[menuType].submenuBackground : theme.menu[menuType].background};
+      background-color: ${variant === "default" ? _menu.default[menuType].submenuItemBackground : _menu.default[menuType].background};
     }
   `}
 `;
-StyledScrollableBlock.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledScrollableBlock;
 exports.default = _default;

package/lib/components/menu/submenu-block/submenu-block.style.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 var _menuItem = _interopRequireDefault(require("../menu-item/menu-item.style"));
 
+var _menu = _interopRequireDefault(require("../menu.config"));
+
 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,18 +20,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledSubmenuBlock = _styledComponents.default.div`
   ${({
   menuType,
-  theme,
   variant
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.menu[menuType].submenuBackground};
+    background-color: ${_menu.default[menuType].submenuItemBackground};
 
     ${_menuItem.default} {
-      background-color: ${variant === "default" ? "transparent" : theme.menu[menuType].alternate};
+      background-color: ${variant === "default" ? "transparent" : _menu.default[menuType].alternate};
     }
   `}
 `;
-StyledSubmenuBlock.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledSubmenuBlock;
 exports.default = _default;

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/lib/style/themes/aegean/aegean-theme.config.d.ts

@@ -18,6 +18,15 @@ declare function _default(palette: any): {
         colorsActionMajor500: any;
         colorsActionMajor600: any;
         colorsActionMajor150: any;
+        colorsComponentsMenuAutumnStandard600: any;
+        colorsComponentsMenuSpringChild600: any;
+        colorsComponentsMenuAutumnChild600: any;
+        colorsComponentsMenuSummerChild600: any;
+        colorsComponentsMenuWinterChild600: any;
+        colorsComponentsMenuSpringChildAlt600: any;
+        colorsComponentsMenuAutumnChildAlt600: any;
+        colorsComponentsMenuWinterChildAlt600: any;
+        colorsComponentsMenuSummerChildAlt600: any;
         colorsBaseTheme: any;
     };
 };

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

@@ -33,6 +33,15 @@ var _default = palette => {
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
         colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsComponentsMenuAutumnStandard600: this.colors.primary,
+        colorsComponentsMenuSpringChild600: this.colors.primary,
+        colorsComponentsMenuAutumnChild600: this.colors.primary,
+        colorsComponentsMenuSummerChild600: this.colors.primary,
+        colorsComponentsMenuWinterChild600: this.colors.primary,
+        colorsComponentsMenuSpringChildAlt600: this.colors.primary,
+        colorsComponentsMenuAutumnChildAlt600: this.colors.primary,
+        colorsComponentsMenuWinterChildAlt600: this.colors.primary,
+        colorsComponentsMenuSummerChildAlt600: this.colors.primary,
         colorsBaseTheme: this.colors.primary
       };
     }

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

@@ -17,6 +17,15 @@ declare function _default(palette: any): {
         colorsActionMajor500: any;
         colorsActionMajor600: any;
         colorsActionMajor150: any;
+        colorsComponentsMenuAutumnStandard600: any;
+        colorsComponentsMenuSpringChild600: any;
+        colorsComponentsMenuAutumnChild600: any;
+        colorsComponentsMenuSummerChild600: any;
+        colorsComponentsMenuWinterChild600: any;
+        colorsComponentsMenuSpringChildAlt600: any;
+        colorsComponentsMenuAutumnChildAlt600: any;
+        colorsComponentsMenuWinterChildAlt600: any;
+        colorsComponentsMenuSummerChildAlt600: any;
         colorsBaseTheme: any;
     };
 };

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

@@ -27,6 +27,15 @@ var _default = palette => {
         colorsActionMajor500: this.colors.primary,
         colorsActionMajor600: this.colors.secondary,
         colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsComponentsMenuAutumnStandard600: this.colors.primary,
+        colorsComponentsMenuSpringChild600: this.colors.primary,
+        colorsComponentsMenuAutumnChild600: this.colors.primary,
+        colorsComponentsMenuSummerChild600: this.colors.primary,
+        colorsComponentsMenuWinterChild600: this.colors.primary,
+        colorsComponentsMenuSpringChildAlt600: this.colors.primary,
+        colorsComponentsMenuAutumnChildAlt600: this.colors.primary,
+        colorsComponentsMenuWinterChildAlt600: this.colors.primary,
+        colorsComponentsMenuSummerChildAlt600: this.colors.primary,
         colorsBaseTheme: this.colors.primary
       };
     }

package/package.json

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