@instructure/ui-themes 11.7.4-snapshot-53 → 11.7.4-snapshot-80

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-53](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-53) (2026-06-22)
+## [11.7.4-snapshot-80](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-80) (2026-07-07)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

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

@@ -22,9 +22,9 @@
  * SOFTWARE.
  */
 
-const grid = semantic => ({
-  mediumMin: semantic.size.media.mediumMin,
-  largeMin: semantic.size.media.largeMin,
-  xLargeMin: semantic.size.media.xLargeMin
+const grid = () => ({
+  mediumMin: "48em",
+  largeMin: "62em",
+  xLargeMin: "75em"
 });
 export default grid;

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

@@ -23,9 +23,9 @@
  */
 
 const gridCol = semantic => ({
-  mediumMin: semantic.size.media.mediumMin,
-  largeMin: semantic.size.media.largeMin,
-  xLargeMin: semantic.size.media.xLargeMin,
+  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,9 @@
  */
 
 const gridRow = semantic => ({
-  mediumMin: semantic.size.media.mediumMin,
-  largeMin: semantic.size.media.largeMin,
-  xLargeMin: semantic.size.media.xLargeMin,
+  mediumMin: "48em",
+  largeMin: "62em",
+  xLargeMin: "75em",
   spacingLarge: "2.25rem",
   spacingMedium: semantic.spacing.spaceXl,
   spacingSmall: semantic.spacing.spaceMd

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

@@ -23,6 +23,7 @@
  */
 
 const mask = semantic => ({
-  backgroundColor: semantic.color.background.overlay.base
+  backgroundColor: semantic.color.background.overlay.base,
+  zIndex: 9999
 });
 export default mask;

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

@@ -53,6 +53,7 @@ const modal = semantic => ({
       type: "dropShadow"
     }
   },
-  borderWidth: semantic.borderWidth.sm
+  borderWidth: semantic.borderWidth.sm,
+  fullScreenMargin: "40px"
 });
 export default modal;

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

@@ -50,7 +50,7 @@ const semantics = primitives => ({
       "interactive": {
         "input": {
           "base": primitives.color.grey.grey190,
-          "hover": primitives.color.grey.grey170,
+          "hover": primitives.color.grey.grey190,
           "readonly": primitives.color.grey.grey100,
           "disabled": primitives.color.grey.grey150,
           "selected": primitives.color.white
@@ -375,8 +375,8 @@ const semantics = primitives => ({
           "onColor": primitives.color.white
         },
         "input": {
-          "base": primitives.color.grey.grey70,
-          "hover": primitives.color.grey.grey60,
+          "base": primitives.color.grey.grey110,
+          "hover": primitives.color.grey.grey80,
           "readonly": primitives.color.grey.grey70,
           "disabled": primitives.color.grey.grey130,
           "selected": primitives.color.white
@@ -489,9 +489,9 @@ const semantics = primitives => ({
         },
         "input": {
           "base": primitives.color.white,
-          "hover": primitives.color.grey.grey40,
+          "hover": primitives.color.grey.grey60,
           "readonly": primitives.color.white,
-          "placeholder": primitives.color.grey.grey60,
+          "placeholder": primitives.color.grey.grey80,
           "disabled": primitives.color.grey.grey60
         },
         "navigation": {
@@ -709,6 +709,8 @@ const semantics = primitives => ({
       "linkColor": primitives.color.blue.blue50,
       "brandButtonPrimaryBgd": primitives.color.navy.navy10,
       "brandButtonPrimaryText": primitives.color.navy.navy170,
+      "brandButtonSecondaryBgd": primitives.color.navy.navy130,
+      "brandButtonSecondaryText": primitives.color.white,
       "brandGlobalNavBgd": primitives.color.grey.grey170,
       "globalNavLinkHover": primitives.color.grey.grey170,
       "brandGlobalNavMenuItemTextColor": primitives.color.white,
@@ -805,22 +807,14 @@ const semantics = primitives => ({
         "md": primitives.size.size24,
         "lg": primitives.size.size24
       }
-    },
-    "breakpoints": {
-      "xxs": "8em",
-      "xs": "16em",
-      "sm": "30em",
-      "md": "48em",
-      "lg": "62em",
-      "desktop": "64em",
-      "xl": "75em"
-    },
-    "media": {
-      "mediumMin": "48em",
-      "largeMin": "62em",
-      "xLargeMin": "75em"
     }
   },
+  "breakpoints": {
+    "sm": "30em",
+    "md": "48em",
+    "lg": "64em",
+    "xl": "80em"
+  },
   "spacing": {
     "space2xs": primitives.size.size2,
     "spaceXs": primitives.size.size4,

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

@@ -23,6 +23,12 @@
  */
 
 const sharedTokens = semantic => ({
+  breakpoints: {
+    sm: semantic.breakpoints.sm,
+    md: semantic.breakpoints.md,
+    lg: semantic.breakpoints.lg,
+    xl: semantic.breakpoints.xl
+  },
   borderRadius: {
     xs: semantic.borderRadius.xs,
     sm: semantic.borderRadius.sm,

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

@@ -24,8 +24,6 @@
 
 const baseButton = semantic => ({
   primaryBackground: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
-  primaryBorderColor: semantic.color.institutional.brandButtonPrimaryBgd,
   primaryHoverBackground: {
     value: semantic.color.institutional.brandButtonPrimaryBgd,
     modify: {
@@ -34,18 +32,69 @@ const baseButton = semantic => ({
       space: "hsl"
     }
   },
-  primaryHoverBorderColor: semantic.color.stroke.interactive.action.primary.hover,
-  primaryHoverTextColor: semantic.color.text.interactive.action.primary.hover,
-  primaryActiveBackground: semantic.color.background.interactive.action.primary.active,
-  primaryActiveBorderColor: semantic.color.stroke.interactive.action.primary.active,
-  primaryActiveTextColor: semantic.color.text.interactive.action.primary.active,
-  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,
+  primaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryDisabledBackgroundColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: {
+    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"
+    }
+  },
+  primaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryDisabledBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryActiveTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryDisabledTextColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryGhostColor: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryGhostHoverBackground: semantic.color.background.interactive.action.tertiary.hover,
+  primaryGhostHoverBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryGhostActiveBackground: semantic.color.transparentColor,
+  primaryGhostBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
   primaryInverseActiveBackground: semantic.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantic.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.base,
@@ -62,21 +111,70 @@ 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,
-  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,
+  secondaryBackground: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryHoverTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  secondaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryActiveTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  secondaryDisabledBackgroundColor: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryDisabledTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryDisabledBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryGhostBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
   secondaryOnColorActiveBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.active,
   secondaryOnColorActiveTextColor: semantic.color.text.interactive.action.secondaryOnColor.active,
   secondaryOnColorDisabledBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.disabled,

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

@@ -22,9 +22,9 @@
  * SOFTWARE.
  */
 
-const grid = semantic => ({
-  mediumMin: semantic.size.media.mediumMin,
-  largeMin: semantic.size.media.largeMin,
-  xLargeMin: semantic.size.media.xLargeMin
+const grid = () => ({
+  mediumMin: "48em",
+  largeMin: "62em",
+  xLargeMin: "75em"
 });
 export default grid;

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

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

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

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

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

@@ -60,10 +60,10 @@ const icon = semantic => ({
   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,
-  actionSecondaryDisabledColor: semantic.color.icon.interactive.action.secondary.disabled,
+  actionSecondaryBaseColor: semantic.color.institutional.brandButtonSecondaryText,
+  actionSecondaryHoverColor: semantic.color.institutional.brandButtonSecondaryText,
+  actionSecondaryActiveColor: semantic.color.institutional.brandButtonSecondaryText,
+  actionSecondaryDisabledColor: semantic.color.institutional.brandButtonSecondaryText,
   actionStatusBaseColor: semantic.color.icon.interactive.action.status.base,
   actionStatusHoverColor: semantic.color.icon.interactive.action.status.hover,
   actionStatusActiveColor: semantic.color.icon.interactive.action.status.active,
@@ -74,10 +74,10 @@ 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,
-  actionPrimaryDisabledColor: semantic.color.icon.interactive.action.primary.disabled,
+  actionPrimaryBaseColor: semantic.color.institutional.brandButtonPrimaryText,
+  actionPrimaryHoverColor: semantic.color.institutional.brandButtonPrimaryText,
+  actionPrimaryActiveColor: semantic.color.institutional.brandButtonPrimaryText,
+  actionPrimaryDisabledColor: semantic.color.institutional.brandButtonPrimaryText,
   actionPrimaryOnColorBaseColor: semantic.color.icon.interactive.action.primaryOnColor.base,
   actionPrimaryOnColorHoverColor: semantic.color.icon.interactive.action.primaryOnColor.hover,
   actionPrimaryOnColorActiveColor: semantic.color.icon.interactive.action.primaryOnColor.active,

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

@@ -23,6 +23,7 @@
  */
 
 const mask = semantic => ({
-  backgroundColor: semantic.color.background.overlay.base
+  backgroundColor: semantic.color.background.overlay.base,
+  zIndex: 9999
 });
 export default mask;

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

@@ -53,6 +53,7 @@ const modal = semantic => ({
       type: "dropShadow"
     }
   },
-  borderWidth: semantic.borderWidth.sm
+  borderWidth: semantic.borderWidth.sm,
+  fullScreenMargin: "40px"
 });
 export default modal;

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

@@ -121,7 +121,7 @@ const semantics = primitives => ({
           },
           "tertiary": {
             "hover": primitives.color.blue.blue20,
-            "active": primitives.color.blue.blue20
+            "active": primitives.color.transparent
           },
           "disabled": primitives.color.grey.grey30,
           "ghost": {
@@ -709,6 +709,8 @@ const semantics = primitives => ({
       "linkColor": primitives.color.blue.blue100,
       "brandButtonPrimaryBgd": primitives.color.blue.blue100,
       "brandButtonPrimaryText": primitives.color.white,
+      "brandButtonSecondaryBgd": primitives.color.grey.grey10,
+      "brandButtonSecondaryText": primitives.color.grey.grey170,
       "brandGlobalNavBgd": primitives.color.grey.grey150,
       "globalNavLinkHover": primitives.color.grey.grey170,
       "brandGlobalNavMenuItemTextColor": primitives.color.white,
@@ -805,22 +807,14 @@ const semantics = primitives => ({
         "md": primitives.size.size20,
         "lg": primitives.size.size28
       }
-    },
-    "breakpoints": {
-      "xxs": "8em",
-      "xs": "16em",
-      "sm": "30em",
-      "md": "48em",
-      "lg": "62em",
-      "desktop": "64em",
-      "xl": "75em"
-    },
-    "media": {
-      "mediumMin": "48em",
-      "largeMin": "62em",
-      "xLargeMin": "75em"
     }
   },
+  "breakpoints": {
+    "sm": "30em",
+    "md": "48em",
+    "lg": "64em",
+    "xl": "80em"
+  },
   "spacing": {
     "space2xs": primitives.size.size2,
     "spaceXs": primitives.size.size4,

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

@@ -23,6 +23,12 @@
  */
 
 const sharedTokens = semantic => ({
+  breakpoints: {
+    sm: semantic.breakpoints.sm,
+    md: semantic.breakpoints.md,
+    lg: semantic.breakpoints.lg,
+    xl: semantic.breakpoints.xl
+  },
   borderRadius: {
     xs: semantic.borderRadius.xs,
     sm: semantic.borderRadius.sm,

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

@@ -24,8 +24,6 @@
 
 const baseButton = semantic => ({
   primaryBackground: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
-  primaryBorderColor: semantic.color.institutional.brandButtonPrimaryBgd,
   primaryHoverBackground: {
     value: semantic.color.institutional.brandButtonPrimaryBgd,
     modify: {
@@ -34,18 +32,69 @@ const baseButton = semantic => ({
       space: "hsl"
     }
   },
-  primaryHoverBorderColor: semantic.color.stroke.interactive.action.primary.hover,
-  primaryHoverTextColor: semantic.color.text.interactive.action.primary.hover,
-  primaryActiveBackground: semantic.color.background.interactive.action.primary.active,
-  primaryActiveBorderColor: semantic.color.stroke.interactive.action.primary.active,
-  primaryActiveTextColor: semantic.color.text.interactive.action.primary.active,
-  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,
+  primaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryDisabledBackgroundColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: {
+    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"
+    }
+  },
+  primaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryDisabledBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryActiveTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryDisabledTextColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryGhostColor: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryGhostHoverBackground: semantic.color.background.interactive.action.tertiary.hover,
+  primaryGhostHoverBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "alpha",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  primaryGhostActiveBackground: semantic.color.transparentColor,
+  primaryGhostBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
   primaryInverseActiveBackground: semantic.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantic.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.base,
@@ -62,21 +111,70 @@ 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,
-  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,
+  secondaryBackground: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryHoverTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  secondaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryActiveTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryActiveBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  secondaryDisabledBackgroundColor: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryDisabledTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryDisabledBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryGhostBorderColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
   secondaryOnColorActiveBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.active,
   secondaryOnColorActiveTextColor: semantic.color.text.interactive.action.secondaryOnColor.active,
   secondaryOnColorDisabledBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.disabled,