@instructure/ui-themes 11.7.2-snapshot-7 → 11.7.2-snapshot-10

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-7](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-7) (2026-03-26)
+## [11.7.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-10) (2026-03-27)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

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

@@ -23,7 +23,6 @@
  */
 import semantics from "../semantics.js";
 const mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark
+  backgroundColor: semantics.color.background.overlay.base
 };
 export default mask;

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

@@ -27,6 +27,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 export default topNavBarActionItems;

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

@@ -34,6 +34,7 @@ const topNavBarItem = {
   activeItemFontWeight: semantics.fontWeight.body.strong,
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
-  activeIndicatorColorInverse: semantics.color.text.base
+  activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md
 };
 export default topNavBarItem;

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

@@ -23,7 +23,6 @@
  */
 import semantics from "../semantics.js";
 const mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark
+  backgroundColor: semantics.color.background.overlay.base
 };
 export default mask;

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

@@ -27,6 +27,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 export default topNavBarActionItems;

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

@@ -34,6 +34,7 @@ const topNavBarItem = {
   activeItemFontWeight: semantics.fontWeight.body.strong,
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
-  activeIndicatorColorInverse: semantics.color.text.base
+  activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md
 };
 export default topNavBarItem;

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

@@ -23,7 +23,6 @@
  */
 import semantics from "../semantics.js";
 const mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark
+  backgroundColor: semantics.color.background.overlay.base
 };
 export default mask;

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

@@ -27,6 +27,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 export default topNavBarActionItems;

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

@@ -34,6 +34,7 @@ const topNavBarItem = {
   activeItemFontWeight: semantics.fontWeight.body.strong,
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
-  activeIndicatorColorInverse: semantics.color.text.base
+  activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md
 };
 export default topNavBarItem;

package/es/themes/newThemes/light/components/mask.js

@@ -23,7 +23,6 @@
  */
 import semantics from "../semantics.js";
 const mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark
+  backgroundColor: semantics.color.background.overlay.base
 };
 export default mask;

package/es/themes/newThemes/light/components/topNavBarActionItems.js

@@ -27,6 +27,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 export default topNavBarActionItems;

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

@@ -34,6 +34,7 @@ const topNavBarItem = {
   activeItemFontWeight: semantics.fontWeight.body.strong,
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
-  activeIndicatorColorInverse: semantics.color.text.base
+  activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md
 };
 export default topNavBarItem;

package/lib/themes/newThemes/dark/components/mask.js

@@ -31,7 +31,6 @@ var _semantics = _interopRequireDefault(require("../semantics"));
  */
 
 const mask = {
-  backgroundColor: _semantics.default.color.background.overlay.base,
-  darkBackgroundColor: _semantics.default.color.background.overlay.dark
+  backgroundColor: _semantics.default.color.background.overlay.base
 };
 var _default = exports.default = mask;

package/lib/themes/newThemes/dark/components/topNavBarActionItems.js

@@ -35,6 +35,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: _semantics.default.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: _semantics.default.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 var _default = exports.default = topNavBarActionItems;

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

@@ -42,6 +42,7 @@ const topNavBarItem = {
   activeItemFontWeight: _semantics.default.fontWeight.body.strong,
   activeItemIndicatorSpacing: _semantics.default.spacing.spaceXs,
   activeIndicatorColor: _semantics.default.color.text.inverse,
-  activeIndicatorColorInverse: _semantics.default.color.text.base
+  activeIndicatorColorInverse: _semantics.default.color.text.base,
+  activeIndicatorWidth: _semantics.default.borderWidth.md
 };
 var _default = exports.default = topNavBarItem;

package/lib/themes/newThemes/legacyCanvas/components/mask.js

@@ -31,7 +31,6 @@ var _semantics = _interopRequireDefault(require("../semantics"));
  */
 
 const mask = {
-  backgroundColor: _semantics.default.color.background.overlay.base,
-  darkBackgroundColor: _semantics.default.color.background.overlay.dark
+  backgroundColor: _semantics.default.color.background.overlay.base
 };
 var _default = exports.default = mask;

