carbon-react 102.16.0 → 102.19.0

package/lib/__internal__/label/label.style.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const LabelStyle = _styledComponents.default.label`
-  color: var(--colorsYin090);
+  color: var(--colorsUtilityYin090);
   display: block;
   font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
 
@@ -34,7 +34,7 @@ const LabelStyle = _styledComponents.default.label`
   ${({
   disabled
 }) => disabled && (0, _styledComponents.css)`
-      color: var(--colorsYin030);
+      color: var(--colorsUtilityYin030);
     `}
 `;
 LabelStyle.propTypes = {

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

@@ -1,5 +1,5 @@
 export default BaseCarousel;
-declare function BaseCarousel({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, theme, ...props }: {
+declare function BaseCarousel({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: {
     [x: string]: any;
     children: any;
     className: any;
@@ -9,7 +9,6 @@ declare function BaseCarousel({ children, className, enableSlideSelector, enable
     initialSlideIndex?: number | undefined;
     onSlideChange: any;
     slideIndex: any;
-    theme?: import("../../style/themes/base").ThemeObject | undefined;
 }): JSX.Element;
 declare namespace BaseCarousel {
     namespace propTypes {
@@ -21,7 +20,6 @@ declare namespace BaseCarousel {
         const enablePreviousButton: PropTypes.Requireable<boolean>;
         const enableNextButton: PropTypes.Requireable<boolean>;
         const onSlideChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const theme: PropTypes.Requireable<object>;
     }
 }
 export const Carousel: React.ForwardRefExoticComponent<{

package/lib/components/carousel/carousel.component.js

@@ -27,8 +27,6 @@ var _carousel = require("./carousel.style");
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-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; }
@@ -49,7 +47,6 @@ const BaseCarousel = ({
   initialSlideIndex = 0,
   onSlideChange,
   slideIndex,
-  theme = _base.default,
   ...props
 }) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
@@ -106,7 +103,6 @@ const BaseCarousel = ({
         key: `slide-${(0, _guid.default)()}`,
         id: key,
         selectedIndex: selectedSlideIndex,
-        theme,
         ...element.props
       });
     });
@@ -200,10 +196,7 @@ BaseCarousel.propTypes = {
   enableNextButton: _propTypes.default.bool,
 
   /** Action to be called on slide change */
-  onSlideChange: _propTypes.default.func,
-
-  /** theme is used only to support legacy code */
-  theme: _propTypes.default.object
+  onSlideChange: _propTypes.default.func
 };
 const Carousel = (0, _styledComponents.withTheme)(BaseCarousel);
 exports.Carousel = Carousel;

package/lib/components/carousel/carousel.style.js

@@ -11,8 +11,6 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _slide = require("./slide.config");
 
-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; }
@@ -37,7 +35,8 @@ const CarouselNextButtonWrapperStyle = (0, _styledComponents.default)(CarouselNa
 exports.CarouselNextButtonWrapperStyle = CarouselNextButtonWrapperStyle;
 const CarouselStyledIcon = (0, _styledComponents.default)(_icon.default)`
   cursor: pointer;
