carbon-react 104.24.1 → 104.25.0

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/package.json

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