diff --git a/packages/components/src/TabsBase/tabsMenuButton.css.ts b/packages/components/src/TabsBase/tabsMenuButton.css.ts index 3724b5fe..088f6652 100644 --- a/packages/components/src/TabsBase/tabsMenuButton.css.ts +++ b/packages/components/src/TabsBase/tabsMenuButton.css.ts @@ -16,6 +16,7 @@ export default { justifyContent: 'center', fontWeight: 'inherit' }, + // Removes the "active" styling from button so there's less visual change [`${darkMode} [aria-expanded="true"][aria-haspopup="menu"].&`]: { background: 'inherit', color: vars.color.dark.navigable.selectableLink.unselectedLabel diff --git a/packages/site-components/src/NavigationItem/NavigationItem.tsx b/packages/site-components/src/NavigationItem/NavigationItem.tsx index 9c39b2e3..d79af4fd 100644 --- a/packages/site-components/src/NavigationItem/NavigationItem.tsx +++ b/packages/site-components/src/NavigationItem/NavigationItem.tsx @@ -7,6 +7,7 @@ import { ExpansionIcon } from './ExpansionIcon'; import { useWindow } from '@salt-ds/window'; import { useComponentCssInjection } from '@salt-ds/styles'; +// Copied from @salt-ds/core/dist-es/navigation-item/NavigationItem.css.js const navigationItemCss = '/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font-size: var(--salt-text-fontSize);\n text-decoration: none;\n cursor: var(--salt-selectable-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = "horizontal" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = "vertical" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = "horizontal" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = "vertical" */\n.saltNavigationItem-vertical {\n --saltButton-margin: var(--salt-spacing-50) 0;\n\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: "";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = "horizontal" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = "vertical" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-indicator-active);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n';