package/lib/themes/newThemes/legacyCanvas/components/topNavBarActionItems.js

@@ -35,6 +35,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: _semantics.default.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: _semantics.default.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 var _default = exports.default = topNavBarActionItems;

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

@@ -42,6 +42,7 @@ const topNavBarItem = {
   activeItemFontWeight: _semantics.default.fontWeight.body.strong,
   activeItemIndicatorSpacing: _semantics.default.spacing.spaceXs,
   activeIndicatorColor: _semantics.default.color.text.inverse,
-  activeIndicatorColorInverse: _semantics.default.color.text.base
+  activeIndicatorColorInverse: _semantics.default.color.text.base,
+  activeIndicatorWidth: _semantics.default.borderWidth.md
 };
 var _default = exports.default = topNavBarItem;

package/lib/themes/newThemes/legacyCanvasHighContrast/components/mask.js

@@ -31,7 +31,6 @@ var _semantics = _interopRequireDefault(require("../semantics"));
  */
 
 const mask = {
-  backgroundColor: _semantics.default.color.background.overlay.base,
-  darkBackgroundColor: _semantics.default.color.background.overlay.dark
+  backgroundColor: _semantics.default.color.background.overlay.base
 };
 var _default = exports.default = mask;

package/lib/themes/newThemes/legacyCanvasHighContrast/components/topNavBarActionItems.js

@@ -35,6 +35,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: _semantics.default.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: _semantics.default.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 var _default = exports.default = topNavBarActionItems;

package/lib/themes/newThemes/legacyCanvasHighContrast/components/topNavBarItem.js

@@ -42,6 +42,7 @@ const topNavBarItem = {
   activeItemFontWeight: _semantics.default.fontWeight.body.strong,
   activeItemIndicatorSpacing: _semantics.default.spacing.spaceXs,
   activeIndicatorColor: _semantics.default.color.text.inverse,
-  activeIndicatorColorInverse: _semantics.default.color.text.base
+  activeIndicatorColorInverse: _semantics.default.color.text.base,
+  activeIndicatorWidth: _semantics.default.borderWidth.md
 };
 var _default = exports.default = topNavBarItem;

package/lib/themes/newThemes/light/components/mask.js

@@ -31,7 +31,6 @@ var _semantics = _interopRequireDefault(require("../semantics"));
  */
 
 const mask = {
-  backgroundColor: _semantics.default.color.background.overlay.base,
-  darkBackgroundColor: _semantics.default.color.background.overlay.dark
+  backgroundColor: _semantics.default.color.background.overlay.base
 };
 var _default = exports.default = mask;

package/lib/themes/newThemes/light/components/topNavBarActionItems.js

@@ -35,6 +35,7 @@ const topNavBarActionItems = {
   smallViewportActionItemContainerMaxWidth: "50%",
   smallViewportDropdownMenuActiveOptionFontWeight: _semantics.default.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: _semantics.default.spacing.spaceXs,
-  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg
+  smallViewportDropdownMenuActiveOptionIndicatorWidth: _semantics.default.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor"
 };
 var _default = exports.default = topNavBarActionItems;

package/lib/themes/newThemes/light/components/topNavBarItem.js

@@ -42,6 +42,7 @@ const topNavBarItem = {
   activeItemFontWeight: _semantics.default.fontWeight.body.strong,
   activeItemIndicatorSpacing: _semantics.default.spacing.spaceXs,
   activeIndicatorColor: _semantics.default.color.text.inverse,
-  activeIndicatorColorInverse: _semantics.default.color.text.base
+  activeIndicatorColorInverse: _semantics.default.color.text.base,
+  activeIndicatorWidth: _semantics.default.borderWidth.md
 };
 var _default = exports.default = topNavBarItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-themes",
-  "version": "11.7.2-snapshot-7",
+  "version": "11.7.2-snapshot-10",
   "description": "A library of instructure themes",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -17,11 +17,11 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.2-snapshot-7"
