@dxc-technology/halstack-react 10.1.0 → 12.0.0

package/common/variables.js

@@ -1,15 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spaces = exports.responsiveSizes = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
-
 var _coreTokens = _interopRequireDefault(require("./coreTokens"));
-
-var componentTokens = {
+var componentTokens = exports.componentTokens = {
   accordion: {
     backgroundColor: _coreTokens["default"].color_white,
     hoverBackgroundColor: _coreTokens["default"].color_purple_100,
@@ -23,18 +20,18 @@ var 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",
@@ -46,8 +43,8 @@ var 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",
@@ -60,17 +57,17 @@ var 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",
@@ -81,8 +78,8 @@ var 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,
@@ -120,12 +117,11 @@ var componentTokens = {
   },
   bulletedList: {
     fontColor: _coreTokens["default"].color_black,
-    fontColorOnDark: _coreTokens["default"].color_white,
     bulletIconHeight: "1.5rem",
     bulletIconWidth: "1.5rem",
     bulletHeight: "5px",
     bulletWidth: "5px",
-    bulletMarginRight: "0.5rem"
+    bulletMarginRight: _coreTokens["default"].spacing_8
   },
   button: {
     labelFontLineHeight: _coreTokens["default"].type_leading_normal,
@@ -135,19 +131,12 @@ var componentTokens = {
     paddingTop: _coreTokens["default"].spacing_8,
     paddingBottom: _coreTokens["default"].spacing_8,
     focusBorderColor: _coreTokens["default"].color_blue_600,
-    focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
     primaryBackgroundColor: _coreTokens["default"].color_purple_700,
-    primaryBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
     primaryFontColor: _coreTokens["default"].color_white,
-    primaryFontColorOnDark: _coreTokens["default"].color_white,
     primaryHoverBackgroundColor: _coreTokens["default"].color_purple_800,
-    primaryHoverBackgroundColorOnDark: _coreTokens["default"].color_purple_600,
     primaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
-    primaryActiveBackgroundColorOnDark: _coreTokens["default"].color_purple_800,
     primaryDisabledBackgroundColor: _coreTokens["default"].color_grey_100,
-    primaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
     primaryDisabledFontColor: _coreTokens["default"].color_grey_500,
-    primaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
     primaryBorderThickness: _coreTokens["default"].border_width_0,
     primaryBorderStyle: _coreTokens["default"].border_none,
     primaryBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -155,23 +144,14 @@ var componentTokens = {
     primaryFontSize: _coreTokens["default"].type_scale_03,
     primaryFontWeight: _coreTokens["default"].type_regular,
     secondaryBackgroundColor: _coreTokens["default"].color_transparent,
-    secondaryBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     secondaryFontColor: _coreTokens["default"].color_purple_700,
-    secondaryFontColorOnDark: _coreTokens["default"].color_white,
     secondaryHoverFontColor: _coreTokens["default"].color_white,
-    secondaryHoverFontColorOnDark: _coreTokens["default"].color_black,
     secondaryBorderColor: _coreTokens["default"].color_purple_700,
-    secondaryBorderColorOnDark: _coreTokens["default"].color_white,
     secondaryHoverBackgroundColor: _coreTokens["default"].color_purple_700,
-    secondaryHoverBackgroundColorOnDark: _coreTokens["default"].color_white,
     secondaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
-    secondaryActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_200,
     secondaryDisabledBackgroundColor: _coreTokens["default"].color_transparent,
-    secondaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     secondaryDisabledFontColor: _coreTokens["default"].color_grey_500,
-    secondaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
     secondaryDisabledBorderColor: _coreTokens["default"].color_grey_500,
-    secondaryDisabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
     secondaryBorderThickness: _coreTokens["default"].border_width_1,
     secondaryBorderStyle: _coreTokens["default"].border_solid,
     secondaryBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -179,17 +159,11 @@ var componentTokens = {
     secondaryFontSize: _coreTokens["default"].type_scale_03,
     secondaryFontWeight: _coreTokens["default"].type_regular,
     textBackgroundColor: _coreTokens["default"].color_transparent,
-    textBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     textFontColor: _coreTokens["default"].color_purple_700,
-    textFontColorOnDark: _coreTokens["default"].color_white,
     textHoverBackgroundColor: _coreTokens["default"].color_purple_100,
-    textHoverBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
     textActiveBackgroundColor: _coreTokens["default"].color_purple_200,
-    textActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
     textDisabledBackgroundColor: _coreTokens["default"].color_transparent,
-    textDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     textDisabledFontColor: _coreTokens["default"].color_grey_500,
-    textDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
     textBorderThickness: _coreTokens["default"].border_width_0,
     textBorderStyle: _coreTokens["default"].border_none,
     textBorderRadius: _coreTokens["default"].border_radius_medium,
@@ -203,31 +177,25 @@ var componentTokens = {
   },
   checkbox: {
     backgroundColorChecked: _coreTokens["default"].color_blue_800,
-    backgroundColorCheckedOnDark: _coreTokens["default"].color_grey_200,
     hoverBackgroundColorChecked: _coreTokens["default"].color_blue_900,
-    hoverBackgroundColorCheckedOnDark: _coreTokens["default"].color_white,
     disabledBackgroundColorChecked: _coreTokens["default"].color_grey_500,
-    disabledBackgroundColorCheckedOnDark: _coreTokens["default"].color_grey_800,
+    readOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBackgroundColorChecked: _coreTokens["default"].color_grey_600,
     borderColor: _coreTokens["default"].color_blue_800,
-    borderColorOnDark: _coreTokens["default"].color_grey_200,
     hoverBorderColor: _coreTokens["default"].color_blue_900,
-    hoverBorderColorOnDark: _coreTokens["default"].color_white,
     disabledBorderColor: _coreTokens["default"].color_grey_500,
-    disabledBorderColorOnDark: _coreTokens["default"].color_grey_800,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     checkColor: _coreTokens["default"].color_white,
-    checkColorOnDark: _coreTokens["default"].color_black,
     disabledCheckColor: _coreTokens["default"].color_white,
-    disabledCheckColorOnDark: _coreTokens["default"].color_grey_500,
+    readOnlyCheckColor: _coreTokens["default"].color_white,
     fontFamily: _coreTokens["default"].type_sans,
     fontSize: _coreTokens["default"].type_scale_02,
     fontWeight: _coreTokens["default"].type_regular,
     fontColor: _coreTokens["default"].color_black,
-    fontColorOnDark: _coreTokens["default"].color_white,
     disabledFontColor: _coreTokens["default"].color_grey_500,
-    disabledFontColorOnDark: _coreTokens["default"].color_grey_500,
     focusColor: _coreTokens["default"].color_blue_600,
-    focusColorOnDark: _coreTokens["default"].color_blue_600,
-    checkLabelSpacing: "8px"
+    checkLabelSpacing: _coreTokens["default"].spacing_8
   },
   chip: {
     backgroundColor: _coreTokens["default"].color_grey_200,
@@ -242,12 +210,12 @@ var 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,
@@ -291,8 +259,7 @@ var 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,
@@ -318,13 +285,18 @@ var 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,
@@ -338,11 +310,11 @@ var 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,
@@ -364,7 +336,6 @@ var 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,
@@ -410,7 +381,7 @@ var 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,
@@ -426,7 +397,7 @@ var componentTokens = {
     logoHeight: "32px",
     logoWidth: "auto",
     socialLinksSize: "24px",
-    socialLinksGutter: "16px",
+    socialLinksGutter: _coreTokens["default"].spacing_16,
     socialLinksColor: _coreTokens["default"].color_white
   },
   header: {
@@ -452,15 +423,14 @@ var 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,
-    contentColor: _coreTokens["default"].color_black,
-    contentColorOnDark: _coreTokens["default"].color_white
+    contentColor: _coreTokens["default"].color_black
   },
   heading: {
     level1FontColor: _coreTokens["default"].inherit,
@@ -514,8 +484,8 @@ var 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,
@@ -554,44 +524,39 @@ var 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,
-    fontColorOnDark: _coreTokens["default"].color_white,
     display: "block",
+    fontColor: _coreTokens["default"].color_black,
     fontSize: _coreTokens["default"].type_scale_03,
     fontWeight: _coreTokens["default"].type_regular
   },
   progressBar: {
     trackLineColor: _coreTokens["default"].color_purple_700,
-    trackLineColorOnDark: _coreTokens["default"].color_purple_500,
     totalLineColor: _coreTokens["default"].color_grey_200,
     labelFontFamily: _coreTokens["default"].type_sans,
     labelFontSize: _coreTokens["default"].type_scale_01,
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_regular,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     labelFontTextTransform: _coreTokens["default"].type_uppercase,
     valueFontFamily: _coreTokens["default"].type_sans,
     valueFontSize: _coreTokens["default"].type_scale_01,
     valueFontStyle: _coreTokens["default"].type_normal,
     valueFontWeight: _coreTokens["default"].type_regular,
     valueFontColor: _coreTokens["default"].color_black,
-    valueFontColorOnDark: _coreTokens["default"].color_white,
     valueFontTextTransform: _coreTokens["default"].type_uppercase,
     helperTextFontColor: _coreTokens["default"].color_black,
-    helperTextFontColorOnDark: _coreTokens["default"].color_white,
     helperTextFontSize: _coreTokens["default"].type_scale_01,
     helperTextFontStyle: _coreTokens["default"].type_normal,
     helperTextFontWeight: _coreTokens["default"].type_regular,
@@ -627,9 +592,9 @@ var componentTokens = {
     errorRadioInputColor: _coreTokens["default"].color_red_700,
     hoverErrorRadioInputColor: _coreTokens["default"].color_red_800,
     activeErrorRadioInputColor: _coreTokens["default"].color_red_900,
-    readonlyRadioInputColor: _coreTokens["default"].color_grey_500,
-    hoverReadonlyRadioInputColor: _coreTokens["default"].color_grey_600,
-    activeReadonlyRadioInputColor: _coreTokens["default"].color_grey_700,
+    readOnlyRadioInputColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyRadioInputColor: _coreTokens["default"].color_grey_600,
+    activeReadOnlyRadioInputColor: _coreTokens["default"].color_grey_700,
     disabledRadioInputColor: _coreTokens["default"].color_grey_500,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
@@ -758,10 +723,10 @@ var 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
@@ -769,7 +734,6 @@ var componentTokens = {
   slider: {
     fontFamily: _coreTokens["default"].type_sans,
     limitValuesFontColor: _coreTokens["default"].color_black,
-    limitValuesFontColorOnDark: _coreTokens["default"].color_white,
     limitValuesFontSize: _coreTokens["default"].type_scale_03,
     limitValuesFontStyle: _coreTokens["default"].type_normal,
     limitValuesFontWeight: _coreTokens["default"].type_regular,
@@ -786,15 +750,10 @@ var componentTokens = {
     helperTextFontWeight: _coreTokens["default"].type_regular,
     helperTextLineHeight: _coreTokens["default"].type_leading_normal,
     fontColor: _coreTokens["default"].color_black,
-    fontColorOnDark: _coreTokens["default"].color_white,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     helperTextFontColor: _coreTokens["default"].color_black,
-    helperTextFontColorOnDark: _coreTokens["default"].color_white,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
-    disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
-    disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
     thumbHeight: "12px",
     thumbWidth: "12px",
     hoverThumbHeight: "14px",
@@ -802,40 +761,28 @@ var componentTokens = {
     thumbVerticalPosition: "12px",
     hoverThumbVerticalPosition: "11px",
     thumbBackgroundColor: _coreTokens["default"].color_blue_800,
-    thumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
     hoverThumbScale: "1.166666",
     hoverThumbBackgroundColor: _coreTokens["default"].color_blue_900,
-    hoverThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
     activeThumbScale: "1.166666",
     activeThumbBackgroundColor: _coreTokens["default"].color_blue_900,
-    activeThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
     focusThumbBackgroundColor: _coreTokens["default"].color_blue_800,
-    focusThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
     tickHeight: "4px",
     tickWidth: "4px",
     tickVerticalPosition: "11px",
     tickBackgroundColor: _coreTokens["default"].color_blue_800,
-    tickBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
     trackLineThickness: "2px",
     trackLineVerticalPosition: "50%",
     trackLineColor: _coreTokens["default"].color_blue_800,
-    trackLineColorOnDark: _coreTokens["default"].color_blue_600,
     totalLineThickness: "2px",
     totalLineVerticalPosition: "50%",
     totalLineColor: _coreTokens["default"].color_grey_200_a,
-    totalLineColorOnDark: _coreTokens["default"].color_grey_400,
     disabledThumbVerticalPosition: "10px",
     disabledThumbBackgroundColor: _coreTokens["default"].color_grey_500,
-    disabledThumbBackgroundColorOnDark: "#575757",
     disabledTickVerticalPosition: "11px",
     disabledTickBackgroundColor: _coreTokens["default"].color_grey_500,
-    disabledTickBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
     disabledTrackLineColor: _coreTokens["default"].color_grey_500,
-    disabledTrackLineColorOnDark: _coreTokens["default"].color_grey_500,
     disabledTotalLineColor: _coreTokens["default"].color_grey_100,
-    disabledTotalLineColorOnDark: _coreTokens["default"].color_grey_700,
     focusColor: _coreTokens["default"].color_blue_600,
-    focusColorOnDark: _coreTokens["default"].color_blue_600,
     floorLabelMarginRight: _coreTokens["default"].type_scale_03,
     ceilLabelMarginLeft: _coreTokens["default"].type_scale_03,
     inputMarginLeft: _coreTokens["default"].type_scale_06
@@ -849,14 +796,12 @@ var componentTokens = {
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_regular,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     labelTextAlign: "center",
     progressValueFontFamily: _coreTokens["default"].type_sans,
     progressValueFontSize: _coreTokens["default"].type_scale_02,
     progressValueFontStyle: _coreTokens["default"].type_normal,
     progressValueFontWeight: _coreTokens["default"].type_bold,
     progressValueFontColor: _coreTokens["default"].inherit,
-    progressValueFontColorOnDark: _coreTokens["default"].color_white,
     progressValueTextAlign: "center",
     overlayBackgroundColor: _coreTokens["default"].color_black,
     overlayOpacity: "0.8",
@@ -875,38 +820,27 @@ var componentTokens = {
   },
   "switch": {
     checkedTrackBackgroundColor: _coreTokens["default"].color_purple_700,
-    checkedTrackBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
     checkedThumbBackgroundColor: _coreTokens["default"].color_white,
-    checkedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
     uncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_400,
-    uncheckedTrackBackgroundColorOnDark: _coreTokens["default"].color_grey_400,
     uncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
-    uncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
     disabledCheckedTrackBackgroundColor: _coreTokens["default"].color_purple_100,
-    disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
     disabledCheckedThumbBackgroundColor: _coreTokens["default"].color_white,
-    disabledCheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
     disabledUncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_100,
-    disabledUncheckedTrackBackgroundColorOnDark: "#363636",
     disabledUncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
-    disabledUncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
-    disabledLabelFontColorOnDark: "#575757",
     disabledLabelFontStyle: _coreTokens["default"].type_normal,
     labelFontFamily: _coreTokens["default"].type_sans,
     labelFontSize: _coreTokens["default"].type_scale_root,
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_regular,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     thumbFocusColor: _coreTokens["default"].color_blue_600,
-    thumbFocusColorOnDark: "#1682ff",
     thumbHeight: "24px",
     thumbWidth: "24px",
     thumbShift: "1.25rem",
     trackHeight: "12px",
     trackWidth: "36px",
-    spaceBetweenLabelSwitch: "8px"
+    spaceBetweenLabelSwitch: _coreTokens["default"].spacing_8
   },
   table: {
     rowSeparatorThickness: "1px",
@@ -919,12 +853,20 @@ var 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,
@@ -933,15 +875,29 @@ var 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,
@@ -960,27 +916,13 @@ var 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,
@@ -988,10 +930,10 @@ var 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",
@@ -1002,130 +944,87 @@ var componentTokens = {
   textarea: {
     fontFamily: _coreTokens["default"].type_sans,
     enabledBorderColor: _coreTokens["default"].color_black,
-    enabledBorderColorOnDark: _coreTokens["default"].color_white,
     hoverBorderColor: _coreTokens["default"].color_purple_500,
-    hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
     focusBorderColor: _coreTokens["default"].color_blue_600,
-    focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
     disabledBorderColor: _coreTokens["default"].color_grey_500,
-    disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
     disabledContainerFillColor: _coreTokens["default"].color_grey_100,
-    disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     errorBorderColor: _coreTokens["default"].color_red_700,
-    errorBorderColorOnDark: _coreTokens["default"].color_red_500,
     hoverErrorBorderColor: _coreTokens["default"].color_red_600,
-    hoverErrorBorderColorOnDark: "#fe677b",
     inputMarginTop: _coreTokens["default"].spacing_4,
     inputMarginBottom: _coreTokens["default"].spacing_4,
     errorMessageColor: _coreTokens["default"].color_red_700,
-    errorMessageColorOnDark: _coreTokens["default"].color_red_500,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     labelFontSize: _coreTokens["default"].type_scale_02,
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_semibold,
     labelLineHeight: _coreTokens["default"].type_leading_loose_01,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
-    disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
     optionalLabelFontWeight: _coreTokens["default"].type_regular,
     helperTextFontColor: _coreTokens["default"].color_black,
-    helperTextFontColorOnDark: _coreTokens["default"].color_white,
     helperTextFontSize: _coreTokens["default"].type_scale_01,
     helperTextFontStyle: _coreTokens["default"].type_normal,
     helperTextFontWeight: _coreTokens["default"].type_regular,
     helperTextLineHeight: _coreTokens["default"].type_leading_normal,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
-    disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
     placeholderFontColor: _coreTokens["default"].color_grey_800_a,
-    placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
     disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
-    disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
     valueFontColor: _coreTokens["default"].color_black,
-    valueFontColorOnDark: _coreTokens["default"].color_white,
     valueFontSize: _coreTokens["default"].type_scale_03,
     valueFontStyle: _coreTokens["default"].type_normal,
     valueFontWeight: _coreTokens["default"].type_regular,
-    disabledValueFontColor: _coreTokens["default"].color_grey_500,
-    disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500
+    disabledValueFontColor: _coreTokens["default"].color_grey_500
   },
   textInput: {
     fontFamily: _coreTokens["default"].type_sans,
     enabledBorderColor: _coreTokens["default"].color_black,
-    enabledBorderColorOnDark: _coreTokens["default"].color_white,
     hoverBorderColor: _coreTokens["default"].color_purple_500,
-    hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
     focusBorderColor: _coreTokens["default"].color_blue_600,
-    focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
     disabledBorderColor: _coreTokens["default"].color_grey_500,
-    disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
     disabledContainerFillColor: _coreTokens["default"].color_grey_100,
-    disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
+    readOnlyBorderColor: _coreTokens["default"].color_grey_500,
+    hoverReadOnlyBorderColor: _coreTokens["default"].color_grey_600,
     errorBorderColor: _coreTokens["default"].color_red_700,
-    errorBorderColorOnDark: _coreTokens["default"].color_red_500,
     hoverErrorBorderColor: _coreTokens["default"].color_red_600,
-    hoverErrorBorderColorOnDark: "#fe677b",
     inputMarginTop: _coreTokens["default"].spacing_4,
     inputMarginBottom: _coreTokens["default"].spacing_4,
     errorMessageColor: _coreTokens["default"].color_red_700,
-    errorMessageColorOnDark: _coreTokens["default"].color_red_500,
     errorIconColor: _coreTokens["default"].color_red_700,
-    errorIconColorOnDark: _coreTokens["default"].color_red_500,
     labelFontColor: _coreTokens["default"].color_black,
-    labelFontColorOnDark: _coreTokens["default"].color_white,
     labelFontSize: _coreTokens["default"].type_scale_02,
     labelFontStyle: _coreTokens["default"].type_normal,
     labelFontWeight: _coreTokens["default"].type_semibold,
     labelLineHeight: _coreTokens["default"].type_leading_loose_01,
     disabledLabelFontColor: _coreTokens["default"].color_grey_500,
-    disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
     optionalLabelFontWeight: _coreTokens["default"].type_regular,
     helperTextFontColor: _coreTokens["default"].color_black,
-    helperTextFontColorOnDark: _coreTokens["default"].color_white,
     helperTextFontSize: _coreTokens["default"].type_scale_01,
     helperTextFontStyle: _coreTokens["default"].type_normal,
     helperTextFontWeight: _coreTokens["default"].type_regular,
     helperTextLineHeight: _coreTokens["default"].type_leading_normal,
     disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
-    disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
     prefixColor: _coreTokens["default"].color_grey_700,
-    prefixColorOnDark: _coreTokens["default"].color_white,
     suffixColor: _coreTokens["default"].color_grey_700,
-    suffixColorOnDark: _coreTokens["default"].color_white,
     disabledPrefixColor: _coreTokens["default"].color_grey_400,
     disabledSuffixColor: _coreTokens["default"].color_grey_400,
-    disabledPrefixColorOnDark: _coreTokens["default"].color_grey_500,
-    disabledSuffixColorOnDark: _coreTokens["default"].color_grey_500,
     placeholderFontColor: _coreTokens["default"].color_grey_800_a,
-    placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
     disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
-    disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
     valueFontColor: _coreTokens["default"].color_black,
-    valueFontColorOnDark: _coreTokens["default"].color_white,
     valueFontSize: _coreTokens["default"].type_scale_03,
     valueFontStyle: _coreTokens["default"].type_normal,
     valueFontWeight: _coreTokens["default"].type_regular,
     disabledValueFontColor: _coreTokens["default"].color_grey_500,
-    disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500,
     actionIconColor: _coreTokens["default"].color_black,
-    actionIconColorOnDark: _coreTokens["default"].color_white,
     disabledActionIconColor: _coreTokens["default"].color_grey_500,
-    disabledActionIconColorOnDark: _coreTokens["default"].color_grey_500,
     hoverActionIconColor: _coreTokens["default"].color_black,
-    hoverActionIconColorOnDark: _coreTokens["default"].color_white,
     focusActionIconColor: _coreTokens["default"].color_black,
-    focusActionIconColorOnDark: _coreTokens["default"].color_white,
     activeActionIconColor: _coreTokens["default"].color_black,
-    activeActionIconColorOnDark: _coreTokens["default"].color_black,
     actionBackgroundColor: _coreTokens["default"].color_transparent,
-    actionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     disabledActionBackgroundColor: _coreTokens["default"].color_transparent,
-    disabledActionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
     hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
-    hoverActionBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
     focusActionBorderColor: _coreTokens["default"].color_blue_600,
-    focusActionBorderColorOnDark: _coreTokens["default"].color_blue_600,
     activeActionBackgroundColor: _coreTokens["default"].color_grey_300,
-    activeActionBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
     listDialogBackgroundColor: _coreTokens["default"].color_white,
     listDialogBorderColor: _coreTokens["default"].color_grey_400,
     listOptionDividerColor: _coreTokens["default"].color_grey_200,
@@ -1138,7 +1037,7 @@ var 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: {
@@ -1251,26 +1150,23 @@ var componentTokens = {
     focusColor: _coreTokens["default"].color_blue_600
   }
 };
-exports.componentTokens = componentTokens;
-var spaces = {
-  xxsmall: "6px",
-  xsmall: "16px",
-  small: "24px",
-  medium: "36px",
-  large: "48px",
-  xlarge: "64px",
-  xxlarge: "100px"
+var spaces = exports.spaces = {
+  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
 };
-exports.spaces = spaces;
-var responsiveSizes = {
+var responsiveSizes = exports.responsiveSizes = {
   xsmall: "20",
   small: "30",
   medium: "45",
   large: "66",
   xlarge: "90"
 };
-exports.responsiveSizes = responsiveSizes;
-var defaultTranslatedComponentLabels = {
+var defaultTranslatedComponentLabels = exports.defaultTranslatedComponentLabels = {
   formFields: {
     optionalLabel: "(Optional)",
     requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
@@ -1365,5 +1261,4 @@ var defaultTranslatedComponentLabels = {
     previousMonthTitle: "Previous month",
     nextMonthTitle: "Next month"
   }
-};
-exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;
+};