@instructure/ui-themes 11.7.2-snapshot-28 → 11.7.2-snapshot-36

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.2-snapshot-28](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-28) (2026-04-07)
+## [11.7.2-snapshot-36](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-36) (2026-04-08)
 
 
 ### Bug Fixes

package/es/themes/newThemes/dark/components/topNavBarItem.js

@@ -26,15 +26,15 @@ const topNavBarItem = {
   fontSize: semantics.fontSize.textBase,
   fontFamily: semantics.fontFamily.base,
   fontWeight: semantics.fontWeight.body.base,
-  color: semantics.color.text.base,
-  colorInverse: semantics.color.text.inverse,
   itemInlinePadding: semantics.spacing.spaceSm,
   itemSpacing: semantics.spacing.spaceSm,
   iconTextGap: semantics.spacing.spaceSm,
   activeItemFontWeight: semantics.fontWeight.body.strong,
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
-  activeIndicatorColor: semantics.color.text.inverse,
+  activeIndicatorColor: "#fff",
   activeIndicatorColorInverse: semantics.color.text.base,
-  activeIndicatorWidth: semantics.borderWidth.md
+  activeIndicatorWidth: semantics.borderWidth.md,
+  color: "inherit",
+  colorInverse: "inherit"
 };
 export default topNavBarItem;

package/es/themes/newThemes/dark/components/topNavBarLayout.js