+    "@instructure/ui-babel-preset": "11.7.2-snapshot-10"
   },
   "dependencies": {
     "@tokens-studio/types": "^0.5.2",
-    "@instructure/shared-types": "11.7.2-snapshot-7"
+    "@instructure/shared-types": "11.7.2-snapshot-10"
   },
   "publishConfig": {
     "access": "public"

package/src/themes/newThemes/componentTypes/mask.ts

@@ -22,6 +22,6 @@
  * SOFTWARE.
  */
 
-export type Mask = { backgroundColor: string; darkBackgroundColor: string }
+export type Mask = { backgroundColor: string }
 
 export default Mask

package/src/themes/newThemes/componentTypes/topNavBarActionItems.ts

@@ -28,6 +28,7 @@ export type TopNavBarActionItems = {
   smallViewportDropdownMenuActiveOptionFontWeight: string | number
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: string
   smallViewportDropdownMenuActiveOptionIndicatorWidth: string
+  smallViewportDropdownMenuActiveOptionIndicatorColor: string | number
 }
 
 export default TopNavBarActionItems

package/src/themes/newThemes/componentTypes/topNavBarItem.ts

@@ -35,6 +35,7 @@ export type TopNavBarItem = {
   activeItemIndicatorSpacing: string
   activeIndicatorColor: string
   activeIndicatorColorInverse: string
+  activeIndicatorWidth: string
 }
 
 export default TopNavBarItem

package/src/themes/newThemes/dark/components/mask.ts

@@ -25,8 +25,5 @@
 import type { Mask } from "../../componentTypes/mask"
 import semantics from "../semantics"
 
-const mask: Mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark,
-}
+const mask: Mask = { backgroundColor: semantics.color.background.overlay.base }
 export default mask

package/src/themes/newThemes/dark/components/topNavBarActionItems.ts

@@ -31,5 +31,6 @@ const topNavBarActionItems: TopNavBarActionItems = {
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
   smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor",
 }
 export default topNavBarActionItems

package/src/themes/newThemes/dark/components/topNavBarItem.ts

@@ -38,5 +38,6 @@ const topNavBarItem: TopNavBarItem = {
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
   activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md,
 }
 export default topNavBarItem

package/src/themes/newThemes/legacyCanvas/components/mask.ts

@@ -25,8 +25,5 @@
 import type { Mask } from "../../componentTypes/mask"
 import semantics from "../semantics"
 
-const mask: Mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark,
-}
+const mask: Mask = { backgroundColor: semantics.color.background.overlay.base }
 export default mask

package/src/themes/newThemes/legacyCanvas/components/topNavBarActionItems.ts

@@ -31,5 +31,6 @@ const topNavBarActionItems: TopNavBarActionItems = {
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
   smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor",
 }
 export default topNavBarActionItems

package/src/themes/newThemes/legacyCanvas/components/topNavBarItem.ts

@@ -38,5 +38,6 @@ const topNavBarItem: TopNavBarItem = {
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
   activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md,
 }
 export default topNavBarItem

package/src/themes/newThemes/legacyCanvasHighContrast/components/mask.ts

@@ -25,8 +25,5 @@
 import type { Mask } from "../../componentTypes/mask"
 import semantics from "../semantics"
 
-const mask: Mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark,
-}
+const mask: Mask = { backgroundColor: semantics.color.background.overlay.base }
 export default mask

package/src/themes/newThemes/legacyCanvasHighContrast/components/topNavBarActionItems.ts

@@ -31,5 +31,6 @@ const topNavBarActionItems: TopNavBarActionItems = {
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
   smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor",
 }
 export default topNavBarActionItems

package/src/themes/newThemes/legacyCanvasHighContrast/components/topNavBarItem.ts

@@ -38,5 +38,6 @@ const topNavBarItem: TopNavBarItem = {
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
   activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md,
 }
 export default topNavBarItem

package/src/themes/newThemes/light/components/mask.ts

@@ -25,8 +25,5 @@
 import type { Mask } from "../../componentTypes/mask"
 import semantics from "../semantics"
 
-const mask: Mask = {
-  backgroundColor: semantics.color.background.overlay.base,
-  darkBackgroundColor: semantics.color.background.overlay.dark,
-}
+const mask: Mask = { backgroundColor: semantics.color.background.overlay.base }
 export default mask

