@dxc-technology/halstack-react 0.0.0-509f1eb → 0.0.0-50acff4

package/common/variables.d.ts

@@ -36,7 +36,7 @@ export declare const componentTokens: {
         disabledIconColor: string;
         iconSize: string;
         iconMarginLeft: string;
-        iconMarginRigth: string;
+        iconMarginRight: string;
         accordionGroupSeparatorBorderColor: string;
         accordionGroupSeparatorBorderThickness: string;
         accordionGroupSeparatorBorderRadius: string;
@@ -251,8 +251,7 @@ export declare const componentTokens: {
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconWidth: string;
-        closeIconHeight: string;
+        closeIconSize: string;
         closeIconTopPosition: string;
         closeIconRightPosition: string;
         closeIconBackgroundColor: string;
@@ -282,9 +281,14 @@ export declare const componentTokens: {
         buttonPaddingBottom: string;
         buttonPaddingLeft: string;
         buttonPaddingRight: string;
+        buttonHeight: string;
+        buttonBorderRadius: string;
+        buttonBorderStyle: string;
+        buttonBorderThickness: string;
+        buttonBorderColor: string;
         disabledColor: string;
         disabledButtonBackgroundColor: string;
-        disabledBorderColor: string;
+        disabledButtonBorderColor: string;
         optionBackgroundColor: string;
         hoverOptionBackgroundColor: string;
         activeOptionBackgroundColor: string;
@@ -324,7 +328,6 @@ export declare const componentTokens: {
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
         dragoverDropBackgroundColor: string;
-        activeFileItemIconBackgrounColor: string;
         errorFileItemBorderColor: string;
         errorFileItemBackgroundColor: string;
         errorFilePreviewBackgroundColor: string;
@@ -525,8 +528,8 @@ export declare const componentTokens: {
         totalItemsContainerMarginLeft: string;
     };
     paragraph: {
-        fontColor: string;
         display: string;
+        fontColor: string;
         fontSize: string;
         fontWeight: string;
     };
@@ -846,8 +849,16 @@ export declare const componentTokens: {
         dataPaddingBottom: string;
         dataPaddingRight: string;
         dataPaddingLeft: string;
+        dataPaddingTopReduced: string;
+        dataPaddingBottomReduced: string;
+        dataPaddingRightReduced: string;
+        dataPaddingLeftReduced: string;
         dataTextAlign: string;
         dataTextLineHeight: string;
+        firstChildPaddingLeft: string;
+        lastChildPaddingRight: string;
+        firstChildPaddingLeftReduced: string;
+        lastChildPaddingRightReduced: string;
         headerBackgroundColor: string;
         headerBorderRadius: string;
         headerFontFamily: string;
@@ -860,11 +871,25 @@ export declare const componentTokens: {
         headerPaddingBottom: string;
         headerPaddingRight: string;
         headerPaddingLeft: string;
+        headerPaddingTopReduced: string;
+        headerPaddingBottomReduced: string;
+        headerPaddingRightReduced: string;
+        headerPaddingLeftReduced: string;
         headerTextAlign: string;
         headerTextLineHeight: string;
         scrollBarThumbColor: string;
         scrollBarTrackColor: string;
         sortIconColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
     };
     tabs: {
         fontFamily: string;
@@ -883,7 +908,6 @@ export declare const componentTokens: {
         disabledFontColor: string;
         disabledIconColor: string;
         disabledFontStyle: string;
-        disabledBadgeBackgroundColor: string;
         hoverBackgroundColor: string;
         pressedBackgroundColor: string;
         pressedFontWeight: string;
@@ -891,19 +915,6 @@ export declare const componentTokens: {
         dividerThickness: string;
         focusOutline: string;
         scrollButtonsWidth: string;
-        badgeBackgroundColor: string;
-        badgeFontFamily: string;
-        badgeFontSize: string;
-        badgeFontStyle: string;
-        badgeFontWeight: string;
-        badgeFontColor: string;
-        badgeLetterSpacing: string;
-        badgeWidth: string;
-        badgeHeight: string;
-        badgeRadius: string;
-        badgeWidthWithNotificationNumber: string;
-        badgeHeightWithNotificationNumber: string;
-        badgeRadiusWithNotificationNumber: string;
     };
     tag: {
         fontFamily: string;

package/common/variables.js

@@ -20,18 +20,18 @@ var componentTokens = exports.componentTokens = {
     assistiveTextFontColor: _coreTokens["default"].color_grey_700,
     disabledAssistiveTextFontColor: _coreTokens["default"].color_grey_500,
     assistiveTextMinWidth: "100px",
-    assistiveTextPaddingRight: "24px",
-    assistiveTextPaddingLeft: "0px",
+    assistiveTextPaddingRight: _coreTokens["default"].spacing_24,
+    assistiveTextPaddingLeft: _coreTokens["default"].spacing_0,
     titleLabelFontFamily: _coreTokens["default"].type_sans,
     titleLabelFontSize: _coreTokens["default"].type_scale_03,
     titleLabelFontWeight: _coreTokens["default"].type_regular,
     titleLabelFontStyle: _coreTokens["default"].type_normal,
     titleLabelFontColor: _coreTokens["default"].color_black,
     disabledTitleLabelFontColor: _coreTokens["default"].color_grey_500,
-    titleLabelPaddingTop: "0px",
-    titleLabelPaddingBottom: "0px",
-    titleLabelPaddingLeft: "0px",
-    titleLabelPaddingRight: "16px",
+    titleLabelPaddingTop: _coreTokens["default"].spacing_0,
+    titleLabelPaddingBottom: _coreTokens["default"].spacing_0,
+    titleLabelPaddingLeft: _coreTokens["default"].spacing_0,
+    titleLabelPaddingRight: _coreTokens["default"].spacing_16,
     focusBorderColor: _coreTokens["default"].color_blue_600,
     focusBorderStyle: _coreTokens["default"].border_solid,
     focusBorderThickness: "2px",
@@ -43,8 +43,8 @@ var componentTokens = exports.componentTokens = {
     iconColor: _coreTokens["default"].color_purple_700,
     disabledIconColor: _coreTokens["default"].color_grey_500,
     iconSize: "24px",
-    iconMarginLeft: "0px",
-    iconMarginRigth: "12px",
+    iconMarginLeft: _coreTokens["default"].spacing_0,
+    iconMarginRight: _coreTokens["default"].spacing_12,
     accordionGroupSeparatorBorderColor: _coreTokens["default"].color_grey_200_a,
     accordionGroupSeparatorBorderThickness: "1px",
     accordionGroupSeparatorBorderRadius: "0px",
@@ -57,17 +57,17 @@ var componentTokens = exports.componentTokens = {
     titleFontStyle: _coreTokens["default"].type_normal,
     titleFontWeight: _coreTokens["default"].type_bold,
     titleTextTransform: _coreTokens["default"].type_uppercase,
-    titlePaddingRight: "0px",
-    titlePaddingLeft: "0px",
+    titlePaddingRight: _coreTokens["default"].spacing_0,
+    titlePaddingLeft: _coreTokens["default"].spacing_0,
     inlineTextFontFamily: _coreTokens["default"].type_sans,
     inlineTextFontColor: _coreTokens["default"].color_black,
     inlineTextFontSize: _coreTokens["default"].type_scale_01,
     inlineTextFontStyle: _coreTokens["default"].type_normal,
     inlineTextFontWeight: _coreTokens["default"].type_regular,
-    inlineTextPaddingLeft: "0px",
-    inlineTextPaddingRight: "0px",
-    contentPaddingLeft: "0px",
-    contentPaddingRight: "0px",
+    inlineTextPaddingLeft: _coreTokens["default"].spacing_0,
+    inlineTextPaddingRight: _coreTokens["default"].spacing_0,
+    contentPaddingLeft: _coreTokens["default"].spacing_0,
+    contentPaddingRight: _coreTokens["default"].spacing_0,
     contentPaddingTop: "20px",
     contentPaddingBottom: "30px",
     borderRadius: "4px",
@@ -78,8 +78,8 @@ var componentTokens = exports.componentTokens = {
     warningBorderColor: _coreTokens["default"].color_yellow_700,
     errorBorderColor: _coreTokens["default"].color_red_700,
     iconSize: "24px",
-    iconPaddingLeft: "0px",
-    iconPaddingRight: "0px",
+    iconPaddingLeft: _coreTokens["default"].spacing_0,
+    iconPaddingRight: _coreTokens["default"].spacing_0,
     infoIconColor: _coreTokens["default"].color_blue_800,
     successIconColor: _coreTokens["default"].color_green_700,
     warningIconColor: _coreTokens["default"].color_yellow_700,
@@ -121,7 +121,7 @@ var componentTokens = exports.componentTokens = {
     bulletIconWidth: "1.5rem",
     bulletHeight: "5px",
     bulletWidth: "5px",
-    bulletMarginRight: "0.5rem"
+    bulletMarginRight: _coreTokens["default"].spacing_8
   },
   button: {
     labelFontLineHeight: _coreTokens["default"].type_leading_normal,
@@ -195,7 +195,7 @@ var componentTokens = exports.componentTokens = {
     fontColor: _coreTokens["default"].color_black,
     disabledFontColor: _coreTokens["default"].color_grey_500,
     focusColor: _coreTokens["default"].color_blue_600,
-    checkLabelSpacing: "8px"
+    checkLabelSpacing: _coreTokens["default"].spacing_8
   },
   chip: {
     backgroundColor: _coreTokens["default"].color_grey_200,
@@ -210,12 +210,12 @@ var componentTokens = exports.componentTokens = {
     borderRadius: "80px",
     borderThickness: _coreTokens["default"].border_width_0,
     borderStyle: _coreTokens["default"].border_solid,
-    contentPaddingLeft: "16px",
-    contentPaddingRight: "16px",
-    contentPaddingTop: "0px",
-    contentPaddingBottom: "0px",
+    contentPaddingLeft: _coreTokens["default"].spacing_16,
+    contentPaddingRight: _coreTokens["default"].spacing_16,
+    contentPaddingTop: _coreTokens["default"].spacing_0,
+    contentPaddingBottom: _coreTokens["default"].spacing_0,
     iconSize: "24px",
-    iconSpacing: "8px",
+    iconSpacing: _coreTokens["default"].spacing_8,
     iconColor: _coreTokens["default"].color_grey_800,
     hoverIconColor: _coreTokens["default"].color_grey_900,
     activeIconColor: _coreTokens["default"].color_black,
@@ -259,8 +259,7 @@ var componentTokens = exports.componentTokens = {
   dialog: {
     overlayColor: _coreTokens["default"].color_grey_800_a,
     backgroundColor: _coreTokens["default"].color_white,
-    closeIconWidth: "24px",
-    closeIconHeight: "24px",
+    closeIconSize: "24px",
     closeIconTopPosition: "20px",
     closeIconRightPosition: "20px",
     closeIconBackgroundColor: _coreTokens["default"].color_transparent,
@@ -286,13 +285,18 @@ var componentTokens = exports.componentTokens = {
     buttonIconSize: "20px",
     buttonIconSpacing: "10px",
     buttonIconColor: _coreTokens["default"].color_black,
-    buttonPaddingTop: "0px",
-    buttonPaddingBottom: "0px",
-    buttonPaddingLeft: "16px",
-    buttonPaddingRight: "16px",
+    buttonPaddingTop: _coreTokens["default"].spacing_0,
+    buttonPaddingBottom: _coreTokens["default"].spacing_0,
+    buttonPaddingLeft: _coreTokens["default"].spacing_16,
+    buttonPaddingRight: _coreTokens["default"].spacing_16,
+    buttonHeight: "40px",
+    buttonBorderRadius: "4px",
+    buttonBorderStyle: _coreTokens["default"].border_none,
+    buttonBorderThickness: _coreTokens["default"].border_width_0,
+    buttonBorderColor: _coreTokens["default"].color_transparent,
     disabledColor: _coreTokens["default"].color_grey_500,
     disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
-    disabledBorderColor: _coreTokens["default"].color_transparent,
+    disabledButtonBorderColor: _coreTokens["default"].color_transparent,
     optionBackgroundColor: _coreTokens["default"].color_white,
     hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
     activeOptionBackgroundColor: _coreTokens["default"].color_grey_300,
@@ -306,11 +310,11 @@ var componentTokens = exports.componentTokens = {
     optionIconColor: _coreTokens["default"].color_black,
     optionPaddingTop: "6px",
     optionPaddingBottom: "6px",
-    optionPaddingLeft: "16px",
-    optionPaddingRight: "16px",
+    optionPaddingLeft: _coreTokens["default"].spacing_16,
+    optionPaddingRight: _coreTokens["default"].spacing_16,
     caretIconSize: "24px",
     caretIconColor: _coreTokens["default"].color_black,
-    caretIconSpacing: "12px",
+    caretIconSpacing: _coreTokens["default"].spacing_12,
     borderRadius: "4px",
     borderStyle: _coreTokens["default"].border_none,
     borderThickness: _coreTokens["default"].border_width_0,
@@ -332,7 +336,6 @@ var componentTokens = exports.componentTokens = {
     focusDropBorderColor: _coreTokens["default"].color_blue_600,
     disabledDropBorderColor: _coreTokens["default"].color_grey_500,
     dragoverDropBackgroundColor: _coreTokens["default"].color_blue_50,
-    activeFileItemIconBackgrounColor: _coreTokens["default"].color_grey_300,
     errorFileItemBorderColor: _coreTokens["default"].color_red_700,
     errorFileItemBackgroundColor: _coreTokens["default"].color_red_50,
     errorFilePreviewBackgroundColor: _coreTokens["default"].color_red_200,
@@ -378,7 +381,7 @@ var componentTokens = exports.componentTokens = {
     bottomLinksDividerColor: _coreTokens["default"].color_blue_600,
     bottomLinksDividerThickness: "1px",
     bottomLinksDividerStyle: _coreTokens["default"].border_solid,
-    bottomLinksDividerSpacing: "8px",
+    bottomLinksDividerSpacing: _coreTokens["default"].spacing_8,
     bottomLinksFontFamily: _coreTokens["default"].type_sans,
     bottomLinksFontSize: _coreTokens["default"].type_scale_01,
     bottomLinksFontStyle: _coreTokens["default"].type_normal,
@@ -394,7 +397,7 @@ var componentTokens = exports.componentTokens = {
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
-    socialLinksGutter: "16px",
+    socialLinksGutter: _coreTokens["default"].spacing_16,
     socialLinksColor: _coreTokens["default"].color_white
   },
   header: {
@@ -420,10 +423,10 @@ var componentTokens = exports.componentTokens = {
     overlayColor: _coreTokens["default"].color_grey_800_a,
     overlayOpacity: "0.7",
     overlayZindex: "1600",
-    paddingTop: "0px",
-    paddingBottom: "0px",
-    paddingRight: "24px",
-    paddingLeft: "24px",
+    paddingTop: _coreTokens["default"].spacing_0,
+    paddingBottom: _coreTokens["default"].spacing_0,
+    paddingRight: _coreTokens["default"].spacing_24,
+    paddingLeft: _coreTokens["default"].spacing_24,
     underlinedColor: _coreTokens["default"].color_black,
     underlinedThickness: "2px",
     underlinedStyle: _coreTokens["default"].border_solid,
@@ -481,8 +484,8 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     iconSize: "16px",
-    iconSpacing: "4px",
-    underlineSpacing: "0px",
+    iconSpacing: _coreTokens["default"].spacing_4,
+    underlineSpacing: _coreTokens["default"].spacing_0,
     underlineStyle: _coreTokens["default"].border_solid,
     underlineThickness: "1px",
     disabledFontColor: _coreTokens["default"].color_grey_500,
@@ -521,20 +524,20 @@ var componentTokens = exports.componentTokens = {
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
     fontTextTransform: "none",
-    verticalPadding: "0.75rem",
-    horizontalPadding: "2rem",
-    marginRight: "40px",
+    verticalPadding: _coreTokens["default"].spacing_12,
+    horizontalPadding: _coreTokens["default"].spacing_32,
+    marginRight: _coreTokens["default"].spacing_40,
     marginLeft: "20px",
-    itemsPerPageSelectorMarginLeft: "0px",
-    itemsPerPageSelectorMarginRight: "0.5rem",
+    itemsPerPageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    itemsPerPageSelectorMarginRight: _coreTokens["default"].spacing_8,
     pageSelectorMarginRight: "30px",
-    pageSelectorMarginLeft: "0px",
-    totalItemsContainerMarginRight: "2.5rem",
-    totalItemsContainerMarginLeft: "0px"
+    pageSelectorMarginLeft: _coreTokens["default"].spacing_0,
+    totalItemsContainerMarginRight: _coreTokens["default"].spacing_40,
+    totalItemsContainerMarginLeft: _coreTokens["default"].spacing_0
   },
   paragraph: {
-    fontColor: _coreTokens["default"].color_black,
     display: "block",
+    fontColor: _coreTokens["default"].color_black,
     fontSize: _coreTokens["default"].type_scale_03,
     fontWeight: _coreTokens["default"].type_regular
   },
@@ -720,10 +723,10 @@ var componentTokens = exports.componentTokens = {
     linkFontTextTransform: "none",
     linkFontLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
     linkTextDecoration: _coreTokens["default"].type_no_line,
-    linkMarginTop: "4px",
-    linkMarginBottom: "4px",
-    linkMarginRight: "16px",
-    linkMarginLeft: "16px",
+    linkMarginTop: _coreTokens["default"].spacing_4,
+    linkMarginBottom: _coreTokens["default"].spacing_4,
+    linkMarginRight: _coreTokens["default"].spacing_16,
+    linkMarginLeft: _coreTokens["default"].spacing_16,
     linkFocusColor: _coreTokens["default"].color_blue_600,
     scrollBarThumbColor: _coreTokens["default"].color_grey_200_a,
     scrollBarTrackColor: _coreTokens["default"].color_transparent
@@ -837,7 +840,7 @@ var componentTokens = exports.componentTokens = {
     thumbShift: "1.25rem",
     trackHeight: "12px",
     trackWidth: "36px",
-    spaceBetweenLabelSwitch: "8px"
+    spaceBetweenLabelSwitch: _coreTokens["default"].spacing_8
   },
   table: {
     rowSeparatorThickness: "1px",
@@ -850,12 +853,20 @@ var componentTokens = exports.componentTokens = {
     dataFontWeight: _coreTokens["default"].type_regular,
     dataFontColor: _coreTokens["default"].color_black,
     dataFontTextTransform: "none",
-    dataPaddingTop: "14px",
-    dataPaddingBottom: "12px",
+    dataPaddingTop: _coreTokens["default"].spacing_16,
+    dataPaddingBottom: _coreTokens["default"].spacing_16,
     dataPaddingRight: "20px",
-    dataPaddingLeft: "40px",
+    dataPaddingLeft: "20px",
+    dataPaddingTopReduced: _coreTokens["default"].spacing_8,
+    dataPaddingBottomReduced: _coreTokens["default"].spacing_8,
+    dataPaddingRightReduced: _coreTokens["default"].spacing_16,
+    dataPaddingLeftReduced: _coreTokens["default"].spacing_16,
     dataTextAlign: "left",
     dataTextLineHeight: "normal",
+    firstChildPaddingLeft: _coreTokens["default"].spacing_24,
+    lastChildPaddingRight: _coreTokens["default"].spacing_24,
+    firstChildPaddingLeftReduced: "20px",
+    lastChildPaddingRightReduced: "20px",
     headerBackgroundColor: _coreTokens["default"].color_purple_700,
     headerBorderRadius: "4px",
     headerFontFamily: _coreTokens["default"].type_sans,
@@ -864,15 +875,29 @@ var componentTokens = exports.componentTokens = {
     headerFontWeight: _coreTokens["default"].type_regular,
     headerFontColor: _coreTokens["default"].color_white,
     headerFontTextTransform: "none",
-    headerPaddingTop: "16px",
-    headerPaddingBottom: "16px",
+    headerPaddingTop: _coreTokens["default"].spacing_16,
+    headerPaddingBottom: _coreTokens["default"].spacing_16,
     headerPaddingRight: "20px",
-    headerPaddingLeft: "40px",
+    headerPaddingLeft: "20px",
+    headerPaddingTopReduced: _coreTokens["default"].spacing_8,
+    headerPaddingBottomReduced: _coreTokens["default"].spacing_8,
+    headerPaddingRightReduced: _coreTokens["default"].spacing_16,
+    headerPaddingLeftReduced: _coreTokens["default"].spacing_16,
     headerTextAlign: "left",
     headerTextLineHeight: "normal",
     scrollBarThumbColor: _coreTokens["default"].color_grey_700,
     scrollBarTrackColor: _coreTokens["default"].color_grey_300,
-    sortIconColor: _coreTokens["default"].color_white
+    sortIconColor: _coreTokens["default"].color_white,
+    actionIconColor: _coreTokens["default"].color_purple_700,
+    disabledActionIconColor: _coreTokens["default"].color_grey_500,
+    hoverActionIconColor: _coreTokens["default"].color_purple_700,
+    focusActionIconColor: _coreTokens["default"].color_purple_700,
+    activeActionIconColor: _coreTokens["default"].color_purple_700,
+    actionBackgroundColor: _coreTokens["default"].color_transparent,
+    disabledActionBackgroundColor: _coreTokens["default"].color_transparent,
+    hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
+    focusActionBorderColor: _coreTokens["default"].color_blue_600,
+    activeActionBackgroundColor: _coreTokens["default"].color_grey_300
   },
   tabs: {
     fontFamily: _coreTokens["default"].type_sans,
@@ -891,27 +916,13 @@ var componentTokens = exports.componentTokens = {
     disabledFontColor: _coreTokens["default"].color_grey_500,
     disabledIconColor: _coreTokens["default"].color_grey_500,
     disabledFontStyle: _coreTokens["default"].type_normal,
-    disabledBadgeBackgroundColor: "#0000004d",
     hoverBackgroundColor: _coreTokens["default"].color_purple_100,
     pressedBackgroundColor: _coreTokens["default"].color_purple_200,
     pressedFontWeight: _coreTokens["default"].type_semibold,
     dividerColor: _coreTokens["default"].color_grey_400,
     dividerThickness: "1px",
     focusOutline: _coreTokens["default"].color_purple_700,
-    scrollButtonsWidth: "48px",
-    badgeBackgroundColor: _coreTokens["default"].color_red_700,
-    badgeFontFamily: _coreTokens["default"].type_sans,
-    badgeFontSize: "10px",
-    badgeFontStyle: _coreTokens["default"].type_normal,
-    badgeFontWeight: "500",
-    badgeFontColor: _coreTokens["default"].color_white,
-    badgeLetterSpacing: _coreTokens["default"].type_spacing_wide_02,
-    badgeWidth: "16px",
-    badgeHeight: "16px",
-    badgeRadius: "10px",
-    badgeWidthWithNotificationNumber: "23px",
-    badgeHeightWithNotificationNumber: "17px",
-    badgeRadiusWithNotificationNumber: "10px"
+    scrollButtonsWidth: "48px"
   },
   tag: {
     fontFamily: _coreTokens["default"].type_sans,
@@ -919,10 +930,10 @@ var componentTokens = exports.componentTokens = {
     fontSize: _coreTokens["default"].type_scale_02,
     fontStyle: _coreTokens["default"].type_normal,
     fontWeight: _coreTokens["default"].type_regular,
-    labelPaddingTop: "0px",
-    labelPaddingBottom: "0px",
-    labelPaddingLeft: "16px",
-    labelPaddingRight: "16px",
+    labelPaddingTop: _coreTokens["default"].spacing_0,
+    labelPaddingBottom: _coreTokens["default"].spacing_0,
+    labelPaddingLeft: _coreTokens["default"].spacing_16,
+    labelPaddingRight: _coreTokens["default"].spacing_16,
     height: "40px",
     iconColor: _coreTokens["default"].color_white,
     iconSectionWidth: "40px",
@@ -1026,7 +1037,7 @@ var componentTokens = exports.componentTokens = {
     errorListDialogBackgroundColor: _coreTokens["default"].color_red_50,
     errorListDialogBorderColor: _coreTokens["default"].color_red_700,
     hoverListOptionBackgroundColor: _coreTokens["default"].color_grey_100,
-    activeListOptionBackgroundColor: _coreTokens["default"].color_grey_300,
+    activeListOptionBackgroundColor: _coreTokens["default"].color_grey_200,
     focusListOptionBorderColor: _coreTokens["default"].color_blue_600
   },
   toggleGroup: {
@@ -1140,13 +1151,13 @@ var componentTokens = exports.componentTokens = {
   }
 };
 var spaces = exports.spaces = {
-  xxsmall: "6px",
-  xsmall: "16px",
-  small: "24px",
-  medium: "36px",
-  large: "48px",
-  xlarge: "64px",
-  xxlarge: "100px"
+  xxsmall: _coreTokens["default"].spacing_4,
+  xsmall: _coreTokens["default"].spacing_8,
+  small: _coreTokens["default"].spacing_12,
+  medium: _coreTokens["default"].spacing_16,
+  large: _coreTokens["default"].spacing_24,
+  xlarge: _coreTokens["default"].spacing_32,
+  xxlarge: _coreTokens["default"].spacing_48
 };
 var responsiveSizes = exports.responsiveSizes = {
   xsmall: "20",

package/container/Container.js

@@ -44,7 +44,7 @@ var getBorderStyles = function getBorderStyles(direction, borderProperties) {
   var _borderProperties$wid, _borderProperties$sty, _getCoreColorToken;
   return "border-".concat(direction, ": ").concat((_borderProperties$wid = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.width) !== null && _borderProperties$wid !== void 0 ? _borderProperties$wid : "", " ").concat((_borderProperties$sty = borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.style) !== null && _borderProperties$sty !== void 0 ? _borderProperties$sty : "", " ").concat((_getCoreColorToken = (0, _coreTokens.getCoreColorToken)(borderProperties === null || borderProperties === void 0 ? void 0 : borderProperties.color)) !== null && _getCoreColorToken !== void 0 ? _getCoreColorToken : "", ";");
 };
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: ", ";\n  display: ", ";\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  float: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n\n  background-attachment: ", ";\n  background-clip: ", ";\n  background-color: ", ";\n  background-image: ", ";\n  background-origin: ", ";\n  background-position: ", ";\n  background-repeat: ", ";\n  background-size: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-width: ", ";\n\n  ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  outline: ", ";\n  outline-offset: ", ";\n\n  overflow: ", ";\n  overflow-x: ", ";\n  overflow-y: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
+var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: ", ";\n  display: ", ";\n  width: ", ";\n  height: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  bottom: ", ";\n  left: ", ";\n  float: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n\n  background-attachment: ", ";\n  background-clip: ", ";\n  background-color: ", ";\n  background-image: ", ";\n  background-origin: ", ";\n  background-position: ", ";\n  background-repeat: ", ";\n  background-size: ", ";\n\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  outline: ", ";\n  outline-offset: ", ";\n\n  overflow: ", ";\n  overflow-x: ", ";\n  overflow-y: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
   var boxSizing = _ref2.boxSizing;
   return boxSizing;
 }, function (_ref3) {

package/container/Container.stories.tsx

@@ -108,7 +108,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>1</b>
+          <b tabIndex={0}>1</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -116,7 +116,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>2</b>
+          <b tabIndex={0}>2</b>
         </DxcContainer>
         <DxcContainer
           border={{ width: "1px", style: "solid", color: "color_black" }}
@@ -124,7 +124,7 @@ export const Chromatic = () => (
           width="50px"
           height="50px"
         >
-          <b>3</b>
+          <b tabIndex={0}>3</b>
         </DxcContainer>
       </DxcContainer>
     </ExampleContainer>

package/contextual-menu/ContextualMenu.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/contextual-menu/ContextualMenu.accessibility.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+var _disabledRules = require("../../test/accessibility/rules/specific/contextual-menu/disabledRules.js");
+// TODO: REMOVE
+
+var disabledRules = {
+  rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
+    rulesObj[rule] = {
+      enabled: false
+    };
+    return rulesObj;
+  }, {})
+};
+var badge_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 7H13V9H11V7ZM11 11H13V17H11V11Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+}));
+var key_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  viewBox: "0 -960 960 960",
+  width: "24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"
+}));
+var fav_icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24",
+  viewBox: "0 -960 960 960",
+  width: "24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"
+}));
+var itemsWithTruncatedText = [{
+  label: "Item with a very long label that should be truncated",
+  slot: /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    color: "blue",
+    mode: "contextual",
+    label: "Label",
+    size: "small",
+    icon: badge_icon,
+    title: "Badge"
+  }),
+  icon: key_icon
+}, {
+  label: "Item 2",
+  slot: /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10.6667 10.6667H1.33333V1.33333H6V0H1.33333C0.593333 0 0 0.6 0 1.33333V10.6667C0 11.4 0.593333 12 1.33333 12H10.6667C11.4 12 12 11.4 12 10.6667V6H10.6667V10.6667ZM7.33333 0V1.33333H9.72667L3.17333 7.88667L4.11333 8.82667L10.6667 2.27333V4.66667H12V0H7.33333Z",
+    fill: "#323232"
+  })),
+  icon: fav_icon
+}];
+describe("Context menu accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ContextualMenu["default"], {
+            items: itemsWithTruncatedText
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container, disabledRules);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});