@dxc-technology/halstack-react 0.0.0-14e13eb → 0.0.0-58e75a5

package/dist/common/variables.js

@@ -148,19 +148,13 @@ var componentTokens = {
   accordion: {
     backgroundColor: globalTokens.white,
     arrowColor: globalTokens.purple,
-    fontColorBase: globalTokens.darkGrey,
     hoverBackgroundColor: globalTokens.lightPurple,
-    disabledFontColor: globalTokens.mediumGrey,
-    customContentFontFamily: globalTokens.type_sans,
-    customContentFontSize: globalTokens.type_scale_03,
-    customContentFontWeight: globalTokens.type_light,
-    customContentFontColor: "",
-    customContentPanelHeight: "22px",
+    disabledColor: globalTokens.mediumGrey,
     assistiveTextFontFamily: globalTokens.type_sans,
     assistiveTextFontSize: globalTokens.type_scale_03,
     assistiveTextFontWeight: globalTokens.type_light,
     assistiveTextFontStyle: globalTokens.type_italic,
-    assistiveTextFontColor: "",
+    assistiveTextFontColor: globalTokens.darkGrey,
     assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
     assistiveTextMinWidth: "100px",
     assistiveTextPaddingRight: "24px",
@@ -169,21 +163,21 @@ var componentTokens = {
     titleLabelFontSize: globalTokens.type_scale_03,
     titleLabelFontWeight: globalTokens.type_regular,
     titleLabelFontStyle: globalTokens.type_normal,
-    titleLabelFontColor: "",
+    titleLabelFontColor: globalTokens.darkGrey,
     titleLabelPaddingLeft: "0px",
     titleLabelPaddingRight: "0px",
     titlePaddingTop: "0px",
     titlePaddingBottom: "0px",
-    titleFocusBorderStyle: "solid",
-    titleFocusBorderThickness: "1px",
-    titleFocusBorderColor: globalTokens.purple,
+    focusBorderStyle: "solid",
+    focusBorderThickness: "1px",
+    focusBorderColor: globalTokens.purple,
     borderRadius: "4px",
     boxShadowOffsetX: "0px",
     boxShadowOffsetY: "6px",
     boxShadowBlur: "10px",
     boxShadowColor: "#00000024",
-    iconMaxHeight: "24px",
-    iconMaxWidth: "24px",
+    iconColor: globalTokens.purple,
+    iconSize: "24px",
     iconMarginLeft: "0px",
     iconMarginRigth: "12px",
     accordionGroupSeparatorBorderColor: "#00000024",
@@ -211,7 +205,7 @@ var componentTokens = {
     contentFontFamily: globalTokens.type_sans,
     contentFontSize: globalTokens.type_scale_01,
     contentFontColor: globalTokens.black,
-    contentFontWeight: globalTokens.type_normal,
+    contentFontWeight: globalTokens.type_regular,
     contentPaddingLeft: "46px",
     contentPaddingRight: "12px",
     contentPaddingTop: "8px",
@@ -224,7 +218,7 @@ var componentTokens = {
     borderRadius: "4px",
     borderStyle: "none",
     borderThickness: "0px",
-    borderColor: "transparent",
+    borderColor: globalTokens.transparent,
     height: "48px",
     inlineTextPaddingLeft: "10px",
     inlineTextPaddingRight: "10px",
@@ -240,24 +234,47 @@ var componentTokens = {
     textPaddingTop: "0px",
     textPaddingBottom: "0px"
   },
+  box: {
+    backgroundColor: globalTokens.white,
+    letterSpacing: globalTokens.type_spacing_wide_01,
+    borderRadius: "4px",
+    borderThickness: "0px",
+    borderStyle: "none",
+    borderColor: globalTokens.transparent,
+    noneShadowDepthShadowOffsetX: "none",
+    noneShadowDepthShadowOffsetY: "none",
+    noneShadowDepthShadowBlur: "none",
+    noneShadowDepthShadowSpread: "none",
+    noneShadowDepthShadowColor: globalTokens.transparent,
+    oneShadowDepthShadowOffsetX: "0px",
+    oneShadowDepthShadowOffsetY: "3px",
+    oneShadowDepthShadowBlur: "6px",
+    oneShadowDepthShadowSpread: "0px",
+    oneShadowDepthShadowColor: "#00000033",
+    twoShadowDepthShadowOffsetX: "0px",
+    twoShadowDepthShadowOffsetY: "3px",
+    twoShadowDepthShadowBlur: "10px",
+    twoShadowDepthShadowSpread: "0px",
+    twoShadowDepthShadowColor: "#00000033"
+  },
   button: {
     primaryBackgroundColor: globalTokens.purple,
     primaryBackgroundColorOnDark: "#581B81",
     primaryHoverBackgroundColor: globalTokens.black,
     primaryHoverBackgroundColorOnDark: "#581B81",
-    primaryFontColor: "#FFFFFF",
-    primaryFontColorOnDark: "#FFFFFF",
+    primaryFontColor: globalTokens.white,
+    primaryFontColorOnDark: globalTokens.white,
     primaryHoverFontColor: globalTokens.white,
-    primaryHoverFontColorOnDark: "#000000",
+    primaryHoverFontColorOnDark: globalTokens.black,
     primaryActiveBackgroundColor: globalTokens.mediumBlack,
     primaryActiveBackgroundColorOnDark: "#581B81",
     primaryDisabledBackgroundColor: globalTokens.lightPurple,
     primaryDisabledBackgroundColorOnDark: "#ffffff57",
     primaryDisabledFontColor: globalTokens.white,
-    primaryDisabledFontColorOnDark: "#000000",
+    primaryDisabledFontColorOnDark: globalTokens.black,
     primaryBorderThickness: "0px",
-    primaryBorderColor: "",
-    primaryBorderColorOnDark: "",
+    primaryBorderColor: globalTokens.black,
+    primaryBorderColorOnDark: globalTokens.white,
     primaryBorderStyle: "none",
     primaryBorderRadius: "4px",
     primaryFontFamily: globalTokens.type_sans,
@@ -268,13 +285,13 @@ var componentTokens = {
     secondaryOutlinedColor: globalTokens.purple,
     secondaryOutlinedColorOnDark: "#6A229A",
     secondaryBackgroundColor: globalTokens.transparent,
-    secondaryBackgroundColorOnDark: "transparent",
+    secondaryBackgroundColorOnDark: globalTokens.transparent,
     secondaryHoverOutlinedColor: globalTokens.black,
     secondaryHoverOutlinedColorOnDark: "#6A229A",
     secondaryFontColor: globalTokens.black,
-    secondaryFontColorOnDark: "#FFFFFF",
+    secondaryFontColorOnDark: globalTokens.white,
     secondaryHoverFontColor: globalTokens.black,
-    secondaryHoverFontColorOnDark: "#FFFFFF",
+    secondaryHoverFontColorOnDark: globalTokens.white,
     secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
     secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
     secondaryHoverBackgroundColor: globalTokens.darkWhite,
@@ -292,22 +309,22 @@ var componentTokens = {
     secondaryPaddingTop: "10px",
     secondaryPaddingBottom: "10px",
     textBackgroundColor: globalTokens.transparent,
-    textBackgroundColorOnDark: "transparent",
+    textBackgroundColorOnDark: globalTokens.transparent,
     textHoverBackgroundColor: globalTokens.black,
     textHoverBackgroundColorOnDark: "#6A229A80",
     textFontColor: globalTokens.purple,
-    textFontColorOnDark: "#FFFFFF",
+    textFontColorOnDark: globalTokens.white,
     textHoverFontColor: globalTokens.white,
-    textHoverFontColorOnDark: "#FFFFFF",
+    textHoverFontColorOnDark: globalTokens.white,
     textActiveBackgroundColor: globalTokens.mediumBlack,
     textActiveBackgroundColorOnDark: "#581B81",
-    textDisabledFontColor: globalTokens.lightPurple,
-    textDisabledBackgroundColor: "transparent",
-    textDisabledBackgroundColorOnDark: "transparent",
+    textDisabledFontColor: globalTokens.lighterPurple,
+    textDisabledBackgroundColor: globalTokens.transparent,
+    textDisabledBackgroundColorOnDark: globalTokens.transparent,
     textDisabledFontColorOnDark: "#FFFFFF80",
     textBorderThickness: "0px",
-    textBorderColor: "",
-    textBorderColorOnDark: "",
+    textBorderColor: globalTokens.black,
+    textBorderColorOnDark: globalTokens.white,
     textBorderStyle: "none",
     textBorderRadius: "4px",
     textFontFamily: globalTokens.type_sans,
@@ -321,99 +338,74 @@ var componentTokens = {
     iconSize: "20px",
     height: "40px"
   },
-  box: {
-    backgroundColor: globalTokens.white,
-    fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_02,
-    fontWeight: globalTokens.type_regular,
-    fontColor: globalTokens.black,
-    letterSpacing: globalTokens.type_spacing_wide_01,
-    borderRadius: "4px",
-    borderThickness: "0px",
-    borderStyle: "none",
-    borderColor: "transparent",
-    noneShadowDepthShadowOffsetX: "none",
-    noneShadowDepthShadowOffsetY: "none",
-    noneShadowDepthShadowBlur: "none",
-    noneShadowDepthShadowSpread: "none",
-    noneShadowDepthShadowColor: "transparent",
-    oneShadowDepthShadowOffsetX: "0px",
-    oneShadowDepthShadowOffsetY: "3px",
-    oneShadowDepthShadowBlur: "6px",
-    oneShadowDepthShadowSpread: "0px",
-    oneShadowDepthShadowColor: "#00000033",
-    twoShadowDepthShadowOffsetX: "0px",
-    twoShadowDepthShadowOffsetY: "3px",
-    twoShadowDepthShadowBlur: "10px",
-    twoShadowDepthShadowSpread: "0px",
-    twoShadowDepthShadowColor: "#00000033"
-  },
   card: {
     height: "220px",
     width: "400px"
   },
   checkbox: {
     backgroundColorChecked: globalTokens.mediumBlue,
-    backgroundHoverColorChecked: "#7BB0D6",
-    backgroundColorCheckedOnDark: "#FFFFFF",
-    backgroundHoverColorCheckedOnDark: "#B1B1B1",
-    borderColor: globalTokens.mediumBlue,
-    borderHoverColor: "#7BB0D6",
-    borderColorOnDark: "#FFFFFF",
-    borderHoverColorOnDark: "#B1B1B1",
-    checkColor: globalTokens.white,
-    checkColorOnDark: "#0067B3",
-    fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_03,
-    fontWeight: globalTokens.type_normal,
-    fontColor: globalTokens.inherit,
-    fontColorOnDark: "#FFFFFF",
+    backgroundColorCheckedOnDark: globalTokens.white,
+    hoverBackgroundColorChecked: "#7BB0D6",
+    hoverBackgroundColorCheckedOnDark: "#B1B1B1",
     disabledBackgroundColorChecked: globalTokens.softBlue,
     disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
+    borderColor: globalTokens.mediumBlue,
+    borderColorOnDark: globalTokens.white,
+    hoverBorderColor: "#7BB0D6",
+    hoverBorderColorOnDark: "#B1B1B1",
     disabledBorderColor: globalTokens.softBlue,
     disabledBorderColorOnDark: globalTokens.softBlue,
-    disabledColorOnDark: "#BFBFBF",
+    checkColor: globalTokens.white,
+    checkColorOnDark: globalTokens.mediumBlue,
     disabledCheckColor: globalTokens.white,
-    disabledCheckColorOnDark: "#FFFFFF",
+    disabledCheckColorOnDark: globalTokens.white,
+    fontFamily: globalTokens.type_sans,
+    fontSize: globalTokens.type_scale_03,
+    fontWeight: globalTokens.type_regular,
+    fontColor: globalTokens.black,
+    fontColorOnDark: globalTokens.white,
+    disabledColorOnDark: globalTokens.mediumGrey,
     disabledFontColor: globalTokens.lighterBlack,
     disabledFontColorOnDark: "#575757",
     focusColor: globalTokens.blue,
+    focusColorOnDark: "#0095ff",
     checkLabelSpacing: "10px"
   },
   chip: {
-    backgroundColor: globalTokens.darkWhite,
-    borderColor: "transparent",
+    backgroundColor: "#e6e6e6",
+    disabledBackgroundColor: globalTokens.lightWhite,
+    disabledFontColor: "#999999",
     fontColor: globalTokens.black,
-    disabledBackgroundColor: globalTokens.mediumWhite,
-    disabledFontColor: globalTokens.lighterBlack,
     fontFamily: globalTokens.type_sans,
     fontSize: globalTokens.type_scale_03,
-    fontWeight: "400",
-    fontStyle: "normal",
-    borderRadius: "50px",
-    borderThickness: "2px",
+    fontStyle: globalTokens.type_normal,
+    fontWeight: globalTokens.type_regular,
+    borderColor: globalTokens.transparent,
+    borderRadius: "80px",
+    borderThickness: "0px",
     borderStyle: "solid",
-    height: "18px",
-    contentPaddingLeft: "20px",
-    contentPaddingRight: "20px",
-    contentPaddingTop: "10px",
-    contentPaddingBottom: "10px",
+    contentPaddingLeft: "16px",
+    contentPaddingRight: "16px",
+    contentPaddingTop: "0px",
+    contentPaddingBottom: "0px",
     iconSize: "24px",
-    iconPaddingLeft: "0px",
-    iconPaddingRight: "0px"
+    iconSpacing: "8px",
+    iconColor: globalTokens.black,
+    disabledIconColor: "#999999",
+    focusColor: globalTokens.mediumBlue
   },
   date: {
     pickerSelectedDateBackgroundColor: globalTokens.purple,
     pickerSelectedDateColor: globalTokens.white,
     pickerBackgroundColor: globalTokens.white,
     pickerFontColor: globalTokens.black,
-    pickerActualDate: globalTokens.lightGrey,
-    pickerHoverDateBackgroundColor: globalTokens.lightPurple,
+    pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
     pickerHoverDateFontColor: globalTokens.black,
+    pickerActualDateColor: globalTokens.lightGrey,
     pickerYearColor: globalTokens.black,
     pickerMonthColor: globalTokens.black,
     pickerWeekLabelColor: globalTokens.black,
-    pickerBackgroundColorMonthArrows: "transparent",
+    pickerBackgroundColorMonthArrows: globalTokens.transparent,
     focusColor: globalTokens.blue,
     fontFamily: globalTokens.type_sans,
     pickerHeight: "316px",
@@ -460,11 +452,10 @@ var componentTokens = {
     buttonFontStyle: globalTokens.type_normal,
     buttonFontWeight: globalTokens.type_regular,
     minHeight: "36px",
-    minWidth: "230px",
     borderRadius: "2px",
     borderStyle: "none",
     borderThickness: "0px",
-    borderColor: "transparent",
+    borderColor: globalTokens.transparent,
     optionsPaddingTop: "6px",
     optionsPaddingBottom: "6px",
     optionsPaddingLeft: "16px",
@@ -473,15 +464,15 @@ var componentTokens = {
     caretIconMarginLeft: "12px",
     caretIconMarginTop: "0px",
     caretIconMarginBottom: "0px",
-    optionsFontColor: "",
     optionsFontSize: globalTokens.type_scale_root,
     optionsFontStyle: globalTokens.type_normal,
     optionsFontWeight: globalTokens.type_regular,
     iconSize: "20px",
     iconOptionSpacing: "10px",
-    iconColor: ""
+    iconColor: globalTokens.black
   },
   footer: {
+    height: "124px",
     backgroundColor: globalTokens.black,
     bottomLinksDividerColor: "#0095ff",
     bottomLinksDividerThickness: "1px",
@@ -491,47 +482,36 @@ var componentTokens = {
     bottomLinksFontSize: globalTokens.type_scale_01,
     bottomLinksFontStyle: globalTokens.type_normal,
     bottomLinksFontWeight: globalTokens.type_regular,
-    bottomLinksFontColor: "",
+    bottomLinksFontColor: globalTokens.white,
     bottomLinksTextDecoration: globalTokens.type_no_line,
     copyrightFontFamily: globalTokens.type_sans,
     copyrightFontSize: globalTokens.type_scale_01,
     copyrightFontStyle: globalTokens.type_normal,
     copyrightFontWeight: globalTokens.type_regular,
-    copyrightFontColor: "",
-    customContentFontFamily: globalTokens.type_sans,
-    customContentFontSize: globalTokens.type_scale_root,
-    customContentFontStyle: globalTokens.type_normal,
-    customContentFontWeight: globalTokens.type_regular,
-    customContentFontColor: "",
-    fontColorBase: globalTokens.white,
+    copyrightFontColor: globalTokens.white,
     logo: _dxc_logo["default"],
     logoHeight: "32px",
     logoWidth: "auto",
-    minHeight: "124px",
-    socialIconSize: "24px",
-    socialIconsGutter: "16px"
+    socialLinksSize: "24px",
+    socialLinksGutter: "16px",
+    socialLinksColor: globalTokens.white
   },
   header: {
     backgroundColor: globalTokens.white,
-    customContentFontFamily: "",
+    customContentFontFamily: globalTokens.type_sans,
     customContentFontStyle: globalTokens.type_normal,
-    customContentFontColor: "",
-    customContentFontSize: "",
+    customContentFontColor: globalTokens.black,
+    customContentFontSize: globalTokens.type_scale_root,
     customContentFontWeight: globalTokens.type_regular,
-    dropdownBackgroundColor: globalTokens.transparent,
-    dropdownHoverBackgroundColor: globalTokens.transparent,
-    fontColorBase: globalTokens.black,
-    fontFamilyBase: globalTokens.type_sans,
-    fontSizeBase: globalTokens.type_scale_root,
     hamburguerFocusColor: globalTokens.blue,
-    hamburguerFontFamily: "",
+    hamburguerFontFamily: globalTokens.type_sans,
     hamburguerFontStyle: globalTokens.type_normal,
-    hamburguerFontColor: "",
+    hamburguerFontColor: globalTokens.black,
     hamburguerFontSize: globalTokens.fontSize10,
     hamburguerFontWeight: globalTokens.type_semibold,
-    hamburguerColor: globalTokens.black,
-    hamburguerHoverColor: globalTokens.mediumGreyBlack,
     hamburguerTextTransform: globalTokens.type_uppercase,
+    hamburguerIconColor: globalTokens.black,
+    hamburguerHoverColor: globalTokens.mediumGreyBlack,
     logo: _dxc_logo_black["default"],
     logoResponsive: _dxc_logo_black["default"],
     logoHeight: "40px",
@@ -540,10 +520,10 @@ var componentTokens = {
     menuZindex: "2000",
     menuTabletWidth: "60vw",
     menuMobileWidth: "100vw",
-    menuCustomContentFontFamily: "",
+    menuCustomContentFontFamily: globalTokens.type_sans,
     menuCustomContentFontStyle: globalTokens.type_normal,
-    menuCustomContentFontColor: "",
-    menuCustomContentFontSize: "",
+    menuCustomContentFontColor: globalTokens.black,
+    menuCustomContentFontSize: globalTokens.type_scale_root,
     menuCustomContentFontWeight: globalTokens.type_regular,
     minHeight: "64px",
     overlayColor: globalTokens.softBlack,
@@ -558,38 +538,36 @@ var componentTokens = {
     underlinedStyle: "solid"
   },
   heading: {
-    fontColorBase: globalTokens.inherit,
-    fontFamilyBase: globalTokens.type_sans,
-    level1FontColor: "",
-    level1FontFamily: "",
+    level1FontColor: globalTokens.inherit,
+    level1FontFamily: globalTokens.type_sans,
     level1FontSize: globalTokens.type_scale_08,
     level1FontStyle: globalTokens.type_normal,
     level1FontWeight: globalTokens.type_regular,
     level1LineHeight: globalTokens.type_leading_compact_01,
     level1LetterSpacing: globalTokens.type_spacing_tight_01,
-    level2FontColor: "",
-    level2FontFamily: "",
+    level2FontColor: globalTokens.inherit,
+    level2FontFamily: globalTokens.type_sans,
     level2FontSize: globalTokens.type_scale_07,
     level2FontStyle: globalTokens.type_normal,
     level2FontWeight: globalTokens.type_regular,
     level2LineHeight: globalTokens.type_leading_normal,
     level2LetterSpacing: globalTokens.type_spacing_normal,
-    level3FontColor: "",
-    level3FontFamily: "",
+    level3FontColor: globalTokens.inherit,
+    level3FontFamily: globalTokens.type_sans,
     level3FontSize: globalTokens.type_scale_06,
     level3FontStyle: globalTokens.type_normal,
     level3FontWeight: globalTokens.type_regular,
     level3LineHeight: globalTokens.type_leading_compact_01,
     level3LetterSpacing: globalTokens.type_spacing_wide_01,
-    level4FontColor: "",
-    level4FontFamily: "",
+    level4FontColor: globalTokens.inherit,
+    level4FontFamily: globalTokens.type_sans,
     level4FontSize: globalTokens.type_scale_05,
     level4FontStyle: globalTokens.type_normal,
     level4FontWeight: globalTokens.type_regular,
     level4LineHeight: globalTokens.type_leading_normal,
     level4LetterSpacing: globalTokens.type_spacing_normal,
-    level5FontColor: "",
-    level5FontFamily: "",
+    level5FontColor: globalTokens.inherit,
+    level5FontFamily: globalTokens.type_sans,
     level5FontSize: globalTokens.type_scale_04,
     level5FontStyle: globalTokens.type_normal,
     level5FontWeight: globalTokens.type_regular,
@@ -597,43 +575,62 @@ var componentTokens = {
     level5LetterSpacing: globalTokens.type_spacing_wide_01
   },
   inputText: {
-    assistiveTextFontColor: "",
-    assistiveTextFontColorOnDark: "",
+    fontFamily: globalTokens.type_sans,
+    assistiveTextFontColor: globalTokens.black,
+    assistiveTextFontColorOnDark: globalTokens.white,
     assistiveTextFontSize: globalTokens.type_scale_01,
     assistiveTextFontStyle: globalTokens.type_normal,
     assistiveTextFontWeight: globalTokens.type_regular,
-    disabledFontColor: globalTokens.lighterBlack,
-    disabledFontColorOnDark: "#575757",
+    disabledColor: globalTokens.lighterBlack,
+    disabledColorOnDark: "#575757",
     errorColor: globalTokens.red,
     errorColorOnDark: "#FE344F",
-    fontColorBase: globalTokens.black,
-    fontColorBaseOnDark: globalTokens.white,
-    fontFamilyBase: globalTokens.type_sans,
-    fontSizeBase: globalTokens.type_scale_root,
+    optionBackgroundColor: globalTokens.white,
+    optionBorderColor: globalTokens.black,
+    optionBorderThickness: "0px",
+    optionBorderStyle: "solid",
+    optionFontColor: globalTokens.black,
+    optionFontColorOnDark: globalTokens.white,
+    optionFontSize: globalTokens.type_scale_03,
+    optionFontStyle: globalTokens.type_normal,
+    optionFontWeight: globalTokens.type_regular,
+    optionPaddingBottom: "6px",
+    optionPaddingTop: "6px",
+    scrollBarThumbColor: globalTokens.darkGrey,
+    scrollBarTrackColor: globalTokens.lightGrey,
     hoverOptionColor: globalTokens.black,
     hoverOptionBackgroundColor: globalTokens.lightWhite,
+    hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
+    selectedOptionBackgroundColor: globalTokens.lightGrey,
+    selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
+    labelFontColor: globalTokens.black,
+    labelFontColorOnDark: globalTokens.white,
     labelFontSize: globalTokens.type_scale_03,
-    prefixIconColor: "",
-    prefixIconColorOnDark: "",
-    prefixLabelFontColor: "",
-    prefixLabelFontColorOnDark: "",
+    labelFontStyle: globalTokens.type_normal,
+    labelFontWeight: globalTokens.type_regular,
+    valueFontColor: globalTokens.black,
+    valueFontColorOnDark: globalTokens.white,
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    prefixIconColor: globalTokens.black,
+    prefixIconColorOnDark: globalTokens.white,
+    prefixLabelFontColor: globalTokens.black,
+    prefixLabelFontColorOnDark: globalTokens.white,
     prefixLabelFontSize: globalTokens.type_scale_03,
     prefixLabelFontStyle: globalTokens.type_normal,
     prefixLabelFontWeight: globalTokens.type_regular,
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    selectedOptionBackgroundColor: globalTokens.lightGrey,
-    suffixIconColor: "",
-    suffixIconColorOnDark: "",
-    suffixLabelFontColor: "",
-    suffixLabelFontColorOnDark: "",
+    suffixIconColor: globalTokens.black,
+    suffixIconColorOnDark: globalTokens.white,
+    suffixLabelFontColor: globalTokens.black,
+    suffixLabelFontColorOnDark: globalTokens.white,
     suffixLabelFontSize: globalTokens.type_scale_03,
     suffixLabelFontStyle: globalTokens.type_normal,
     suffixLabelFontWeight: globalTokens.type_regular,
-    underlineColor: "",
-    underlineColorOnDark: "",
-    underlineFocusColor: "",
-    underlineFocusColorOnDark: "",
+    underlineColor: globalTokens.black,
+    underlineColorOnDark: globalTokens.white,
+    underlineFocusColor: globalTokens.black,
+    underlineFocusColorOnDark: globalTokens.white,
     underlineThickness: "1px"
   },
   newInputText: {
@@ -727,7 +724,7 @@ var componentTokens = {
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular,
     iconSize: "16px",
-    iconGutter: "4px",
+    iconSpacing: "4px",
     underlineSpacing: "0px",
     underlineStyle: "solid",
     underlineThickness: "1px",
@@ -747,6 +744,7 @@ var componentTokens = {
     fontSize: globalTokens.type_scale_02,
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular,
+    fontTextTransform: "none",
     height: "64px",
     width: "100%",
     marginRight: "40px",
@@ -797,55 +795,62 @@ var componentTokens = {
     fontWeight: globalTokens.type_regular
   },
   select: {
-    checkboxOptionSpacing: "12px",
-    color: globalTokens.black,
-    colorOnDark: globalTokens.white,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: "#FE344F",
-    focusColor: globalTokens.blue,
-    focusColorOnDark: globalTokens.blue,
     fontFamily: globalTokens.type_sans,
-    hoveredOptionBackgroundColor: globalTokens.lightWhite,
-    hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
-    iconColor: "",
-    iconOptionSpacing: "12px",
-    iconSize: "20px",
-    labelFontSize: globalTokens.type_scale_03,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_regular,
     assistiveTextFontColor: globalTokens.black,
     assistiveTextFontColorOnDark: globalTokens.white,
     assistiveTextFontSize: globalTokens.type_scale_01,
     assistiveTextFontStyle: globalTokens.type_normal,
     assistiveTextFontWeight: globalTokens.type_regular,
+    labelFontColor: globalTokens.black,
+    labelFontColorOnDark: globalTokens.white,
+    labelFontSize: globalTokens.type_scale_03,
+    labelFontStyle: globalTokens.type_normal,
+    labelFontWeight: globalTokens.type_regular,
+    disabledColor: globalTokens.lighterBlack,
+    disabledColorOnDark: "#575757",
+    errorColor: globalTokens.red,
+    errorColorOnDark: "#FE344F",
+    optionBackgroundColor: globalTokens.white,
+    optionBorderColor: globalTokens.black,
+    optionBorderThickness: "0px",
+    optionBorderStyle: "solid",
+    optionFontColor: globalTokens.black,
+    optionFontColorOnDark: globalTokens.white,
+    optionFontSize: globalTokens.type_scale_root,
+    optionFontStyle: globalTokens.type_normal,
+    optionFontWeight: globalTokens.type_regular,
     optionPaddingBottom: "6px",
     optionPaddingTop: "6px",
-    optionPaddingLeft: "16px",
-    optionPaddingRight: "16px",
-    optionsBackgroundColor: globalTokens.white,
-    optionsBorderColor: "none",
-    optionsBorderThickness: "0px",
-    optionsBorderStyle: "solid",
-    optionsFontColor: "",
-    optionsFontSize: globalTokens.type_scale_root,
-    optionsFontStyle: globalTokens.type_normal,
-    optionsFontWeight: globalTokens.type_regular,
     scrollBarThumbColor: globalTokens.darkGrey,
     scrollBarTrackColor: globalTokens.lightGrey,
+    optionIconColor: globalTokens.black,
+    optionIconColorOnDark: globalTokens.white,
+    optionIconSpacing: "12px",
+    optionIconSize: "20px",
+    optionCheckboxSpacing: "12px",
+    hoverOptionBackgroundColor: globalTokens.lightWhite,
+    hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
     selectedOptionBackgroundColor: globalTokens.lightGrey,
-    selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
+    selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
+    underlineColor: globalTokens.black,
+    underlineColorOnDark: globalTokens.white,
+    underlineFocusColor: globalTokens.black,
+    underlineFocusColorOnDark: globalTokens.white,
+    underlineThickness: "1px",
+    valueFontColor: globalTokens.black,
+    valueFontColorOnDark: globalTokens.white,
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    arrowColor: globalTokens.black,
+    arrowColorOnDark: globalTokens.white,
+    focusColor: globalTokens.blue,
+    focusColorOnDark: "#1682FF"
   },
   sidenav: {
     backgroundColor: globalTokens.lighterGrey,
     arrowContainerColor: globalTokens.lightGrey,
     arrowColor: globalTokens.black,
-    customContentFontFamily: globalTokens.type_sans,
-    customContentFontSize: globalTokens.type_scale_root,
-    customContentFontStyle: globalTokens.type_normal,
-    customContentFontWeight: globalTokens.type_regular,
-    customContentFontColor: globalTokens.black,
     titleFontFamily: globalTokens.type_sans,
     titleFontSize: globalTokens.type_scale_05,
     titleFontStyle: globalTokens.type_normal,
@@ -900,14 +905,14 @@ var componentTokens = {
     trackLineVerticalPosition: "50%",
     trackLineColor: globalTokens.mediumBlue,
     trackLineOnDark: globalTokens.white,
-    totalLineThickness: "",
+    totalLineThickness: "2px",
     totalLineVerticalPosition: "50%",
     totalLineColor: globalTokens.softBlue,
     totalLineOnDark: globalTokens.white,
     disabledThumbVerticalPosition: "24%",
     disabledThumbBackgroundColor: globalTokens.softBlue,
     disabledThumbBackgroundColorOnDark: "#575757",
-    disabledDotsVerticalPosition: "",
+    disabledDotsVerticalPosition: "42%",
     disabledDotsBackgroundColor: globalTokens.softBlue,
     disabledDotsBackgroundColorOnDark: "#575757",
     disabledTrackLineColor: globalTokens.softBlue,
@@ -918,21 +923,24 @@ var componentTokens = {
     focusColorOnDark: "#1682FF"
   },
   spinner: {
-    trackCircleColor: globalTokens.purple,
+    trackCircleColor: "#5f249f",
+    trackCircleColorOnDark: "#a46ede",
     totalCircleColor: globalTokens.white,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_01,
     labelFontStyle: globalTokens.type_normal,
     labelFontWeight: globalTokens.type_regular,
-    labelFontColor: globalTokens.inherit,
+    labelFontColor: globalTokens.black,
+    labelFontColorOnDark: globalTokens.white,
     labelFontTextTransform: globalTokens.type_uppercase,
     labelLetterSpacing: globalTokens.type_spacing_normal,
     labelTextAlign: "center",
     progressValueFontFamily: globalTokens.type_sans,
     progressValueFontSize: globalTokens.type_scale_01,
     progressValueFontStyle: globalTokens.type_normal,
-    progressValueFontWeight: globalTokens.type_regular,
+    progressValueFontWeight: globalTokens.type_bold,
     progressValueFontColor: globalTokens.inherit,
+    progressValueFontColorOnDark: globalTokens.white,
     progressValueLetterSpacing: globalTokens.type_spacing_normal,
     progressValueTextAlign: "center",
     overlayBackgroundColor: globalTokens.black,
@@ -948,7 +956,7 @@ var componentTokens = {
     overlayProgressValueFontFamily: globalTokens.type_sans,
     overlayProgressValueFontSize: globalTokens.type_scale_01,
     overlayProgressValueFontStyle: globalTokens.type_normal,
-    overlayProgressValueFontWeight: globalTokens.type_regular,
+    overlayProgressValueFontWeight: globalTokens.type_bold,
     overlayProgressValueFontColor: globalTokens.white,
     overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
     overlayProgressValueTextAlign: "center"
@@ -980,7 +988,7 @@ var componentTokens = {
     labelFontColor: globalTokens.black,
     labelFontColorOnDark: globalTokens.white,
     thumbFocusColor: globalTokens.blue,
-    thumbFocusColorOnDark: "#1489FB",
+    thumbFocusColorOnDark: "#1682FF",
     thumbHeight: "24px",
     thumbWidth: "24px",
     thumbShift: "40%",
@@ -989,13 +997,17 @@ var componentTokens = {
     spaceBetweenLabelSwitch: "0px"
   },
   tag: {
+    fontFamily: globalTokens.type_sans,
+    fontColor: globalTokens.black,
+    fontSize: globalTokens.type_scale_02,
     fontStyle: globalTokens.type_normal,
+    fontWeight: globalTokens.type_regular,
     fontTextTransform: globalTokens.type_uppercase,
     height: "43px",
     iconColor: globalTokens.white,
     iconSectionWidth: "48px",
     iconHeight: "24px",
-    iconWidth: ""
+    iconWidth: "auto"
   },
   table: {
     rowSeparatorThickness: "1px",
@@ -1039,22 +1051,22 @@ var componentTokens = {
     fontWeight: globalTokens.type_semibold,
     fontTextTransform: "none",
     selectedBackgroundColor: globalTokens.white,
-    selectedFontColor: globalTokens.purple,
-    selectedIconColor: globalTokens.purple,
-    selectedUnderlineColor: globalTokens.purple,
-    selectedUnderlineThickness: "",
+    selectedFontColor: "#5f249f",
+    selectedIconColor: "#5f249f",
+    selectedUnderlineColor: "#5f249f",
+    selectedUnderlineThickness: "2px",
     unselectedBackgroundColor: globalTokens.white,
     unselectedFontColor: globalTokens.darkGrey,
     unselectedIconColor: globalTokens.darkGrey,
-    disabledFontColor: globalTokens.mediumGrey,
-    disabledIconColor: globalTokens.mediumGrey,
+    disabledFontColor: "#999999",
+    disabledIconColor: "#999999",
     disabledFontStyle: globalTokens.type_normal,
-    hoverBackgroundColor: globalTokens.lightPurple,
-    pressedBackgroundColor: globalTokens.mediumPurple,
+    hoverBackgroundColor: "#f2eafa",
+    pressedBackgroundColor: "#e5d5f6",
     pressedFontWeight: globalTokens.type_semibold,
     dividerColor: globalTokens.mediumGrey,
     dividerThickness: "1px",
-    focusOutline: globalTokens.purple,
+    focusOutline: "#5f249f",
     scrollButtonsWidth: "48px",
     badgeBackgroundColor: globalTokens.darkRed,
     badgeFontFamily: globalTokens.type_sans,
@@ -1071,36 +1083,84 @@ var componentTokens = {
     badgeRadiusWithNotificationNumber: "10px"
   },
   textarea: {
-    disabledFontColor: globalTokens.lighterBlack,
-    disabledFontColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: "#FE344F",
-    assistiveTextFontFamily: globalTokens.type_sans,
+    fontFamily: globalTokens.type_sans,
     assistiveTextFontSize: globalTokens.type_scale_01,
     assistiveTextFontStyle: globalTokens.type_normal,
     assistiveTextFontWeight: globalTokens.type_regular,
     assistiveTextFontColor: globalTokens.black,
     assistiveTextFontColorOnDark: globalTokens.white,
-    assistiveTextLetterSpacing: "",
-    customContentFontFamily: globalTokens.type_sans,
-    customContentFontSize: globalTokens.type_scale_03,
-    customContentFontStyle: globalTokens.type_normal,
-    customContentFontWeight: globalTokens.type_regular,
-    customContentFontColor: globalTokens.black,
-    customContentFontColorOnDark: globalTokens.white,
-    customContentLetterSpacing: globalTokens.type_spacing_normal,
-    customContentLineHeight: "1.1875em",
-    labelFontFamily: globalTokens.type_sans,
+    assistiveTextLetterSpacing: "0.03333em",
+    disabledColor: globalTokens.lighterBlack,
+    disabledColorOnDark: "#575757",
+    errorColor: globalTokens.red,
+    errorColorOnDark: "#FE344F",
+    scrollBarThumbColor: globalTokens.darkGrey,
+    scrollBarThumbColorOnDark: globalTokens.white,
+    scrollBarTrackColor: globalTokens.lightGrey,
+    scrollBarTrackColorOnDark: "#999999",
     labelFontSize: globalTokens.type_scale_03,
     labelFontStyle: globalTokens.type_normal,
     labelFontWeight: globalTokens.type_regular,
     labelFontColor: globalTokens.black,
     labelFontColorOnDark: globalTokens.white,
-    labelLetterSpacing: "",
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarThumbColorOnDark: globalTokens.white,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    scrollBarTrackColorOnDark: "#999999"
+    labelLetterSpacing: "0.00938em",
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    valueFontColor: globalTokens.black,
+    valueFontColorOnDark: globalTokens.white,
+    valueLetterSpacing: globalTokens.type_spacing_normal,
+    valueLineHeight: "1.1875em",
+    underlineColor: globalTokens.black,
+    underlineColorOnDark: globalTokens.white,
+    underlineFocusColor: globalTokens.black,
+    underlineFocusColorOnDark: globalTokens.white,
+    underlineThickness: "1px"
+  },
+  newTextarea: {
+    fontFamily: globalTokens.type_sans,
+    enabledBorderColor: globalTokens.hal_black,
+    enabledBorderColorOnDark: globalTokens.hal_white,
+    hoverBorderColor: globalTokens.hal_purple_l_65,
+    hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
+    focusBorderColor: globalTokens.hal_blue_l_50,
+    focusBorderColorOnDark: globalTokens.hal_blue_l_50,
+    disabledBorderColor: globalTokens.hal_grey_l_60,
+    disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
+    disabledContainerFillColor: globalTokens.hal_grey_l_95,
+    disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
+    errorBorderColor: globalTokens.hal_red_s_41,
+    errorBorderColorOnDark: globalTokens.hal_red_l_60,
+    hoverErrorBorderColor: "#fe0123",
+    hoverErrorBorderColorOnDark: "#fe677b",
+    errorMessageColor: globalTokens.hal_red_s_41,
+    errorMessageColorOnDark: globalTokens.hal_red_l_60,
+    labelFontColor: globalTokens.hal_black,
+    labelFontColorOnDark: globalTokens.hal_white,
+    labelFontSize: globalTokens.type_scale_02,
+    labelFontStyle: globalTokens.type_normal,
+    labelFontWeight: globalTokens.type_semibold,
+    disabledLabelFontColor: globalTokens.hal_grey_l_60,
+    disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
+    optionalLabelFontWeight: globalTokens.type_regular,
+    helperTextFontColor: globalTokens.hal_black,
+    helperTextFontColorOnDark: globalTokens.hal_white,
+    helperTextFontSize: globalTokens.type_scale_01,
+    helperTextFontStyle: globalTokens.type_normal,
+    helperTextFontWeight: globalTokens.type_regular,
+    disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
+    disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
+    placeholderFontColor: "#808080",
+    placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
+    disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
+    disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
+    valueFontColor: globalTokens.hal_black,
+    valueFontColorOnDark: globalTokens.hal_white,
+    valueFontSize: globalTokens.type_scale_03,
+    valueFontStyle: globalTokens.type_normal,
+    valueFontWeight: globalTokens.type_regular,
+    disabledValueFontColor: globalTokens.hal_grey_l_60,
+    disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
   },
   toggleGroup: {
     fontFamily: globalTokens.type_sans,
@@ -1111,11 +1171,11 @@ var componentTokens = {
     fontLetterSpacing: globalTokens.type_spacing_wide_02,
     focusColor: globalTokens.blue,
     selectedBackgroundColor: globalTokens.purple,
-    selectedBackgroundHoverColor: globalTokens.black,
+    selectedHoverBackgroundColor: globalTokens.black,
     selectedFontColor: globalTokens.white,
     selectedHoverFontColor: globalTokens.white,
     unselectedBackgroundColor: globalTokens.lightGrey,
-    unselectedBackgroundHoverColor: globalTokens.darkWhite,
+    unselectedHoverBackgroundColor: globalTokens.darkWhite,
     unselectedFontColor: globalTokens.black,
     unselectedHoverFontColor: globalTokens.black,
     disabledSelectedBackgroundColor: globalTokens.lightPurple,
@@ -1139,7 +1199,7 @@ var componentTokens = {
     scrollBarTrackColor: globalTokens.lightGrey,
     errorColor: globalTokens.red,
     backgroundColor: globalTokens.white,
-    draggingAreaBackgroundColor: globalTokens.lightWhite,
+    draggingStateBackgroundColor: globalTokens.lightWhite,
     dragAndDropIconColor: globalTokens.black,
     dragAndDropIconSize: "43.5px",
     dragAndDropTitleFontSize: globalTokens.type_scale_04,
@@ -1149,16 +1209,16 @@ var componentTokens = {
     dragAndDropTitleFontColor: globalTokens.black,
     dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
     dragAndDropDescriptionFontStyle: globalTokens.type_italic,
-    dragAndDropDescriptionFontWeight: globalTokens.type_normal,
-    dragAndDropTextDescriptionFontTextTransform: "none",
-    dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
+    dragAndDropDescriptionFontWeight: globalTokens.type_regular,
+    dragAndDropDescriptionFontTextTransform: "none",
+    dragAndDropDescriptionFontColor: globalTokens.darkGrey,
     dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
     dragAndDropDraggingStateIconSize: "74.5px",
     dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
     dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
-    dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
-    dragAndDropTextDraggingStateFontTextTransform: "none",
-    dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
+    dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
+    dragAndDropDraggingStateFontTextTransform: "none",
+    dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
     dragAndDropAreaIconColor: globalTokens.darkGrey,
     dragAndDropAreaIconSize: "24px",
     dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
@@ -1168,7 +1228,6 @@ var componentTokens = {
     dragAndDropAreaTextFontColor: globalTokens.darkGrey,
     fileDeleteIconColor: globalTokens.black,
     fileDeleteIconSize: "30px",
-    fileHoverColor: globalTokens.darkWhite,
     fileUnderlineColor: globalTokens.lightGrey,
     fileUnderlineThickness: "1px",
     fileNameFontSize: globalTokens.type_scale_03,
@@ -1181,19 +1240,20 @@ var componentTokens = {
     fileTypeFontWeight: globalTokens.type_regular,
     fileTypeFontTextTransform: globalTokens.type_uppercase,
     fileTypeFontColor: globalTokens.darkGrey,
-    fileUploadedIconColor: globalTokens.lightGrey,
-    fileUploadedIconSize: "24px",
-    filesUploadedTitleFontSize: globalTokens.type_scale_04,
-    filesUploadedTitleFontStyle: globalTokens.type_normal,
-    filesUploadedTitleFontWeight: globalTokens.type_regular,
-    filesUploadedTitleFontTextTransform: "none",
-    filesUploadedTitleFontColor: globalTokens.black,
-    filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
-    filesUploadedSubtitleFontStyle: globalTokens.type_normal,
-    filesUploadedSubtitleFontWeight: globalTokens.type_regular,
-    filesUploadedSubtitleFontTextTransform: "none",
-    filesUploadedSubtitleFontColor: globalTokens.darkGrey,
-    filesUploadedNumberFontWeight: globalTokens.type_bold
+    hoverFileColor: globalTokens.darkWhite,
+    uploadedFileIconColor: globalTokens.lightGrey,
+    uploadedFileIconSize: "24px",
+    uploadedFilesTitleFontSize: globalTokens.type_scale_04,
+    uploadedFilesTitleFontStyle: globalTokens.type_normal,
+    uploadedFilesTitleFontWeight: globalTokens.type_regular,
+    uploadedFilesTitleFontTextTransform: "none",
+    uploadedFilesTitleFontColor: globalTokens.black,
+    uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
+    uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
+    uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
+    uploadedFilesSubtitleFontTextTransform: "none",
+    uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
+    uploadedFilesNumberFontWeight: globalTokens.type_bold
   },
   wizard: {
     disabledBackgroundColor: globalTokens.lightGrey,
@@ -1216,7 +1276,8 @@ var componentTokens = {
     labelFontTextTransform: "none",
     labelTextAlign: "left",
     labelFontColor: globalTokens.darkGrey,
-    labelActiveFontColor: globalTokens.black,
+    visitedLabelFontColor: globalTokens.black,
+    visitedDescriptionFontColor: globalTokens.black,
     descriptionFontSize: globalTokens.type_scale_01,
     descriptionFontFamily: globalTokens.type_sans,
     descriptionFontStyle: globalTokens.type_normal,
@@ -1224,26 +1285,25 @@ var componentTokens = {
     descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
     descriptionFontTextTransform: "none",
     descriptionFontColor: globalTokens.darkGrey,
-    descriptionActiveFontColor: globalTokens.black,
     descriptionTextAlign: "left",
+    circleWidth: "32px",
+    circleHeight: "32px",
     circleBorderThickness: "2px",
     circleBorderStyle: "solid",
     circleBorderRadius: "45px",
     circleBorderColor: globalTokens.black,
-    circleSelectedWidth: "32px",
-    circleSelectedHeight: "32px",
-    circleSelectedBorderThickness: "2px",
-    circleSelectedBorderStyle: "solid",
-    circleSelectedBorderRadius: "45px",
-    circleSelectedBorderColor: globalTokens.purple,
-    circleDisabledWidth: "32px",
-    circleDisabledHeight: "32px",
-    circleDisabledBorderThickness: "2px",
-    circleDisabledBorderStyle: "solid",
-    circleDisabledBorderRadius: "45px",
-    circleDisabledBorderColor: globalTokens.lightGrey,
-    circleWidth: "32px",
-    circleHeight: "32px",
+    selectedCircleWidth: "32px",
+    selectedCircleHeight: "32px",
+    selectedCircleBorderThickness: "2px",
+    selectedCircleBorderStyle: "solid",
+    selectedCircleBorderRadius: "45px",
+    selectedCircleBorderColor: globalTokens.purple,
+    disabledCircleWidth: "32px",
+    disabledCircleHeight: "32px",
+    disabledCircleBorderThickness: "2px",
+    disabledCircleBorderStyle: "solid",
+    disabledCircleBorderRadius: "45px",
+    disabledCircleBorderColor: globalTokens.lightGrey,
     separatorBorderThickness: "1px",
     separatorBorderStyle: "solid",
     separatorColor: globalTokens.lightGrey,