package/src/themes/newThemes/light/components/topNavBarActionItems.ts

@@ -31,5 +31,6 @@ const topNavBarActionItems: TopNavBarActionItems = {
   smallViewportDropdownMenuActiveOptionFontWeight: semantics.fontWeight.body.strong,
   smallViewportDropdownMenuActiveOptionIndicatorSpacing: semantics.spacing.spaceXs,
   smallViewportDropdownMenuActiveOptionIndicatorWidth: semantics.borderWidth.lg,
+  smallViewportDropdownMenuActiveOptionIndicatorColor: "currentColor",
 }
 export default topNavBarActionItems

package/src/themes/newThemes/light/components/topNavBarItem.ts

@@ -38,5 +38,6 @@ const topNavBarItem: TopNavBarItem = {
   activeItemIndicatorSpacing: semantics.spacing.spaceXs,
   activeIndicatorColor: semantics.color.text.inverse,
   activeIndicatorColorInverse: semantics.color.text.base,
+  activeIndicatorWidth: semantics.borderWidth.md,
 }
 export default topNavBarItem

package/tokens/canvas/scss/_variables.scss

@@ -1442,7 +1442,6 @@ $instui-canvas-new-theme-components-modal-body-inverse-background-color: #334450
 $instui-canvas-new-theme-components-modal-body-padding: 1.5rem;
 $instui-canvas-new-theme-components-modal-body-padding-compact: 0.75rem;
 $instui-canvas-new-theme-components-mask-background-color: rgba(255,255,255,0.75);
-$instui-canvas-new-theme-components-mask-dark-background-color: rgba(28,34,43,0.75);
 $instui-canvas-new-theme-components-form-field-layout-text-color: #273540;
 $instui-canvas-new-theme-components-form-field-layout-readonly-text-color: #576773;
 $instui-canvas-new-theme-components-form-field-layout-asterisk-color: #273540;
@@ -2354,6 +2353,7 @@ $instui-canvas-new-theme-components-top-nav-bar-action-items-small-viewport-acti
 $instui-canvas-new-theme-components-top-nav-bar-action-items-small-viewport-dropdown-menu-active-option-font-weight: 700;
 $instui-canvas-new-theme-components-top-nav-bar-action-items-small-viewport-dropdown-menu-active-option-indicator-spacing: 0.25rem;
 $instui-canvas-new-theme-components-top-nav-bar-action-items-small-viewport-dropdown-menu-active-option-indicator-width: 0.25rem;
+$instui-canvas-new-theme-components-top-nav-bar-action-items-small-viewport-dropdown-menu-active-option-indicator-color: currentColor;
 $instui-canvas-new-theme-components-top-nav-bar-layout-small-viewport-dropdown-menu-active-option-indicator-spacing: 0.25rem;
 $instui-canvas-new-theme-components-top-nav-bar-layout-small-viewport-dropdown-menu-active-option-indicator-width: 0.25rem;
 $instui-canvas-new-theme-components-top-nav-bar-layout-desktop-height: 4rem;
@@ -2407,6 +2407,7 @@ $instui-canvas-new-theme-components-top-nav-bar-item-active-item-font-weight: 70
 $instui-canvas-new-theme-components-top-nav-bar-item-active-item-indicator-spacing: 0.25rem;
 $instui-canvas-new-theme-components-top-nav-bar-item-active-indicator-color: #ffffff;
 $instui-canvas-new-theme-components-top-nav-bar-item-active-indicator-color-inverse: #273540;
+$instui-canvas-new-theme-components-top-nav-bar-item-active-indicator-width: 0.125rem;
 $instui-canvas-new-theme-components-top-nav-bar-menu-items-desktop-submenu-active-option-indicator-width: 0.125rem;
 $instui-canvas-new-theme-components-top-nav-bar-menu-items-desktop-item-spacing: 1rem;
 $instui-canvas-new-theme-components-top-nav-bar-menu-items-desktop-submenu-active-option-indicator-spacing: 0.25rem;