carbon-react 104.23.1 → 104.26.0

package/lib/components/accordion/accordion.component.js

@@ -113,9 +113,9 @@ const Accordion = /*#__PURE__*/_react.default.forwardRef(({
     isExpanded: isExpanded,
     buttonHeading: buttonHeading,
     buttonWidth: buttonWidth,
-    hasButtonProps: buttonHeading && headerSpacing
+    hasButtonProps: buttonHeading && headerSpacing,
+    role: "button"
   }, buttonHeading && {
-    role: "button",
     p: 0
   }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -34,7 +34,7 @@ declare namespace DialogFullScreen {
          */
         "aria-label": PropTypes.Requireable<string>;
         /**
-         * Prop to specify the aria-labeledby property of the DialogFullscreen component
+         * Prop to specify the aria-labelledby property of the DialogFullscreen component
          * To be used when the title prop is a custom React Node,
          * or the component is labelled by an internal element other than the title.
          */
@@ -71,7 +71,7 @@ declare namespace DialogFullScreen {
         contentRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
             current: PropTypes.Requireable<Element>;
         }>>;
-        /** The ARIA role to be applied to the DialogFulscreen container */
+        /** The ARIA role to be applied to the DialogFullscreen container */
         role: PropTypes.Requireable<string>;
     };
 }

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -111,7 +111,7 @@ const DialogFullScreen = ({
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
-    "aria-modal": true
+    "aria-modal": role === "dialog" ? true : undefined
   }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",
@@ -140,7 +140,7 @@ DialogFullScreen.propTypes = {
   "aria-label": _propTypes.default.string,
 
   /**
-   * Prop to specify the aria-labeledby property of the DialogFullscreen component
+   * Prop to specify the aria-labelledby property of the DialogFullscreen component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -192,7 +192,7 @@ DialogFullScreen.propTypes = {
     current: _propTypes.default.instanceOf(Element)
   })]),
 
-  /** The ARIA role to be applied to the DialogFulscreen container */
+  /** The ARIA role to be applied to the DialogFullscreen container */
   role: _propTypes.default.string
 };
 var _default = DialogFullScreen;

package/lib/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -10,7 +10,7 @@ export interface DialogFullScreenProps extends ModalProps {
    */
   "aria-label"?: string;
   /**
-   * Prop to specify the aria-labeledby property of the DialogFullscreen component
+   * Prop to specify the aria-labelledby property of the DialogFullscreen component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -39,7 +39,7 @@ export interface DialogFullScreenProps extends ModalProps {
   subtitle?: string;
   /** Title displayed at top of dialog */
   title?: React.ReactNode;
-  /** The ARIA role to be applied to the DialogFulscreen container */
+  /** The ARIA role to be applied to the DialogFullscreen container */
   role?: string;
 }
 

package/lib/components/drawer/drawer.component.js

@@ -147,7 +147,6 @@ const Drawer = ({
     expandedWidth: expandedWidth,
     animationDuration: animationDuration,
     className: getClassNames(),
-    "aria-expanded": isExpanded ? "true" : "false",
     ref: drawerSidebarContentRef,
     backgroundColor: backgroundColor
   }, stickyHeader && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarHeader, {
@@ -157,7 +156,7 @@ const Drawer = ({
     id: sidebarId,
     isExpanded: isExpanded,
     role: "navigation",
-    overflowY: "auto",
+    overflowY: isExpanded ? "auto" : undefined,
     scrollVariant: "light",
     ref: scrollableContentRef
   }, /*#__PURE__*/_react.default.createElement(DrawerSidebarContext.Provider, {

package/lib/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -7,14 +7,10 @@ exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklist
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _button = require("../../button");
 
 var _picklistItem = require("../picklist-item/picklist-item.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; }
@@ -22,8 +18,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledGroupWrapper = _styledComponents.default.li`
   ${({
   highlighted,
-  type,
-  theme
+  type
 }) => (0, _styledComponents.css)`
     &:not(:first-of-type) {
       margin-top: 16px;
@@ -31,8 +26,7 @@ const StyledGroupWrapper = _styledComponents.default.li`
 
     ${highlighted && (0, _styledComponents.css)`
       ${_picklistItem.StyledButton} {
-        background: ${type === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-      }
+        background: ${type === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
     `}
   `}
 `;
@@ -50,8 +44,7 @@ const StyledPicklistGroup = _styledComponents.default.li`
 exports.StyledPicklistGroup = StyledPicklistGroup;
 const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
   ${({
-  iconType,
-  theme
+  iconType
 }) => (0, _styledComponents.css)`
     padding: 0;
     margin-right: 0;
@@ -62,16 +55,9 @@ const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwa
 
     &:focus {
       > span {
-        color: ${theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
-      background: ${iconType === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-    }
+      background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"}
   `}
 `;
-exports.StyledGroupButton = StyledGroupButton;
-StyledGroupWrapper.defaultProps = {
-  theme: _base.default
-};
-StyledGroupButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledGroupButton = StyledGroupButton;

package/lib/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -7,8 +7,6 @@ exports.StyledLockIcon = exports.StyledButton = exports.StyledPicklistItem = voi
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 var _button = require("../../button");
 
 var _icon = _interopRequireDefault(require("../../icon"));
@@ -23,26 +21,24 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledPicklistItem = _styledComponents.default.li`
   ${({
-  locked,
-  theme
+  locked
 }) => (0, _styledComponents.css)`
     display: flex;
     align-items: center;
     width: 100%;
 
-    background-color: ${locked ? theme.picklist.locked : theme.colors.white};
+    background-color: ${locked ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"};
 
     ${!locked && (0, _styledComponents.css)`
-      box-shadow: 0 2px 4px 0 rgba(0, 20, 29, 0.15),
-        0 3px 3px 0 rgba(0, 20, 29, 0.2);
+      box-shadow: var(--boxShadow050);
     `}
 
     ${locked && (0, _styledComponents.css)`
-      border: 1px solid ${theme.picklist.lockedContent};
-      color: ${theme.picklist.lockedText};
+      border: 1px solid var(--colorsUtilityMajor200);
+      color: var(--colorsUtilityYin065);
 
       ${_icon2.default} {
-        color: ${theme.picklist.lockedContent};
+        color: var(--colorsUtilityMajor200);
       }
     `}
 
@@ -54,8 +50,7 @@ const StyledPicklistItem = _styledComponents.default.li`
 exports.StyledPicklistItem = StyledPicklistItem;
 const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
   ${({
-  iconType,
-  theme
+  iconType
 }) => (0, _styledComponents.css)`
     padding: 0;
     margin-right: 0;
@@ -64,11 +59,7 @@ const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef
     min-width: 40px;
 
     &:focus {
-      > span {
-        color: ${theme.colors.white};
-      }
-      background: ${iconType === "add" ? theme.colors.secondary : theme.colors.destructive.hover};
-    }
+      background: ${iconType === "add" ? "var(--colorsActionMajor600)" : "var(--colorsSemanticNegative600)"};
   `}
 `;
 exports.StyledButton = StyledButton;
@@ -77,10 +68,4 @@ const StyledLockIcon = (0, _styledComponents.default)(_icon.default)`
   height: 40px;
   min-width: 40px;
 `;
-exports.StyledLockIcon = StyledLockIcon;
-StyledPicklistItem.defaultProps = {
-  theme: _base.default
-};
-StyledButton.defaultProps = {
-  theme: _base.default
-};
+exports.StyledLockIcon = StyledLockIcon;

package/lib/components/flat-table/flat-table-cell/flat-table-cell.style.js

@@ -37,9 +37,9 @@ const StyledFlatTableCell = _styledComponents.default.td`
   verticalBorder,
   verticalBorderColor
 }) => (0, _styledComponents.css)`
-    background-color: #fff;
+    background-color: var(--colorsUtilityYang100);
     border-width: 0;
-    border-bottom: 1px solid ${theme.table.secondary};
+    border-bottom: 1px solid var(--colorsUtilityMajor100);
     text-align: ${align};
     vertical-align: middle;
     padding: 0;
@@ -67,7 +67,7 @@ const StyledFlatTableCell = _styledComponents.default.td`
 
       ${verticalBorder && (0, _styledComponents.css)`
         border-right: ${verticalBorderSizes[verticalBorder]} solid
-          ${theme.table.secondary};
+          var(--colorsUtilityMajor300);
       `}
 
       ${verticalBorderColor && (0, _styledComponents.css)`
@@ -76,16 +76,16 @@ const StyledFlatTableCell = _styledComponents.default.td`
     }
 
     &:first-of-type {
-      border-left: 1px solid ${theme.table.secondary};
+      border-left: 1px solid var(--colorsUtilityMajor100);
     }
 
     &:last-of-type {
-      border-right: 1px solid ${theme.table.secondary};
+      border-right: 1px solid var(--colorsUtilityMajor100);
     }
 
     ${rowSpan && (0, _styledComponents.css)`
       &:first-of-type + & {
-        border-left: 1px solid ${theme.table.secondary};
+        border-left: 1px solid var(--colorsUtilityMajor100);
       }
     `}
 

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

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _checkbox = _interopRequireDefault(require("../../checkbox/checkbox.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; }
@@ -20,14 +18,13 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledFlatTableCheckbox = _styledComponents.default.td`
   ${({
   as,
-  theme,
   leftPosition,
   makeCellSticky
 }) => (0, _styledComponents.css)`
     ${as === "td" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       border-width: 0;
-      border-bottom: 1px solid ${theme.table.secondary};
+      border-bottom: 1px solid var(--colorsUtilityMajor100);
       overflow: visible;
       padding: 0;
       text-align: left;
@@ -36,18 +33,18 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
       white-space: nowrap;
 
       &:first-of-type {
-        border-left: 1px solid ${theme.table.secondary};
+        border-left: 1px solid var(--colorsUtilityMajor100);
       }
 
       &:last-of-type {
-        border-right: 1px solid ${theme.table.secondary};
+        border-right: 1px solid var(--colorsUtilityMajor100);
       }
     `}
 
     ${as === "th" && (0, _styledComponents.css)`
       background-color: transparent;
       border-width: 0;
-      border-bottom: 1px solid ${theme.table.secondary};
+      border-bottom: 1px solid var(--colorsUtilityMajor100);
       box-sizing: border-box;
       font-weight: 700;
       left: auto;
@@ -72,8 +69,5 @@ const StyledFlatTableCheckbox = _styledComponents.default.td`
     padding-top: 0px;
   }
 `;
-StyledFlatTableCheckbox.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledFlatTableCheckbox;
 exports.default = _default;

package/lib/components/flat-table/flat-table-header/flat-table-header.style.js

@@ -9,10 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
-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,7 +22,6 @@ const StyledFlatTableHeader = _styledComponents.default.th`
   ${({
   align,
   alternativeBgColor,
-  theme,
   colWidth,
   leftPosition,
   makeCellSticky,
@@ -65,9 +60,13 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     }
 
     ${alternativeBgColor && (0, _styledComponents.css)`
-      &&& {
-        background-color: ${theme.flatTable.headerAlternativeBackground}`}
-    };
+        &&&:first-child {
+          border-left: 1px solid var(--colorsActionMinor550);
+        }
+        &&& {
+          background-color: var(--colorsActionMinor550);
+        }
+      `};
 
     ${makeCellSticky && (0, _styledComponents.css)`
       left: ${leftPosition}px;
@@ -102,8 +101,5 @@ const StyledFlatTableHeader = _styledComponents.default.th`
     }
   `}
 `;
-StyledFlatTableHeader.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledFlatTableHeader;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -36,14 +36,14 @@ const stickyColumnFocusStyling = (index, theme) => {
   return `
     border-bottom: 1px solid transparent;
     border-left: 1px solid
-      ${index === 0 ? theme.colors.focus : theme.table.secondary};
+      ${index === 0 ? "var(--colorsSemanticFocus500)" : "var(--colorsUtilityMajor100)"};
     background-clip: padding-box;
     z-index: ${theme.zIndex.overlay + 2};
 
     :before {
       content: "";
-      border-top: 2px solid ${theme.colors.focus};
-      border-bottom: 2px solid ${theme.colors.focus};
+      border-top: 2px solid var(--colorsSemanticFocus500);
+      border-bottom: 2px solid var(--colorsSemanticFocus500);
       display: block;
       left: 0px;
       top: -1px;
@@ -55,20 +55,20 @@ const stickyColumnFocusStyling = (index, theme) => {
   `;
 };
 
-const borderColor = (colorTheme, theme) => {
+const borderColor = colorTheme => {
   switch (colorTheme) {
     case "light":
-      return theme.flatTable.light.border;
+      return "var(--colorsUtilityMajor100)";
 
     case "transparent-base":
-      return theme.flatTable.transparentBase.border;
+      return "var(--colorsUtilityMajor025)";
 
     case "transparent-white":
-      return theme.flatTable.transparentWhite.border;
+      return "var(--colorsUtilityYang100)";
     // default theme is "dark"
 
     default:
-      return theme.flatTable.dark.border;
+      return "var(--colorsUtilityMajor400)";
   }
 };
 
@@ -98,8 +98,8 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 }) => {
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
-  const colorOfSelected = isInSidebar ? theme.flatTable.drawerSidebar.selected : theme.flatTable.selected;
-  const colorOfHighlighted = isInSidebar ? theme.flatTable.drawerSidebar.highlighted : theme.flatTable.highlighted;
+  const colorOfSelected = isInSidebar ? "var(--colorsUtilityMajor150)" : "var(--colorsUtilityMajor075)";
+  const colorOfHighlighted = isInSidebar ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor050)";
   const allCellTypes = `${_flatTableRowHeader.StyledFlatTableRowHeader}, ${_flatTableCell.StyledFlatTableCell}, ${_flatTableCheckbox.default}`;
   return (0, _styledComponents.css)`
       border-collapse: separate;
@@ -110,12 +110,16 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       width: auto;
       outline: 2px solid #0000;
 
+      [data-component="icon"] {
+        color: var(--colorsActionMinor500);
+      }
+
       ${allCellTypes} {
         ${backgroundColor && `background-color: ${backgroundColor};`}
 
         ${horizontalBorderSize !== "small" && (0, _styledComponents.css)`
           border-bottom: ${horizontalBorderSizes[horizontalBorderSize]} solid
-            ${theme.table.secondary};
+            var(--colorsUtilityMajor100);
         `}
 
         ${customBorderColor && (0, _styledComponents.css)`
@@ -124,11 +128,11 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       }
 
       ${_flatTableHeader.default} {
-        border-bottom: 1px solid ${borderColor(colorTheme, theme)};
+        border-bottom: 1px solid ${borderColor(colorTheme)};
 
         ${!isInSidebar && `
           :first-child {
-            border-left: 1px solid ${borderColor(colorTheme, theme)};
+            border-left: 1px solid ${borderColor(colorTheme)};
           }
         `}
       }
@@ -143,7 +147,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         cursor: pointer;
 
         :focus {
-          outline: 2px solid ${theme.colors.focus};
+          outline: 2px solid var(--colorsSemanticFocus500);
           outline-offset: -1px;
 
           ${_flatTableRowHeader.StyledFlatTableRowHeader} {
@@ -165,7 +169,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 
         :hover {
           ${allCellTypes} {
-            background-color: ${backgroundColor || theme.flatTable.hover};
+            background-color: ${backgroundColor || "var(--colorsUtilityMajor025)"};
           }
         }
       `}
@@ -176,43 +180,42 @@ const StyledFlatTableRow = _styledComponents.default.tr`
           cursor: pointer;
 
           :focus {
-            outline: 2px solid ${theme.colors.focus};
+            outline: 2px solid var(--colorsSemanticFocus500);
             outline-offset: -1px;
           }
 
           :hover {
-            background-color: ${backgroundColor || theme.flatTable.hover};
+            background-color: ${backgroundColor || "var(colorsUtilityMajor025)"};
           }
         }
       `}
 
       ${![-1, 0].includes(rowHeaderIndex) && (0, _styledComponents.css)`
         td:nth-of-type(${rowHeaderIndex + 1}) {
-          border-left: 1px solid ${customBorderColor || theme.table.secondary};
+          border-left: 1px solid
+            ${customBorderColor || "var(--colorsUtilityMajor100)"};
         }
 
         th:nth-of-type(${rowHeaderIndex + 2}) {
-          border-left: 1px solid
-            ${customBorderColor || borderColor(colorTheme, theme)};
+          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
         }
       `}
 
       ${applyBorderLeft && (0, _styledComponents.css)`
         th:first-of-type {
-          border-left: 1px solid
-            ${customBorderColor || borderColor(colorTheme, theme)};
+          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
         }
       `}
 
       ${isInSidebar && (0, _styledComponents.css)`
         ${allCellTypes} {
-          background-color: ${bgColor || theme.flatTable.drawerSidebar.headerBackground};
+          background-color: ${bgColor || "var(--colorsUtilityMajor040)"};
           };
         }
 
         ${_flatTableHeader.default} {
-          background-color: ${theme.flatTable.drawerSidebar.headerBackground};
-          border-bottom-color: ${theme.table.secondary};
+          background-color: var(--colorsUtilityMajor040);
+          border-bottom-color: var(--colorsUtilityMajor100);
         }
 
         td:first-of-type,
@@ -232,7 +235,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
             :hover {
               ${_flatTableCell.StyledFlatTableCell},
               ${_flatTableCheckbox.default}:not(th) {
-                background-color: ${backgroundColor || theme.flatTable.drawerSidebar.hover};
+                background-color: ${backgroundColor || "var(--colorsUtilityMajor075)"};
               }
             }
           `}
@@ -253,7 +256,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 
       ${isSubRow && (0, _styledComponents.css)`
         ${allCellTypes} {
-          background-color: ${backgroundColor || theme.flatTable.subRow.background};
+          background-color: ${backgroundColor || "var(--colorsActionMinor025)"};
         }
 
         ${_flatTableCell.StyledFlatTableCell}:first-child > div,
@@ -264,23 +267,24 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       `}
 
       ${isDragging && (0, _styledComponents.css)`
-        border: ${isInSidebar ? theme.palette.slateTint(40) : theme.palette.slateTint(55)}
+        border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
           2px solid;
         cursor: grabbing;
         ${allCellTypes} {
-          background-color: ${isInSidebar ? theme.palette.slateTint(60) : theme.palette.slateTint(75)};
+          background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
         }
       `}
 
       ${draggable && (0, _styledComponents.css)`
         ${_icon.default}:first-of-type {
           font-size: 16px;
+          color: var(--colorsActionMinor500);
         }
       `}
 
       ${isFirstSubRow && (0, _styledComponents.css)`
         ${allCellTypes} {
-          box-shadow: inset 0 6px 4px -4px ${theme.flatTable.subRow.shadow};
+          box-shadow: var(--boxShadow075);
         }
       `}
 

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -35,8 +35,8 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
   verticalBorder,
   verticalBorderColor
 }) => (0, _styledComponents.css)`
-    background-color: #fff;
-    border: 1px solid ${theme.table.secondary};
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
     border-top: none;
     box-sizing: border-box;
     left: 0;
@@ -98,7 +98,4 @@ const StyledFlatTableRowHeaderContent = _styledComponents.default.div`
       line-height: 1em;
     `}
 `;
-exports.StyledFlatTableRowHeaderContent = StyledFlatTableRowHeaderContent;
-StyledFlatTableRowHeaderContent.defaultProps = {
-  theme: _base.default
-};
+exports.StyledFlatTableRowHeaderContent = StyledFlatTableRowHeaderContent;

package/lib/components/flat-table/flat-table.style.js

@@ -76,55 +76,51 @@ const StyledFlatTable = _styledComponents.default.table`
 }}
 
   ${({
-  isZebra,
-  theme
+  isZebra
 }) => isZebra && (0, _styledComponents.css)`
       ${_flatTableRow.default}:nth-child(2n) {
         ${_flatTableRowHeader.StyledFlatTableRowHeader},
         ${_flatTableCell.StyledFlatTableCell},
         ${_flatTableCheckbox.default} {
-          background-color: ${theme.table.zebra};
+          background-color: var(--colorsUtilityMajor010);
         }
       }
       ${_flatTableRow.default}:hover {
         ${_flatTableCell.StyledFlatTableCell},
         ${_flatTableRowHeader.StyledFlatTableRowHeader},
         ${_flatTableCheckbox.default} {
-          background-color: ${theme.flatTable.hover};
+          background-color: var(--colorsUtilityMajor025);
         }
       }
     `}
 `;
 exports.StyledFlatTable = StyledFlatTable;
 StyledFlatTable.defaultProps = {
-  theme: _themes.baseTheme,
   size: "medium"
 };
 const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
   ${({
-  isInSidebar,
-  theme
+  isInSidebar
 }) => (0, _styledComponents.css)`
       box-sizing: border-box;
 
       :focus {
-        outline: 2px solid ${theme.colors.focus};
+        outline: 2px solid var(--colorsSemanticFocus500);
 
         :not(:focus-visible) {
           outline: none;
         }
 
         :focus-visible {
-          outline: 2px solid ${theme.colors.focus};
+          outline: 2px solid var(--colorsSemanticFocus500);
         }
       }
 
-      ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px ${theme.table.secondary}`};
+      ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px var(--colorsUtilityMajor100)`};
     `}
 
   ${({
-  colorTheme,
-  theme
+  colorTheme
 }) => {
   switch (colorTheme) {
     case "light":
@@ -132,9 +128,9 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
-            background-color: ${theme.flatTable.light.headerBackground};
-            border-right: 1px solid ${theme.flatTable.light.border};
-            border-bottom-color: ${theme.flatTable.light.border};
+            background-color: var(--colorsUtilityMajor100);
+            border-right: 1px solid var(--colorsUtilityMajor150);
+            border-bottom-color: var(--colorsUtilityMajor100);
           }
         `;
 
@@ -143,9 +139,9 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
-            background-color: ${theme.flatTable.transparentBase.headerBackground};
-            border-right: 1px solid ${theme.flatTable.transparentBase.border};
-            border-bottom-color: ${theme.table.secondary};
+            background-color: var(--colorsUtilityMajor025);
+            border-right: 1px solid var(--colorsUtilityMajor025);
+            border-bottom-color: var(--colorsUtilityMajor100);
           }
         `;
 
@@ -154,9 +150,9 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
-            background-color: ${theme.flatTable.transparentWhite.headerBackground};
-            border-right: 1px solid ${theme.flatTable.transparentWhite.border};
-            border-bottom-color: ${theme.table.secondary};
+            background-color: var(--colorsUtilityYang100);
+            border-right: 1px solid var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor100);
           }
         `;
     // default theme is "dark"
@@ -166,26 +162,24 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
           ${_flatTableHead.default} ${_flatTableCheckbox.default},
           ${_flatTableHeader.default},
           ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
-            background-color: ${theme.flatTable.dark.headerBackground};
-            border-right: 1px solid ${theme.flatTable.dark.border};
-            color: ${theme.colors.white};
-            border-bottom-color: ${theme.flatTable.dark.border};
+            background-color: var(--colorsUtilityMajor400);
+            border-right: 1px solid var(--colorsUtilityMajor300);
+            color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor300);
           }
         `;
   }
 }}
 
   ${({
-  isInSidebar,
-  theme
+  isInSidebar
 }) => isInSidebar && (0, _styledComponents.css)`
       ${_flatTableHeader.default}, ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
       ${_flatTableHead.default} ${_flatTableCheckbox.default} {
-        background-color: ${theme.flatTable.drawerSidebar.headerBackground};
-        border-right: 2px solid
-          ${theme.flatTable.drawerSidebar.headerBackground};
-        color: ${theme.colors.black};
-        border-bottom-color: ${theme.table.secondary};
+        background-color: var(--colorsUtilityMajor040);
+        border-right: 2px solid var(--colorsUtilityMajor040);
+        color: var(--colorsUtilityYin090);
+        border-bottom-color: var(--colorsUtilityMajor100);
       }
     `}
 
@@ -221,7 +215,4 @@ const StyledFlatTableFooter = _styledComponents.default.div`
       bottom: 0px;
     `}
 `;
-exports.StyledFlatTableFooter = StyledFlatTableFooter;
-StyledFlatTableFooter.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledFlatTableFooter = StyledFlatTableFooter;

package/lib/components/flat-table/sort/sort.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledSort = _styledComponents.default.div`
@@ -25,9 +23,7 @@ const StyledSort = _styledComponents.default.div`
     width: 16px;
     height: 16px;
     padding-left: 6px;
-    color: ${({
-  theme
-}) => theme.flatTable.headerIconColor};
+    color: var(--colorsUtilityMajor200);
   }
 
   :hover {
@@ -36,9 +32,7 @@ const StyledSort = _styledComponents.default.div`
   }
 
   :focus {
-    outline: 1px solid ${({
-  theme
-}) => theme.colors.focus};
+    outline: 1px solid var(--colorsSemanticFocus500);
   }
 `;
 exports.StyledSort = StyledSort;
@@ -46,7 +40,4 @@ const StyledSpaceHolder = _styledComponents.default.div`
   display: inline-block;
   width: 22px;
 `;
-exports.StyledSpaceHolder = StyledSpaceHolder;
-StyledSort.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledSpaceHolder = StyledSpaceHolder;

package/lib/components/popover-container/popover-container.component.d.ts

@@ -36,12 +36,13 @@ declare namespace PopoverContainer {
         export { position_1 as position };
         const shouldCoverButton_1: boolean;
         export { shouldCoverButton_1 as shouldCoverButton };
-        export function renderOpenComponent_1({ tabIndex, onClick, dataElement, ref, ariaLabel, }: {
+        export function renderOpenComponent_1({ tabIndex, onClick, dataElement, ref, ariaLabel, id, }: {
             tabIndex: any;
             onClick: any;
             dataElement: any;
             ref: any;
             ariaLabel: any;
+            id: any;
         }): JSX.Element;
         export { renderOpenComponent_1 as renderOpenComponent };
         export function renderCloseComponent_1({ dataElement, tabIndex, onClick, ref, ariaLabel, }: {

package/lib/components/popover-container/popover-container.component.js

@@ -78,7 +78,8 @@ const PopoverContainer = ({
     dataElement: "popover-container-open-component",
     onClick: handleOpenButtonClick,
     ref: openButtonRef,
-    ariaLabel: openButtonAriaLabel || title
+    ariaLabel: openButtonAriaLabel || title,
+    id: isOpen ? undefined : popoverContainerId
   };
   const renderCloseComponentProps = {
     dataElement: "popover-container-close-component",
@@ -90,7 +91,7 @@ const PopoverContainer = ({
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
-    "aria-labelledby": isOpen ? popoverContainerId : undefined
+    "aria-labelledby": popoverContainerId
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
@@ -173,7 +174,8 @@ PopoverContainer.defaultProps = {
     onClick,
     dataElement,
     ref,
-    ariaLabel
+    ariaLabel,
+    id
     /* eslint-enable react/prop-types */
 
   }) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
@@ -182,7 +184,8 @@ PopoverContainer.defaultProps = {
     "data-element": dataElement,
     ref: ref,
     "aria-label": ariaLabel,
-    "aria-haspopup": true
+    "aria-haspopup": true,
+    id: id
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "settings"
   })),

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/components/textbox/textbox.component.js

@@ -106,7 +106,7 @@ const Textbox = ({
     labelHelp,
     fieldHelp
   });
-  const labelId = externalLabelId || internalLabelId;
+  const labelId = label ? externalLabelId || internalLabelId : "";
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition

package/package.json

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