-  &&::before {
+  color: var(--colorsActionMajorYang100);
+  &::before {
     font-size: 16px;
   }
 `;
@@ -54,22 +53,27 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
   type: "button"
 })`
   ${({
-  theme,
   disabled
 }) => (0, _styledComponents.css)`
     border: none;
     width: 40px;
     height: 64px;
-    background: ${theme.colors.primary};
-    color: ${theme.colors.white};
-    opacity: ${disabled ? "0.1" : "1"};
+    border-width: var(--borderWidth200);
+    border-color: var(--colorsActionMajorTransparent);
+    background-color: ${disabled ? "var(--colorsActionDisabled500)" : "var(--colorsActionMajor500)"};
+
+    ${disabled && (0, _styledComponents.css)`
+      ${CarouselStyledIcon} {
+        color: var(--colorsActionMajorYin030);
+      }
+    `}
 
     &:hover {
-      background-color: ${theme.colors.secondary};
+      background-color: var(--colorsActionMajor600);
       cursor: ${disabled ? "default" : "pointer"};
 
       ${disabled && (0, _styledComponents.css)`
-        background-color: ${theme.colors.primary};
+        background-color: var(--colorsActionDisabled500);
         cursor: default;
 
         ${CarouselStyledIcon} {
@@ -83,7 +87,7 @@ const CarouselButtonStyle = _styledComponents.default.button.attrs({
     }
 
     &:focus {
-      outline: 2px solid ${theme.colors.focus};
+      outline: 2px solid var(--colorsSemanticFocus500);
 
       ::-moz-focus-inner {
         border: 0;
@@ -104,9 +108,7 @@ const CarouselSelectorLabelStyle = _styledComponents.default.label`
   display: inline-block;
   width: 10px;
   height: 10px;
-  background: ${({
-  theme
-}) => theme.carousel.inactiveSelectorBackground};
+  background: var(--colorsActionMinor200);
   margin: 0px 4px;
 
   &:hover {
@@ -115,20 +117,18 @@ const CarouselSelectorLabelStyle = _styledComponents.default.label`
 `;
 exports.CarouselSelectorLabelStyle = CarouselSelectorLabelStyle;
 const CarouselSelectorWrapperStyle = _styledComponents.default.div`
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
+  ${(0, _styledComponents.css)`
     height: 20px;
     margin-top: 25px;
     text-align: center;
 
     ${CarouselSelectorInputStyle}:checked {
       + ${CarouselSelectorLabelStyle} {
-        background: ${theme.carousel.activeSelectorBackground};
-        border-color: transparent;
+        width: 10px;
         height: 10px;
+        background: var(--colorsActionMinor400);
+        border-color: transparent;
         position: relative;
-        width: 10px;
       }
     }
   `}
@@ -158,31 +158,4 @@ const CarouselWrapperStyle = _styledComponents.default.div`
   ${_slide.slideAnimation};
   ${_slide.fadeAnimation};
 `;
-exports.CarouselWrapperStyle = CarouselWrapperStyle;
-CarouselNavigationStyle.defaultProps = {
-  theme: _base.default
-};
-CarouselButtonStyle.defaultProps = {
-  theme: _base.default
-};
-CarouselStyledIcon.defaultProps = {
-  theme: _base.default
-};
-CarouselSelectorWrapperStyle.defaultProps = {
-  theme: _base.default
-};
-CarouselSelectorLabelStyle.defaultProps = {
-  theme: _base.default
-};
-CarouselStyledIconLeft.defaultProps = {
-  theme: _base.default
-};
-CarouselStyledIconRight.defaultProps = {
-  theme: _base.default
-};
-CarouselPreviousButtonWrapperStyle.defaultProps = {
-  theme: _base.default
-};
-CarouselNextButtonWrapperStyle.defaultProps = {
-  theme: _base.default
-};
+exports.CarouselWrapperStyle = CarouselWrapperStyle;

package/lib/components/carousel/slide/slide.style.js

@@ -7,17 +7,12 @@ exports.SlideStyle = 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; }
 
 const SlideStyle = _styledComponents.default.div`
   ${({
-  theme,
   onClick,
   id,
   selectedIndex
@@ -27,30 +22,27 @@ const SlideStyle = _styledComponents.default.div`
     width: 100%;
     z-index: 10;
 
-    ${theme && (0, _styledComponents.css)`
-      transition: 0.5s;
-      min-width: 80%;
-      transform: scale(0.9);
-      opacity: 0.3;
-      margin: 30px 0;
-      box-shadow: ${theme.shadows.depth2};
-
-      ${id === selectedIndex && (0, _styledComponents.css)`
-        transform: scale(1);
-        opacity: 1;
-
-        ${onClick && (0, _styledComponents.css)`
-          :hover {
-            transition: all 0.2s ease-in;
-            transform: scale(1.02);
-            cursor: pointer;
-          }
-        `}
+    transition: 0.5s;
+    min-width: 80%;
+    transform: scale(0.9);
+    opacity: 0.3;
+    margin: 30px 0;
+    box-shadow: var(--boxShadow200);
+    background-color: var(--colorsComponentsNavigationYang100);
+
+    ${id === selectedIndex && (0, _styledComponents.css)`
+      transform: scale(1);
+      opacity: 1;
+
+      ${onClick && (0, _styledComponents.css)`
+        :hover {
+          transition: all 0.2s ease-in;
+          transform: scale(1.02);
+          cursor: pointer;
+        }
       `}
     `}
   `}
-`;
-exports.SlideStyle = SlideStyle;
-SlideStyle.defaultProps = {
-  theme: _base.default
-}; // eslint-disable-next-line import/prefer-default-export
+`; // eslint-disable-next-line import/prefer-default-export
+
+exports.SlideStyle = SlideStyle;

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

@@ -55,21 +55,8 @@ const Drawer = ({
   const isControlled = (0, _react.useRef)(expanded !== undefined);
   const [isOpening, setIsOpening] = (0, _react.useState)(false);
   const [isClosing, setIsClosing] = (0, _react.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(isControlled.current ? expanded : defaultExpanded);
   const timer = (0, _react.useRef)();
-  (0, _react.useEffect)(() => {
-    const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
-    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
-
-    if (expanded !== undefined) {
-      setIsExpanded(expanded);
-    }
-  }, [expanded]);
-  (0, _react.useEffect)(() => {
-    return function cleanup() {
-      clearTimeout(timer.current);
-    };
-  }, []);
   const getAnimationDuration = (0, _react.useCallback)(() => {
     if (animationDuration.indexOf("ms") !== -1) {
       const animationTime = animationDuration.substring(0, animationDuration.length - 2);
@@ -101,6 +88,33 @@ const Drawer = ({
       }, timeout);
     }
   }, [getAnimationDuration, isExpanded]);
+
+  function usePrevious(arg) {
+    const ref = (0, _react.useRef)();
+    (0, _react.useEffect)(() => {
+      ref.current = arg;
+    });
+    return ref.current;
+  }
+
+  const previousValue = usePrevious(expanded);
+  (0, _react.useEffect)(() => {
+    const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
+    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
+
+    if (isControlled.current && previousValue !== expanded) {
+      setIsExpanded(expanded);
+
+      if (!showControls && ![expanded, previousValue].includes(undefined)) {
+        toggleAnimation();
+      }
+    }
+  }, [expanded, toggleAnimation, previousValue, showControls]);
+  (0, _react.useEffect)(() => {
+    return function cleanup() {
+      clearTimeout(timer.current);
+    };
+  }, []);
   const toggleDrawer = (0, _react.useCallback)(ev => {
     setIsExpanded(!isExpanded);
     if (onChange) onChange(ev, !isExpanded);

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/lib/components/switch/__internal__/switch-slider-panel.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"));
-
 var _loader = _interopRequireDefault(require("../../loader/loader.style"));
 
 var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
@@ -24,11 +22,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const SwitchSliderPanel = _styledComponents.default.div`
   ${({
   isLoading,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     border: 0;
-    color: ${theme.colors.white};
+    color: var(--colorsActionMinorYang100);
     margin: auto;
     margin-top: ${size === "large" ? "12px" : "5px"};
 
@@ -37,20 +34,42 @@ const SwitchSliderPanel = _styledComponents.default.div`
     }
 
     &[type="off"] {
-      color: ${theme.text.color};
+      color: var(--colorsActionMinor500);
       margin-right: 6px;
     }
 
     ${isLoading && (0, _styledComponents.css)`
+      &[type="off"],
+      &[type="on"] {
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 2px 8px;
+      }
+
+      &[type="off"] {
+        ${_loaderSquare.default} {
+          background-color: var(--colorsSemanticNeutral500);
+        }
+      }
+
+      &[type="on"] {
+        ${_loaderSquare.default} {
+          background-color: var(--colorsActionMinorYang100);
+        }
+      }
+
       ${_loader.default} {
          {
-          padding: 0 3px 3px 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
 
           ${_loaderSquare.default} {
-            height: 5px;
-            margin-bottom: 2px;
-            margin-right: 2px;
-            width: 5px;
+            height: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
+            width: ${size === "large" ? "var(--sizing200)" : "var(--sizing150)"};
           }
         }
       }
@@ -59,11 +78,7 @@ const SwitchSliderPanel = _styledComponents.default.div`
 `;
 SwitchSliderPanel.propTypes = {
   isLoading: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-SwitchSliderPanel.defaultProps = {
-  theme: _base.default
+  size: _propTypes.default.string
 };
 var _default = SwitchSliderPanel;
 exports.default = _default;

package/lib/components/switch/__internal__/switch-slider.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"));
-
 var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
@@ -24,14 +22,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledSwitchSlider = _styledComponents.default.span`
   ${({
   checked,
+  isLoading,
   disabled,
   size,
-  theme,
   error,
-  warning,
-  info
+  warning
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.switch.off};
     display: flex;
     font-size: 12px;
     font-weight: bold;
@@ -44,21 +40,13 @@ const StyledSwitchSlider = _styledComponents.default.span`
     width: 60px;
     z-index: 2;
     border-radius: 90px;
-
-    ${info && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 1px ${theme.colors.info};
-    `}
-    ${warning && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 1px ${theme.colors.warning};
-    `}
-      ${error && !disabled && (0, _styledComponents.css)`
-      box-shadow: inset 0px 0px 0px 2px ${theme.colors.error};
-    `}
+    border-style: solid;
+    border-color: var(--colorsActionMinor400);
+    border-width: var(--borderWidth200);
 
     &::before {
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsActionMinor400);
       bottom: 4px;
-      box-shadow: ${theme.shadows.cards};
       content: "";
       height: 16px;
       position: absolute;
@@ -70,28 +58,36 @@ const StyledSwitchSlider = _styledComponents.default.span`
     }
 
     ${checked && `
-      background-color: ${theme.switch.on};
+      background-color: var(--colorsActionMinor500);
+      border-color: var(--colorsActionMinorTransparent);
 
       &::before {
         transform: translateX(36px);
+        background-color: var(--colorsActionMinorYang100);
       }
+
     `}
 
-    ${disabled && (0, _styledComponents.css)`
-      background-color: ${theme.switch.offDisabled};
+    ${disabled && !isLoading && (0, _styledComponents.css)`
+      border-color: var(--colorsActionDisabled600);
 
       &::before {
-        opacity: 0.8;
+        background-color: var(--colorsActionDisabled600);
       }
 
       ${_switchSliderPanel.default} {
-        color: ${theme.switch.disabledFontColor};
+        color: var(--colorsUtilityYin030);
       }
 
       ${checked && `
-        background-color: ${theme.switch.onDisabled};
+        background-color: var(--colorsActionDisabled500);
+        border-color: var(--colorsActionMinorTransparent);
 
-        ${_switchSliderPanel.default} { color: ${theme.colors.white}; }
+        &::before {
+          background-color: var(--colorsActionMinorYang100);
+        }
+
+        ${_switchSliderPanel.default} { color: var(--colorsUtilityYin030); }
       `}
     `}
 
@@ -107,6 +103,20 @@ const StyledSwitchSlider = _styledComponents.default.span`
       }
     `}
 
+    ${isLoading && (0, _styledComponents.css)`
+      &::before {
+        display: none;
+      }
+    `}
+
+    ${warning && !disabled && (0, _styledComponents.css)`
+      border-color: var(--colorsSemanticCaution500);
+    `}
+
+    ${error && !disabled && (0, _styledComponents.css)`
+      border-color: var(--colorsSemanticNegative500);
+    `}
+
     ${_validationIcon.default} {
       position: absolute;
       right: -30px;
@@ -118,10 +128,9 @@ StyledSwitchSlider.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   size: _propTypes.default.string,
-  theme: _propTypes.default.object
-};
-StyledSwitchSlider.defaultProps = {
-  theme: _base.default
+  isLoading: _propTypes.default.bool,
+  error: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  warning: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = StyledSwitchSlider;
 exports.default = _default;

package/lib/components/switch/switch.style.js

@@ -35,13 +35,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledSwitch = _styledComponents.default.div`
   ${({
-  checked,
   fieldHelpInline,
   labelInline,
-  labelSpacing,
   reverse,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {
@@ -60,11 +57,7 @@ const StyledSwitch = _styledComponents.default.div`
 
     ${_hiddenCheckableInput.default}:not([disabled]) {
       &:focus + ${_switchSlider.default} {
-        outline: solid 3px ${theme.colors.focus};
-      }
-
-      &:hover + ${_switchSlider.default} {
-        background-color: ${checked ? theme.switch.onHover : theme.switch.offHover};
+        outline: solid 3px var(--colorsSemanticFocus500);
       }
     }
 
@@ -128,10 +121,9 @@ const StyledSwitch = _styledComponents.default.div`
           margin-top: 0;
         }
 
-        ${!fieldHelpInline && `
+        ${!fieldHelpInline && (0, _styledComponents.css)`
           ${_fieldHelp.default} {
             margin-left: 60px;
-            padding-left: ${labelSpacing * theme.spacing}px;
           }
         `}
       `}
@@ -173,10 +165,9 @@ const StyledSwitch = _styledComponents.default.div`
           padding-bottom: 10px;
         }
 
-        ${!fieldHelpInline && reverse && `
+        ${!fieldHelpInline && reverse && (0, _styledComponents.css)`
           ${_fieldHelp.default} {
             margin-left: 78px;
-            padding-left: ${labelSpacing * theme.spacing}px;
           }
         `}
       `}
@@ -188,8 +179,7 @@ StyledSwitch.propTypes = {
   fieldHelpInline: _propTypes.default.bool,
   labelInline: _propTypes.default.bool,
   reverse: _propTypes.default.bool,
-  size: _propTypes.default.string,
-  theme: _propTypes.default.object
+  size: _propTypes.default.string
 };
 StyledSwitch.defaultProps = {
   theme: _base.default

package/package.json

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