orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
63 lines (56 loc) • 5.06 kB
JavaScript
import { css } from "styled-components";
import { themeGet } from "@styled-system/theme-get";
import { SIDENAV_THEME_TOKENS } from "../constants/sideNav";
/**
* Shared hover styles for all SideNav menu items
* Provides consistent grey background and primary color on hover
* Works for both collapsed and expanded states
*/
const sharedNavItemHoverStyles = /*#__PURE__*/css(["&:hover:not(.active),&:focus:not(.active),&:active:not(.active){outline:none;background-color:", ";color:", ";}path{transition:", ";}&:hover:not(.active) path,&:focus:not(.active) path,&:active:not(.active) path{fill:", ";}"], themeGet("colors.greyLightest"), themeGet("colors.primary"), themeGet("transition.transitionDefault"), themeGet("colors.primary"));
/**
* Shared active state styles for all SideNav menu items
* Provides consistent primaryLightest background and greyDarkest text color
* Works with className-based active state (e.g., BaseSection links)
*/
export const sharedNavItemActiveStyles = /*#__PURE__*/css(["&.active{background-color:", ";color:", ";}&.active path{fill:", ";}"], themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"));
/**
* Shared active state styles using props (for NavItem component)
* Provides consistent primaryLightest background and greyDarkest text color
* Works with prop-based active state
*/
export const sharedNavItemActiveStylesProps = props => {
if (!props.active) return "";
return css(["background-color:", ";color:", ";path{fill:", ";}"], themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"));
};
/**
* Shared base styles for all SideNav menu items
* Common transition, border-radius, and color patterns
*/
export const sharedNavItemBaseStyles = /*#__PURE__*/css(["transition:", ";border-radius:", ";color:", ";"], themeGet("transition.transitionDefault"), themeGet("radii.2"), themeGet("colors.greyDarkest"));
/**
* Shared container styles for ALL menu item wrappers
* Provides consistent sizing, padding, and hover behavior.
* Use on all Item/li/wrapper components across NavItem and BaseSection.
*
* Key features:
* - Theme tokens for spacing (sizes.l, space.xs) and border-radius
* - Grey hover background for non-active items (desktop only)
* - Blue text and icons on hover (desktop)
* - Blue background for active items (consumers may override for expandable items; see NavItem SideNavItemWrapper)
*/
export const sharedMenuItemContainerStyles = /*#__PURE__*/css(["border-radius:", ";width:auto;display:flex;align-items:center;@media (hover:hover) and (pointer:fine){&:hover:not(.active):not(:has(a.active)):not(:has(button.active)){background-color:", ";}&:hover,&:has(a.active):hover,&:has(button.active):hover{a,button,.nav-item-text{color:", ";}path{fill:", ";}path[stroke]{stroke:", ";}}}&.active,&:has(a.active),&:has(button.active){background-color:", ";}"], themeGet("radii.".concat(SIDENAV_THEME_TOKENS.BORDER_RADIUS)), themeGet("colors.greyLightest"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primaryLightest"));
/**
* Shared link/button styles for menu items
* Provides consistent text sizing, spacing, and color
* Use on anchor or button elements inside containers
* Note: Hover behavior is controlled by parent container, not individual links
*/
export const sharedMenuItemInnerStyles = /*#__PURE__*/css(["display:flex;gap:", ";align-items:center;padding:0;flex:1;width:100%;min-height:", ";text-decoration:none;font-size:", ";color:", ";background-color:transparent;border:none;"], themeGet("space.s"), themeGet("sizes.".concat(SIDENAV_THEME_TOKENS.MENU_ITEM_HEIGHT)), themeGet("fontSizes.1"), themeGet("colors.greyDarkest"));
/**
* Shared styles for pinned items (teams/people with avatars)
* These items are taller than regular menu items to accommodate avatars
* Use this for custom pinned item implementations in consuming apps
* Uses theme tokens: sizes.xl (32px) for height, space.xxs (2px) for gap
*/
export const sharedPinnedItemContainerStyles = /*#__PURE__*/css(["padding:", ";border-radius:", ";min-height:", ";height:", ";max-height:", ";display:flex;align-items:center;width:100%;position:relative;overflow:hidden;flex-shrink:0;gap:", ";@media (hover:hover) and (pointer:fine){&:hover:not(.active){background-color:", ";color:", ";a{color:", ";}}&.active:hover{a{color:", ";}}}&.active{background-color:", ";}"], themeGet("space.".concat(SIDENAV_THEME_TOKENS.ITEM_PADDING)), themeGet("radii.".concat(SIDENAV_THEME_TOKENS.BORDER_RADIUS)), themeGet("sizes.".concat(SIDENAV_THEME_TOKENS.PINNED_ITEM_HEIGHT)), themeGet("sizes.".concat(SIDENAV_THEME_TOKENS.PINNED_ITEM_HEIGHT)), themeGet("sizes.".concat(SIDENAV_THEME_TOKENS.PINNED_ITEM_HEIGHT)), themeGet("space.".concat(SIDENAV_THEME_TOKENS.ITEM_CONTENT_GAP)), themeGet("colors.greyLightest"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primaryLightest"));
export default sharedNavItemHoverStyles;