carbon-react 102.16.1 → 102.17.0

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

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