@instructure/ui-themes 11.7.3-snapshot-6 → 11.7.3-snapshot-25

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.3-snapshot-6](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-6) (2026-04-29)
+## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

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

@@ -24,7 +24,7 @@
 
 const modal = semantics => ({
   autoMinWidth: "16em",
-  backgroundColor: semantics.color.background.container,
+  backgroundColor: semantics.color.background.elevatedSurface.base,
   borderColor: semantics.color.stroke.container.base,
   inverseBackgroundColor: semantics.color.background.dark,
   inverseBorderColor: semantics.color.stroke.container.dark,

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

@@ -27,7 +27,7 @@ const modalFooter = semantics => ({
   inverseBorderColor: semantics.color.stroke.container.dark,
   borderRadius: semantics.borderRadius.xl,
   borderWidth: semantics.borderWidth.sm,
-  backgroundColor: semantics.color.background.container,
+  backgroundColor: semantics.color.background.elevatedSurface.base,
   inverseBackgroundColor: semantics.color.background.dark,
   padding: semantics.spacing.padding.container.md,
   paddingCompact: semantics.spacing.padding.container.xs

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

@@ -23,7 +23,7 @@
  */
 
 const modalHeader = semantics => ({
-  backgroundColor: semantics.color.background.container,
+  backgroundColor: semantics.color.background.elevatedSurface.base,
   inverseBackgroundColor: semantics.color.background.dark,
   borderColor: semantics.color.stroke.container.base,
   inverseBorderColor: semantics.color.stroke.container.dark,

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

@@ -27,7 +27,7 @@ const optionsItem = semantics => ({
   background: semantics.color.background.elevatedSurface.base,
   beforeLabelContentVOffset: semantics.spacing.spaceMd,
   color: semantics.color.text.base,
-  descriptionColor: semantics.color.text.muted,
+  descriptionColor: semantics.color.text.base,
   descriptionFontSize: semantics.fontSize.textSm,
   descriptionFontWeight: semantics.fontWeight.body.base,
   descriptionLineHeight: semantics.lineHeight.paragraph.base,

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

@@ -26,16 +26,15 @@ const sideNavBarNew = semantics => ({
   backgroundColor: semantics.color.background.elevatedSurface.base,
   fill: semantics.color.icon.interactive.action.primaryOnColor.base,
   borderColor: semantics.color.stroke.muted,
-  fontColor: semantics.color.text.base,
-  minimizedminWidth: "6.75rem",
+  textColor: semantics.color.text.base,
+  minimizedminWidth: "6.5rem",
   toggleTransition: "300ms",
-  minWidth: "17rem",
+  minWidth: "17.25rem",
   margin: semantics.spacing.spaceMd,
   minimizedMargin: "0.375rem",
   mainNavMargin: "0.75rem",
   mainNavMinimizedMargin: "0rem",
   mainNavGap: semantics.spacing.padding.container.xxs,
-  mainNavMinimizedGap: "0rem",
   navItemsGap: semantics.spacing.spaceXs,
   boxShadow: {
     0: {
@@ -56,6 +55,57 @@ const sideNavBarNew = semantics => ({
     }
   },
   borderRadius: semantics.borderRadius.container.md,
-  minimizedBorderRadius: semantics.borderRadius.container.sm
+  minimizedBorderRadius: semantics.borderRadius.container.sm,
+  borderWidth: semantics.borderWidth.sm,
+  item: {
+    horizontalPadding: semantics.spacing.spaceSm,
+    verticalPadding: "0.25rem",
+    iconWrapperHeight: "2.25rem",
+    borderRadius: semantics.borderRadius.lg,
+    backgroundColor: "transparent",
+    fontColor: semantics.color.text.base,
+    fontFamily: semantics.fontFamily.base,
+    fontSize: semantics.fontSize.textBase,
+    fontWeight: semantics.fontWeight.body.base,
+    innerFocusOutlineColor: semantics.color.stroke.interactive.focusRing.base,
+    outerFocusOutlineColor: semantics.color.transparentColor,
+    hoverBackgroundColor: semantics.color.background.interactive.action.tertiary.hover,
+    lineHeight: semantics.lineHeight.paragraph.base,
+    linkTextDecoration: "none",
+    currentBackgroundColor: semantics.color.background.brand,
+    selectedBackgroundColor: semantics.color.background.interactive.action.tertiary.active,
+    currentTextColor: semantics.color.text.inverse,
+    selectedAccountBackgroundColor: semantics.color.background.interactive.action.tertiary.active,
+    selectedAccountFontColor: semantics.color.text.base,
+    selectedInnerFocusOutlineColor: semantics.color.icon.inverse,
+    selectedOuterFocusOutlineColor: semantics.color.transparentColor
+  },
+  drilldownOption: {
+    backgroundColor: semantics.color.transparentColor,
+    hoverBackgroundColor: semantics.color.background.interactive.action.tertiary.hover,
+    activeBackgroundColor: semantics.color.background.interactive.action.tertiary.active,
+    selectedBackgroundColor: semantics.color.background.brand,
+    textColor: semantics.color.text.base,
+    selectedTextColor: semantics.color.text.inverse,
+    logoutTextColor: semantics.color.text.error,
+    borderRadius: semantics.borderRadius.lg
+  },
+  button: {
+    textColor: semantics.color.text.base
+  },
+  subNav: {
+    strokeColor: semantics.color.stroke.muted,
+    textColor: semantics.color.text.base,
+    padding: semantics.spacing.spaceMd,
+    gap: semantics.spacing.spaceSm
+  },
+  institutionLogo: {
+    textColor: semantics.color.text.base,
+    strokeColor: semantics.color.stroke.muted
+  },
+  insitutionLogo: {
+    padding: semantics.spacing.spaceSm,
+    gap: semantics.spacing.spaceMd
+  }
 });
 export default sideNavBarNew;

package/es/themes/newThemeTokens/dark/index.js

@@ -88,7 +88,6 @@ import rgbaInput from "./components/rgbaInput.js";
 import select from "./components/select.js";
 import sideNavBar from "./components/sideNavBar.js";
 import sideNavBarItem from "./components/sideNavBarItem.js";
-import sideNavBarItemNew from "./components/sideNavBarItemNew.js";
 import sideNavBarNew from "./components/sideNavBarNew.js";
 import slider from "./components/slider.js";
 import sourceCodeEditor from "./components/sourceCodeEditor.js";
@@ -224,7 +223,6 @@ const theme = {
     AppNavItem: appNavItem,
     Byline: byline,
     SideNavBarNew: sideNavBarNew,
-    SideNavBarItemNew: sideNavBarItemNew,
     Img: img
   }
 };

package/es/themes/newThemeTokens/dark/primitives.js

@@ -44,7 +44,9 @@ const primitives = {
       "green150": "#004D1F",
       "green160": "#01451B",
       "green170": "#033C18",
-      "green180": "#051F09"
+      "green180": "#0D2812",
+      "green190": "#051F09",
+      "green200": "#011A05"
     },
     "grey": {
       "grey10": "#F2F4F5",
@@ -64,7 +66,9 @@ const primitives = {
       "grey150": "#334450",
       "grey160": "#2D3D49",
       "grey170": "#273540",
-      "grey180": "#1C222B"
+      "grey180": "#1C222B",
+      "grey190": "#171B21",
+      "grey200": "#10141A"
     },
     "blue": {
       "blue10": "#EDF4FF",
@@ -84,7 +88,9 @@ const primitives = {
       "blue150": "#14446D",
       "blue160": "#123E62",
       "blue170": "#103656",
-      "blue180": "#0A1C2D"
+      "blue180": "#112335",
+      "blue190": "#0A1C2D",
+      "blue200": "#00142A"
     },
     "red": {
       "red10": "#FBF1EF",
@@ -104,7 +110,9 @@ const primitives = {
       "red150": "#810F12",
       "red160": "#750D0F",
       "red170": "#670C0C",
-      "red180": "#311007"
+      "red180": "#38160D",
+      "red190": "#311007",
+      "red200": "#270903"
     },
     "orange": {
       "orange10": "#FCF1ED",
@@ -124,7 +132,9 @@ const primitives = {
       "orange150": "#742700",
       "orange160": "#682400",
       "orange170": "#5A2002",
-      "orange180": "#2B1405"
+      "orange180": "#321B0B",
+      "orange190": "#2B1405",
+      "orange200": "#230D00"
     },
     "plum": {
       "plum10": "#FAF1F6",
@@ -144,7 +154,9 @@ const primitives = {
       "plum150": "#702254",
       "plum160": "#651E4C",
       "plum170": "#591B42",
-      "plum180": "#2F0E23"
+      "plum180": "#351428",
+      "plum190": "#2F0E23",
+      "plum200": "#26051A"
     },
     "violet": {
       "violet10": "#F7F2F8",
@@ -164,7 +176,9 @@ const primitives = {
       "violet150": "#5B2E6F",
       "violet160": "#522965",
       "violet170": "#482458",
-      "violet180": "#26132E"
+      "violet180": "#2C1834",
+      "violet190": "#26132E",
+      "violet200": "#1D0A25"
     },
     "stone": {
       "stone10": "#F4F4F4",
@@ -184,7 +198,9 @@ const primitives = {
       "stone150": "#414141",
       "stone160": "#3A3A3A",
       "stone170": "#333333",
-      "stone180": "#1A1A1A"
+      "stone180": "#222222",
+      "stone190": "#1A1A1A",
+      "stone200": "#141414"
     },
     "sky": {
       "sky10": "#E9F6FF",
@@ -204,7 +220,9 @@ const primitives = {
       "sky150": "#094762",
       "sky160": "#084059",
       "sky170": "#08384E",
-      "sky180": "#071D29"
+      "sky180": "#0E2431",
+      "sky190": "#071D29",
+      "sky200": "#001623"
     },
     "honey": {
       "honey10": "#FCF2E4",
@@ -224,7 +242,9 @@ const primitives = {
       "honey150": "#563D00",
       "honey160": "#4D3600",
       "honey170": "#432F01",
-      "honey180": "#221905"
+      "honey180": "#2A200C",
+      "honey190": "#221905",
+      "honey200": "#1C1200"
     },
     "sea": {
       "sea10": "#E0F9FD",
@@ -244,7 +264,9 @@ const primitives = {
       "sea150": "#014A53",
       "sea160": "#00424A",
       "sea170": "#023941",
-      "sea180": "#051E22"
+      "sea180": "#0D262A",
+      "sea190": "#051E22",
+      "sea200": "#00181B"
     },
     "aurora": {
       "aurora10": "#D8FCEB",
@@ -264,7 +286,9 @@ const primitives = {
       "aurora150": "#014B34",
       "aurora160": "#01442F",
       "aurora170": "#033B29",
-      "aurora180": "#051F15"
+      "aurora180": "#0D271D",
+      "aurora190": "#051F15",
+      "aurora200": "#00190F"
     },
     "navy": {
       "navy10": "#EEF4FD",
@@ -284,7 +308,9 @@ const primitives = {
       "navy150": "#234465",
       "navy160": "#213D5B",
       "navy170": "#1D354F",
-      "navy180": "#061C30"
+      "navy180": "#0D2338",
+      "navy190": "#061C30",
+      "navy200": "#00152A"
     },
     "whiteOpacity10": "rgba(255,255,255,0.1)",
     "whiteOpacity20": "rgba(255,255,255,0.2)",

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

@@ -25,14 +25,14 @@
 const semantics = primitives => ({
   "color": {
     "background": {
-      "base": primitives.color.grey.grey180,
+      "base": primitives.color.grey.grey200,
       "muted": primitives.color.grey.grey170,
       "mutedHover": primitives.color.grey.grey180,
-      "page": primitives.color.grey.grey180,
-      "container": primitives.color.grey.grey170,
+      "page": primitives.color.grey.grey200,
+      "container": primitives.color.grey.grey180,
       "onColor": primitives.color.white,
       "inverse": primitives.color.grey.grey10,
-      "dark": primitives.color.grey.grey170,
+      "dark": primitives.color.grey.grey180,
       "success": primitives.color.green.green100,
       "error": primitives.color.red.red100,
       "warning": primitives.color.orange.orange100,
@@ -49,7 +49,7 @@ const semantics = primitives => ({
       },
       "interactive": {
         "input": {
-          "base": primitives.color.grey.grey180,
+          "base": primitives.color.grey.grey190,
           "hover": primitives.color.grey.grey170,
           "readonly": primitives.color.grey.grey100,
           "disabled": primitives.color.grey.grey150,
@@ -147,7 +147,7 @@ const semantics = primitives => ({
         "aurora": primitives.color.aurora.aurora100
       },
       "elevatedSurface": {
-        "base": primitives.color.grey.grey170,
+        "base": primitives.color.grey.grey190,
         "inverse": primitives.color.grey.grey10
       },
       "overlay": {
@@ -157,7 +157,7 @@ const semantics = primitives => ({
     },
     "stroke": {
       "base": primitives.color.grey.grey100,
-      "muted": primitives.color.grey.grey140,
+      "muted": primitives.color.grey.grey160,
       "strong": primitives.color.grey.grey60,
       "success": primitives.color.green.green100,
       "error": primitives.color.red.red100,
@@ -275,8 +275,8 @@ const semantics = primitives => ({
       }
     },
     "text": {
-      "base": primitives.color.white,
-      "muted": primitives.color.grey.grey60,
+      "base": primitives.color.grey.grey10,
+      "muted": primitives.color.grey.grey50,
       "success": primitives.color.green.green50,
       "error": primitives.color.red.red50,
       "warning": primitives.color.orange.orange50,

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

@@ -23,12 +23,15 @@
  */
 
 const baseButton = semantics => ({
+  primaryBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantics.color.institutional.brandButtonPrimaryText,
+  primaryBorderColor: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryHoverBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryHoverBorderColor: semantics.color.stroke.interactive.action.primary.hover,
+  primaryHoverTextColor: semantics.color.text.interactive.action.primary.hover,
   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.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,
@@ -36,9 +39,6 @@ const baseButton = semantics => ({
   primaryGhostBorderColor: semantics.color.stroke.interactive.action.tertiary.base,
   primaryGhostColor: semantics.color.institutional.brandButtonPrimaryBgd,
   primaryGhostHoverBackground: semantics.color.background.interactive.action.tertiary.hover,
-  primaryHoverBackground: semantics.color.background.interactive.action.primary.hover,
-  primaryHoverBorderColor: semantics.color.stroke.interactive.action.primary.hover,
-  primaryHoverTextColor: semantics.color.text.interactive.action.primary.hover,
   primaryInverseActiveBackground: semantics.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantics.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.base,

package/es/themes/newThemeTokens/legacyCanvas/components/sideNavBarNew.js

@@ -25,16 +25,15 @@
 const sideNavBarNew = semantics => ({
   backgroundColor: semantics.color.background.dark,
   fill: semantics.color.icon.onColor,
-  fontColor: semantics.color.text.onColor,
-  minimizedminWidth: "3.375rem",
+  textColor: semantics.color.text.onColor,
+  minimizedminWidth: "5.75rem",
   toggleTransition: "300ms",
-  minWidth: "5.25rem",
+  minWidth: "15.75rem",
   margin: "0rem",
   minimizedMargin: "0rem",
   mainNavMargin: "0rem",
   mainNavMinimizedMargin: "0rem",
-  mainNavGap: semantics.spacing.padding.container.xxs,
-  mainNavMinimizedGap: "0rem",
+  mainNavGap: "0rem",
   navItemsGap: "0rem",
   boxShadow: {
     0: {
@@ -56,6 +55,57 @@ const sideNavBarNew = semantics => ({
   },
   borderRadius: "0rem",
   minimizedBorderRadius: "0rem",
-  borderColor: semantics.color.stroke.base
+  borderColor: semantics.color.stroke.base,
+  borderWidth: semantics.borderWidth.sm,
+  item: {
+    iconWrapperHeight: "2.25rem",
+    borderRadius: "0rem",
+    backgroundColor: "transparent",
+    horizontalPadding: "0.5rem",
+    verticalPadding: "0.375rem",
+    fontColor: semantics.color.text.onColor,
+    fontFamily: semantics.fontFamily.base,
+    fontSize: semantics.fontSize.textBase,
+    fontWeight: semantics.fontWeight.body.base,
+    hoverBackgroundColor: semantics.color.background.interactive.action.primary.hover,
+    lineHeight: semantics.lineHeight.paragraph.base,
+    linkTextDecoration: "none",
+    currentBackgroundColor: semantics.color.background.base,
+    selectedBackgroundColor: semantics.color.background.interactive.action.tertiary.active,
+    selectedAccountBackgroundColor: semantics.color.background.interactive.action.tertiary.active,
+    currentTextColor: semantics.color.text.interactive.navigation.primary.base,
+    selectedAccountFontColor: semantics.color.text.interactive.navigation.primary.base,
+    innerFocusOutlineColor: semantics.color.stroke.interactive.focusRing.onColor,
+    selectedInnerFocusOutlineColor: semantics.color.stroke.interactive.focusRing.base,
+    outerFocusOutlineColor: semantics.color.stroke.base,
+    selectedOuterFocusOutlineColor: semantics.color.stroke.interactive.focusRing.onColor
+  },
+  drilldownOption: {
+    backgroundColor: semantics.color.transparentColor,
+    hoverBackgroundColor: semantics.color.background.interactive.action.primary.hover,
+    activeBackgroundColor: semantics.color.background.interactive.action.primary.active,
+    selectedBackgroundColor: semantics.color.background.brand,
+    textColor: semantics.color.text.onColor,
+    selectedTextColor: semantics.color.text.interactive.navigation.primary.base,
+    logoutTextColor: semantics.color.text.onColor,
+    borderRadius: "0rem"
+  },
+  button: {
+    textColor: semantics.color.text.onColor
+  },
+  subNav: {
+    strokeColor: semantics.color.stroke.base,
+    textColor: semantics.color.text.onColor,
+    padding: semantics.spacing.spaceMd,
+    gap: semantics.spacing.spaceSm
+  },
+  institutionLogo: {
+    textColor: semantics.color.text.onColor,
+    strokeColor: semantics.color.stroke.base
+  },
+  insitutionLogo: {
+    padding: semantics.spacing.spaceSm,
+    gap: semantics.spacing.spaceMd
+  }
 });
 export default sideNavBarNew;

package/es/themes/newThemeTokens/legacyCanvas/index.js

@@ -88,7 +88,6 @@ import rgbaInput from "./components/rgbaInput.js";
 import select from "./components/select.js";
 import sideNavBar from "./components/sideNavBar.js";
 import sideNavBarItem from "./components/sideNavBarItem.js";
-import sideNavBarItemNew from "./components/sideNavBarItemNew.js";
 import sideNavBarNew from "./components/sideNavBarNew.js";
 import slider from "./components/slider.js";
 import sourceCodeEditor from "./components/sourceCodeEditor.js";
@@ -224,7 +223,6 @@ const theme = {
     AppNavItem: appNavItem,
     Byline: byline,
     SideNavBarNew: sideNavBarNew,
-    SideNavBarItemNew: sideNavBarItemNew,
     Img: img
   }
 };

package/es/themes/newThemeTokens/legacyCanvas/primitives.js

@@ -44,7 +44,9 @@ const primitives = {
       "green150": "#004D1F",
       "green160": "#01451B",
       "green170": "#033C18",
-      "green180": "#051F09"
+      "green180": "#0D2812",
+      "green190": "#051F09",
+      "green200": "#011A05"
     },
     "grey": {
       "grey10": "#F2F4F5",
@@ -64,7 +66,9 @@ const primitives = {
       "grey150": "#334450",
       "grey160": "#2D3D49",
       "grey170": "#273540",
-      "grey180": "#1C222B"
+      "grey180": "#1C222B",
+      "grey190": "#171B21",
+      "grey200": "#10141A"
     },
     "blue": {
       "blue10": "#EDF4FF",
@@ -84,7 +88,9 @@ const primitives = {
       "blue150": "#14446D",
       "blue160": "#123E62",
       "blue170": "#103656",
-      "blue180": "#0A1C2D"
+      "blue180": "#112335",
+      "blue190": "#0A1C2D",
+      "blue200": "#00142A"
     },
     "red": {
       "red10": "#FBF1EF",
@@ -104,7 +110,9 @@ const primitives = {
       "red150": "#810F12",
       "red160": "#750D0F",
       "red170": "#670C0C",
-      "red180": "#311007"
+      "red180": "#38160D",
+      "red190": "#311007",
+      "red200": "#270903"
     },
     "orange": {
       "orange10": "#FCF1ED",
@@ -124,7 +132,9 @@ const primitives = {
       "orange150": "#742700",
       "orange160": "#682400",
       "orange170": "#5A2002",
-      "orange180": "#2B1405"
+      "orange180": "#321B0B",
+      "orange190": "#2B1405",
+      "orange200": "#230D00"
     },
     "plum": {
       "plum10": "#FAF1F6",
@@ -144,7 +154,9 @@ const primitives = {
       "plum150": "#702254",
       "plum160": "#651E4C",
       "plum170": "#591B42",
-      "plum180": "#2F0E23"
+      "plum180": "#351428",
+      "plum190": "#2F0E23",
+      "plum200": "#26051A"
     },
     "violet": {
       "violet10": "#F7F2F8",
@@ -164,7 +176,9 @@ const primitives = {
       "violet150": "#5B2E6F",
       "violet160": "#522965",
       "violet170": "#482458",
-      "violet180": "#26132E"
+      "violet180": "#2C1834",
+      "violet190": "#26132E",
+      "violet200": "#1D0A25"
     },
     "stone": {
       "stone10": "#F4F4F4",
@@ -184,7 +198,9 @@ const primitives = {
       "stone150": "#414141",
       "stone160": "#3A3A3A",
       "stone170": "#333333",
-      "stone180": "#1A1A1A"
+      "stone180": "#222222",
+      "stone190": "#1A1A1A",
+      "stone200": "#141414"
     },
     "sky": {
       "sky10": "#E9F6FF",
@@ -204,7 +220,9 @@ const primitives = {
       "sky150": "#094762",
       "sky160": "#084059",
       "sky170": "#08384E",
-      "sky180": "#071D29"
+      "sky180": "#0E2431",
+      "sky190": "#071D29",
+      "sky200": "#001623"
     },
     "honey": {
       "honey10": "#FCF2E4",
@@ -224,7 +242,9 @@ const primitives = {
       "honey150": "#563D00",
       "honey160": "#4D3600",
       "honey170": "#432F01",
-      "honey180": "#221905"
+      "honey180": "#2A200C",
+      "honey190": "#221905",
+      "honey200": "#1C1200"
     },
     "sea": {
       "sea10": "#E0F9FD",
@@ -244,7 +264,9 @@ const primitives = {
       "sea150": "#014A53",
       "sea160": "#00424A",
       "sea170": "#023941",
-      "sea180": "#051E22"
+      "sea180": "#0D262A",
+      "sea190": "#051E22",
+      "sea200": "#00181B"
     },
     "aurora": {
       "aurora10": "#D8FCEB",
@@ -264,7 +286,9 @@ const primitives = {
       "aurora150": "#014B34",
       "aurora160": "#01442F",
       "aurora170": "#033B29",
-      "aurora180": "#051F15"
+      "aurora180": "#0D271D",
+      "aurora190": "#051F15",
+      "aurora200": "#00190F"
     },
     "navy": {
       "navy10": "#EEF4FD",
@@ -284,7 +308,9 @@ const primitives = {
       "navy150": "#234465",
       "navy160": "#213D5B",
       "navy170": "#1D354F",
-      "navy180": "#061C30"
+      "navy180": "#0D2338",
+      "navy190": "#061C30",
+      "navy200": "#00152A"
     },
     "whiteOpacity10": "rgba(255,255,255,0.1)",
     "whiteOpacity20": "rgba(255,255,255,0.2)",

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

@@ -23,12 +23,15 @@
  */
 
 const baseButton = semantics => ({
+  primaryBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantics.color.institutional.brandButtonPrimaryText,
+  primaryBorderColor: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryHoverBackground: semantics.color.institutional.brandButtonPrimaryBgd,
+  primaryHoverBorderColor: semantics.color.stroke.interactive.action.primary.hover,
+  primaryHoverTextColor: semantics.color.text.interactive.action.primary.hover,
   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.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,
@@ -36,9 +39,6 @@ const baseButton = semantics => ({
   primaryGhostBorderColor: semantics.color.stroke.interactive.action.tertiary.base,
   primaryGhostColor: semantics.color.institutional.brandButtonPrimaryBgd,
   primaryGhostHoverBackground: semantics.color.background.interactive.action.tertiary.hover,
-  primaryHoverBackground: semantics.color.background.interactive.action.primary.hover,
-  primaryHoverBorderColor: semantics.color.stroke.interactive.action.primary.hover,
-  primaryHoverTextColor: semantics.color.text.interactive.action.primary.hover,
   primaryInverseActiveBackground: semantics.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantics.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.base,