@instructure/shared-types 9.5.2-snapshot-1 → 10.0.0

package/types/ComponentThemeVariables.d.ts

@@ -4,8 +4,8 @@ export interface ComponentTheme {
     [variableName: string]: string | number | undefined;
 }
 export type AlertTheme = {
-    background: Colors['backgroundLightest'];
-    color: Colors['textDarkest'];
+    background: Colors['contrasts']['white1010'];
+    color: Colors['contrasts']['grey125125'];
     marginTop: Spacing['small'];
     borderRadius: Border['radiusMedium'];
     borderWidth: Border['widthMedium'];
@@ -17,43 +17,43 @@ export type AlertTheme = {
     contentLineHeight: Typography['lineHeightCondensed'];
     closeButtonMarginTop: Spacing['xSmall'];
     closeButtonMarginRight: Spacing['xxSmall'];
-    iconColor: Colors['textLightest'];
-    successBorderColor: Colors['borderSuccess'];
-    successIconBackground: Colors['backgroundSuccess'];
-    infoBorderColor: Colors['borderInfo'];
-    infoIconBackground: Colors['backgroundInfo'];
-    warningBorderColor: Colors['borderWarning'];
-    warningIconBackground: Colors['backgroundWarning'];
-    dangerBorderColor: Colors['borderDanger'];
-    dangerIconBackground: Colors['backgroundDanger'];
+    iconColor: Colors['contrasts']['white1010'];
+    successBorderColor: Colors['contrasts']['green4570'];
+    successIconBackground: Colors['contrasts']['green4570'];
+    infoBorderColor: Colors['contrasts']['blue4570'];
+    infoIconBackground: Colors['contrasts']['blue4570'];
+    warningBorderColor: Colors['contrasts']['orange4570'];
+    warningIconBackground: Colors['contrasts']['orange4570'];
+    dangerBorderColor: Colors['contrasts']['red4570'];
+    dangerIconBackground: Colors['contrasts']['red4570'];
     boxShadow: Shadows['depth2'];
 };
 export type AvatarTheme = {
-    background: Colors['backgroundLightest'];
+    background: Colors['contrasts']['white1010'];
     borderWidthSmall: Border['widthSmall'];
     borderWidthMedium: Border['widthMedium'];
-    borderColor: Colors['borderMedium'];
-    boxShadowColor: Colors['backgroundDarkest'];
+    borderColor: Colors['contrasts']['grey1214'];
+    boxShadowColor: string;
     boxShadowBlur: string;
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightBold'];
-    color: Colors['brand'];
-    colorShamrock: Colors['shamrock'];
-    colorBarney: Colors['barney'];
-    colorCrimson: Colors['crimson'];
-    colorFire: Colors['fire'];
-    colorLicorice: Colors['licorice'];
-    colorAsh: Colors['ash'];
+    color: Colors['contrasts']['blue4570'];
+    colorShamrock: Colors['contrasts']['green4570'];
+    colorBarney: Colors['contrasts']['blue4570'];
+    colorCrimson: Colors['contrasts']['orange4570'];
+    colorFire: Colors['contrasts']['red4570'];
+    colorLicorice: Colors['contrasts']['grey125125'];
+    colorAsh: Colors['contrasts']['grey4570'];
 };
 export type BadgeTheme = {
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textLightest'];
+    color: Colors['contrasts']['white1010'];
     fontSize: Typography['fontSizeXSmall'];
-    colorDanger: Colors['textDanger'];
-    colorSuccess: Colors['textSuccess'];
-    colorPrimary: Colors['textBrand'];
-    colorInverse: Colors['textDarkest'];
+    colorDanger: Colors['contrasts']['red4570'];
+    colorSuccess: Colors['contrasts']['green4570'];
+    colorPrimary: Colors['contrasts']['blue4570'];
+    colorInverse: Colors['contrasts']['grey4570'];
     size: string;
     countOffset: string | 0;
     notificationOffset: string | 0;
@@ -68,28 +68,28 @@ export type BillboardTheme = {
     paddingSmall: Spacing['small'];
     paddingMedium: Spacing['medium'];
     paddingLarge: Spacing['medium'];
-    iconColor: Colors['textDark'];
+    iconColor: Colors['contrasts']['grey4570'];
     mediumMargin: Spacing['small'];
     largeMargin: Spacing['medium'];
-    iconHoverColor: Colors['textLink'];
-    backgroundColor: Colors['backgroundLightest'];
-    iconHoverColorInverse: Colors['textLightest'];
+    iconHoverColor: Colors['contrasts']['blue4570'];
+    backgroundColor: Colors['contrasts']['white1010'];
+    iconHoverColorInverse: Colors['contrasts']['white1010'];
     buttonBorderWidth: Border['widthMedium'];
     buttonBorderRadius: Border['radiusLarge'];
-    messageColor: Colors['textDark'];
-    messageColorClickable: Colors['textLink'];
-    messageColorInverse: Colors['textLight'];
+    messageColor: Colors['contrasts']['blue4570'];
+    messageColorClickable: Colors['contrasts']['blue4570'];
+    messageColorInverse: Colors['contrasts']['grey1111'];
     messageFontSizeSmall: Typography['fontSizeSmall'];
     messageFontSizeMedium: Typography['fontSizeMedium'];
     messageFontSizeLarge: Typography['fontSizeLarge'];
-    clickableActiveBg: Colors['backgroundBrand'];
-    clickableActiveText: Colors['textLightest'];
+    clickableActiveBg: Colors['contrasts']['blue4570'];
+    clickableActiveText: Colors['contrasts']['white1010'];
     buttonBorderStyle: Border['style'];
     buttonHoverBorderStyle: string;
 };
 export type BreadcrumbTheme = {
     fontFamily: Typography['fontFamily'];
-    separatorColor: Colors['borderDark'];
+    separatorColor: Colors['contrasts']['grey4570'];
     smallSeparatorFontSize: string;
     smallFontSize: Typography['fontSizeSmall'];
     mediumSeparatorFontSize: string;
@@ -128,64 +128,64 @@ export type BaseButtonTheme = {
     iconSizeLarge: string;
     iconTextGap: Spacing['xSmall'];
     iconTextGapCondensed: Spacing['xxSmall'];
-    primaryColor: string;
-    primaryBorderColor: string;
-    primaryBackground: string;
-    primaryHoverBackground: string;
-    primaryActiveBackground: string;
+    primaryColor: Colors['contrasts']['white1010'];
+    primaryBorderColor: Colors['contrasts']['blue5782'];
+    primaryBackground: Colors['contrasts']['blue4570'];
+    primaryHoverBackground: Colors['contrasts']['blue5782'];
+    primaryActiveBackground: Colors['contrasts']['blue5782'];
     primaryActiveBoxShadow: string;
-    primaryGhostColor: string;
-    primaryGhostBorderColor: string;
+    primaryGhostColor: Colors['contrasts']['blue4570'];
+    primaryGhostBorderColor: Colors['contrasts']['blue4570'];
     primaryGhostBackground: string;
-    primaryGhostHoverBackground: string;
+    primaryGhostHoverBackground: Colors['contrasts']['blue1212'];
     primaryGhostActiveBackground: string;
     primaryGhostActiveBoxShadow: string;
-    secondaryColor: string;
-    secondaryBorderColor: string;
-    secondaryBackground: string;
-    secondaryHoverBackground: string;
-    secondaryActiveBackground: string;
+    secondaryColor: Colors['contrasts']['grey125125'];
+    secondaryBorderColor: Colors['contrasts']['grey1214'];
+    secondaryBackground: Colors['contrasts']['grey1111'];
+    secondaryHoverBackground: Colors['contrasts']['grey1214'];
+    secondaryActiveBackground: Colors['contrasts']['grey1214'];
     secondaryActiveBoxShadow: string;
-    secondaryGhostColor: string;
-    secondaryGhostBorderColor: string;
+    secondaryGhostColor: Colors['contrasts']['grey125125'];
+    secondaryGhostBorderColor: Colors['contrasts']['grey125125'];
     secondaryGhostBackground: string;
-    secondaryGhostHoverBackground: string;
+    secondaryGhostHoverBackground: Colors['contrasts']['grey1111'];
     secondaryGhostActiveBackground: string;
     secondaryGhostActiveBoxShadow: string;
-    successColor: string;
-    successBorderColor: string;
-    successBackground: string;
-    successHoverBackground: string;
-    successActiveBackground: string;
+    successColor: Colors['contrasts']['white1010'];
+    successBorderColor: Colors['contrasts']['green5782'];
+    successBackground: Colors['contrasts']['green4570'];
+    successHoverBackground: Colors['contrasts']['green5782'];
+    successActiveBackground: Colors['contrasts']['green5782'];
     successActiveBoxShadow: string;
-    successGhostColor: string;
-    successGhostBorderColor: string;
+    successGhostColor: Colors['contrasts']['green4570'];
+    successGhostBorderColor: Colors['contrasts']['green4570'];
     successGhostBackground: string;
-    successGhostHoverBackground: string;
+    successGhostHoverBackground: Colors['contrasts']['green1212'];
     successGhostActiveBackground: string;
     successGhostActiveBoxShadow: string;
-    dangerColor: string;
-    dangerBorderColor: string;
-    dangerBackground: string;
-    dangerHoverBackground: string;
-    dangerActiveBackground: string;
+    dangerColor: Colors['contrasts']['white1010'];
+    dangerBorderColor: Colors['contrasts']['red5782'];
+    dangerBackground: Colors['contrasts']['red4570'];
+    dangerHoverBackground: Colors['contrasts']['red5782'];
+    dangerActiveBackground: Colors['contrasts']['red5782'];
     dangerActiveBoxShadow: string;
-    dangerGhostColor: string;
-    dangerGhostBorderColor: string;
+    dangerGhostColor: Colors['contrasts']['red4570'];
+    dangerGhostBorderColor: Colors['contrasts']['red4570'];
     dangerGhostBackground: string;
-    dangerGhostHoverBackground: string;
+    dangerGhostHoverBackground: Colors['contrasts']['red1212'];
     dangerGhostActiveBackground: string;
     dangerGhostActiveBoxShadow: string;
-    primaryInverseColor: string;
-    primaryInverseBorderColor: string;
-    primaryInverseBackground: string;
-    primaryInverseHoverBackground: string;
-    primaryInverseActiveBackground: string;
+    primaryInverseColor: Colors['contrasts']['grey125125'];
+    primaryInverseBorderColor: Colors['contrasts']['grey1214'];
+    primaryInverseBackground: Colors['contrasts']['white1010'];
+    primaryInverseHoverBackground: Colors['contrasts']['grey1111'];
+    primaryInverseActiveBackground: Colors['contrasts']['white1010'];
     primaryInverseActiveBoxShadow: string;
-    primaryInverseGhostColor: string;
-    primaryInverseGhostBorderColor: string;
+    primaryInverseGhostColor: Colors['contrasts']['white1010'];
+    primaryInverseGhostBorderColor: Colors['contrasts']['white1010'];
     primaryInverseGhostBackground: string;
-    primaryInverseGhostHoverBackground: string;
+    primaryInverseGhostHoverBackground: Colors['contrasts']['grey1111'];
     primaryInverseGhostActiveBackground: string;
     primaryInverseGhostActiveBoxShadow: string;
 };
@@ -197,8 +197,8 @@ export type CloseButtonTheme = {
 };
 export type BylineTheme = {
     fontFamily: Typography['fontFamily'];
-    background: Colors['backgroundLightest'];
-    color: Colors['textDarkest'];
+    background: Colors['contrasts']['white1010'];
+    color: Colors['contrasts']['grey125125'];
     figureMargin: Spacing['small'];
     titleMargin: Spacing['xSmall'];
     titleFontSize: Typography['fontSizeLarge'];
@@ -212,47 +212,47 @@ export type BylineTheme = {
     large: Breakpoints['large'];
 };
 export type CalendarDayTheme = {
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
     fontSize: Typography['fontSizeMedium'];
     padding: Spacing['xxSmall'];
     height: Forms['inputHeightSmall'];
     minWidth: Forms['inputHeightSmall'];
-    outsideMonthColor: Colors['textDark'];
-    selectedBackground: Colors['backgroundSuccess'];
-    selectedColor: Colors['textLightest'];
+    outsideMonthColor: Colors['contrasts']['grey4570'];
+    selectedBackground: Colors['contrasts']['green4570'];
+    selectedColor: Colors['contrasts']['white1010'];
     selectedBorderRadius: Border['radiusMedium'];
-    todayBackground: Colors['backgroundBrand'];
-    todayColor: Colors['textLightest'];
+    todayBackground: Colors['contrasts']['blue4570'];
+    todayColor: Colors['contrasts']['white1010'];
     todayBorderRadius: Forms['inputHeightSmall'];
 };
 export type CalendarTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
     navMargin: Spacing['small'];
     navWithYearMargin: Spacing['xSmall'];
     yearPickerMargin: Spacing['mediumSmall'];
     maxHeaderWidth: Spacing['medium'];
 };
 export type CheckboxFacadeTheme = {
-    color: Colors['textLightest'];
+    color: Colors['contrasts']['white1010'];
     borderWidth: Border['widthSmall'];
-    borderColor: Colors['borderDark'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderRadius: Border['radiusMedium'];
-    background: Colors['backgroundLightest'];
+    background: Colors['contrasts']['white1010'];
     marginRight: Spacing['xSmall'];
     padding: Spacing['xxxSmall'];
-    checkedBackground: Colors['backgroundDarkest'];
-    checkedBorderColor: Colors['borderDarkest'];
-    hoverBorderColor: Colors['borderDarkest'];
-    focusBorderColor: Colors['borderBrand'];
+    checkedBackground: Colors['contrasts']['grey125125'];
+    checkedBorderColor: Colors['contrasts']['grey125125'];
+    hoverBorderColor: Colors['contrasts']['grey125125'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
     focusBorderWidth: Border['widthMedium'];
     focusBorderStyle: Border['style'];
-    labelColor: Colors['textDarkest'];
-    checkedLabelColor: Colors['textDarkest'];
+    labelColor: Colors['contrasts']['grey125125'];
+    checkedLabelColor: Colors['contrasts']['grey125125'];
     labelFontFamily: Typography['fontFamily'];
     labelFontWeight: Typography['fontWeightNormal'];
     labelLineHeight: Typography['lineHeightCondensed'];
@@ -267,24 +267,24 @@ export type CheckboxFacadeTheme = {
     iconSizeLarge: string;
 };
 export type ToggleFacadeTheme = {
-    color: Colors['textLightest'];
-    background: Colors['backgroundLight'];
-    borderColor: Colors['borderMedium'];
+    color: Colors['contrasts']['white1010'];
+    background: Colors['contrasts']['grey1111'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthMedium'];
     borderRadius: string;
     marginEnd: Spacing['small'];
     marginStart: Spacing['small'];
     marginVertical: Spacing['xSmall'];
-    checkedBackground: Colors['backgroundSuccess'];
-    uncheckedIconColor: Colors['textDarkest'];
-    checkedIconColor: Colors['textSuccess'];
-    focusOutlineColor: Colors['borderBrand'];
+    checkedBackground: Colors['contrasts']['green4570'];
+    uncheckedIconColor: Colors['contrasts']['grey125125'];
+    checkedIconColor: Colors['contrasts']['green4570'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusBorderWidth: Border['widthMedium'];
     focusBorderStyle: Border['style'];
-    toggleBackground: Colors['backgroundLightest'];
+    toggleBackground: Colors['contrasts']['white1010'];
     toggleShadow: Shadows['depth1'];
     toggleSize: Forms['inputHeightSmall'];
-    labelColor: Colors['textDarkest'];
+    labelColor: Colors['contrasts']['grey125125'];
     labelFontFamily: Typography['fontFamily'];
     labelFontWeight: Typography['fontWeightNormal'];
     labelLineHeight: Typography['lineHeightCondensed'];
@@ -295,57 +295,57 @@ export type ToggleFacadeTheme = {
 export type CodeEditorTheme = {
     fontFamily: Typography['fontFamilyMonospace'];
     fontSize: Typography['fontSizeSmall'];
-    background: Colors['backgroundLight'];
+    background: Colors['contrasts']['grey1111'];
     border: string | 0;
     borderRadius: Border['radiusMedium'];
-    focusBorderColor: Colors['borderBrand'];
-    focusBoxShadow: Colors['borderLightest'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
+    focusBoxShadow: string;
     horizontalPadding: Spacing['xSmall'];
     verticalPadding: Spacing['xxSmall'];
-    color: Colors['textDarkest'];
-    lineNumberColor: Colors['textDark'];
-    gutterBorder: Colors['borderLight'];
-    gutterBackground: Colors['backgroundLight'];
-    gutterMarkerColor: Colors['textBrand'];
-    gutterMarkerSubtleColor: Colors['textDark'];
-    cursorColor: Colors['textDarkest'];
-    secondaryCursorColor: Colors['textDark'];
-    rulerColor: Colors['borderDark'];
-    matchingBracketOutline: Colors['textDark'];
-    nonMatchingBracketColor: Colors['textDanger'];
+    color: Colors['contrasts']['grey125125'];
+    lineNumberColor: Colors['contrasts']['grey4570'];
+    gutterBorder: Colors['contrasts']['grey1111'];
+    gutterBackground: Colors['contrasts']['grey1214'];
+    gutterMarkerColor: Colors['contrasts']['blue4570'];
+    gutterMarkerSubtleColor: Colors['contrasts']['grey4570'];
+    cursorColor: Colors['contrasts']['grey125125'];
+    secondaryCursorColor: Colors['contrasts']['grey4570'];
+    rulerColor: Colors['contrasts']['grey4570'];
+    matchingBracketOutline: Colors['contrasts']['grey4570'];
+    nonMatchingBracketColor: Colors['contrasts']['red4570'];
     matchingTagBackground: string;
-    activeLineBackground: Colors['backgroundLight'];
-    selectedBackground: Colors['backgroundLight'];
-    fatCursorBackground: Colors['backgroundSuccess'];
+    activeLineBackground: Colors['contrasts']['grey1214'];
+    selectedBackground: Colors['contrasts']['grey1424'];
+    fatCursorBackground: Colors['contrasts']['green4570'];
     fatCursorMarkBackground: string;
     searchingBackground: string;
     zIndex: Stacking['above'];
-    quoteColor: Colors['textSuccess'];
-    headerColor: Colors['textWarning'];
-    negativeColor: Colors['textDanger'];
-    positiveColor: Colors['textSuccess'];
-    keywordColor: Colors['textBrand'];
-    atomColor: Colors['textWarning'];
-    numberColor: Colors['textWarning'];
-    defColor: Colors['textDarkest'];
-    variableColor: Colors['textBrand'];
-    secondaryVariableColor: Colors['textWarning'];
-    typeColor: Colors['textBrand'];
-    commentColor: Colors['textDark'];
-    stringColor: Colors['textBrand'];
-    secondaryStringColor: Colors['textDanger'];
-    metaColor: Colors['textDarkest'];
-    qualifierColor: Colors['textSuccess'];
-    builtInColor: Colors['textWarning'];
-    bracketColor: Colors['borderDark'];
-    tagColor: Colors['textSuccess'];
-    attributeColor: Colors['textBrand'];
-    hrColor: Colors['borderDark'];
-    linkColor: Colors['textBrand'];
-    errorColor: Colors['textDanger'];
-    propertyColor: Colors['textAlert'];
-    nodeColor: Colors['textWarning'];
-    operatorColor: Colors['textDarkest'];
+    quoteColor: Colors['contrasts']['green4570'];
+    headerColor: Colors['contrasts']['orange4570'];
+    negativeColor: Colors['contrasts']['red4570'];
+    positiveColor: Colors['contrasts']['green4570'];
+    keywordColor: Colors['contrasts']['blue4570'];
+    atomColor: Colors['contrasts']['orange4570'];
+    numberColor: Colors['contrasts']['orange4570'];
+    defColor: Colors['contrasts']['grey125125'];
+    variableColor: Colors['contrasts']['blue4570'];
+    secondaryVariableColor: Colors['contrasts']['orange4570'];
+    typeColor: Colors['contrasts']['blue4570'];
+    commentColor: Colors['contrasts']['grey4570'];
+    stringColor: Colors['contrasts']['blue4570'];
+    secondaryStringColor: Colors['contrasts']['red4570'];
+    metaColor: Colors['contrasts']['grey125125'];
+    qualifierColor: Colors['contrasts']['green4570'];
+    builtInColor: Colors['contrasts']['orange4570'];
+    bracketColor: Colors['contrasts']['grey4570'];
+    tagColor: Colors['contrasts']['green4570'];
+    attributeColor: Colors['contrasts']['blue4570'];
+    hrColor: Colors['contrasts']['grey4570'];
+    linkColor: Colors['contrasts']['blue4570'];
+    errorColor: Colors['contrasts']['red4570'];
+    propertyColor: Colors['contrasts']['blue5782'];
+    nodeColor: Colors['contrasts']['orange4570'];
+    operatorColor: Colors['contrasts']['grey125125'];
 };
 export type ColorContrastTheme = {
     width: string;
@@ -359,9 +359,9 @@ export type ColorContrastTheme = {
     colorPreviewTopMargin: Spacing['xSmall'];
     labelBottomMargin: Spacing['xxSmall'];
     smallBorder: Border['widthSmall'];
-    successColor: Colors['shamrock'];
-    failureColor: Colors['crimson'];
-    pickedHexColor: Colors['ash'];
+    successColor: Colors['contrasts']['green4570'];
+    failureColor: Colors['contrasts']['red4570'];
+    pickedHexColor: Colors['contrasts']['grey4570'];
 };
 export type ColorIndicatorTheme = {
     borderWidth: Border['widthSmall'];
@@ -375,8 +375,8 @@ export type ColorIndicatorTheme = {
     rectangularIndicatorBorderWidth: Border['widthSmall'];
 };
 export type ColorMixerPaletteTheme = {
-    indicatorBorderColor: Colors['licorice'];
-    whiteColor: Colors['white'];
+    indicatorBorderColor: Colors['contrasts']['grey125125'];
+    whiteColor: Colors['contrasts']['white1010'];
     colorIndicatorBorderColor: string;
     indicatorBorderWidth: Border['widthSmall'];
     paletteBorderRadius: Border['radiusMedium'];
@@ -391,7 +391,7 @@ export type ColorMixerRGBAInputTheme = {
     rgbaInputTopMargin: Spacing['medium'];
 };
 export type ColorMixerSliderTheme = {
-    indicatorBorderColor: Colors['licorice'];
+    indicatorBorderColor: Colors['contrasts']['grey125125'];
     checkerboardBackgroundImage: string;
     checkerboardBackgroundSize: string;
     checkerboardBackgroundPosition: string;
@@ -402,13 +402,13 @@ export type ColorMixerSliderTheme = {
     disabledOverlayZIndex: Stacking['topmost'];
 };
 export type ColorPickerTheme = {
-    hashMarkColor: Colors['ash'];
-    warningIconColor: Colors['textWarning'];
-    errorIconColor: Colors['textDanger'];
-    successIconColor: Colors['textSuccess'];
-    popoverSeparatorColor: Colors['tiara'];
-    popoverFooterColor: Colors['porcelain'];
-    checkerboardBackgroundColor: Colors['white'];
+    hashMarkColor: Colors['contrasts']['grey4570'];
+    warningIconColor: Colors['contrasts']['orange4570'];
+    errorIconColor: Colors['contrasts']['red4570'];
+    successIconColor: Colors['contrasts']['green4570'];
+    popoverSeparatorColor: Colors['contrasts']['grey1214'];
+    popoverFooterColor: Colors['contrasts']['grey1111'];
+    checkerboardBackgroundColor: Colors['contrasts']['white1010'];
     checkerboardBackgroundImage: string;
     checkerboardBackgroundSize: string;
     checkerboardBackgroundPosition: string;
@@ -432,11 +432,11 @@ export type ColorPickerTheme = {
 export type ColorPresetTheme = {
     xxSmallSpacing: Spacing['xxSmall'];
     smallSpacing: Spacing['small'];
-    selectedIndicatorBackgroundColor: Colors['white'];
-    selectedIndicatorBorderColor: Colors['licorice'];
-    popoverDividerColor: Colors['tiara'];
+    selectedIndicatorBackgroundColor: Colors['contrasts']['white1010'];
+    selectedIndicatorBorderColor: Colors['contrasts']['grey125125'];
+    popoverDividerColor: Colors['contrasts']['grey1214'];
     smallBorder: Border['widthSmall'];
-    popoverFooterColor: Colors['porcelain'];
+    popoverFooterColor: Colors['contrasts']['grey1111'];
     checkerboardBackgroundImage: string;
     checkerboardBackgroundSize: string;
     checkerboardBackgroundPosition: string;
@@ -449,8 +449,8 @@ export type DrawerLayoutContentTheme = {
     overflowY: string;
 };
 export type DrawerLayoutTrayTheme = {
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
     zIndex: Stacking['topmost'];
@@ -461,18 +461,18 @@ export type DrawerLayoutTrayTheme = {
 };
 export type DrilldownTheme = {
     headerTitleFontWeight: Typography['fontWeightBold'];
-    headerActionColor: Colors['textLink'];
+    headerActionColor: Colors['contrasts']['blue4570'];
     labelInfoPadding: Spacing['small'];
 };
 export type FileDropTheme = {
-    backgroundColor: Colors['backgroundLightest'];
+    backgroundColor: Colors['contrasts']['white1010'];
     borderRadius: Border['radiusLarge'];
     borderWidth: Border['widthMedium'];
     borderStyle: string;
-    borderColor: Colors['borderMedium'];
-    hoverBorderColor: Colors['borderBrand'];
-    acceptedColor: Colors['textBrand'];
-    rejectedColor: Colors['textDanger'];
+    borderColor: Colors['contrasts']['grey1214'];
+    hoverBorderColor: Colors['contrasts']['blue4570'];
+    acceptedColor: Colors['contrasts']['blue4570'];
+    rejectedColor: Colors['contrasts']['red4570'];
 };
 export type FlexTheme = {
     fontFamily: Typography['fontFamily'];
@@ -490,20 +490,20 @@ export type FormFieldGroupTheme = {
     borderStyle: Border['style'];
     borderColor: string;
     borderRadius: Border['radiusMedium'];
-    errorBorderColor: Colors['borderDanger'];
+    errorBorderColor: Colors['contrasts']['red4570'];
     errorFieldsPadding: Spacing['xSmall'];
 };
 export type FormFieldLabelTheme = {
-    color: Colors['textDarkest'];
+    color: Colors['contrasts']['grey125125'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightBold'];
     fontSize: Typography['fontSizeMedium'];
     lineHeight: Typography['lineHeightFit'];
 };
 export type FormFieldMessageTheme = {
-    colorHint: Colors['textDarkest'];
-    colorError: Colors['textDanger'];
-    colorSuccess: Colors['textSuccess'];
+    colorHint: Colors['contrasts']['grey125125'];
+    colorError: Colors['contrasts']['red4570'];
+    colorSuccess: Colors['contrasts']['green4570'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
     fontSize: Typography['fontSizeSmall'];
@@ -534,12 +534,12 @@ export type HeadingTheme = {
     h5FontSize: Typography['fontSizeSmall'];
     h5FontWeight: Typography['fontWeightNormal'];
     h5FontFamily: Typography['fontFamily'];
-    primaryInverseColor: Colors['textLightest'];
-    primaryColor: Colors['textDarkest'];
-    secondaryColor: Colors['textDark'];
-    secondaryInverseColor: Colors['textLight'];
+    primaryInverseColor: Colors['contrasts']['white1010'];
+    primaryColor: Colors['contrasts']['grey125125'];
+    secondaryColor: Colors['contrasts']['grey4570'];
+    secondaryInverseColor: Colors['contrasts']['grey1111'];
     borderPadding: Spacing['xxxSmall'];
-    borderColor: Colors['borderMedium'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
 };
@@ -550,19 +550,19 @@ export type ImgTheme = {
 export type LinkTheme = {
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textLink'];
+    color: Colors['contrasts']['blue4570'];
     textDecorationWithinText: string;
     hoverTextDecorationWithinText: string;
     textDecorationOutsideText: string;
     hoverTextDecorationOutsideText: string;
     focusOutlineWidth: Border['widthMedium'];
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineStyle: Border['style'];
     focusOutlineBorderRadius: Border['radiusSmall'];
-    hoverColor: Colors['textLink'];
-    colorInverse: Colors['textLight'];
-    focusInverseOutlineColor: Colors['borderLightest'];
-    focusInverseIconOutlineColor: Colors['borderLightest'];
+    hoverColor: string;
+    colorInverse: Colors['contrasts']['grey1111'];
+    focusInverseOutlineColor: Colors['contrasts']['white1010'];
+    focusInverseIconOutlineColor: Colors['contrasts']['white1010'];
     iconSize: string;
     iconPlusTextMargin: Spacing['xxSmall'];
 };
@@ -572,7 +572,7 @@ export type InlineListItemTheme = {
     fontSizeSmall: Typography['fontSizeSmall'];
     fontSizeMedium: Typography['fontSizeMedium'];
     fontSizeLarge: Typography['fontSizeLarge'];
-    color: Colors['textDark'];
+    color: Colors['contrasts']['grey4570'];
     lineHeight: Typography['lineHeightCondensed'];
     noneSpacing: Spacing['xSmall'];
     pipeSpacing: Spacing['xSmall'];
@@ -595,7 +595,7 @@ export type ListItemTheme = {
     fontSizeSmall: Typography['fontSizeSmall'];
     fontSizeMedium: Typography['fontSizeMedium'];
     fontSizeLarge: Typography['fontSizeLarge'];
-    color: Colors['textDarkest'];
+    color: Colors['contrasts']['grey125125'];
     spacingXXXSmall: Spacing['xxxSmall'];
     spacingXXSmall: Spacing['xxSmall'];
     spacingXSmall: Spacing['xSmall'];
@@ -619,77 +619,77 @@ export type MenuItemTheme = {
     lineHeight: Typography['lineHeightCondensed'];
     fontSize: Typography['fontSizeMedium'];
     labelPadding: Spacing['large'];
-    labelColor: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    iconColor: Colors['textDarkest'];
+    labelColor: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    iconColor: Colors['contrasts']['grey125125'];
     iconPadding: Spacing['small'];
-    activeBackground: Colors['backgroundBrand'];
-    activeLabelColor: Colors['textLightest'];
-    activeIconColor: Colors['textLightest'];
+    activeBackground: Colors['contrasts']['blue4570'];
+    activeLabelColor: Colors['contrasts']['white1010'];
+    activeIconColor: Colors['contrasts']['white1010'];
 };
 export type MenuGroupTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightBold'];
     padding: string | 0;
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type MenuSeparatorTheme = {
-    background: Colors['backgroundMedium'];
+    background: Colors['contrasts']['grey1214'];
     height: Border['widthSmall'];
     margin: string | 0;
 };
 export type MenuTheme = {
     minWidth: Breakpoints['xxSmall'];
     maxWidth: Breakpoints['xSmall'];
-    background: Colors['backgroundLightest'];
+    background: Colors['contrasts']['white1010'];
     borderRadius: Border['radiusMedium'];
     focusBorderStyle: Border['style'];
     focusBorderWidth: Border['widthMedium'];
-    focusBorderColor: Colors['borderBrand'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
     focusBorderRadius: Border['radiusMedium'];
 };
 export type MetricTheme = {
     padding: string | 0;
     fontFamily: Typography['fontFamily'];
-    valueColor: Colors['textDarkest'];
+    valueColor: Colors['contrasts']['grey125125'];
     valueFontSize: Typography['fontSizeXLarge'];
     valueFontWeight: Typography['fontWeightBold'];
-    labelColor: Colors['textDarkest'];
+    labelColor: Colors['contrasts']['grey125125'];
     labelFontSize: Typography['fontSizeXSmall'];
 };
 export type MetricGroupTheme = {
     lineHeight: Typography['lineHeightCondensed'];
 };
 export type ModalBodyTheme = {
-    inverseBackground: Colors['backgroundBrandSecondary'];
+    inverseBackground: string;
 };
 export type ModalFooterTheme = {
-    background: Colors['backgroundLight'];
-    borderColor: Colors['borderMedium'];
+    background: Colors['contrasts']['grey1111'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthSmall'];
     borderRadius: Border['radiusMedium'];
     padding: Spacing['small'];
-    inverseBackground: Colors['backgroundDarkest'];
-    inverseBorderColor: Colors['borderDarkest'];
+    inverseBackground: Colors['contrasts']['grey100100'];
+    inverseBorderColor: Colors['contrasts']['grey100100'];
 };
 export type ModalHeaderTheme = {
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     padding: Spacing['medium'];
     paddingCompact: Spacing['small'];
-    inverseBackground: Colors['backgroundDarkest'];
-    inverseBorderColor: Colors['backgroundDarkest'];
+    inverseBackground: Colors['contrasts']['grey125125'];
+    inverseBorderColor: Colors['contrasts']['grey125125'];
 };
 export type ModalTheme = {
     fontFamily: Typography['fontFamily'];
-    textColor: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    textColor: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey125125'];
     borderRadius: Border['radiusMedium'];
-    inverseBackground: Colors['backgroundBrandSecondary'];
-    inverseTextColor: Colors['textLightest'];
+    inverseBackground: Colors['contrasts']['grey100100'];
+    inverseTextColor: Colors['contrasts']['white1010'];
     autoMinWidth: Breakpoints['xSmall'];
     smallMaxWidth: Breakpoints['small'];
     mediumMaxWidth: Breakpoints['medium'];
@@ -705,31 +705,31 @@ export type AppNavItemTheme = {
     fontFamily: Typography['fontFamily'];
     fontSize: string | 0;
     fontWeight: Typography['fontWeightBold'];
-    textColor: Colors['textLink'];
-    textColorSelected: Colors['textDarkest'];
+    textColor: Colors['contrasts']['blue4570'];
+    textColorSelected: Colors['contrasts']['grey125125'];
     height: string | 0;
     padding: Spacing['small'];
-    backgroundColor: Colors['backgroundLightest'];
+    backgroundColor: Colors['contrasts']['white1010'];
 };
 export type AppNavTheme = {
     fontFamily: Typography['fontFamily'];
     height: string | 0;
-    borderColor: Colors['borderMedium'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderStyle: Border['style'];
     borderWidth: Border['widthSmall'];
     horizontalMargin: Spacing['xxSmall'];
     menuTriggerWidth: string | 0;
 };
 export type SideNavBarTheme = {
-    fontColor: Colors['textLightest'];
-    backgroundColor: Colors['backgroundBrandSecondary'];
+    fontColor: Colors['contrasts']['white1010'];
+    backgroundColor: Colors['contrasts']['grey100100'];
     width: string;
     minimizedWidth: string;
-    fill: Colors['textLightest'];
+    fill: Colors['contrasts']['white1010'];
     focusOutlineInnerWidth: Border['widthMedium'];
     focusOutlineOuterWidth: Border['widthSmall'];
-    focusOutlineInnerColor: Colors['borderBrand'];
-    focusOutlineOuterColor: Colors['borderLightest'];
+    focusOutlineInnerColor: Colors['contrasts']['blue4570'];
+    focusOutlineOuterColor: Colors['contrasts']['white1010'];
     marginBottom: Spacing['small'];
     toggleTransition: Transitions['duration'];
 };
@@ -737,18 +737,18 @@ export type SideNavBarItemTheme = {
     fontSize: Typography['fontSizeSmall'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    fontColor: Colors['textLightest'];
+    fontColor: Colors['contrasts']['white1010'];
     iconSize: string | 0;
-    iconColor: Colors['textLightest'];
+    iconColor: Colors['contrasts']['white1010'];
     lineHeight: Typography['lineHeight'];
     backgroundColor: string;
     linkTextDecoration: string;
-    hoverBackgroundColor: Colors['backgroundDarkest'];
+    hoverBackgroundColor: string;
     outerFocusOutline: string;
     innerFocusOutline: string;
-    selectedFontColor: Colors['textBrand'];
-    selectedIconColor: Colors['textBrand'];
-    selectedBackgroundColor: Colors['backgroundLightest'];
+    selectedFontColor: Colors['contrasts']['blue4570'];
+    selectedIconColor: Colors['contrasts']['blue4570'];
+    selectedBackgroundColor: Colors['contrasts']['white1010'];
     selectedOuterFocusOutline: string;
     selectedInnerFocusOutline: string;
     contentPadding: Spacing['xxSmall'];
@@ -758,23 +758,23 @@ export type NumberInputTheme = {
     fontWeight: Typography['fontWeightNormal'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
-    borderColor: Colors['borderMedium'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderRadius: Border['radiusMedium'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
     padding: string | 0;
     arrowsContainerWidth: string | 0;
-    arrowsColor: Colors['textDarkest'];
-    arrowsBackgroundColor: Colors['backgroundLight'];
-    arrowsHoverBackgroundColor: Colors['backgroundMedium'];
-    arrowsBorderColor: Colors['borderMedium'];
+    arrowsColor: Colors['contrasts']['grey125125'];
+    arrowsBackgroundColor: Colors['contrasts']['grey1111'];
+    arrowsHoverBackgroundColor: Colors['contrasts']['grey1214'];
+    arrowsBorderColor: Colors['contrasts']['grey1214'];
     arrowsActiveBoxShadow: string;
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineStyle: Border['style'];
-    focusOutlineColor: Colors['borderBrand'];
-    errorBorderColor: Colors['borderDanger'];
-    errorOutlineColor: Colors['borderDanger'];
-    placeholderColor: Colors['textDark'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
+    errorBorderColor: Colors['contrasts']['red4570'];
+    errorOutlineColor: Colors['contrasts']['red4570'];
+    placeholderColor: Colors['contrasts']['grey4570'];
     mediumFontSize: Typography['fontSizeMedium'];
     mediumHeight: Forms['inputHeightMedium'];
     largeFontSize: Typography['fontSizeLarge'];
@@ -785,12 +785,12 @@ export type OptionsItemTheme = {
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
     lineHeight: Typography['lineHeightCondensed'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    highlightedLabelColor: Colors['textLightest'];
-    highlightedBackground: Colors['backgroundBrand'];
-    selectedLabelColor: Colors['textLightest'];
-    selectedBackground: Colors['backgroundDark'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    highlightedLabelColor: Colors['contrasts']['white1010'];
+    highlightedBackground: Colors['contrasts']['blue4570'];
+    selectedLabelColor: Colors['contrasts']['white1010'];
+    selectedBackground: Colors['contrasts']['grey4570'];
     padding: string | 0;
     iconPadding: Spacing['small'];
     nestedPadding: Spacing['medium'];
@@ -800,17 +800,17 @@ export type OptionsItemTheme = {
     descriptionFontWeight: Typography['fontWeightNormal'];
     descriptionLineHeight: Typography['lineHeight'];
     descriptionPaddingStart: string | 0;
-    descriptionColor: Colors['textDark'];
+    descriptionColor: Colors['contrasts']['grey4570'];
 };
 export type OptionsSeparatorTheme = {
-    background: Colors['backgroundMedium'];
+    background: Colors['contrasts']['grey1214'];
     height: Border['widthSmall'];
     margin: string | 0;
 };
 export type OptionsTheme = {
     labelFontWeight: Typography['fontWeightBold'];
-    background: Colors['backgroundLightest'];
-    labelColor: Colors['textDarkest'];
+    background: Colors['contrasts']['white1010'];
+    labelColor: Colors['contrasts']['grey125125'];
     labelPadding: string | 0;
     nestedLabelPadding: string | 0;
 };
@@ -818,7 +818,7 @@ export type MaskTheme = {
     zIndex: Stacking['topmost'];
     background: string;
     borderColor: string;
-    focusBorderColor: Colors['borderBrand'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
     borderRadius: Border['radiusMedium'];
     borderWidth: Border['widthSmall'];
 };
@@ -826,8 +826,8 @@ export type PagesTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type PaginationPageInputTheme = {
     inputSpacing: Spacing['xSmall'];
@@ -837,17 +837,17 @@ export type PillTheme = {
     fontFamily: Typography['fontFamily'];
     padding: string | 0;
     height: string | 0;
-    background: Colors['backgroundLightest'];
+    background: Colors['contrasts']['white1010'];
     textFontSize: Typography['fontSizeSmall'];
     statusLabelFontWeight: Typography['fontWeightBold'];
     textFontWeight: Typography['fontWeightNormal'];
     maxWidth: string | 0;
-    primaryColor: Colors['textDark'];
-    infoColor: Colors['textInfo'];
-    dangerColor: Colors['textDanger'];
-    successColor: Colors['textSuccess'];
-    warningColor: Colors['textWarning'];
-    alertColor: Colors['textAlert'];
+    primaryColor: Colors['contrasts']['grey4570'];
+    infoColor: Colors['contrasts']['blue4570'];
+    dangerColor: Colors['contrasts']['red4570'];
+    successColor: Colors['contrasts']['green4570'];
+    warningColor: Colors['contrasts']['orange4570'];
+    alertColor: Colors['contrasts']['blue4570'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
     borderRadius: string | 0;
@@ -869,25 +869,25 @@ export type ProgressBarTheme = {
     largeHeight: Spacing['large'];
     largeValueFontSize: Typography['fontSizeMedium'];
     valuePadding: string | 0;
-    meterColorBrand: Colors['backgroundBrand'];
-    meterColorBrandInverse: Colors['backgroundBrand'];
-    meterColorInfo: Colors['backgroundInfo'];
-    meterColorInfoInverse: Colors['backgroundInfo'];
-    meterColorSuccess: Colors['backgroundSuccess'];
-    meterColorSuccessInverse: Colors['backgroundSuccess'];
-    meterColorDanger: Colors['backgroundDanger'];
-    meterColorDangerInverse: Colors['backgroundDanger'];
-    meterColorAlert: Colors['backgroundAlert'];
-    meterColorAlertInverse: Colors['backgroundAlert'];
-    meterColorWarning: Colors['backgroundWarning'];
-    meterColorWarningInverse: Colors['backgroundWarning'];
+    meterColorBrand: Colors['contrasts']['blue4570'];
+    meterColorBrandInverse: Colors['contrasts']['blue4570'];
+    meterColorInfo: Colors['contrasts']['blue4570'];
+    meterColorInfoInverse: Colors['contrasts']['blue4570'];
+    meterColorSuccess: Colors['contrasts']['green4570'];
+    meterColorSuccessInverse: Colors['contrasts']['green4570'];
+    meterColorDanger: Colors['contrasts']['red4570'];
+    meterColorDangerInverse: Colors['contrasts']['red4570'];
+    meterColorAlert: Colors['contrasts']['blue4570'];
+    meterColorAlertInverse: Colors['contrasts']['blue4570'];
+    meterColorWarning: Colors['contrasts']['orange4570'];
+    meterColorWarningInverse: Colors['contrasts']['orange4570'];
     meterBorderWidthInverse: Border['widthSmall'];
     meterBorderColorInverse: 'transparent';
-    trackColor: Colors['backgroundLightest'];
+    trackColor: Colors['contrasts']['white1010'];
     trackColorInverse: string;
     trackBottomBorderWidth: Border['widthSmall'];
-    trackBottomBorderColor: Colors['borderMedium'];
-    trackBottomBorderColorInverse: Colors['borderLightest'];
+    trackBottomBorderColor: Colors['contrasts']['grey1214'];
+    trackBottomBorderColorInverse: Colors['contrasts']['white1010'];
 };
 export type ProgressCircleTheme = {
     fontFamily: Typography['fontFamily'];
@@ -917,36 +917,36 @@ export type ProgressCircleTheme = {
     largeTransform: string;
     largeStrokeWidth: string;
     largeBorderOffset: string;
-    color: Colors['textDarkest'];
-    colorInverse: Colors['textLightest'];
-    trackColor: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    colorInverse: Colors['contrasts']['white1010'];
+    trackColor: Colors['contrasts']['white1010'];
     trackColorInverse: string;
-    trackBorderColor: Colors['borderMedium'];
-    trackBorderColorInverse: Colors['borderLightest'];
-    meterColorBrand: Colors['backgroundBrand'];
-    meterColorBrandInverse: Colors['backgroundBrand'];
-    meterColorInfo: Colors['backgroundInfo'];
-    meterColorInfoInverse: Colors['backgroundInfo'];
-    meterColorSuccess: Colors['backgroundSuccess'];
-    meterColorSuccessInverse: Colors['backgroundSuccess'];
-    meterColorDanger: Colors['backgroundDanger'];
-    meterColorDangerInverse: Colors['backgroundDanger'];
-    meterColorAlert: Colors['backgroundAlert'];
-    meterColorAlertInverse: Colors['backgroundAlert'];
-    meterColorWarning: Colors['backgroundWarning'];
-    meterColorWarningInverse: Colors['backgroundWarning'];
+    trackBorderColor: Colors['contrasts']['grey125125'];
+    trackBorderColorInverse: Colors['contrasts']['white1010'];
+    meterColorBrand: Colors['contrasts']['blue4570'];
+    meterColorBrandInverse: Colors['contrasts']['blue4570'];
+    meterColorInfo: Colors['contrasts']['blue4570'];
+    meterColorInfoInverse: Colors['contrasts']['blue4570'];
+    meterColorSuccess: Colors['contrasts']['green4570'];
+    meterColorSuccessInverse: Colors['contrasts']['green4570'];
+    meterColorDanger: Colors['contrasts']['red4570'];
+    meterColorDangerInverse: Colors['contrasts']['red4570'];
+    meterColorAlert: Colors['contrasts']['blue4570'];
+    meterColorAlertInverse: Colors['contrasts']['blue4570'];
+    meterColorWarning: Colors['contrasts']['orange4570'];
+    meterColorWarningInverse: Colors['contrasts']['orange4570'];
 };
 export type RadioInputTheme = {
-    labelColor: Colors['textDarkest'];
+    labelColor: Colors['contrasts']['grey125125'];
     labelFontFamily: Typography['fontFamily'];
     labelFontWeight: Typography['fontWeightNormal'];
     labelLineHeight: Typography['lineHeightCondensed'];
-    background: Colors['backgroundLightest'];
+    background: Colors['contrasts']['white1010'];
     borderWidth: Border['widthSmall'];
-    borderColor: Colors['borderDarkest'];
-    hoverBorderColor: Colors['borderDarkest'];
+    borderColor: Colors['contrasts']['grey1214'];
+    hoverBorderColor: Colors['contrasts']['grey125125'];
     controlSize: string | 0;
-    focusBorderColor: Colors['borderBrand'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
     focusBorderWidth: Border['widthMedium'];
     focusBorderStyle: Border['style'];
     simpleFacadeSmallSize: string | 0;
@@ -961,11 +961,11 @@ export type RadioInputTheme = {
     simpleFacadeMarginEnd: Spacing['xSmall'];
     toggleBorderRadius: Border['radiusSmall'];
     toggleBorderWidth: Border['widthLarge'];
-    toggleBackgroundSuccess: Colors['backgroundSuccess'];
-    toggleBackgroundOff: Colors['backgroundDark'];
-    toggleBackgroundDanger: Colors['backgroundDanger'];
-    toggleBackgroundWarning: Colors['backgroundWarning'];
-    toggleHandleText: Colors['textLightest'];
+    toggleBackgroundSuccess: Colors['contrasts']['green4570'];
+    toggleBackgroundOff: Colors['contrasts']['green4570'];
+    toggleBackgroundDanger: Colors['contrasts']['orange4570'];
+    toggleBackgroundWarning: Colors['contrasts']['orange4570'];
+    toggleHandleText: Colors['contrasts']['white1010'];
     toggleSmallHeight: Forms['inputHeightSmall'];
     toggleMediumHeight: Forms['inputHeightMedium'];
     toggleLargeHeight: Forms['inputHeightLarge'];
@@ -977,20 +977,20 @@ export type RadioInputTheme = {
 export type RangeInputTheme = {
     minWidth: string | 0;
     handleSize: string | 0;
-    handleBackground: Colors['backgroundBrand'];
-    handleBorderColor: Colors['borderLightest'];
+    handleBackground: Colors['contrasts']['blue4570'];
+    handleBorderColor: Colors['contrasts']['white1010'];
     handleBorderSize: Border['widthMedium'];
     handleShadow: string | 0;
     handleFocusInset: Border['widthSmall'];
     handleFocusRingSize: Border['widthMedium'];
-    handleFocusRingColor: Colors['backgroundLightest'];
-    handleShadowColor: Colors['borderBrand'];
-    handleHoverBackground: Colors['backgroundBrand'];
-    handleFocusBackground: Colors['backgroundBrand'];
-    handleFocusOutlineColor: Colors['borderBrand'];
+    handleFocusRingColor: Colors['contrasts']['white1010'];
+    handleShadowColor: string;
+    handleHoverBackground: Colors['contrasts']['blue4570'];
+    handleFocusBackground: Colors['contrasts']['blue4570'];
+    handleFocusOutlineColor: string;
     handleFocusOutlineWidth: string | 0;
-    trackBackground: Colors['backgroundDark'];
-    valueColor: Colors['textLightest'];
+    trackBackground: string;
+    valueColor: Colors['contrasts']['white1010'];
     valueFontFamily: Typography['fontFamily'];
     valueFontWeight: Typography['fontWeightNormal'];
     valueSmallFontSize: Typography['fontSizeSmall'];
@@ -1005,8 +1005,8 @@ export type RangeInputTheme = {
 };
 export type RatingIconTheme = {
     iconMargin: Spacing['xxxSmall'];
-    iconEmptyColor: Colors['textBrand'];
-    iconFilledColor: Colors['textBrand'];
+    iconEmptyColor: Colors['contrasts']['blue4570'];
+    iconFilledColor: Colors['contrasts']['blue4570'];
     smallIconFontSize: Typography['fontSizeMedium'];
     mediumIconFontSize: Typography['fontSizeLarge'];
     largeIconFontSize: Typography['fontSizeXXLarge'];
@@ -1018,25 +1018,25 @@ export type SelectTheme = {
     smallIconSize: Typography['fontSizeXSmall'];
     mediumIconSize: Typography['fontSizeSmall'];
     largeIconSize: Typography['fontSizeMedium'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type SourceCodeEditorTheme = {
     fontFamily: Typography['fontFamilyMonospace'];
     fontSize: Typography['fontSizeSmall'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    gutterBackground: Colors['backgroundLight'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    gutterBackground: Colors['contrasts']['grey1111'];
     borderWidth: Border['widthSmall'];
-    borderColor: Colors['borderLight'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderRadius: Border['radiusMedium'];
-    focusBorderColor: Colors['borderBrand'];
+    focusBorderColor: Colors['contrasts']['blue4570'];
     horizontalPadding: Spacing['xSmall'];
     verticalPadding: Spacing['xxSmall'];
 };
 export type SpinnerTheme = {
-    trackColor: Colors['backgroundLight'];
-    color: Colors['backgroundBrand'];
+    trackColor: Colors['contrasts']['grey1111'];
+    color: Colors['contrasts']['blue4570'];
     xSmallSize: string | 0;
     xSmallBorderWidth: string | 0;
     smallSize: string | 0;
@@ -1045,18 +1045,18 @@ export type SpinnerTheme = {
     mediumBorderWidth: string | 0;
     largeSize: string | 0;
     largeBorderWidth: string | 0;
-    inverseColor: Colors['backgroundBrand'];
+    inverseColor: Colors['contrasts']['blue4570'];
 };
 export type InlineSVGTheme = {
-    primaryInverseColor: Colors['textLightest'];
-    primaryColor: Colors['textDarkest'];
-    secondaryColor: Colors['textDark'];
-    secondaryInverseColor: Colors['textLight'];
-    warningColor: Colors['textWarning'];
-    brandColor: Colors['textBrand'];
-    errorColor: Colors['textDanger'];
-    alertColor: Colors['textAlert'];
-    successColor: Colors['textSuccess'];
+    primaryInverseColor: Colors['contrasts']['white1010'];
+    primaryColor: Colors['contrasts']['grey125125'];
+    secondaryColor: Colors['contrasts']['grey4570'];
+    secondaryInverseColor: Colors['contrasts']['grey1111'];
+    warningColor: Colors['contrasts']['orange4570'];
+    brandColor: Colors['contrasts']['blue4570'];
+    errorColor: Colors['contrasts']['red4570'];
+    alertColor: Colors['contrasts']['blue4570'];
+    successColor: Colors['contrasts']['green4570'];
 };
 export type SVGIconTheme = {
     sizeXSmall: string | 0;
@@ -1069,28 +1069,28 @@ export type TableBodyTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type TableCellTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     lineHeight: Typography['lineHeightCondensed'];
     padding: string | 0;
 };
 export type TableColHeaderTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     lineHeight: Typography['lineHeightCondensed'];
     padding: string | 0;
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineStyle: Border['style'];
 };
@@ -1098,26 +1098,26 @@ export type TableHeadTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type TableRowTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
-    hoverBorderColor: Colors['borderBrand'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
+    hoverBorderColor: Colors['contrasts']['blue4570'];
     padding: string | 0;
 };
 export type TableRowHeaderTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey4570'];
     lineHeight: Typography['lineHeightCondensed'];
     padding: string | 0;
 };
@@ -1125,17 +1125,17 @@ export type TableTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
 };
 export type TabsPanelTheme = {
     fontSize: Typography['fontSizeMedium'];
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
     lineHeight: Typography['lineHeight'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
     defaultOverflowY: string;
@@ -1145,17 +1145,17 @@ export type TabsTabTheme = {
     fontWeight: Typography['fontWeightNormal'];
     lineHeight: Typography['lineHeightCondensed'];
     fontSize: Typography['fontSizeMedium'];
-    defaultColor: Colors['textDarkest'];
-    defaultHoverBorderColor: Colors['borderMedium'];
-    defaultSelectedBorderColor: Colors['borderBrand'];
-    secondaryColor: Colors['textDarkest'];
-    secondarySelectedBackground: Colors['backgroundLightest'];
-    secondarySelectedBorderColor: Colors['borderMedium'];
+    defaultColor: Colors['contrasts']['grey125125'];
+    defaultHoverBorderColor: Colors['contrasts']['grey1214'];
+    defaultSelectedBorderColor: Colors['contrasts']['blue4570'];
+    secondaryColor: Colors['contrasts']['grey125125'];
+    secondarySelectedBackground: Colors['contrasts']['white1010'];
+    secondarySelectedBorderColor: Colors['contrasts']['grey1214'];
     zIndex: Stacking['above'];
 };
 export type TabsTheme = {
-    defaultBackground: Colors['backgroundLightest'];
-    scrollFadeColor: Colors['backgroundLightest'];
+    defaultBackground: Colors['contrasts']['white1010'];
+    scrollFadeColor: Colors['contrasts']['white1010'];
     tabVerticalOffset: Border['widthSmall'];
     zIndex: Stacking['above'];
     scrollOverlayWidthDefault: string;
@@ -1171,62 +1171,61 @@ export type TagTheme = {
     fontSizeLarge: Typography['fontSizeMedium'];
     padding: string | 0;
     paddingSmall: string | 0;
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineStyle: Border['style'];
     maxWidth: string | 0;
     iconMargin: Spacing['small'];
     transitionTiming: string;
-    defaultBackgroundHover: string;
-    defaultBackground: string;
-    defaultBorderColor: string;
+    defaultBackgroundHover: Colors['contrasts']['grey1214'];
+    defaultBackground: Colors['contrasts']['grey1111'];
+    defaultBorderColor: Colors['contrasts']['grey1214'];
     defaultBorderRadius: string;
     defaultBorderStyle: string;
-    defaultBorderWidth: string;
-    defaultColor: string;
-    defaultIconColor: string;
-    defaultIconHoverColor: string;
-    inlineBackgroundHover: string;
-    inlineBackground: string;
-    inlineBorderColor: string;
-    inlineBorderRadius: string;
+    defaultBorderWidth: string | 0;
+    defaultColor: Colors['contrasts']['grey125125'];
+    defaultIconColor: Colors['contrasts']['grey125125'];
+    defaultIconHoverColor: Colors['contrasts']['blue4570'];
+    inlineBackgroundHover: Colors['contrasts']['grey1111'];
+    inlineBackground: Colors['contrasts']['white1010'];
+    inlineBorderColor: Colors['contrasts']['grey4570'];
+    inlineBorderRadius: string | 0;
     inlineBorderStyle: string;
-    inlineBorderWidth: string;
-    inlineColor: string;
-    inlineIconColor: string;
-    inlineIconHoverColor: string;
+    inlineBorderWidth: string | 0;
+    inlineColor: Colors['contrasts']['grey125125'];
+    inlineIconColor: Colors['contrasts']['grey4570'];
+    inlineIconHoverColor: Colors['contrasts']['blue4570'];
 };
 export type TextTheme = Typography & {
-    primaryInverseColor: Colors['textLightest'];
-    primaryColor: Colors['textDarkest'];
-    secondaryColor: Colors['textDark'];
-    secondaryInverseColor: Colors['textLight'];
-    warningColor: Colors['textWarning'];
-    brandColor: Colors['textBrand'];
-    dangerColor: Colors['textDanger'];
-    successColor: Colors['textSuccess'];
-    alertColor: Colors['textAlert'];
+    primaryInverseColor: Colors['contrasts']['white1010'];
+    primaryColor: Colors['contrasts']['grey125125'];
+    secondaryColor: Colors['contrasts']['grey4570'];
+    secondaryInverseColor: Colors['contrasts']['grey1111'];
+    brandColor: Colors['contrasts']['blue4570'];
+    dangerColor: Colors['contrasts']['red4570'];
+    successColor: Colors['contrasts']['green4570'];
+    alertColor: Colors['contrasts']['blue4570'];
     paragraphMargin: string | 0;
 };
 export type TextAreaTheme = {
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
-    borderTopColor: Colors['borderMedium'];
-    borderRightColor: Colors['borderMedium'];
-    borderBottomColor: Colors['borderMedium'];
-    borderLeftColor: Colors['borderMedium'];
+    borderTopColor: Colors['contrasts']['grey1214'];
+    borderRightColor: Colors['contrasts']['grey1214'];
+    borderBottomColor: Colors['contrasts']['grey1214'];
+    borderLeftColor: Colors['contrasts']['grey1214'];
     borderRadius: Border['radiusMedium'];
     padding: Spacing['small'];
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineStyle: Border['style'];
-    errorBorderColor: Colors['borderDanger'];
-    errorOutlineColor: Colors['borderDanger'];
-    placeholderColor: Colors['textDark'];
+    errorBorderColor: Colors['contrasts']['red4570'];
+    errorOutlineColor: Colors['contrasts']['red4570'];
+    placeholderColor: Colors['contrasts']['grey4570'];
     smallFontSize: Typography['fontSizeSmall'];
     smallHeight: Forms['inputHeightSmall'];
     mediumFontSize: Typography['fontSizeMedium'];
@@ -1239,17 +1238,17 @@ export type TextInputTheme = {
     fontWeight: Typography['fontWeightNormal'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
-    borderColor: Colors['borderMedium'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderRadius: Border['radiusMedium'];
-    color: Colors['textDarkest'];
-    background: Colors['backgroundLightest'];
+    color: Colors['contrasts']['grey125125'];
+    background: Colors['contrasts']['white1010'];
     padding: Spacing['small'];
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineStyle: Border['style'];
-    focusOutlineColor: Colors['borderBrand'];
-    errorBorderColor: Colors['borderDanger'];
-    errorOutlineColor: Colors['borderDanger'];
-    placeholderColor: Colors['textDark'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
+    errorBorderColor: Colors['contrasts']['red4570'];
+    errorOutlineColor: Colors['contrasts']['red4570'];
+    placeholderColor: Colors['contrasts']['grey4570'];
     smallFontSize: Typography['fontSizeSmall'];
     smallHeight: Forms['inputHeightSmall'];
     mediumFontSize: Typography['fontSizeMedium'];
@@ -1261,7 +1260,7 @@ export type ToggleDetailsTheme = {
     fontFamily: Typography['fontFamily'];
     fontWeight: Typography['fontWeightNormal'];
     lineHeight: Typography['lineHeight'];
-    textColor: Colors['textDarkest'];
+    textColor: Colors['contrasts']['grey125125'];
     fontSizeSmall: Typography['fontSizeSmall'];
     fontSizeMedium: Typography['fontSizeMedium'];
     fontSizeLarge: Typography['fontSizeLarge'];
@@ -1269,16 +1268,16 @@ export type ToggleDetailsTheme = {
     mediumIconSize: string | 0;
     largeIconSize: string | 0;
     iconMargin: Spacing['xxSmall'];
-    iconColor: Colors['textDarkest'];
+    iconColor: Colors['contrasts']['grey125125'];
     togglePadding: Spacing['xxSmall'];
     toggleBorderRadius: Border['radiusMedium'];
     toggleBorderWidth: Border['widthMedium'];
     toggleBorderStyle: Border['style'];
-    toggleFocusBorderColor: Colors['borderBrand'];
-    filledBackgroundColor: Colors['backgroundLight'];
+    toggleFocusBorderColor: Colors['contrasts']['blue4570'];
+    filledBackgroundColor: Colors['contrasts']['grey1111'];
     filledBorderWidth: Border['widthSmall'];
     filledBorderStyle: Border['style'];
-    filledBorderColor: Colors['borderMedium'];
+    filledBorderColor: Colors['contrasts']['grey1214'];
     filledBorderRadius: Border['radiusMedium'];
     filledPadding: Spacing['small'];
 };
@@ -1314,16 +1313,16 @@ export type TopNavBarItemTheme = {
     activeItemFontWeight: Typography['fontWeightBold'];
     activeItemIndicatorSpacing: Spacing['xSmall'];
     activeIndicatorWidth: Border['widthMedium'];
-    activeIndicatorColor: Colors['textLightest'];
-    activeIndicatorColorInverse: Colors['textDarkest'];
+    activeIndicatorColor: Colors['contrasts']['white1010'];
+    activeIndicatorColorInverse: Colors['contrasts']['grey125125'];
 };
 export type TopNavBarLayoutTheme = TopNavBarLayoutDesktopTheme & TopNavBarLayoutSmallViewportTheme;
 export type TopNavBarLayoutDesktopTheme = {
     desktopFontSize: Typography['fontSizeMedium'];
     desktopFontFamily: Typography['fontFamily'];
     desktopFontWeight: Typography['fontWeightNormal'];
-    desktopBackground: Colors['backgroundBrandSecondary'];
-    desktopBackgroundInverse: Colors['backgroundLightest'];
+    desktopBackground: Colors['contrasts']['grey100100'];
+    desktopBackgroundInverse: Colors['contrasts']['grey1111'];
     desktopBottomBorder: string;
     desktopBottomBorderInverse: string;
     desktopHeight: string;
@@ -1336,15 +1335,15 @@ export type TopNavBarLayoutDesktopTheme = {
     desktopUserSeparatorGap: Spacing['xSmall'];
     desktopUserSeparatorHeight: string | 0;
     desktopUserSeparatorWidth: Border['widthSmall'];
-    desktopUserSeparatorColor: Colors['borderMedium'];
-    desktopUserSeparatorColorInverse: Colors['borderMedium'];
+    desktopUserSeparatorColor: Colors['contrasts']['grey1214'];
+    desktopUserSeparatorColorInverse: Colors['contrasts']['grey1214'];
 };
 export type TopNavBarLayoutSmallViewportTheme = {
     smallViewportFontSize: Typography['fontSizeMedium'];
     smallViewportFontFamily: Typography['fontFamily'];
     smallViewportFontWeight: Typography['fontWeightNormal'];
-    smallViewportBackground: Colors['backgroundDarkest'];
-    smallViewportBackgroundInverse: Colors['backgroundLightest'];
+    smallViewportBackground: Colors['contrasts']['grey100100'];
+    smallViewportBackgroundInverse: Colors['contrasts']['grey1111'];
     smallViewportBottomBorder: string;
     smallViewportBottomBorderInverse: string;
     smallViewportHeight: string | 0;
@@ -1366,11 +1365,11 @@ export type TopNavBarMenuItemsTheme = {
     desktopSubmenuActiveOptionFontWeight: Typography['fontWeightBold'];
     desktopSubmenuActiveOptionIndicatorSpacing: Spacing['xSmall'];
     desktopSubmenuActiveOptionIndicatorWidth: Border['widthMedium'];
-    desktopSubmenuActiveOptionIndicatorColor: Colors['textLightest'];
+    desktopSubmenuActiveOptionIndicatorColor: string;
 };
 export type TrayTheme = {
-    background: Colors['backgroundLightest'];
-    borderColor: Colors['borderMedium'];
+    background: Colors['contrasts']['white1010'];
+    borderColor: Colors['contrasts']['grey1214'];
     borderWidth: Border['widthSmall'];
     borderStyle: Border['style'];
     boxShadow: Shadows['depth3'];
@@ -1383,19 +1382,19 @@ export type TrayTheme = {
     position: string;
 };
 export type TreeBrowserButtonTheme = {
-    hoverBackgroundColor: Colors['backgroundBrand'];
-    hoverTextColor: Colors['textLightest'];
+    hoverBackgroundColor: Colors['contrasts']['blue4570'];
+    hoverTextColor: Colors['contrasts']['white1010'];
     focusOutlineWidth: Border['widthMedium'];
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineStyle: Border['style'];
-    iconColor: Colors['textDarkest'];
+    iconColor: Colors['contrasts']['grey125125'];
     iconsMarginRight: Spacing['xSmall'];
     descriptorMarginTop: Spacing['xxxSmall'];
-    descriptorTextColor: Colors['textDarkest'];
+    descriptorTextColor: Colors['contrasts']['grey125125'];
     descriptorFontSizeSmall: Typography['fontSizeXSmall'];
     descriptorFontSizeMedium: Typography['fontSizeXSmall'];
     descriptorFontSizeLarge: Typography['fontSizeSmall'];
-    nameTextColor: Colors['textBrand'];
+    nameTextColor: Colors['contrasts']['blue4570'];
     nameFontSizeSmall: Typography['fontSizeXSmall'];
     nameFontSizeMedium: Typography['fontSizeSmall'];
     nameFontSizeLarge: Typography['fontSizeMedium'];
@@ -1404,10 +1403,10 @@ export type TreeBrowserButtonTheme = {
     baseSpacingLarge: string | 0;
     borderWidth: Border['widthSmall'];
     borderRadius: Border['radiusMedium'];
-    borderColor: Colors['borderDark'];
+    borderColor: Colors['contrasts']['grey4570'];
     textLineHeight: Typography['lineHeightCondensed'];
-    selectedTextColor: Colors['textLightest'];
-    selectedBackgroundColor: Colors['backgroundDark'];
+    selectedTextColor: Colors['contrasts']['white1010'];
+    selectedBackgroundColor: Colors['contrasts']['grey4570'];
     selectedOutlineWidth: Border['widthLarge'];
 };
 export type TreeBrowserCollectionTheme = {
@@ -1416,12 +1415,12 @@ export type TreeBrowserCollectionTheme = {
     baseSpacingMedium: Spacing['small'];
     baseSpacingLarge: string | 0;
     borderWidth: Border['widthSmall'];
-    borderColor: Colors['borderDark'];
+    borderColor: Colors['contrasts']['grey4570'];
 };
 export type TreeBrowserTheme = {
     borderRadius: Border['radiusMedium'];
     focusOutlineWidth: Border['widthMedium'];
-    focusOutlineColor: Colors['borderBrand'];
+    focusOutlineColor: Colors['contrasts']['blue4570'];
     focusOutlineStyle: Border['style'];
 };
 export type TruncateTextTheme = {
@@ -1431,43 +1430,43 @@ export type TruncateTextTheme = {
 export type ContextViewTheme = {
     arrowSize: string | 0;
     arrowBorderWidth: Border['widthSmall'];
-    arrowBackgroundColor: Colors['white'];
-    arrowBorderColor: Colors['tiara'];
-    arrowBackgroundColorInverse: Colors['licorice'];
+    arrowBackgroundColor: Colors['contrasts']['white1010'];
+    arrowBorderColor: Colors['contrasts']['grey1214'];
+    arrowBackgroundColorInverse: Colors['contrasts']['grey125125'];
     arrowBorderColorInverse: string;
 };
 export type ViewTheme = {
     fontFamily: Typography['fontFamily'];
-    color: Colors['textDarkest'];
-    colorPrimaryInverse: Colors['textLightest'];
-    borderColorPrimary: Colors['borderMedium'];
-    borderColorSecondary: Colors['borderDark'];
-    borderColorSuccess: Colors['borderSuccess'];
-    borderColorBrand: Colors['borderBrand'];
-    borderColorInfo: Colors['borderInfo'];
-    borderColorAlert: Colors['borderAlert'];
-    borderColorWarning: Colors['borderWarning'];
-    borderColorDanger: Colors['borderDanger'];
+    color: Colors['contrasts']['grey125125'];
+    colorPrimaryInverse: Colors['contrasts']['white1010'];
+    borderColorPrimary: Colors['contrasts']['grey1214'];
+    borderColorSecondary: Colors['contrasts']['grey4570'];
+    borderColorSuccess: Colors['contrasts']['green4570'];
+    borderColorBrand: Colors['contrasts']['blue4570'];
+    borderColorInfo: Colors['contrasts']['blue4570'];
+    borderColorAlert: Colors['contrasts']['blue4570'];
+    borderColorWarning: Colors['contrasts']['orange4570'];
+    borderColorDanger: Colors['contrasts']['red4570'];
     borderColorTransparent: string;
-    debugOutlineColor: Colors['borderDebug'];
-    backgroundPrimary: Colors['backgroundLightest'];
-    backgroundSecondary: Colors['backgroundLight'];
-    backgroundPrimaryInverse: Colors['backgroundDarkest'];
-    backgroundBrand: Colors['backgroundBrand'];
-    backgroundInfo: Colors['backgroundInfo'];
-    backgroundAlert: Colors['backgroundAlert'];
-    backgroundSuccess: Colors['backgroundSuccess'];
-    backgroundDanger: Colors['backgroundDanger'];
-    backgroundWarning: Colors['backgroundWarning'];
+    debugOutlineColor: Colors['contrasts']['red4570'];
+    backgroundPrimary: Colors['contrasts']['white1010'];
+    backgroundSecondary: Colors['contrasts']['grey1111'];
+    backgroundPrimaryInverse: Colors['contrasts']['grey125125'];
+    backgroundBrand: Colors['contrasts']['blue4570'];
+    backgroundInfo: Colors['contrasts']['blue4570'];
+    backgroundAlert: Colors['contrasts']['blue4570'];
+    backgroundSuccess: Colors['contrasts']['green4570'];
+    backgroundDanger: Colors['contrasts']['red4570'];
+    backgroundWarning: Colors['contrasts']['red4570'];
     arrowSize: string | 0;
     focusOutlineStyle: Border['style'];
     focusOutlineWidth: Border['widthMedium'];
     focusOutlineOffset: string | 0;
     focusOutlineInset: string | 0;
-    focusColorInfo: Colors['borderInfo'];
-    focusColorDanger: Colors['borderDanger'];
-    focusColorSuccess: Colors['borderSuccess'];
-    focusColorInverse: Colors['borderLightest'];
+    focusColorInfo: Colors['contrasts']['blue4570'];
+    focusColorDanger: Colors['contrasts']['red4570'];
+    focusColorSuccess: Colors['contrasts']['green4570'];
+    focusColorInverse: Colors['contrasts']['white1010'];
     xSmallMaxWidth: Breakpoints['xSmall'];
     smallMaxWidth: Breakpoints['small'];
     mediumMaxWidth: Breakpoints['medium'];