carbon-react 102.8.1 → 102.10.0

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -30,6 +30,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const AdvancedColorPicker = ({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   name,
   open,
   onOpen,
@@ -39,6 +42,7 @@ const AdvancedColorPicker = ({
   availableColors,
   defaultColor,
   selectedColor,
+  role,
   ...props
 }) => {
   const isOpen = open || false;
@@ -127,11 +131,15 @@ const AdvancedColorPicker = ({
     color: currentColor,
     tabIndex: "0"
   }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     open: dialogOpen || isOpen,
     size: "auto",
     onCancel: handleOnClose,
     bespokeFocusTrap: handleFocus,
-    focusFirstElement: selectedColorRef
+    focusFirstElement: selectedColorRef,
+    role: role
   }, /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerPreview, {
     "data-element": "color-picker-preview",
     color: currentColor
@@ -161,6 +169,22 @@ AdvancedColorPicker.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
 
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Specifies the name prop to be applied to each color in the group */
   name: _propTypes.default.string.isRequired,
 
@@ -186,7 +210,10 @@ AdvancedColorPicker.propTypes = {
   open: _propTypes.default.bool,
 
   /** Prop for `onBlur` event */
-  onBlur: _propTypes.default.func
+  onBlur: _propTypes.default.func,
+
+  /** The ARIA role to be applied to the container */
+  role: _propTypes.default.string
 };
 var _default = AdvancedColorPicker;
 exports.default = _default;

package/lib/components/advanced-color-picker/advanced-color-picker.d.ts

@@ -7,6 +7,12 @@ export interface AdvancedColor {
 }
 
 export interface AdvancedColorPickerPropTypes extends MarginProps {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby"?: string;
+  /** Prop to specify the aria-label of the component */
+  "aria-label"?: string;
+  /** Prop to specify the aria-labeledby property of the component */
+  "aria-labelledby"?: string;
   /** Prop for `availableColors` containing array of objects of colors */
   availableColors: AdvancedColor[];
   /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
@@ -23,6 +29,8 @@ export interface AdvancedColorPickerPropTypes extends MarginProps {
   onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
   /** Prop for `open` status */
   open?: boolean;
+  /** The ARIA role to be applied to the component container */
+  role?: string;
   /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
   selectedColor?: string;
 }

package/lib/components/alert/alert.component.js

@@ -20,10 +20,26 @@ const Alert = ({
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_dialog.default, _extends({
   "data-component": "alert",
-  ariaRole: "alertdialog"
+  role: "alertdialog"
 }, rest), children);
 
 Alert.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Alert content */
   children: _propTypes.default.node,
 

package/lib/components/confirm/confirm.component.js

@@ -116,7 +116,8 @@ const Confirm = ({
     disableClose: disableCancel,
     subtitle: subtitle,
     title: getTitle(),
-    "data-component": "confirm"
+    "data-component": "confirm",
+    role: "alertdialog"
   }, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 
@@ -131,6 +132,22 @@ Confirm.defaultProps = {
   confirmButtonType: "primary"
 };
 Confirm.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Confirm content */
   children: _propTypes.default.node,
 

package/lib/components/dialog/dialog.component.js

@@ -41,7 +41,6 @@ const Dialog = ({
   open,
   height,
   size,
-  ariaRole,
   title,
   disableEscKey,
   subtitle,
@@ -52,6 +51,7 @@ const Dialog = ({
   bespokeFocusTrap,
   disableClose,
   help,
+  role = "dialog",
   ...rest
 }) => {
   const dialogRef = (0, _react.useRef)();
@@ -131,6 +131,7 @@ const Dialog = ({
       hasSubtitle: !!subtitle,
       ref: titleRef
     }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
+      "data-element": "dialog-title",
       title: title,
       titleId: "carbon-dialog-title",
       subheader: subtitle,
@@ -148,11 +149,16 @@ const Dialog = ({
 
   const dialogProps = {
     size,
-    dialogHeight
+    dialogHeight,
+    "aria-labelledby": rest["aria-labelledby"],
+    "aria-describedby": subtitle ? "carbon-dialog-subtitle" : rest["aria-describedby"],
+    "aria-label": rest["aria-label"]
   };
-  if (ariaRole) dialogProps.role = ariaRole;
-  if (title) dialogProps["aria-labelledby"] = "carbon-dialog-title";
-  if (subtitle) dialogProps["aria-describedby"] = "carbon-dialog-subtitle";
+
+  if (title && typeof title === "string") {
+    dialogProps["aria-labelledby"] = "carbon-dialog-title";
+  }
+
   const componentTags = {
     "data-component": rest["data-component"] || "dialog",
     "data-element": rest["data-element"],
@@ -170,12 +176,14 @@ const Dialog = ({
     bespokeTrap: bespokeFocusTrap,
     wrapperRef: dialogRef
   }, /*#__PURE__*/_react.default.createElement(_dialog.DialogStyle, _extends({
+    "aria-modal": true,
     ref: dialogRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {
     "data-component": "dialog",
     "data-element": "dialog",
-    "data-role": rest["data-role"]
+    "data-role": rest["data-role"],
+    role: role
   }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, {
     ref: innerContentRef
   }, _react.default.Children.map(children, child => {
@@ -190,12 +198,21 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
+  /** Prop to specify the aria-describedby property of the Dialog component */
+  "aria-describedby": _propTypes.default.string,
+
   /**
-   * The ARIA role to be applied to the Dialog
-   * @ignore
-   * @private
+   * Prop to specify the aria-label of the Dialog component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
    */
-  ariaRole: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the Dialog component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": _propTypes.default.string,
 
   /** Dialog content */
   children: _propTypes.default.node,
@@ -246,12 +263,14 @@ Dialog.propTypes = {
    * @ignore
    * @private
    */
-  bespokeFocusTrap: _propTypes.default.func
+  bespokeFocusTrap: _propTypes.default.func,
+
+  /** The ARIA role to be applied to the Dialog container */
+  role: _propTypes.default.string
 };
 Dialog.defaultProps = {
   size: "medium",
   showCloseIcon: true,
-  ariaRole: "dialog",
   disableAutoFocus: false
 };
 var _default = Dialog;

package/lib/components/dialog/dialog.d.ts

@@ -1,15 +1,40 @@
 import * as React from "react";
 import { ModalProps } from "../modal/modal";
 
+export type DialogSizes =
+  | "auto"
+  | "extra-small"
+  | "small"
+  | "medium-small"
+  | "medium"
+  | "medium-large"
+  | "large"
+  | "extra-large";
+
 export interface DialogProps extends ModalProps {
+  /** Prop to specify the aria-describedby property of the Dialog component */
+  "aria-describedby"?: string;
+  /**
+   * Prop to specify the aria-label of the Dialog component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label"?: string;
+  /**
+   * Prop to specify the aria-labeledby property of the Dialog component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby"?: string;
   /* Disables auto focus functionality on child elements */
   disableAutoFocus?: boolean;
   /* Disables the focus trap when the dialog is open */
   disableFocusTrap?: boolean;
-  /* Function or reference to first element to focus */
-  focusFirstElement?: () => void;
+  /** Optional reference to an element meant to be focused on open */
+  focusFirstElement?: React.MutableRefObject<HTMLElement>;
   /** Allows developers to specify a specific height for the dialog. */
   height?: string;
+  /** Adds Help tooltip to Header */
+  help?: string;
   /** A custom close event handler */
   onCancel?: (
     ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>
@@ -17,11 +42,13 @@ export interface DialogProps extends ModalProps {
   /** Determines if the close icon is shown */
   showCloseIcon?: boolean;
   /** Size of dialog, default size is 750px */
-  size?: string;
+  size?: DialogSizes;
   /** Subtitle displayed at top of dialog */
   subtitle?: string;
   /** Title displayed at top of dialog */
   title?: React.ReactNode;
+  /** The ARIA role to be applied to the Dialog container */
+  role?: string;
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -34,6 +34,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const DialogFullScreen = ({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   disableAutoFocus,
   focusFirstElement,
   open,
@@ -48,6 +51,7 @@ const DialogFullScreen = ({
   onCancel,
   contentRef,
   help,
+  role = "region",
   ...rest
 }) => {
   const dialogRef = (0, _react.useRef)();
@@ -68,6 +72,7 @@ const DialogFullScreen = ({
     hasContent: title,
     ref: headingRef
   }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
+    "data-element": "dialog-title",
     title: title,
     titleId: "carbon-dialog-title",
     subheader: subtitle,
@@ -90,9 +95,13 @@ const DialogFullScreen = ({
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy || "carbon-dialog-title",
     ref: dialogRef,
     "data-element": "dialog-full-screen",
-    pagesStyling: pagesStyling
+    pagesStyling: pagesStyling,
+    role: role
   }, dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
@@ -106,6 +115,22 @@ DialogFullScreen.defaultProps = {
   disableAutoFocus: false
 };
 DialogFullScreen.propTypes = {
+  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-label of the DialogFullscreen component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the DialogFullscreen component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Controls the open state of the component */
   open: _propTypes.default.bool.isRequired,
 
@@ -150,7 +175,10 @@ DialogFullScreen.propTypes = {
   /** Reference to the scrollable content element */
   contentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(Element)
-  })])
+  })]),
+
+  /** The ARIA role to be applied to the DialogFulscreen container */
+  role: _propTypes.default.string
 };
 var _default = DialogFullScreen;
 exports.default = _default;

package/lib/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -2,12 +2,35 @@ import * as React from "react";
 import Modal, { ModalProps } from "../modal/modal";
 
 export interface DialogFullScreenProps extends ModalProps {
+  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
+  "aria-describedby"?: string;
+  /**
+   * Prop to specify the aria-label of the DialogFullscreen component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label"?: string;
+  /**
+   * Prop to specify the aria-labeledby property of the DialogFullscreen component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby"?: string;
   /** Child elements */
   children?: React.ReactNode;
+  /** Reference to the scrollable content element */
+  contentRef:
+    | React.MutableRefObject<HTMLElement>
+    | (() => React.MutableRefObject<HTMLElement>);
+  /** Disables auto focus functionality on child elements */
+  disableAutoFocus?: boolean;
   /** remove padding from content */
   disableContentPadding?: boolean;
+  /** Optional reference to an element meant to be focused on open */
+  focusFirstElement?: React.MutableRefObject<HTMLElement>;
   /** Container for components to be displayed in the header */
   headerChildren?: React.ReactNode;
+  /** Adds Help tooltip to Header */
+  help?: string;
   /** For legacy styling when used with Pages component. Do not use this unless using Pages within a DialogFullScreen */
   pagesStyling?: boolean;
   /** Determines if the close icon is shown */
@@ -16,8 +39,10 @@ export interface DialogFullScreenProps extends ModalProps {
   subtitle?: string;
   /** Title displayed at top of dialog */
   title?: React.ReactNode;
+  /** The ARIA role to be applied to the DialogFulscreen container */
+  role?: string;
 }
 
-declare class DialogFullScreen extends Modal<DialogFullScreenProps> {}
+declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;
 
 export default DialogFullScreen;

package/lib/components/icon/icon.style.js

@@ -75,8 +75,8 @@ const StyledIcon = _styledComponents.default.span`
 
   try {
     if (disabled) {
-      finalColor = theme.icon.disabled;
-      finalHoverColor = theme.icon.disabled;
+      finalColor = "var(--colorsYin030)";
+      finalHoverColor = "var(--colorsYin030)";
     } else if (typeof color === "string" && color.startsWith("var")) {
       finalColor = color;
       finalHoverColor = (0, _polished.shade)(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
@@ -90,8 +90,8 @@ const StyledIcon = _styledComponents.default.span`
       finalColor = renderedColor;
       finalHoverColor = (0, _polished.shade)(0.2, renderedColor);
     } else {
-      finalColor = theme.icon.default;
-      finalHoverColor = theme.icon.defaultHover;
+      finalColor = "var(--colorsYin065)";
+      finalHoverColor = "var(--colorsYin090)";
     }
 
     if (bg) {
@@ -104,8 +104,8 @@ const StyledIcon = _styledComponents.default.span`
       bgColor = backgroundColor;
       bgHoverColor = (0, _polished.shade)(0.2, backgroundColor);
     } else if (disabled) {
-      bgColor = theme.icon.disabled;
-      bgHoverColor = theme.icon.disabled;
+      bgColor = "var(--colorsYin030)";
+      bgHoverColor = "var(--colorsYin030)";
     } else {
       bgColor = "transparent";
       bgHoverColor = "transparent";
@@ -159,7 +159,7 @@ const StyledIcon = _styledComponents.default.span`
 
       ${hasTooltip && `
         :focus {
-          outline: 2px solid ${theme.colors.focus};
+          outline: 2px solid var(--colorsSemanticFocus500);
         }
       `}
 

package/lib/components/pager/pager.style.js

@@ -36,8 +36,6 @@ const StyledPagerContainer = _styledComponents.default.div`
   align-items: center;
   border-top-width: 0;
   font-size: 13px;
-  height: 39px;
-  max-height: 39px;
   border-top: none;
 
   ${({

package/lib/components/sidebar/sidebar.component.js

@@ -38,6 +38,9 @@ const SidebarContext = /*#__PURE__*/_react.default.createContext({});
 exports.SidebarContext = SidebarContext;
 
 const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   open,
   disableEscKey,
   enableBackgroundUI,
@@ -46,6 +49,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   size,
   children,
   onCancel,
+  role = "dialog",
   ...rest
 }, ref) => {
   let sidebarRef = (0, _react.useRef)();
@@ -69,12 +73,16 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, {
+    "aria-modal": !enableBackgroundUI,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     ref: sidebarRef,
     position: position,
     size: size,
     "data-element": "sidebar",
-    role: "complementary",
-    onCancel: onCancel
+    onCancel: onCancel,
+    role: role
   }, closeIcon(), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, null, header), /*#__PURE__*/_react.default.createElement(_box.default, {
     "data-element": "sidebar-content",
     p: 4,
@@ -100,6 +108,15 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 Sidebar.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /** Prop to specify the aria-label of the component */
+  "aria-label": _propTypes.default.string,
+
+  /** Prop to specify the aria-labeledby property of the component */
+  "aria-labelledby": _propTypes.default.string,
+
   /** Modal content */
   children: _propTypes.default.node,
 
@@ -122,7 +139,10 @@ Sidebar.propTypes = {
   size: _propTypes.default.oneOf(_sidebar2.SIDEBAR_SIZES),
 
   /** Node that will be used as sidebar header. */
-  header: _propTypes.default.node
+  header: _propTypes.default.node,
+
+  /** The ARIA role to be applied to the container */
+  role: _propTypes.default.string
 };
 Sidebar.defaultProps = {
   position: "right",

package/lib/components/sidebar/sidebar.d.ts

@@ -4,6 +4,19 @@ export interface SidebarContextProps {
   isInSidebar: boolean;
 }
 export interface SidebarProps {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby"?: string;
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label"?: string;
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby"?: string;
   /** Modal content */
   children?: React.ReactNode;
   /** Determines if the Esc Key closes the modal */
@@ -18,6 +31,8 @@ export interface SidebarProps {
   open: boolean;
   /** Sets the position of sidebar, either left or right. */
   position?: "left" | "right";
+  /** The ARIA role to be applied to the component container */
+  role?: string;
   /** Sets the size of the sidebar when open. */
   size?:
     | "extra-small"

package/lib/components/tooltip/tooltip-pointer.style.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const pointerColor = (type, theme, bgColor) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
-  return type === "error" ? theme.colors.error : theme.colors.black;
+  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 
 const StyledTooltipPointer = _styledComponents.default.div`
@@ -39,7 +39,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid ${pointerColor(type, theme, bgColor)};
-      bottom: -${theme.spacing}px;
+      bottom: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         bottom: -7px;
       }
@@ -49,7 +49,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-bottom: 8px solid ${pointerColor(type, theme, bgColor)};
-      top: -${theme.spacing}px;
+      top: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         top: -7px;
       }
@@ -59,7 +59,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       border-right: 8px solid ${pointerColor(type, theme, bgColor)};
-      left: -${theme.spacing}px;
+      left: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         left: -7px;
       }
@@ -69,7 +69,7 @@ const StyledTooltipPointer = _styledComponents.default.div`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
       border-left: 8px solid ${pointerColor(type, theme, bgColor)};
-      right: -${theme.spacing}px;
+      right: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         right: -7px;
       }
@@ -83,7 +83,8 @@ StyledTooltipPointer.defaultProps = {
 StyledTooltipPointer.propTypes = {
   position: _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
   theme: _propTypes.default.object,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  bgColor: _propTypes.default.string
 };
 var _default = StyledTooltipPointer;
 exports.default = _default;

package/lib/components/tooltip/tooltip.component.js

@@ -11,12 +11,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
 
+var _styledComponents = require("styled-components");
+
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 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; }
@@ -43,10 +47,12 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const tooltipRef = (0, _react.useRef)(ref || null);
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
+      className: (0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name),
       "data-element": "tooltip",
       role: "tooltip",
       tabIndex: "-1",

package/lib/components/tooltip/tooltip.style.js

@@ -31,7 +31,7 @@ const fadeIn = (0, _styledComponents.keyframes)`
 
 const tooltipColor = (type, theme, bgColor) => {
   if (bgColor) return (0, _color.toColor)(theme, bgColor);
-  return type === "error" ? theme.colors.error : theme.colors.black;
+  return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 
 const tooltipOffset = (position, inputSize, isPartOfInput) => {
@@ -84,9 +84,9 @@ const StyledTooltipWrapper = _styledComponents.default.div`
     max-width: 300px;
     position: relative;
     animation: ${fadeIn} 0.2s linear;
-    z-index: ${theme.zIndex.popover};
+    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
     text-align: left;
-    color: ${fontColor ? (0, _color.toColor)(theme, fontColor) : theme.colors.white};
+    color: ${fontColor ? (0, _color.toColor)(theme, fontColor) : "var(--colorsSemanticNeutralYang100)"};
     display: inline-block;
     padding: 8px 12px;
     word-break: break-word;
@@ -99,8 +99,14 @@ const StyledTooltipWrapper = _styledComponents.default.div`
   `}
 `;
 StyledTooltipWrapper.propTypes = {
+  position: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+  size: _propTypes.default.oneOf(["medium", "large"]),
+  theme: _propTypes.default.object,
   type: _propTypes.default.string,
-  size: _propTypes.default.oneOf(["medium", "large"])
+  isPartOfInput: _propTypes.default.bool,
+  inputSize: _propTypes.default.oneOf(["small", "medium", "large"]),
+  bgColor: _propTypes.default.string,
+  fontColor: _propTypes.default.string
 };
 StyledTooltipWrapper.defaultProps = {
   theme: _base.default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.8.1",
+  "version": "102.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -145,7 +145,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.80.0",
+    "@sage/design-tokens": "^1.87.1",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "classnames": "~2.2.6",