carbon-react 144.4.1 → 144.6.0

package/esm/components/switch/switch.style.js

@@ -1,36 +1,46 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
-import baseTheme from "../../style/themes/base";
-import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
+import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
 import HiddenCheckableInputStyle from "../../__internal__/checkable-input/hidden-checkable-input.style";
+import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
+import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
-import StyledSwitchSlider from "./__internal__/switch-slider.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
-import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
+import baseTheme from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
+import StyledSwitchSlider from "./__internal__/switch-slider.style";
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
 export const ErrorBorder = styled.span`
   ${({
-  warning
-}) => css`
-    position: absolute;
-    z-index: 6;
-    width: 2px;
-    background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
-    left: -12px;
-    bottom: -4px;
-    top: 2px;
-  `}
+  reverse,
+  warning,
+  isDarkBackground
+}) => {
+  const darkBgColour = isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)";
+  return css`
+      position: absolute;
+      z-index: 6;
+      width: 2px;
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : darkBgColour};
+      ${reverse ? "right" : "left"}: -12px;
+      bottom: -4px;
+      top: 2px;
+    `;
+}}
 `;
 export const StyledHintText = styled.div`
   margin-top: 8px;
   margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
   font-size: 14px;
   font-weight: 400;
+  max-width: 160px;
+  ${({
+  isDarkBackground
+}) => css`
+    color: ${isDarkBackground ? "var(--colorsUtilityYang065)" : "var(--colorsUtilityYin055)"};
+  `}
 `;
 const StyledSwitch = styled.div`
   ${({
@@ -51,6 +61,9 @@ const StyledSwitch = styled.div`
       `}
     }
 
+    display: flex;
+    flex-flow: ${labelInline ? "row wrap" : "column wrap"};
+
     ${StyledCheckableInput}, ${HiddenCheckableInputStyle} {
       border: none;
       box-sizing: border-box;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
     hasError?: boolean | undefined;

package/esm/locales/en-gb.js

@@ -34,7 +34,8 @@ const enGB = {
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month"
-    }
+    },
+    dateFormatOverride: undefined
   },
   dialog: {
     ariaLabels: {

package/esm/locales/locale.d.ts

@@ -34,6 +34,7 @@ interface Locale {
             previousMonthButton: () => string;
             nextMonthButton: () => string;
         };
+        dateFormatOverride?: string;
     };
     dialog: {
         ariaLabels: {

package/lib/__internal__/checkable-input/checkable-input.style.js

@@ -7,10 +7,10 @@ exports.StyledCheckableInputWrapper = exports.StyledCheckableInput = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _fieldHelp = _interopRequireDefault(require("../field-help/field-help.style"));
 var _formField = require("../form-field/form-field.style");
-var _hiddenCheckableInput = _interopRequireDefault(require("./hidden-checkable-input.style"));
 var _label = _interopRequireWildcard(require("../label/label.style"));
-var _help = _interopRequireDefault(require("../../components/help/help.style"));
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.style"));
+var _help = _interopRequireDefault(require("../../components/help/help.style"));
+var _hiddenCheckableInput = _interopRequireDefault(require("./hidden-checkable-input.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; }
@@ -27,6 +27,8 @@ const StyledCheckableInputWrapper = exports.StyledCheckableInputWrapper = _style
   labelInline,
   reverse
 }) => (0, _styledComponents.css)`
+    width: 100% !important;
+
     ${_formField.FieldLineStyle} {
       display: flex;
     }
@@ -95,6 +97,7 @@ const StyledCheckableInputWrapper = exports.StyledCheckableInputWrapper = _style
     ${inputWidth !== undefined && inputWidth !== 0 && (0, _styledComponents.css)`
       ${StyledCheckableInput} {
         width: ${inputWidth}% !important;
+        min-width: 67px;
       }
     `}
 

package/lib/__internal__/label/label.component.d.ts

