carbon-react 102.17.0 → 102.18.0

package/lib/components/select/list-action-button/list-action-button.style.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _themes = require("../../../style/themes");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _button = _interopRequireDefault(require("../../button/button.style"));
 
@@ -15,44 +13,32 @@ var _icon = _interopRequireDefault(require("../../icon/icon.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; }
-
 const StyledListActionButtonWrapper = _styledComponents.default.div`
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-    padding-top: ${theme.space[1]}px;
-    padding-bottom: ${theme.space[1]}px;
-    border-top: 1px solid ${theme.disabled.border};
-    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
-
-    ${_icon.default} {
-      color: ${theme.text.color};
-    }
-
-    ${_button.default} {
-      background: transparent;
-      border: none;
-      color: ${theme.text.color};
-      justify-content: left;
-      padding-left: ${theme.space[2]}px;
-      padding-right: ${theme.space[2]}px;
-      width: 100%;
-
-      :hover {
-        background-color: ${theme.select.selected};
-
-        ${_icon.default} {
-          color: ${theme.text.color};
-        }
+  padding-top: var(--spacing100);
+  padding-bottom: var(--spacing100);
+  border-top: 1px solid var(--colorsUtilityDisabled600);
+  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
+
+  ${_icon.default} {
+    color: var(--colorsUtilityYin090);
+  }
+
+  ${_button.default} {
+    background: transparent;
+    border: none;
+    color: var(--colorsUtilityYin090);
+    justify-content: left;
+    padding-left: var(--spacing200);
+    padding-right: var(--spacing200);
+    width: 100%;
+
+    :hover {
+      background-color: var(--colorsUtilityMajor025);
+      ${_icon.default} {
+        color: var(--colorsUtilityYin090);
       }
     }
-  `}
+  }
 `;
-StyledListActionButtonWrapper.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledListActionButtonWrapper;
 exports.default = _default;

package/lib/components/select/option/option.style.js

@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-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; }
@@ -26,10 +24,9 @@ const StyledOption = _styledComponents.default.li`
   user-select: none;
 
   ${({
-  isHighlighted,
-  theme
+  isHighlighted
 }) => isHighlighted && (0, _styledComponents.css)`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor200);
     `}
 
   ${({
@@ -37,20 +34,12 @@ const StyledOption = _styledComponents.default.li`
 }) => hidden && "display: none;"}
 
   :hover {
-    ${({
-  theme
-}) => (0, _styledComponents.css)`
-        background-color: ${theme.select.selected};
-      `}
+    background-color: var(--colorsUtilityMajor200);
   }
 `;
 StyledOption.propTypes = {
   id: _propTypes.default.any,
-  isHighlighted: _propTypes.default.bool,
-  theme: _propTypes.default.object
-};
-StyledOption.defaultProps = {
-  theme: _base.default
+  isHighlighted: _propTypes.default.bool
 };
 var _default = StyledOption;
 exports.default = _default;

package/lib/components/select/option-group-header/option-group-header.style.js

@@ -7,12 +7,8 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledOptionGroupHeader = _styledComponents.default.div`
@@ -30,30 +26,18 @@ const StyledOptionGroupHeader = _styledComponents.default.div`
     line-height: 18px;
     text-align: left;
     margin: 0;
-    color: ${({
-  theme
-}) => theme.select.optionHeader};
+    color: var(--colorsYin055);
   }
 
   ${_icon.default} {
     margin-right: 4px;
     margin-left: -5px;
-    color: ${({
-  theme
-}) => theme.select.optionHeader};
+    color: var(--colorsYin055);
 
     &:hover {
-      color: ${({
-  theme
-}) => theme.select.optionHeader};
+      color: var(--colorsYin055);
     }
   }
 `;
-StyledOptionGroupHeader.propTypes = {
-  theme: _propTypes.default.object
-};
-StyledOptionGroupHeader.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledOptionGroupHeader;
 exports.default = _default;

package/lib/components/select/option-row/option-row.style.js

@@ -7,10 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,16 +19,13 @@ const StyledOptionRow = _styledComponents.default.tr`
 }) => hidden && "display: none;"}
 
   ${({
-  isHighlighted,
-  theme
+  isHighlighted
 }) => isHighlighted && (0, _styledComponents.css)`
-      background-color: ${theme.select.selected};
+      background-color: var(--colorsUtilityMajor200);
     `}
 
   :hover {
-    background-color: ${({
-  theme
-}) => theme.select.selected};
+    background-color: var(--colorsUtilityMajor200);
   }
 
   td {
@@ -44,8 +37,5 @@ const StyledOptionRow = _styledComponents.default.tr`
     }
   }
 `;
-StyledOptionRow.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledOptionRow;
 exports.default = _default;

package/lib/components/select/select-list/select-list.style.js

@@ -13,7 +13,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const overhang = 4;
+const overhang = 4; // TODO (design-tokens): no elovation/zindex tokens yet
+
 const StyledPopoverContainer = _styledComponents.default.div`
   position: absolute;
   z-index: ${({
@@ -72,9 +73,7 @@ const StyledSelectLoaderContainer = _styledComponents.default.li`
 `;
 exports.StyledSelectLoaderContainer = StyledSelectLoaderContainer;
 const StyledSelectListTable = _styledComponents.default.table`
-  background-color: ${({
-  theme
-}) => theme.colors.white};
+  background-color: var(--colorsUtilityYang100);
   border-collapse: collapse;
   border-radius: 0px;
   border-spacing: 0;
@@ -88,29 +87,21 @@ const StyledSelectListTable = _styledComponents.default.table`
     width: 100%;
     table-layout: fixed;
   }
-`;
+`; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
+
 exports.StyledSelectListTable = StyledSelectListTable;
-StyledSelectListTable.defaultProps = {
-  theme: _themes.baseTheme
-};
 const StyledSelectListTableHeader = _styledComponents.default.thead`
   th {
     position: sticky;
     top: 0;
-    padding: ${({
-  theme
-}) => 2 * theme.spacing}px;
-    border-bottom: 1px solid ${({
-  theme
-}) => theme.select.tableHeaderBorder};
+    padding: var(--spacing200);
+    border-bottom: 1px solid var(--colorsUtilityMajor050);
     background-color: white;
     text-align: left;
     font-weight: 900;
     font-size: 12px;
     text-transform: uppercase;
-    color: ${({
-  theme
-}) => theme.tileSelect.descriptionColor};
+    color: var(--colorsYin055);
     :after {
       content: "";
       display: block;
@@ -118,12 +109,8 @@ const StyledSelectListTableHeader = _styledComponents.default.thead`
       bottom: -8px;
       left: 0px;
       background-image: linear-gradient(
-        ${({
-  theme
-}) => theme.colors.black},
-        ${({
-  theme
-}) => theme.colors.white}
+        var(--colorsComponentsNavigationYin100),
+        var(--colorsYang100)
       );
       opacity: 0.03;
       height: 8px;
@@ -139,7 +126,4 @@ const StyledSelectListTableBody = _styledComponents.default.tbody`
   table-layout: fixed;
   max-height: 132px;
 `;
-exports.StyledSelectListTableBody = StyledSelectListTableBody;
-StyledSelectListTableHeader.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledSelectListTableBody = StyledSelectListTableBody;

package/lib/components/select/select.style.js

@@ -27,7 +27,6 @@ const StyledSelect = _styledComponents.default.div`
   ${({
   hasTextCursor,
   disabled,
-  theme,
   readOnly,
   transparent
 }) => (0, _styledComponents.css)`
@@ -40,13 +39,13 @@ const StyledSelect = _styledComponents.default.div`
 
       ${disabled && (0, _styledComponents.css)`
         cursor: not-allowed;
-        color: ${theme.disabled.disabled};
+        color: var(--colorsUtilityYin030);
         text-shadow: none;
       `}
 
       ${readOnly && (0, _styledComponents.css)`
         cursor: ${hasTextCursor ? "text" : "default"};
-        color: ${theme.readOnly.textboxText};
+        color: var(--colorsYin065);
         text-shadow: none;
       `}
     }

package/package.json

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