carbon-react 152.0.1 → 152.2.0

package/esm/components/button/button-types.style.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
+declare const _default: (isDisabled?: boolean, destructive?: boolean, isWhite?: boolean) => {
     primary: string;
     secondary: string;
     tertiary: string;

package/esm/components/button/button-types.style.js

@@ -32,7 +32,7 @@ const gradientSharedStyle = `
     background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
   }
 `;
-export default (isDisabled, destructive) => ({
+export default (isDisabled, destructive, isWhite) => ({
   primary: `
     background: var(--colorsActionMajor500);
     border-color: transparent;
@@ -85,7 +85,7 @@ export default (isDisabled, destructive) => ({
               ${makeColors("var(--colorsSemanticNegativeYang100)")};
             }
           ` : ""}
-      
+
       ${isDisabled ? `
             border-color: var(--colorsActionDisabled500);
             ${makeColors("var(--colorsActionMajorYin030)")};
@@ -96,6 +96,39 @@ export default (isDisabled, destructive) => ({
             }
             ${disabledImageStyle}
           ` : ""}
+
+      ${isWhite ? `
+            border-color: var(--colorsActionMajorYang100);
+            ${makeColors("var(--colorsActionMajorYang100)")}
+            &:hover {
+              background: var(--colorsActionMajorYang100);
+              ${makeColors("var(--colorsUtilityYin100)")};
+            }
+
+
+            ${destructive ? `
+                  border-color: var(--colorsSemanticNegative450);
+                  ${makeColors("var(--colorsSemanticNegative450)")}
+                  &:hover {
+                    background: var(--colorsSemanticNegative600);
+                    border-color: var(--colorsSemanticNegativeTransparent);
+                    ${makeColors("var(--colorsSemanticNegativeYang100)")};
+                  }
+                ` : ""}
+
+            ${isDisabled ? `
+                  border-color: #4B4B4B;
+                  ${makeColors("#4B4B4B")};
+                  &:hover {
+                    background: transparent;
+                    border-color: #4B4B4B;
+                    ${makeColors("#4B4B4B")};
+
+                  }
+                  ${disabledImageStyle}
+                ` : ""}
+          }
+          ` : ""}
   `,
   tertiary: `
     background: transparent;
@@ -131,7 +164,7 @@ export default (isDisabled, destructive) => ({
       background: var(--colorsActionMajor600);
       ${makeColors("var(--colorsActionMajorYang100)")}
     }
-    
+
     ${isDisabled ? `
           background: var(--colorsActionDisabled500);
           ${makeColors("var(--colorsActionMajorYin030)")};
@@ -144,13 +177,13 @@ export default (isDisabled, destructive) => ({
   `,
   "gradient-grey": `
     ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
           ${gradientSharedStyle}
         `}
   `,
   "gradient-white": `
     ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
           ${gradientSharedStyle}
         `}
   `

package/esm/components/button/button.component.d.ts

@@ -40,6 +40,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
     iconType?: IconType;
     /** id attribute */
     id?: string;
+    /** Whether to use the white-on-dark colour variant */
+    isWhite?: boolean;
     /** If provided, the text inside a button will not wrap */
     noWrap?: boolean;
     /** Specify a callback triggered on blur */

package/esm/components/button/button.component.js

@@ -70,6 +70,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   iconTooltipMessage,
   iconTooltipPosition,
   iconType,
+  isWhite = false,
   m = 0,
   noWrap,
   onClick,
@@ -139,6 +140,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     buttonType: buttonType,
     disabled: isDisabled,
     destructive: destructive,
+    isWhite: isWhite,
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

package/esm/components/button/button.style.js

@@ -1,9 +1,9 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
-import BaseTheme from "../../style/themes/base";
-import buttonTypes from "./button-types.style";
 import StyledIcon from "../icon/icon.style";
+import BaseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
+import buttonTypes from "./button-types.style";
 function additionalIconStyle(iconType) {
   if (iconType === "services") return "6px";
   return "20px";
@@ -21,8 +21,8 @@ function stylingForIconOnly(size) {
       dimension = "40px";
   }
   return `
-  padding: 0px; 
-  width: ${dimension}; 
+  padding: 0px;
+  width: ${dimension};
   min-height: ${dimension}`;
 }
 function stylingForType({
@@ -30,10 +30,11 @@ function stylingForType({
   disabled,
   buttonType,
   size,
-  destructive
+  destructive,
+  isWhite
 }) {
   return css`
-    ${buttonTypes(disabled, destructive)[buttonType]};
+    ${buttonTypes(disabled, destructive, isWhite)[buttonType]};
 
     ${size === "small" && css`
       font-size: var(--fontSizes100);
@@ -44,7 +45,7 @@ function stylingForType({
       font-size: var(--fontSizes100);
       min-height: 40px;
     `}
-    
+
     ${size === "large" && css`
       font-size: var(--fontSizes200);
       min-height: 48px;
@@ -84,7 +85,7 @@ const StyledButton = styled.button`
 }) => fullWidth && css`
       width: 100%;
     `}
-    
+
   ${({
   iconOnly,
   iconPosition,

package/esm/components/tile/tile.component.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
-import StyledTile, { StyledHighlight } from "./tile.style";
+import StyledTile from "./tile.style";
 import TileContext from "./__internal__/tile.context";
 import filterStyledSystemPaddingProps from "../../style/utils/filter-styled-system-padding-props";
 import filterStyledSystemMarginProps from "../../style/utils/filter-styled-system-margin-props";
@@ -26,13 +26,14 @@ export const Tile = ({
   });
   const marginProps = filterStyledSystemMarginProps(rest);
   const contentPaddingProps = computeContentPadding(paddingProps, isHorizontal);
-  const tile = /*#__PURE__*/React.createElement(StyledTile, _extends({
+  return /*#__PURE__*/React.createElement(StyledTile, _extends({
     variant: variant,
     width: width,
     height: height,
     isHorizontal: isHorizontal,
     p: p,
     roundness: roundness,
+    highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
   }, paddingProps, marginProps, tagComponent("tile", rest)), /*#__PURE__*/React.createElement(TileContext.Provider, {
@@ -41,14 +42,5 @@ export const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
-  if (highlightVariant) {
-    return /*#__PURE__*/React.createElement(StyledHighlight, {
-      variant: highlightVariant,
-      roundness: roundness,
-      "aria-hidden": true,
-      "data-role": `tile-${highlightVariant}-highlight`
-    }, tile);
-  }
-  return tile;
 };
 export default Tile;

package/esm/components/tile/tile.config.js

@@ -1,4 +1,4 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
 export const TILE_THEMES = ["tile", "transparent", "active", "grey"];
 export const TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
-export const TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];
+export const TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info", "important"];

package/esm/components/tile/tile.style.d.ts

@@ -3,8 +3,4 @@ import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
-    variant: Required<TileProps["highlightVariant"]>;
-    roundness: TileProps["roundness"];
-}, never>;
 export default StyledTile;

package/esm/components/tile/tile.style.js

@@ -48,6 +48,9 @@ const getHighlightVariant = variant => {
       return "var(--colorsSemanticCaution500)";
     case "info":
       return "var(--colorsSemanticInfo500)";
+    // FE-6368 has been raised for the below, change hex values for design tokens (when added)
+    case "important":
+      return " #8F4CD7";
     default:
       // gradient is default
       return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
@@ -61,10 +64,25 @@ const StyledTile = styled.div`
   variant,
   width,
   roundness,
+  highlightVariant,
   height
 }) => css`
     ${space}
 
+    ${highlightVariant && css`
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: "";
+        height: 100%;
+        width: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: ${getHighlightVariant(highlightVariant)};
+      }
+    `}
+
     box-sizing: border-box;
     border: var(--${borderWidth}) solid
       ${getBorderColor(borderVariant, variant)};
@@ -109,21 +127,4 @@ const StyledTile = styled.div`
 StyledTile.defaultProps = {
   theme: baseTheme
 };
-export const StyledHighlight = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background: ${({
-  variant
-}) => getHighlightVariant(variant)};
-  border-radius: ${({
-  roundness
-}) => getBorderRadius(roundness)};
-
-  ${StyledTile} {
-    border-left: 0;
-    left: 4px;
-    width: calc(100% - 4px);
-  }
-`;
 export default StyledTile;

package/lib/components/button/button-types.style.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
+declare const _default: (isDisabled?: boolean, destructive?: boolean, isWhite?: boolean) => {
     primary: string;
     secondary: string;
     tertiary: string;

package/lib/components/button/button-types.style.js

@@ -39,7 +39,7 @@ const gradientSharedStyle = `
     background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
   }
 `;
-var _default = (isDisabled, destructive) => ({
+var _default = (isDisabled, destructive, isWhite) => ({
   primary: `
     background: var(--colorsActionMajor500);
     border-color: transparent;
@@ -92,7 +92,7 @@ var _default = (isDisabled, destructive) => ({
               ${makeColors("var(--colorsSemanticNegativeYang100)")};
             }
           ` : ""}
-      
+
       ${isDisabled ? `
             border-color: var(--colorsActionDisabled500);
             ${makeColors("var(--colorsActionMajorYin030)")};
@@ -103,6 +103,39 @@ var _default = (isDisabled, destructive) => ({
             }
             ${disabledImageStyle}
           ` : ""}
+
+      ${isWhite ? `
+            border-color: var(--colorsActionMajorYang100);
+            ${makeColors("var(--colorsActionMajorYang100)")}
+            &:hover {
+              background: var(--colorsActionMajorYang100);
+              ${makeColors("var(--colorsUtilityYin100)")};
+            }
+
+
+            ${destructive ? `
+                  border-color: var(--colorsSemanticNegative450);
+                  ${makeColors("var(--colorsSemanticNegative450)")}
+                  &:hover {
+                    background: var(--colorsSemanticNegative600);
+                    border-color: var(--colorsSemanticNegativeTransparent);
+                    ${makeColors("var(--colorsSemanticNegativeYang100)")};
+                  }
+                ` : ""}
+
+            ${isDisabled ? `
+                  border-color: #4B4B4B;
+                  ${makeColors("#4B4B4B")};
+                  &:hover {
+                    background: transparent;
+                    border-color: #4B4B4B;
+                    ${makeColors("#4B4B4B")};
+
+                  }
+                  ${disabledImageStyle}
+                ` : ""}
+          }
+          ` : ""}
   `,
   tertiary: `
     background: transparent;
@@ -138,7 +171,7 @@ var _default = (isDisabled, destructive) => ({
       background: var(--colorsActionMajor600);
       ${makeColors("var(--colorsActionMajorYang100)")}
     }
-    
+
     ${isDisabled ? `
           background: var(--colorsActionDisabled500);
           ${makeColors("var(--colorsActionMajorYin030)")};
@@ -151,13 +184,13 @@ var _default = (isDisabled, destructive) => ({
   `,
   "gradient-grey": `
     ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
           ${gradientSharedStyle}
         `}
   `,
   "gradient-white": `
     ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;          
+          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
           ${gradientSharedStyle}
         `}
   `

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

@@ -40,6 +40,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
     iconType?: IconType;
     /** id attribute */
     id?: string;
+    /** Whether to use the white-on-dark colour variant */
+    isWhite?: boolean;
     /** If provided, the text inside a button will not wrap */
     noWrap?: boolean;
     /** Specify a callback triggered on blur */

package/lib/components/button/button.component.js

@@ -79,6 +79,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
   iconTooltipMessage,
   iconTooltipPosition,
   iconType,
+  isWhite = false,
   m = 0,
   noWrap,
   onClick,
@@ -148,6 +149,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
     buttonType: buttonType,
     disabled: isDisabled,
     destructive: destructive,
+    isWhite: isWhite,
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

package/lib/components/button/button.style.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StyledButtonSubtext = exports.StyledButtonMainText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _buttonTypes = _interopRequireDefault(require("./button-types.style"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
+var _buttonTypes = _interopRequireDefault(require("./button-types.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -30,8 +30,8 @@ function stylingForIconOnly(size) {
       dimension = "40px";
   }
   return `
-  padding: 0px; 
-  width: ${dimension}; 
+  padding: 0px;
+  width: ${dimension};
   min-height: ${dimension}`;
 }
 function stylingForType({
@@ -39,10 +39,11 @@ function stylingForType({
   disabled,
   buttonType,
   size,
-  destructive
+  destructive,
+  isWhite
 }) {
   return (0, _styledComponents.css)`
-    ${(0, _buttonTypes.default)(disabled, destructive)[buttonType]};
+    ${(0, _buttonTypes.default)(disabled, destructive, isWhite)[buttonType]};
 
     ${size === "small" && (0, _styledComponents.css)`
       font-size: var(--fontSizes100);
@@ -53,7 +54,7 @@ function stylingForType({
       font-size: var(--fontSizes100);
       min-height: 40px;
     `}
-    
+
     ${size === "large" && (0, _styledComponents.css)`
       font-size: var(--fontSizes200);
       min-height: 48px;
@@ -93,7 +94,7 @@ const StyledButton = _styledComponents.default.button`
 }) => fullWidth && (0, _styledComponents.css)`
       width: 100%;
     `}
-    
+
   ${({
   iconOnly,
   iconPosition,

package/lib/components/tile/tile.component.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _tile = _interopRequireWildcard(require("./tile.style"));
+var _tile = _interopRequireDefault(require("./tile.style"));
 var _tile2 = _interopRequireDefault(require("./__internal__/tile.context"));
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
 var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Tile = ({
@@ -35,13 +33,14 @@ const Tile = ({
   });
   const marginProps = (0, _filterStyledSystemMarginProps.default)(rest);
   const contentPaddingProps = (0, _computeContentPadding.default)(paddingProps, isHorizontal);
-  const tile = /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_tile.default, _extends({
     variant: variant,
     width: width,
     height: height,
     isHorizontal: isHorizontal,
     p: p,
     roundness: roundness,
+    highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
   }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.default.Provider, {
@@ -50,15 +49,6 @@ const Tile = ({
       paddingPropsFromTile: contentPaddingProps
     }
   }, children));
-  if (highlightVariant) {
-    return /*#__PURE__*/_react.default.createElement(_tile.StyledHighlight, {
-      variant: highlightVariant,
-      roundness: roundness,
-      "aria-hidden": true,
-      "data-role": `tile-${highlightVariant}-highlight`
-    }, tile);
-  }
-  return tile;
 };
 exports.Tile = Tile;
 var _default = exports.default = Tile;

package/lib/components/tile/tile.config.js

@@ -7,4 +7,4 @@ exports.TILE_THEMES = exports.TILE_ORIENTATIONS = exports.TILE_HIGHLIGHT_VARIANT
 const TILE_ORIENTATIONS = exports.TILE_ORIENTATIONS = ["horizontal", "vertical"];
 const TILE_THEMES = exports.TILE_THEMES = ["tile", "transparent", "active", "grey"];
 const TILE_BORDER_VARIANTS = exports.TILE_BORDER_VARIANTS = ["default", "info", "selected", "negative", "positive", "caution"];
-const TILE_HIGHLIGHT_VARIANTS = exports.TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info"];
+const TILE_HIGHLIGHT_VARIANTS = exports.TILE_HIGHLIGHT_VARIANTS = ["gradient", "success", "neutral", "error", "warning", "info", "important"];

package/lib/components/tile/tile.style.d.ts

@@ -3,8 +3,4 @@ import { TileProps } from "./tile.component";
 declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export declare const StyledHighlight: import("styled-components").StyledComponent<"div", any, {
-    variant: Required<TileProps["highlightVariant"]>;
-    roundness: TileProps["roundness"];
-}, never>;
 export default StyledTile;

package/lib/components/tile/tile.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledHighlight = void 0;
+exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -57,6 +57,9 @@ const getHighlightVariant = variant => {
       return "var(--colorsSemanticCaution500)";
     case "info":
       return "var(--colorsSemanticInfo500)";
+    // FE-6368 has been raised for the below, change hex values for design tokens (when added)
+    case "important":
+      return " #8F4CD7";
     default:
       // gradient is default
       return "linear-gradient(0deg, rgb(143, 73, 254) 5%, rgb(0, 146, 219) 50%, rgb(19, 160, 56) 95%)";
@@ -70,10 +73,25 @@ const StyledTile = _styledComponents.default.div`
   variant,
   width,
   roundness,
+  highlightVariant,
   height
 }) => (0, _styledComponents.css)`
     ${_styledSystem.space}
 
+    ${highlightVariant && (0, _styledComponents.css)`
+      overflow: hidden;
+      &::before {
+        display: block;
+        content: "";
+        height: 100%;
+        width: 8px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: ${getHighlightVariant(highlightVariant)};
+      }
+    `}
+
     box-sizing: border-box;
     border: var(--${borderWidth}) solid
       ${getBorderColor(borderVariant, variant)};
@@ -118,21 +136,4 @@ const StyledTile = _styledComponents.default.div`
 StyledTile.defaultProps = {
   theme: _base.default
 };
-const StyledHighlight = exports.StyledHighlight = _styledComponents.default.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background: ${({
-  variant
-}) => getHighlightVariant(variant)};
-  border-radius: ${({
-  roundness
-}) => getBorderRadius(roundness)};
-
-  ${StyledTile} {
-    border-left: 0;
-    left: 4px;
-    width: calc(100% - 4px);
-  }
-`;
 var _default = exports.default = StyledTile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.0.1",
+  "version": "152.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",