@@ -24,7 +24,9 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     className?: string;
     /** Sets aria-label for label element */
     "aria-label"?: string;
+    /** Whether this component is shown against a dark background */
+    isDarkBackground?: boolean;
 }
-export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/lib/__internal__/label/label.component.js

@@ -43,6 +43,7 @@ const Label = ({
   htmlFor,
   info,
   inline,
+  isDarkBackground = false,
   isRequired,
   labelId,
   optional,
@@ -125,7 +126,8 @@ const Label = ({
     onMouseLeave: handleMouseLeave,
     isRequired: isRequired,
     as: as,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    isDarkBackground: isDarkBackground
   }), children), icon());
 };
 exports.Label = Label;

package/lib/__internal__/label/label.style.d.ts

@@ -3,6 +3,8 @@ export interface StyledLabelProps {
     disabled?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
+    /** Flag to determine whether to use colours for dark backgrounds */
+    isDarkBackground?: boolean;
 }
 declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
 export interface StyledLabelContainerProps {

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

@@ -8,7 +8,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
 const StyledLabel = _styledComponents.default.label`
-  color: var(--colorsUtilityYin090);
+  ${({
+  isDarkBackground
+}) => (0, _styledComponents.css)`
+    color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)"};
+  `}
   display: block;
   font-weight: var(--fontWeights500);
 

package/lib/__internal__/validation-message/validation-message.component.d.ts

@@ -8,6 +8,8 @@ export interface ValidationMessageProps {
     /** Indicate that warning has occurred
     Pass string to display hint with warning */
     warning?: boolean | string;
+    /** Whether this component resides on a dark background */
+    isDarkBackground?: boolean;
 }
-declare const ValidationMessage: ({ error, validationId, warning, }: ValidationMessageProps) => React.JSX.Element | null;
+declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, }: ValidationMessageProps) => React.JSX.Element | null;
 export default ValidationMessage;

package/lib/__internal__/validation-message/validation-message.component.js

@@ -11,14 +11,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ValidationMessage = ({
   error,
   validationId,
-  warning
+  warning,
+  isDarkBackground
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     id: validationId,
     isWarning: !!(!error && warning),
-    "data-role": "validation-message"
+    "data-role": "validation-message",
+    isDarkBackground: isDarkBackground
   }, validation) : null;
 };
 var _default = exports.default = ValidationMessage;

package/lib/__internal__/validation-message/validation-message.style.d.ts

@@ -1,5 +1,6 @@
 interface StyledValidationMessageProps {
     isWarning?: boolean;
+    isDarkBackground?: boolean;
 }
 declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
 export default StyledValidationMessage;

package/lib/__internal__/validation-message/validation-message.style.js

@@ -9,12 +9,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const StyledValidationMessage = _styledComponents.default.p`
   ${({
-  isWarning
-}) => (0, _styledComponents.css)`
-    color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "normal" : "500"};
-    margin-top: 0px;
-    margin-bottom: 8px;
-  `}
+  isWarning,
+  isDarkBackground
+}) => {
+  const darkBgColour = isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)";
+  return (0, _styledComponents.css)`
+      color: ${isWarning ? "var(--colorsSemanticCaution600)" : darkBgColour};
+      font-weight: ${isWarning ? "normal" : "500"};
+      margin-top: 0px;
+      margin-bottom: 8px;
+    `;
+}}
 `;
 var _default = exports.default = StyledValidationMessage;

package/lib/components/date/__internal__/date-formats/index.d.ts

@@ -3,5 +3,5 @@ interface LocaleFormats {
     formats: string[];
     format: string;
 }
-declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
+declare const getFormatData: ({ code }: DateFnsLocale, dateFormatOverride?: string) => LocaleFormats;
 export default getFormatData;

package/lib/components/date/__internal__/date-formats/index.js

@@ -78,7 +78,31 @@ const getTrailingChar = format => {
 };
 const getFormatData = ({
   code = "en-GB"
-}) => {
+}, dateFormatOverride) => {
+  if (dateFormatOverride) {
+    const {
+      format
+    } = getOutputFormatForLocale(code);
+    let formatFromLocale;
+    switch (code) {
+      case "en-CA":
+      case "en-US":
+        formatFromLocale = "MM/dd/yyyy";
+        break;
+      case "ar-EG":
+      case "en-ZA":
+      case "fr-CA":
+        formatFromLocale = "dd/MM/yyyy";
+        break;
+      default:
+        formatFromLocale = format;
+    }
+    const formatsForLocale = getInputFormatsArrayForLocale(formatFromLocale);
+    return {
+      format: dateFormatOverride,
+      formats: generateFormats(formatsForLocale, "/")
+    };
+  }
   if (["en-CA", "en-US"].includes(code)) {
     const format = "MM/dd/yyyy";
     const formats = getInputFormatsArrayForLocale(format);

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

@@ -42,6 +42,8 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
     onPickerOpen?: () => void;
     /** Callback triggered when the picker is closed */
     onPickerClose?: () => void;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

package/lib/components/date/date.component.js

@@ -61,12 +61,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = locale.date;
   const {
     format,
     formats
-  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const {
     inputRefMap,
     setInputRefMap
@@ -489,6 +490,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "datatype": _propTypes.default.string,
+    "dateFormatOverride": _propTypes.default.string,
     "defaultChecked": _propTypes.default.bool,
     "defaultValue": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
     "dir": _propTypes.default.string,

package/lib/components/date-range/date-range.component.d.ts

@@ -85,6 +85,8 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     required?: boolean;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** Date format string to be applied to the date inputs */
+    dateFormatOverride?: string;
 }
 export declare const DateRange: {
     ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;

package/lib/components/date-range/date-range.component.js

@@ -44,11 +44,12 @@ const DateRange = ({
   const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = (0, _useLocale.default)();
   const {
-    dateFnsLocale
+    dateFnsLocale,
+    dateFormatOverride
   } = l.date;
   const {
     format
-  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
   const inlineLabelWidth = 40;
   const [lastChangedDate, setLastChangedDate] = (0, _react.useState)("");
   const computedValue = (0, _react.useCallback)(valueString => {

package/lib/components/flat-table/flat-table.component.d.ts

@@ -35,9 +35,11 @@ export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-compon
     overflowX?: string;
     /** Width of the table. Any valid CSS string */
     width?: string;
+    /** The title to describe the table when one or more tables are used on a single page */
+    title?: string;
 }
 export declare const FlatTable: {
-    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, title, ...rest }: FlatTableProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTable;

package/lib/components/flat-table/flat-table.component.js

@@ -32,6 +32,7 @@ const FlatTable = ({
   minHeight,
   overflowX,
   width,
+  title,
   ...rest
 }) => {
   const wrapperRef = (0, _react.useRef)(null);
@@ -171,7 +172,8 @@ const FlatTable = ({
     onKeyDown: handleKeyDown,
     isFocused: focused
   }, rest, {
-    "data-component": "flat-table-wrapper"
+    "data-component": "flat-table-wrapper",
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
     ref: container,
     onFocus: () => {

package/lib/components/switch/__internal__/switch-slider-panel.style.d.ts

@@ -2,6 +2,7 @@ import { SwitchProps } from "../switch.component";
 export interface SwitchSliderPanelProps {
     isLoading?: boolean;
     size?: SwitchProps["size"];
+    isDarkBackground?: boolean;
 }
 declare const SwitchSliderPanel: import("styled-components").StyledComponent<"div", any, SwitchSliderPanelProps, never>;
 export default SwitchSliderPanel;

package/lib/components/switch/__internal__/switch-slider-panel.style.js

@@ -5,29 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _loader = _interopRequireDefault(require("../../loader/loader.style"));
 var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
+var _loader = _interopRequireDefault(require("../../loader/loader.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; }
 const SwitchSliderPanel = _styledComponents.default.div`
   ${({
   isLoading,
-  size
+  size,
+  isDarkBackground
 }) => (0, _styledComponents.css)`
     border: 0;
-    color: var(--colorsActionMinorYang100);
+    color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
     margin: auto;
     position: absolute;
     left: 0;
 
     &[type="on"] {
+      color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsUtilityYang100)"};
       margin-left: 9px;
       padding-right: ${size === "large" ? "43px" : "27px"};
     }
 
     &[type="off"] {
-      color: var(--colorsActionMinor500);
+      color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
       margin-right: 9px;
       padding-left: ${size === "large" ? "43px" : "27px"};
     }

package/lib/components/switch/__internal__/switch-slider.component.d.ts

@@ -6,6 +6,7 @@ export interface SwitchSliderProps extends ValidationProps {
     loading?: boolean;
     size?: "small" | "large";
     useValidationIcon?: boolean;
+    isDarkBackground?: boolean;
 }
-declare const SwitchSlider: ({ checked, disabled, loading, size, error, warning, info, useValidationIcon, }: SwitchSliderProps) => React.JSX.Element;
+declare const SwitchSlider: ({ checked, disabled, loading, size, error, warning, info, useValidationIcon, isDarkBackground, }: SwitchSliderProps) => React.JSX.Element;
 export default SwitchSlider;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -21,7 +21,8 @@ const SwitchSlider = ({
   error,
   warning,
   info,
-  useValidationIcon
+  useValidationIcon,
+  isDarkBackground
 }) => {
   const locale = (0, _useLocale.default)();
   const onText = locale.switch.on();
@@ -38,13 +39,15 @@ const SwitchSlider = ({
     size,
     error,
     warning,
-    info
+    info,
+    isDarkBackground
   };
   const sliderPanelStyleProps = {
     isLoading: loading,
     size,
     type: checked ? "on" : "off",
-    disabled
+    disabled,
+    isDarkBackground
   };
   const loaderProps = {
     isInsideButton: true,

package/lib/components/switch/__internal__/switch-slider.style.d.ts

@@ -1,8 +1,9 @@
-import { SwitchSliderProps } from "./switch-slider.component";
 import { ThemeObject } from "../../../style/themes/base";
+import { SwitchSliderProps } from "./switch-slider.component";
 interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
     isLoading?: boolean;
     theme?: Partial<ThemeObject>;
+    isDarkBackground?: boolean;
 }
 declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const HiddenContent: import("styled-components").StyledComponent<"div", any, Pick<StyledSwitchSliderProps, "size">, never>;

package/lib/components/switch/__internal__/switch-slider.style.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.StyledSwitchSlider = exports.HiddenContent = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.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; }
@@ -19,7 +19,8 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
   size,
   error,
   warning,
-  theme
+  theme,
+  isDarkBackground
 }) => (0, _styledComponents.css)`
     display: flex;
     font-size: 12px;
@@ -34,14 +35,14 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
     z-index: 2;
     border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
     border-style: solid;
-    border-color: var(--colorsActionMinor400);
+    border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
     border-width: var(--borderWidth200);
     box-sizing: border-box;
     margin-top: ${size === "large" ? "-47px" : "-28px"};
     align-items: center;
 
     &::before {
-      background-color: var(--colorsActionMinor400);
+      background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
       bottom: 4px;
       content: "";
       height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
@@ -54,7 +55,7 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
     }
 
     ${checked && (0, _styledComponents.css)`
-        background-color: var(--colorsActionMinor500);
+        background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
         border-color: var(--colorsActionMinorTransparent);
 
         &::before {
@@ -62,7 +63,7 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
             100% -
               ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
           );
-          background-color: var(--colorsActionMinorYang100);
+          background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
         }
       `}
 

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

@@ -24,6 +24,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
+    /** Whether this component resides on a dark background */
+    isDarkBackground?: boolean;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;