@the-portland-company/shell 0.11.4 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1653,9 +1653,10 @@ function NavItem({
1653
1653
  const hasActiveChild = Array.isArray(subItems) && subItems.some((item) => matchesSubItem(item.href || ""));
1654
1654
  const isParentActive = isActive || hasActiveChild;
1655
1655
  const isSubMenuOpen = isExpanded !== void 0 ? isExpanded : hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
1656
- const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? "gray.100" : "transparent";
1657
- const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "gray.900" : "gray.600";
1658
- const disabledRowBg = isSubItem ? "gray.50" : "transparent";
1656
+ const submenuBg = "var(--sidebar-submenu-bg, #F1F5F9)";
1657
+ const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? submenuBg : "transparent";
1658
+ const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "var(--sidebar-text, #1A202C)" : "var(--sidebar-text-muted, #4A5568)";
1659
+ const disabledRowBg = isSubItem ? submenuBg : "transparent";
1659
1660
  const disabledRowTextColor = "gray.400";
1660
1661
  const renderIcon = (activeForHover) => {
1661
1662
  if (brandIcon) {
@@ -1708,8 +1709,8 @@ function NavItem({
1708
1709
  bg: isDisabled ? disabledRowBg : expandedRowBg,
1709
1710
  color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
1710
1711
  _hover: {
1711
- bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "gray.200",
1712
- color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "gray.900"
1712
+ bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
1713
+ color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "var(--sidebar-text, #1A202C)"
1713
1714
  },
1714
1715
  "aria-disabled": isDisabled ? "true" : "false",
1715
1716
  onClick: (e) => {
@@ -1750,8 +1751,8 @@ function NavItem({
1750
1751
  bg: isDisabled ? disabledRowBg : expandedRowBg,
1751
1752
  color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
1752
1753
  _hover: {
1753
- bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "gray.200",
1754
- color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "gray.900"
1754
+ bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
1755
+ color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "var(--sidebar-text, #1A202C)"
1755
1756
  },
1756
1757
  "aria-disabled": isDisabled ? "true" : "false",
1757
1758
  onClick: (e) => {
@@ -1784,7 +1785,7 @@ function NavItem({
1784
1785
  py: "1",
1785
1786
  borderTopRadius: 0,
1786
1787
  borderBottomRadius: "md",
1787
- bg: isDisabled ? "gray.100" : "gray.200",
1788
+ bg: submenuBg,
1788
1789
  children: subItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1789
1790
  NavItem,
1790
1791
  {
@@ -1839,10 +1840,10 @@ function NavItem({
1839
1840
  opacity: 1,
1840
1841
  pointerEvents: isDisabled ? "none" : "auto",
1841
1842
  "data-nav-item-active": String(rowActive),
1842
- bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
1843
+ bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #EDF2F7)" : modeConfig?.primaryColor || "brand.500" : "transparent",
1843
1844
  color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
1844
1845
  _hover: {
1845
- bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.200" : modeConfig?.accentColor || "brand.600" : "gray.100",
1846
+ bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #E2E8F0)" : modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #EDF2F7)",
1846
1847
  color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
1847
1848
  },
1848
1849
  "aria-disabled": isDisabled ? "true" : "false",