@@ -23,7 +23,7 @@
  */
 import semantics from "../semantics.js";
 const topNavBarLayout = {
-  desktopBackground: semantics.color.background.container,
+  desktopBackground: semantics.color.background.elevatedSurface.inverse,
   desktopBackgroundInverse: semantics.color.background.container,
   desktopBottomBorder: "none",
   desktopFontFamily: semantics.fontFamily.base,

package/es/themes/newThemes/dark/semantics.js

@@ -505,7 +505,18 @@ const semantics = {
       "shadowColor1": "rgba(0,0,0,0.3)",
       "shadowColor2": "rgba(0,0,0,0.15)"
     },
-    "transparentColor": primitives.color.transparent
+    "transparentColor": primitives.color.transparent,
+    "institutional": {
+      "brandPrimary": primitives.color.navy.navy10,
+      "brandFontColorDark": primitives.color.white,
+      "linkColor": primitives.color.blue.blue50,
+      "brandButtonPrimaryBgd": primitives.color.navy.navy10,
+      "brandButtonPrimaryText": primitives.color.navy.navy170,
+      "brandGlobalNavBgd": primitives.color.grey.grey170,
+      "globalNavLinkHover": primitives.color.grey.grey170,
+      "brandGlobalNavMenuItemTextColor": primitives.color.white,
+      "brandGlobalNavMenuItemTextColorActive": primitives.color.grey.grey180
+    }
   },
   "dropShadow": {
     "x": {

package/es/themes/newThemes/legacyCanvas/components/alert.js

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

package/es/themes/newThemes/legacyCanvas/components/badge.js

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

package/es/themes/newThemes/legacyCanvas/components/baseButton.js

@@ -26,9 +26,9 @@ const baseButton = {
   primaryActiveBackground: semantics.color.background.interactive.action.primary.active,
   primaryActiveBorderColor: semantics.color.stroke.interactive.action.primary.active,
   primaryActiveTextColor: semantics.color.text.interactive.action.primary.active,
-  primaryBackground: semantics.color.background.interactive.action.primary.base,
-  primaryBorderColor: semantics.color.stroke.interactive.action.primary.base,
-  primaryColor: semantics.color.text.interactive.action.primary.base,
+  primaryBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantics.color.institutional.brandButtonPrimaryText,
   primaryDisabledBackgroundColor: semantics.color.background.interactive.action.primary.disabled,
   primaryDisabledBorderColor: semantics.color.stroke.interactive.action.primary.disabled,
   primaryDisabledTextColor: semantics.color.text.interactive.action.primary.disabled,

package/es/themes/newThemes/legacyCanvas/components/billboard.js

@@ -35,7 +35,7 @@ const billboard = {
   buttonHoverBorderStyle: "dashed",
   buttonBorderRadius: "0.5rem",
   messageColor: semantics.color.text.interactive.navigation.primary.base,
-  messageColorClickable: semantics.color.text.interactive.navigation.primary.base,
+  messageColorClickable: semantics.color.institutional.linkColor,
   clickableActiveBg: semantics.color.background.interactive.action.primary.active,
   clickableActiveText: semantics.color.text.onColor,
   messageFontSizeSmall: semantics.fontSize.textSm,

package/es/themes/newThemes/legacyCanvas/components/byline.js

@@ -24,7 +24,7 @@
 import semantics from "../semantics.js";
 const byline = {
   background: semantics.color.background.elevatedSurface.base,
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   descriptionFontSize: semantics.fontSize.textBase,
   descriptionFontWeight: semantics.fontWeight.body.base,
   descriptionLineHeight: semantics.lineHeight.standalone.base,

package/es/themes/newThemes/legacyCanvas/components/calendar.js

@@ -24,7 +24,7 @@
 import semantics from "../semantics.js";
 const calendar = {
   background: semantics.color.background.base,
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   fontFamily: semantics.fontFamily.base,
   fontSize: semantics.fontSize.textBase,
   fontWeight: semantics.fontWeight.body.base,

package/es/themes/newThemes/legacyCanvas/components/calendarDay.js

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

package/es/themes/newThemes/legacyCanvas/components/checkbox.js

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

package/es/themes/newThemes/legacyCanvas/components/fileDrop.js

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

package/es/themes/newThemes/legacyCanvas/components/formFieldLayout.js

@@ -23,7 +23,7 @@
  */
 import semantics from "../semantics.js";
 const formFieldLayout = {
-  textColor: semantics.color.text.base,
+  textColor: semantics.color.institutional.brandFontColorDark,
   readonlyTextColor: semantics.color.text.muted,
   asteriskColor: semantics.color.text.base,
   fontFamily: semantics.fontFamily.base,

package/es/themes/newThemes/legacyCanvas/components/formFieldMessage.js

@@ -23,7 +23,7 @@
  */
 import semantics from "../semantics.js";
 const formFieldMessage = {
-  hintTextColor: semantics.color.text.base,
+  hintTextColor: semantics.color.institutional.brandFontColorDark,
   errorTextColor: semantics.color.text.error,
   successTextColor: semantics.color.text.success,
   fontWeight: semantics.fontWeight.body.base,

package/es/themes/newThemes/legacyCanvas/components/heading.js

@@ -102,7 +102,7 @@ const heading = {
   h5FontFamily: semantics.fontFamily.heading,
   h6FontFamily: semantics.fontFamily.heading,
   lineHeight: semantics.lineHeight.heading.base,
-  baseColor: semantics.color.text.base,
+  baseColor: semantics.color.institutional.brandFontColorDark,
   baseOnColor: semantics.color.text.onColor,
   mutedColor: semantics.color.text.muted,
   mutedOnColor: semantics.color.text.onColor,

package/es/themes/newThemes/legacyCanvas/components/icon.js

@@ -41,7 +41,7 @@ const icon = {
   strokeWidthIlluSm: "0.25rem",
   strokeWidthIlluMd: "0.5rem",
   strokeWidthIlluLg: "0.75rem",
-  baseColor: semantics.color.icon.base,
+  baseColor: semantics.color.institutional.brandFontColorDark,
   mutedColor: semantics.color.icon.muted,
   successColor: semantics.color.icon.success,
   errorColor: semantics.color.icon.error,

package/es/themes/newThemes/legacyCanvas/components/inlineListItem.js

@@ -24,7 +24,7 @@
 import semantics from "../semantics.js";
 const inlineListItem = {
   arrowSpacing: semantics.spacing.spaceSm,
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   delimiterColor: semantics.color.text.base,
   fontFamily: semantics.fontFamily.base,
   fontSizeLarge: semantics.fontSize.textLg,

package/es/themes/newThemes/legacyCanvas/components/link.js

@@ -23,7 +23,7 @@
  */
 import semantics from "../semantics.js";
 const link = {
-  textColor: semantics.color.text.interactive.navigation.primary.base,
+  textColor: semantics.color.institutional.linkColor,
   textHoverColor: semantics.color.text.interactive.navigation.primary.hover,
   textDisabledColor: semantics.color.text.interactive.disabled.base,
   onColorTextColor: semantics.color.text.interactive.navigation.primaryOnColor.base,

package/es/themes/newThemes/legacyCanvas/components/listItem.js

@@ -23,7 +23,7 @@
  */
 import semantics from "../semantics.js";
 const listItem = {
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   fontFamily: semantics.fontFamily.base,
   fontSizeLarge: semantics.fontSize.textLg,
   fontSizeMedium: semantics.fontSize.textBase,

package/es/themes/newThemes/legacyCanvas/components/menuGroup.js

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

package/es/themes/newThemes/legacyCanvas/components/menuItem.js

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

package/es/themes/newThemes/legacyCanvas/components/metric.js

@@ -23,10 +23,10 @@
  */
 import semantics from "../semantics.js";
 const metric = {
-  labelColor: semantics.color.text.base,
+  labelColor: semantics.color.institutional.brandFontColorDark,
   labelFontSize: semantics.fontSize.textXs,
   paddingHorizontal: semantics.spacing.spaceSm,
-  valueColor: semantics.color.text.base,
+  valueColor: semantics.color.institutional.brandFontColorDark,
   valueFontSize: semantics.fontSize.textXl,
   gapTexts: semantics.spacing.spaceSm,
   labelLineHeight: semantics.lineHeight.standalone.textXs,

package/es/themes/newThemes/legacyCanvas/components/optionsItem.js

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

package/es/themes/newThemes/legacyCanvas/components/progressCircle.js

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

package/es/themes/newThemes/legacyCanvas/components/radioInput.js

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

package/es/themes/newThemes/legacyCanvas/components/rangeInput.js

@@ -23,11 +23,11 @@
  */
 import semantics from "../semantics.js";
 const rangeInput = {
-  handleBackground: semantics.color.background.brand,
-  handleHoverBackground: semantics.color.background.brand,
-  handleFocusBackground: semantics.color.background.brand,
-  handleFocusOutlineColor: semantics.color.background.brand,
-  handleShadowColor: semantics.color.background.brand,
+  handleBackground: semantics.color.institutional.brandPrimary,
+  handleHoverBackground: semantics.color.institutional.brandPrimary,
+  handleFocusBackground: semantics.color.institutional.brandPrimary,
+  handleFocusOutlineColor: semantics.color.institutional.brandPrimary,
+  handleShadowColor: semantics.color.institutional.brandPrimary,
   handleBorderColor: semantics.color.stroke.onColor,
   handleBorderSize: semantics.borderWidth.md,
   handleFocusOutlineWidth: "0.75em",

package/es/themes/newThemes/legacyCanvas/components/sideNavBar.js

@@ -23,9 +23,9 @@
  */
 import semantics from "../semantics.js";
 const sideNavBar = {
-  backgroundColor: semantics.color.background.dark,
+  backgroundColor: semantics.color.institutional.brandGlobalNavBgd,
   fill: semantics.color.icon.onColor,
-  fontColor: semantics.color.text.onColor,
+  fontColor: semantics.color.institutional.brandGlobalNavMenuItemTextColor,
   minimizedWidth: "3.375rem",
   toggleTransition: "300ms",
   width: "5.25rem",

package/es/themes/newThemes/legacyCanvas/components/sideNavBarItem.js

@@ -27,15 +27,15 @@ const sideNavBarItem = {
   borderRadius: "0rem",
   backgroundColor: "transparent",
   contentPadding: "0.375rem",
-  fontColor: semantics.color.text.onColor,
+  fontColor: semantics.color.institutional.brandGlobalNavMenuItemTextColor,
   fontFamily: semantics.fontFamily.base,
   fontSize: semantics.fontSize.textSm,
   fontWeight: semantics.fontWeight.body.base,
-  hoverBackgroundColor: semantics.color.background.interactive.action.primary.hover,
+  hoverBackgroundColor: semantics.color.institutional.globalNavLinkHover,
   lineHeight: semantics.lineHeight.paragraph.base,
   linkTextDecoration: "none",
   selectedBackgroundColor: semantics.color.background.base,
-  selectedFontColor: semantics.color.text.interactive.navigation.primary.base,
+  selectedFontColor: semantics.color.institutional.brandGlobalNavMenuItemTextColorActive,
   innerFocusOutlineColor: semantics.color.stroke.interactive.focusRing.onColor,
   selectedInnerFocusOutlineColor: semantics.color.stroke.interactive.focusRing.base,
   outerFocusOutlineColor: semantics.color.stroke.base,

package/es/themes/newThemes/legacyCanvas/components/table.js

@@ -24,7 +24,7 @@
 import semantics from "../semantics.js";
 const table = {
   background: semantics.color.background.base,
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   fontFamily: semantics.fontFamily.base,
   fontSize: semantics.fontSize.textBase,
   fontWeight: semantics.fontWeight.body.base

package/es/themes/newThemes/legacyCanvas/components/tableRow.js

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

package/es/themes/newThemes/legacyCanvas/components/tabsPanel.js

@@ -25,7 +25,7 @@ import semantics from "../semantics.js";
 const tabsPanel = {
   background: semantics.color.background.base,
   borderColor: semantics.color.stroke.base,
-  textColor: semantics.color.text.base,
+  textColor: semantics.color.institutional.brandFontColorDark,
   borderWidth: semantics.borderWidth.sm,
   defaultOverflowY: "auto",
   fontFamily: semantics.fontFamily.base,

package/es/themes/newThemes/legacyCanvas/components/tabsTab.js

@@ -23,14 +23,14 @@
  */
 import semantics from "../semantics.js";
 const tabsTab = {
-  defaultTextColor: semantics.color.text.base,
+  defaultTextColor: semantics.color.institutional.brandFontColorDark,
   defaultHoverBorderColor: semantics.color.stroke.base,
-  defaultSelectedBorderColor: semantics.color.stroke.brand,
+  defaultSelectedBorderColor: semantics.color.institutional.brandPrimary,
   fontFamily: semantics.fontFamily.base,
   fontSize: semantics.fontSize.textBase,
   fontWeight: semantics.fontWeight.body.base,
   lineHeight: semantics.lineHeight.standalone.base,
-  secondaryTextColor: semantics.color.text.base,
+  secondaryTextColor: semantics.color.institutional.brandFontColorDark,
   secondarySelectedTextColor: semantics.color.text.base,
   secondarySelectedBackground: semantics.color.background.base,
   secondarySelectedBorderColor: semantics.color.stroke.base,

package/es/themes/newThemes/legacyCanvas/components/tag.js

@@ -31,7 +31,7 @@ const tag = {
   inlineBorderStyle: "solid",
   defaultBorderWidth: semantics.borderWidth.sm,
   inlineBorderWidth: semantics.borderWidth.sm,
-  defaultColor: semantics.color.text.base,
+  defaultColor: semantics.color.institutional.brandFontColorDark,
   inlineColor: semantics.color.text.base,
   fontFamily: semantics.fontFamily.base,
   fontSizeLarge: semantics.fontSize.textBase,

package/es/themes/newThemes/legacyCanvas/components/text.js

@@ -47,9 +47,9 @@ const text = {
   letterSpacingNormal: "0rem",
   aiBackgroundColor: semantics.color.background.aiText,
   aiColor: semantics.color.text.aiColor,
-  primaryColor: semantics.color.text.interactive.navigation.primary.base,
+  primaryColor: semantics.color.institutional.brandPrimary,
   errorColor: semantics.color.text.error,
-  baseColor: semantics.color.text.base,
+  baseColor: semantics.color.institutional.brandFontColorDark,
   baseOnColor: semantics.color.text.onColor,
   inverseColor: semantics.color.text.inverse,
   mutedColor: semantics.color.text.muted,

package/es/themes/newThemes/legacyCanvas/components/textArea.js

@@ -35,8 +35,8 @@ const textArea = {
   successBorderColor: semantics.color.stroke.interactive.action.success.secondary.base,
   borderRadius: semantics.borderRadius.interactive.base,
   borderWidth: semantics.borderWidth.interactive.base,
-  textColor: semantics.color.text.interactive.input.base,
-  textReadonlyColor: semantics.color.text.interactive.input.readonly,
+  textColor: semantics.color.institutional.brandFontColorDark,
+  textReadonlyColor: semantics.color.institutional.brandFontColorDark,
   textDisabledColor: semantics.color.text.interactive.input.disabled,
   placeholderColor: semantics.color.text.interactive.input.placeholder,
   placeholderHoverColor: semantics.color.text.interactive.input.hover,

package/es/themes/newThemes/legacyCanvas/components/textInput.js

@@ -35,8 +35,8 @@ const textInput = {
   successBorderColor: semantics.color.stroke.interactive.input.base,
   borderRadius: semantics.borderRadius.interactive.base,
   borderWidth: semantics.borderWidth.interactive.base,
-  textColor: semantics.color.text.interactive.input.base,
-  textReadonlyColor: semantics.color.text.interactive.input.readonly,
+  textColor: semantics.color.institutional.brandFontColorDark,
+  textReadonlyColor: semantics.color.institutional.brandFontColorDark,
   textDisabledColor: semantics.color.text.interactive.input.disabled,
   placeholderColor: semantics.color.text.interactive.input.placeholder,
   placeholderHoverColor: semantics.color.text.interactive.input.placeholder,

package/es/themes/newThemes/legacyCanvas/components/toggle.js

@@ -44,8 +44,8 @@ const toggle = {
   checkedBackgroundHoverColor: semantics.color.background.success,
   checkedBackgroundDisabledColor: semantics.color.background.success,
   checkedBackgroundReadonlyColor: semantics.color.background.success,
-  labelColor: semantics.color.text.base,
-  labelDisabledColor: semantics.color.text.base,
+  labelColor: semantics.color.institutional.brandFontColorDark,
+  labelDisabledColor: semantics.color.institutional.brandFontColorDark,
   uncheckedIconBorderColor: semantics.color.stroke.strong,
   uncheckedIconErrorBorderColor: semantics.color.stroke.strong,
   uncheckedIconBorderHoverColor: semantics.color.stroke.strong,

package/es/themes/newThemes/legacyCanvas/components/toggleDetails.js

@@ -30,7 +30,7 @@ const toggleDetails = {
   fontWeight: semantics.fontWeight.body.base,
   iconMargin: "0.375rem",
   lineHeight: semantics.lineHeight.paragraph.base,
-  textColor: semantics.color.text.base,
+  textColor: semantics.color.institutional.brandFontColorDark,
   toggleBorderRadius: semantics.borderRadius.interactive.base,
   toggleBorderStyle: "solid",
   toggleBorderWidth: semantics.borderWidth.md,

package/es/themes/newThemes/legacyCanvas/components/topNavBarItem.js

@@ -26,8 +26,6 @@ const topNavBarItem = {
   fontSize: semantics.fontSize.textBase,
   fontFamily: semantics.fontFamily.base,
   fontWeight: semantics.fontWeight.body.base,
-  color: semantics.color.text.base,
-  colorInverse: semantics.color.text.inverse,
   itemInlinePadding: semantics.spacing.spaceSm,
   itemSpacing: semantics.spacing.spaceSm,
   iconTextGap: semantics.spacing.spaceSm,
@@ -35,6 +33,8 @@ const topNavBarItem = {
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
   activeIndicatorColorInverse: semantics.color.text.base,
-  activeIndicatorWidth: semantics.borderWidth.md
+  activeIndicatorWidth: semantics.borderWidth.md,
+  color: "inherit",
+  colorInverse: "inherit"
 };
 export default topNavBarItem;

package/es/themes/newThemes/legacyCanvas/components/treeBrowserTreeButton.js

@@ -33,7 +33,7 @@ const treeBrowserTreeButton = {
   descriptorFontSizeMedium: semantics.fontSize.textXs,
   descriptorFontSizeSmall: semantics.fontSize.textXs,
   descriptorMarginTop: semantics.spacing.space2xs,
-  descriptorTextColor: semantics.color.text.base,
+  descriptorTextColor: semantics.color.institutional.brandFontColorDark,
   hoverBackgroundColor: semantics.color.background.brand,
   hoverTextColor: semantics.color.text.onColor,
   nameFontSizeLarge: semantics.fontSize.textBase,

package/es/themes/newThemes/legacyCanvas/components/view.js

@@ -24,7 +24,7 @@
 import semantics from "../semantics.js";
 const view = {
   fontFamily: semantics.fontFamily.base,
-  color: semantics.color.text.base,
+  color: semantics.color.institutional.brandFontColorDark,
   colorPrimaryInverse: semantics.color.text.onColor,
   borderColorPrimary: semantics.color.stroke.muted,
   borderColorSecondary: semantics.color.stroke.base,

package/es/themes/newThemes/legacyCanvas/semantics.js

@@ -505,7 +505,18 @@ const semantics = {
       "shadowColor1": "rgba(0,0,0,0.1)",
       "shadowColor2": "rgba(0,0,0,0.2)"
     },
-    "transparentColor": primitives.color.transparent
+    "transparentColor": primitives.color.transparent,
+    "institutional": {
+      "brandPrimary": primitives.color.blue.blue100,
+      "brandFontColorDark": primitives.color.grey.grey170,
+      "linkColor": primitives.color.blue.blue100,
+      "brandButtonPrimaryBgd": primitives.color.blue.blue100,
+      "brandButtonPrimaryText": primitives.color.white,
+      "brandGlobalNavBgd": primitives.color.grey.grey150,
+      "globalNavLinkHover": primitives.color.grey.grey170,
+      "brandGlobalNavMenuItemTextColor": primitives.color.white,
+      "brandGlobalNavMenuItemTextColorActive": primitives.color.blue.blue100
+    }
   },
   "dropShadow": {
     "x": {

package/es/themes/newThemes/legacyCanvasHighContrast/components/alert.js

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

package/es/themes/newThemes/legacyCanvasHighContrast/components/badge.js

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

package/es/themes/newThemes/legacyCanvasHighContrast/components/baseButton.js

@@ -26,9 +26,9 @@ const baseButton = {
   primaryActiveBackground: semantics.color.background.interactive.action.primary.active,
   primaryActiveBorderColor: semantics.color.stroke.interactive.action.primary.active,
   primaryActiveTextColor: semantics.color.text.interactive.action.primary.active,
-  primaryBackground: semantics.color.background.interactive.action.primary.base,
-  primaryBorderColor: semantics.color.stroke.interactive.action.primary.base,
-  primaryColor: semantics.color.text.interactive.action.primary.base,
+  primaryBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantics.color.institutional.brandButtonPrimaryText,
   primaryDisabledBackgroundColor: semantics.color.background.interactive.action.primary.disabled,
   primaryDisabledBorderColor: semantics.color.stroke.interactive.action.primary.disabled,
   primaryDisabledTextColor: semantics.color.text.interactive.action.primary.disabled,

package/es/themes/newThemes/legacyCanvasHighContrast/components/billboard.js

@@ -35,7 +35,7 @@ const billboard = {
   buttonHoverBorderStyle: "dashed",
   buttonBorderRadius: "0.5rem",
   messageColor: semantics.color.text.interactive.navigation.primary.base,
-  messageColorClickable: semantics.color.text.interactive.navigation.primary.base,
+  messageColorClickable: semantics.color.institutional.linkColor,
   clickableActiveBg: semantics.color.background.interactive.action.primary.active,
   clickableActiveText: semantics.color.text.onColor,
   messageFontSizeSmall: semantics.fontSize.textSm,