@instructure/ui-themes 11.7.4-snapshot-98 → 11.7.4-snapshot-101

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-98](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-98) (2026-07-14)
+## [11.7.4-snapshot-101](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-101) (2026-07-14)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

package/es/themes/newThemeTokens/dark/components/alert.js

@@ -29,7 +29,7 @@ const alert = semantic => ({
   borderWidth: semantic.borderWidth.md,
   closeButtonMarginRight: "0.5rem",
   closeButtonMarginTop: "0.5rem",
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   contentFontFamily: semantic.fontFamily.base,
   contentFontSize: semantic.fontSize.textBase,
   contentFontWeight: semantic.fontWeight.body.base,

package/es/themes/newThemeTokens/dark/components/badge.js

@@ -29,7 +29,7 @@ const badge = semantic => ({
   colorInverse: semantic.color.text.dark,
   colorDanger: semantic.color.background.error,
   colorSuccess: semantic.color.background.success,
-  colorPrimary: semantic.color.background.info,
+  colorPrimary: semantic.color.institutional.brandPrimary,
   fontSize: semantic.fontSize.textSm,
   fontWeight: semantic.fontWeight.body.strong,
   sizeNotification: "0.75rem",

package/es/themes/newThemeTokens/dark/components/baseButton.js

@@ -23,22 +23,71 @@
  */
 
 const baseButton = semantic => ({
-  primaryActiveBackground: semantic.color.background.interactive.action.primary.active,
-  primaryActiveBorderColor: semantic.color.stroke.interactive.action.primary.active,
-  primaryActiveTextColor: semantic.color.text.interactive.action.primary.active,
-  primaryBackground: semantic.color.background.interactive.action.primary.base,
-  primaryBorderColor: semantic.color.stroke.interactive.action.primary.base,
-  primaryColor: semantic.color.text.interactive.action.primary.base,
+  primaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryActiveTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryBackground: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryDisabledBackgroundColor: semantic.color.background.interactive.action.primary.disabled,
   primaryDisabledBorderColor: semantic.color.stroke.interactive.action.primary.disabled,
   primaryDisabledTextColor: semantic.color.text.interactive.action.primary.disabled,
-  primaryGhostActiveBackground: semantic.color.background.interactive.action.tertiary.active,
-  primaryGhostBorderColor: semantic.color.stroke.interactive.action.tertiary.base,
-  primaryGhostColor: semantic.color.text.interactive.action.tertiary.base,
-  primaryGhostHoverBackground: semantic.color.background.interactive.action.tertiary.hover,
-  primaryHoverBackground: semantic.color.background.interactive.action.primary.hover,
-  primaryHoverBorderColor: semantic.color.stroke.interactive.action.primary.hover,
-  primaryHoverTextColor: semantic.color.text.interactive.action.primary.hover,
+  primaryGhostActiveBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryGhostBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  primaryGhostColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryGhostHoverBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.05,
+      space: "hsl"
+    }
+  },
+  primaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryInverseActiveBackground: semantic.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantic.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.base,
@@ -55,21 +104,56 @@ const baseButton = semantic => ({
   primaryOnColorDisabledTextColor: semantic.color.text.interactive.action.primaryOnColor.disabled,
   primaryOnColorHoverBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.hover,
   primaryOnColorHoverTextColor: semantic.color.text.interactive.action.primaryOnColor.hover,
-  secondaryActiveBackground: semantic.color.background.interactive.action.secondary.active,
-  secondaryActiveBorderColor: semantic.color.stroke.interactive.action.secondary.active,
-  secondaryActiveTextColor: semantic.color.text.interactive.action.secondary.active,
-  secondaryBackground: semantic.color.background.interactive.action.secondary.base,
-  secondaryBorderColor: semantic.color.stroke.interactive.action.secondary.base,
-  secondaryColor: semantic.color.text.interactive.action.secondary.base,
+  secondaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0,
+      space: "hsl"
+    }
+  },
+  secondaryActiveTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryBackground: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0,
+      space: "hsl"
+    }
+  },
+  secondaryColor: semantic.color.institutional.brandButtonSecondaryText,
   secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
   secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
   secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
-  secondaryGhostBorderColor: semantic.color.stroke.interactive.action.secondary.base,
-  secondaryGhostColor: semantic.color.text.interactive.action.secondary.base,
-  secondaryGhostHoverBackground: semantic.color.background.interactive.action.secondary.hover,
-  secondaryHoverBackground: semantic.color.background.interactive.action.secondary.hover,
-  secondaryHoverBorderColor: semantic.color.stroke.interactive.action.secondary.hover,
-  secondaryHoverTextColor: semantic.color.text.interactive.action.secondary.hover,
+  secondaryGhostBorderColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0,
+      space: "hsl"
+    }
+  },
+  secondaryHoverTextColor: semantic.color.institutional.brandButtonSecondaryText,
   secondaryOnColorActiveBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.active,
   secondaryOnColorActiveTextColor: semantic.color.text.interactive.action.secondaryOnColor.active,
   secondaryOnColorDisabledBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.disabled,
@@ -168,12 +252,26 @@ const baseButton = semantic => ({
   heightXxs: semantic.size.interactive.height.xxs,
   opacityBase: semantic.opacity.base,
   opacityDisabled: semantic.opacity.base,
-  tertiaryActiveBorderColor: semantic.color.stroke.interactive.action.tertiary.active,
-  tertiaryActiveTextColor: semantic.color.text.interactive.action.tertiary.active,
+  tertiaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.3,
+      space: "hsl"
+    }
+  },
+  tertiaryActiveTextColor: semantic.color.institutional.brandButtonPrimaryBgd,
   tertiaryDisabledBorderColor: semantic.color.stroke.interactive.action.tertiary.disabled,
   tertiaryDisabledTextColor: semantic.color.text.interactive.action.tertiary.disabled,
-  tertiaryHoverBorderColor: semantic.color.stroke.interactive.action.tertiary.hover,
-  tertiaryHoverTextColor: semantic.color.text.interactive.action.tertiary.hover,
+  tertiaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  tertiaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryBgd,
   dangerBoxShadow: "none",
   dangerGhostBackground: "transparent",
   dangerGhostBoxShadow: "none",

package/es/themes/newThemeTokens/dark/components/billboard.js

@@ -36,7 +36,7 @@ const billboard = semantic => ({
   buttonHoverBorderStyle: "dashed",
   buttonBorderRadius: "0.5rem",
   messageColor: semantic.color.text.muted,
-  messageColorClickable: semantic.color.text.interactive.action.secondary.base,
+  messageColorClickable: semantic.color.institutional.linkColor,
   clickableActiveText: semantic.color.text.interactive.action.secondary.active,
   messageFontSizeSmall: semantic.fontSize.textSm,
   messageFontSizeMedium: semantic.fontSize.textBase,

package/es/themes/newThemeTokens/dark/components/byline.js

@@ -24,7 +24,7 @@
 
 const byline = semantic => ({
   background: semantic.color.transparentColor,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   descriptionFontSize: semantic.fontSize.textBase,
   descriptionFontWeight: semantic.fontWeight.body.base,
   descriptionLineHeight: semantic.lineHeight.standalone.base,

package/es/themes/newThemeTokens/dark/components/calendar.js

@@ -24,7 +24,7 @@
 
 const calendar = semantic => ({
   background: semantic.color.background.elevatedSurface.base,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.strong,

package/es/themes/newThemeTokens/dark/components/calendarDay.js

@@ -29,7 +29,7 @@ const calendarDay = semantic => ({
   selectedBackground: semantic.color.background.interactive.action.success.base,
   selectedColor: semantic.color.text.onColor,
   todayColor: semantic.color.text.inverse,
-  todayBackground: semantic.color.background.interactive.action.primary.base,
+  todayBackground: semantic.color.institutional.brandPrimary,
   fontSize: semantic.fontSize.textBase,
   height: semantic.size.interactive.height.sm,
   minWidth: semantic.size.interactive.height.sm,

package/es/themes/newThemeTokens/dark/components/checkbox.js

@@ -27,7 +27,7 @@ const checkbox = semantic => ({
   backgroundHoverColor: semantic.color.background.interactive.input.hover,
   backgroundReadonlyColor: semantic.color.background.interactive.input.readonly,
   backgroundDisabledColor: semantic.color.background.interactive.input.disabled,
-  backgroundCheckedColor: semantic.color.background.interactive.input.selected,
+  backgroundCheckedColor: semantic.color.institutional.brandFontColorDark,
   borderColor: semantic.color.stroke.interactive.input.base,
   borderHoverColor: semantic.color.stroke.interactive.input.hover,
   borderReadonlyColor: semantic.color.stroke.interactive.input.readonly,
@@ -35,7 +35,7 @@ const checkbox = semantic => ({
   errorBorderColor: semantic.color.stroke.interactive.action.destructive.secondary.base,
   errorBorderHoverColor: semantic.color.stroke.interactive.action.destructive.secondary.hover,
   asteriskColor: semantic.color.text.error,
-  borderCheckedColor: semantic.color.stroke.interactive.input.selected,
+  borderCheckedColor: semantic.color.institutional.brandFontColorDark,
   fontSizeSm: semantic.fontSize.textSm,
   fontSizeMd: semantic.fontSize.textBase,
   fontSizeLg: semantic.fontSize.textLg,
@@ -48,10 +48,10 @@ const checkbox = semantic => ({
   controlSizeMd: semantic.size.choiceControl.height.md,
   controlSizeLg: semantic.size.choiceControl.height.lg,
   borderWidth: semantic.borderWidth.interactive.base,
-  labelBaseColor: semantic.color.text.base,
-  labelHoverColor: semantic.color.text.base,
+  labelBaseColor: semantic.color.institutional.brandFontColorDark,
+  labelHoverColor: semantic.color.institutional.brandFontColorDark,
   labelDisabledColor: semantic.color.text.interactive.disabled.base,
-  labelReadonlyColor: semantic.color.text.base,
+  labelReadonlyColor: semantic.color.institutional.brandFontColorDark,
   controlVerticalMargin: "0rem"
 });
 export default checkbox;

package/es/themes/newThemeTokens/dark/components/fileDrop.js

@@ -29,7 +29,7 @@ const fileDrop = semantic => ({
   borderRadius: semantic.borderRadius.container.md,
   borderStyle: "dashed",
   borderWidth: semantic.borderWidth.sm,
-  hoverBorderColor: semantic.color.stroke.interactive.input.hover,
+  hoverBorderColor: semantic.color.institutional.brandPrimary,
   rejectedColor: semantic.color.stroke.interactive.action.destructive.secondary.base
 });
 export default fileDrop;

package/es/themes/newThemeTokens/dark/components/formFieldLayout.js

@@ -23,7 +23,7 @@
  */
 
 const formFieldLayout = semantic => ({
-  textColor: semantic.color.text.base,
+  textColor: semantic.color.institutional.brandFontColorDark,
   readonlyTextColor: semantic.color.text.muted,
   asteriskColor: semantic.color.text.error,
   fontFamily: semantic.fontFamily.base,
@@ -31,7 +31,6 @@ const formFieldLayout = semantic => ({
   fontSize: semantic.fontSize.textBase,
   lineHeight: semantic.lineHeight.label.base,
   gapPrimitives: semantic.spacing.gap.inputElements,
-  stackedOrInlineBreakpoint: "48em",
   gapInputs: "0.75rem"
 });
 export default formFieldLayout;

package/es/themes/newThemeTokens/dark/components/formFieldMessage.js

@@ -23,7 +23,7 @@
  */
 
 const formFieldMessage = semantic => ({
-  hintTextColor: semantic.color.text.muted,
+  hintTextColor: semantic.color.institutional.brandFontColorDark,
   errorTextColor: semantic.color.text.error,
   successTextColor: semantic.color.text.success,
   fontWeight: semantic.fontWeight.body.base,

package/es/themes/newThemeTokens/dark/components/gridCol.js

@@ -23,9 +23,6 @@
  */
 
 const gridCol = semantic => ({
-  mediumMin: "48em",
-  largeMin: "62em",
-  xLargeMin: "75em",
   spacingLarge: "2.25rem",
   spacingMedium: semantic.spacing.spaceXl,
   spacingSmall: semantic.spacing.spaceMd

package/es/themes/newThemeTokens/dark/components/gridRow.js

@@ -23,9 +23,6 @@
  */
 
 const gridRow = semantic => ({
-  mediumMin: "48em",
-  largeMin: "62em",
-  xLargeMin: "75em",
   spacingLarge: "2.25rem",
   spacingMedium: semantic.spacing.spaceXl,
   spacingSmall: semantic.spacing.spaceMd

package/es/themes/newThemeTokens/dark/components/heading.js

@@ -43,7 +43,7 @@ const heading = semantic => ({
   h6FontFamily: semantic.fontFamily.heading,
   lineHeight: semantic.lineHeight.heading.base,
   borderWidth: semantic.borderWidth.sm,
-  baseColor: semantic.color.text.base,
+  baseColor: semantic.color.institutional.brandFontColorDark,
   baseOnColor: semantic.color.text.onColor,
   mutedColor: semantic.color.text.muted,
   mutedOnColor: semantic.color.text.onColor,

package/es/themes/newThemeTokens/dark/components/icon.js

@@ -41,7 +41,7 @@ const icon = semantic => ({
   strokeWidthIlluSm: "0.25rem",
   strokeWidthIlluMd: "0.5rem",
   strokeWidthIlluLg: "0.75rem",
-  baseColor: semantic.color.icon.base,
+  baseColor: semantic.color.institutional.brandFontColorDark,
   mutedColor: semantic.color.icon.muted,
   successColor: semantic.color.icon.success,
   errorColor: semantic.color.icon.error,
@@ -52,17 +52,17 @@ const icon = semantic => ({
   disabledBaseColor: semantic.color.icon.interactive.disabled.base,
   disabledOnColor: semantic.color.icon.interactive.disabled.onColor,
   dark: semantic.color.icon.dark,
-  sideNavColor: semantic.color.icon.brand,
-  sideNavActiveColor: semantic.color.icon.inverse,
+  sideNavColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  sideNavActiveColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
   navigationPrimaryBaseColor: semantic.color.icon.interactive.navigation.primary.base,
   navigationPrimaryHoverColor: semantic.color.icon.interactive.navigation.primary.hover,
   navigationPrimaryActiveColor: semantic.color.icon.interactive.navigation.primary.active,
   navigationPrimaryOnColorBaseColor: semantic.color.icon.interactive.navigation.primaryOnColor.base,
   navigationPrimaryOnColorHoverColor: semantic.color.icon.interactive.navigation.primaryOnColor.hover,
   navigationPrimaryOnColorActiveColor: semantic.color.icon.interactive.navigation.primaryOnColor.active,
-  actionSecondaryBaseColor: semantic.color.icon.interactive.action.secondary.base,
-  actionSecondaryHoverColor: semantic.color.icon.interactive.action.secondary.hover,
-  actionSecondaryActiveColor: semantic.color.icon.interactive.action.secondary.active,
+  actionSecondaryBaseColor: semantic.color.institutional.brandButtonSecondaryText,
+  actionSecondaryHoverColor: semantic.color.institutional.brandButtonSecondaryText,
+  actionSecondaryActiveColor: semantic.color.institutional.brandButtonSecondaryText,
   actionSecondaryDisabledColor: semantic.color.icon.interactive.action.secondary.disabled,
   actionStatusBaseColor: semantic.color.icon.interactive.action.status.base,
   actionStatusHoverColor: semantic.color.icon.interactive.action.status.hover,
@@ -74,9 +74,9 @@ const icon = semantic => ({
   actionAiHoverColor: semantic.color.icon.interactive.action.ai.hover,
   actionAiActiveColor: semantic.color.icon.interactive.action.ai.active,
   actionAiDisabledColor: semantic.color.icon.interactive.action.ai.disabled,
-  actionPrimaryBaseColor: semantic.color.icon.interactive.action.primary.base,
-  actionPrimaryHoverColor: semantic.color.icon.interactive.action.primary.hover,
-  actionPrimaryActiveColor: semantic.color.icon.interactive.action.primary.active,
+  actionPrimaryBaseColor: semantic.color.institutional.brandButtonPrimaryText,
+  actionPrimaryHoverColor: semantic.color.institutional.brandButtonPrimaryText,
+  actionPrimaryActiveColor: semantic.color.institutional.brandButtonPrimaryText,
   actionPrimaryDisabledColor: semantic.color.icon.interactive.action.primary.disabled,
   actionPrimaryOnColorBaseColor: semantic.color.icon.interactive.action.primaryOnColor.base,
   actionTertiaryBaseColor: semantic.color.icon.interactive.action.tertiary.base,

package/es/themes/newThemeTokens/dark/components/inlineListItem.js

@@ -24,7 +24,7 @@
 
 const inlineListItem = semantic => ({
   arrowSpacing: semantic.spacing.spaceSm,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   delimiterColor: semantic.color.text.muted,
   fontFamily: semantic.fontFamily.base,
   fontSizeLarge: semantic.fontSize.textLg,

package/es/themes/newThemeTokens/dark/components/link.js

@@ -23,7 +23,7 @@
  */
 
 const link = semantic => ({
-  textColor: semantic.color.text.interactive.navigation.primary.base,
+  textColor: semantic.color.institutional.linkColor,
   textHoverColor: semantic.color.text.interactive.navigation.primary.hover,
   textDisabledColor: semantic.color.text.interactive.disabled.base,
   onColorTextColor: semantic.color.text.interactive.navigation.primaryOnColor.base,

package/es/themes/newThemeTokens/dark/components/listItem.js

@@ -23,7 +23,7 @@
  */
 
 const listItem = semantic => ({
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   fontFamily: semantic.fontFamily.base,
   fontSizeLarge: semantic.fontSize.textLg,
   fontSizeMedium: semantic.fontSize.textBase,

package/es/themes/newThemeTokens/dark/components/menuGroup.js

@@ -27,7 +27,7 @@ const menuGroup = semantic => ({
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.strong,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   paddingHorizontal: semantic.spacing.spaceMd,
   paddingVertical: semantic.spacing.spaceSm
 });

package/es/themes/newThemeTokens/dark/components/menuItem.js

@@ -23,14 +23,14 @@
  */
 
 const menuItem = semantic => ({
-  activeBackground: semantic.color.background.interactive.action.primary.base,
+  activeBackground: semantic.color.institutional.brandPrimary,
   activeLabelColor: semantic.color.text.interactive.action.primary.base,
   background: semantic.color.background.elevatedSurface.base,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.base,
   iconPadding: semantic.spacing.spaceMd,
-  labelColor: semantic.color.text.base,
+  labelColor: semantic.color.institutional.brandFontColorDark,
   labelInfoColor: semantic.color.text.muted,
   lineHeight: semantic.lineHeight.paragraph.textSm,
   labelPadding: "0rem",

package/es/themes/newThemeTokens/dark/components/metric.js

@@ -23,10 +23,10 @@
  */
 
 const metric = semantic => ({
-  labelColor: semantic.color.text.muted,
+  labelColor: semantic.color.institutional.brandFontColorDark,
   labelFontSize: semantic.fontSize.textXs,
   paddingHorizontal: semantic.spacing.spaceSm,
-  valueColor: semantic.color.text.base,
+  valueColor: semantic.color.institutional.brandFontColorDark,
   valueFontSize: semantic.fontSize.textXl,
   gapTexts: semantic.spacing.spaceSm,
   labelLineHeight: semantic.lineHeight.standalone.textXs,

package/es/themes/newThemeTokens/dark/components/optionsItem.js

@@ -26,7 +26,7 @@ const optionsItem = semantic => ({
   afterLabelContentVOffset: semantic.spacing.spaceMd,
   background: semantic.color.background.elevatedSurface.base,
   beforeLabelContentVOffset: semantic.spacing.spaceMd,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   descriptionColor: semantic.color.text.base,
   descriptionFontSize: semantic.fontSize.textSm,
   descriptionFontWeight: semantic.fontWeight.body.base,

package/es/themes/newThemeTokens/dark/components/progressCircle.js

@@ -42,7 +42,7 @@ const progressCircle = semantic => ({
   largeCircumference: "22em",
   largeTransform: "4.5em",
   largeStrokeWidth: "0.875em",
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   colorInverse: semantic.color.text.inverse,
   trackColor: semantic.color.background.base,
   trackColorInverse: semantic.color.transparentColor,
@@ -50,7 +50,7 @@ const progressCircle = semantic => ({
   trackBorderColorInverse: semantic.color.stroke.inverse,
   meterColorAlert: semantic.color.stroke.info,
   meterColorAlertInverse: semantic.color.stroke.inverse,
-  meterColorBrand: semantic.color.stroke.brand,
+  meterColorBrand: semantic.color.institutional.brandPrimary,
   meterColorBrandInverse: semantic.color.stroke.inverse,
   meterColorDanger: semantic.color.stroke.error,
   meterColorDangerInverse: semantic.color.stroke.inverse,

package/es/themes/newThemeTokens/dark/components/radioInput.js

@@ -28,7 +28,7 @@ const radioInput = semantic => ({
   backgroundReadonlyColor: semantic.color.background.interactive.input.readonly,
   backgroundDisabledColor: semantic.color.background.interactive.input.disabled,
   borderColor: semantic.color.stroke.interactive.input.base,
-  borderHoverColor: semantic.color.stroke.interactive.input.hover,
+  borderHoverColor: semantic.color.institutional.brandFontColorDark,
   borderReadonlyColor: semantic.color.stroke.interactive.input.readonly,
   borderDisabledColor: semantic.color.stroke.interactive.input.disabled,
   borderSelectedColor: semantic.color.stroke.interactive.input.selected,
@@ -45,8 +45,8 @@ const radioInput = semantic => ({
   fontWeight: semantic.fontWeight.body.base,
   gap: semantic.spacing.spaceSm,
   borderWidth: semantic.borderWidth.interactive.base,
-  labelBaseColor: semantic.color.text.base,
-  labelHoverColor: semantic.color.text.base,
+  labelBaseColor: semantic.color.institutional.brandFontColorDark,
+  labelHoverColor: semantic.color.institutional.brandFontColorDark,
   labelDisabledColor: semantic.color.text.interactive.disabled.base,
   labelReadonlyColor: semantic.color.text.base,
   controlSizeSm: semantic.size.choiceControl.height.sm,

package/es/themes/newThemeTokens/dark/components/rangeInput.js

@@ -23,11 +23,11 @@
  */
 
 const rangeInput = semantic => ({
-  handleBackground: semantic.color.background.interactive.action.primary.base,
-  handleHoverBackground: semantic.color.background.interactive.action.primary.hover,
-  handleFocusBackground: semantic.color.background.info,
-  handleFocusOutlineColor: semantic.color.background.info,
-  handleShadowColor: semantic.color.background.brand,
+  handleBackground: semantic.color.institutional.brandPrimary,
+  handleHoverBackground: semantic.color.institutional.brandPrimary,
+  handleFocusBackground: semantic.color.institutional.brandPrimary,
+  handleFocusOutlineColor: semantic.color.institutional.brandPrimary,
+  handleShadowColor: semantic.color.institutional.brandPrimary,
   handleBorderColor: semantic.color.stroke.brand,
   handleBorderSize: semantic.borderWidth.md,
   handleFocusInset: semantic.spacing.space2xs,

package/es/themes/newThemeTokens/dark/components/sideNavBar.js

@@ -23,9 +23,9 @@
  */
 
 const sideNavBar = semantic => ({
-  backgroundColor: semantic.color.background.elevatedSurface.base,
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
   fill: semantic.color.icon.interactive.action.primaryOnColor.base,
-  fontColor: semantic.color.text.base,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
   minimizedWidth: "3.75rem",
   toggleTransition: "300ms",
   width: "5.875rem",

package/es/themes/newThemeTokens/dark/components/sideNavBarItem.js

@@ -27,18 +27,18 @@ const sideNavBarItem = semantic => ({
   borderRadius: semantic.borderRadius.lg,
   backgroundColor: "transparent",
   contentPadding: "0.375rem",
-  fontColor: semantic.color.text.base,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textSm,
   fontWeight: semantic.fontWeight.body.base,
-  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  hoverBackgroundColor: semantic.color.institutional.globalNavLinkHover,
   lineHeight: semantic.lineHeight.paragraph.base,
   linkTextDecoration: "none",
-  selectedBackgroundColor: semantic.color.background.brand,
-  selectedFontColor: semantic.color.text.inverse,
+  selectedBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedFontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
   innerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
-  selectedInnerFocusOutlineColor: semantic.color.icon.inverse,
   outerFocusOutlineColor: semantic.color.transparentColor,
-  selectedOuterFocusOutlineColor: semantic.color.transparentColor
+  selectedInnerFocusOutlineColor: semantic.color.icon.inverse,
+  selectedOuterFocusOutlineColor: semantic.color.background.brand
 });
 export default sideNavBarItem;

package/es/themes/newThemeTokens/dark/components/table.js

@@ -24,7 +24,7 @@
 
 const table = semantic => ({
   background: semantic.color.background.base,
-  color: semantic.color.text.base,
+  color: semantic.color.institutional.brandFontColorDark,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.base

package/es/themes/newThemeTokens/dark/components/tableRow.js

@@ -26,7 +26,7 @@ const tableRow = semantic => ({
   background: semantic.color.background.base,
   color: semantic.color.text.base,
   borderColor: semantic.color.stroke.base,
-  hoverBorderColor: semantic.color.stroke.brand,
+  hoverBorderColor: semantic.color.institutional.brandPrimary,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.base,

package/es/themes/newThemeTokens/dark/components/tabsPanel.js

@@ -25,7 +25,7 @@
 const tabsPanel = semantic => ({
   background: semantic.color.transparentColor,
   borderColor: semantic.color.stroke.base,
-  textColor: semantic.color.text.base,
+  textColor: semantic.color.institutional.brandFontColorDark,
   borderWidth: semantic.borderWidth.sm,
   defaultOverflowY: "auto",
   fontFamily: semantic.fontFamily.base,

package/es/themes/newThemeTokens/dark/components/tabsTab.js

@@ -23,14 +23,14 @@
  */
 
 const tabsTab = semantic => ({
-  defaultTextColor: semantic.color.text.base,
+  defaultTextColor: semantic.color.institutional.brandFontColorDark,
   defaultHoverBorderColor: semantic.color.stroke.base,
-  defaultSelectedBorderColor: semantic.color.stroke.brand,
+  defaultSelectedBorderColor: semantic.color.institutional.brandPrimary,
   fontFamily: semantic.fontFamily.base,
   fontSize: semantic.fontSize.textBase,
   fontWeight: semantic.fontWeight.body.base,
   lineHeight: semantic.lineHeight.standalone.base,
-  secondaryTextColor: semantic.color.text.base,
+  secondaryTextColor: semantic.color.institutional.brandFontColorDark,
   secondarySelectedTextColor: semantic.color.text.inverse,
   secondarySelectedBackground: semantic.color.background.brand,
   secondarySelectedBorderColor: semantic.color.stroke.brand,