orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
52 lines (48 loc) • 1.48 kB
JavaScript
/**
* SideNavV2 constants: breakpoints, widths, resize config, item types, and theme token keys.
*/
export const BREAKPOINTS = {
SMALL_SCREEN: 900
};
// SideNav width constants
export const SIDENAV_WIDTHS = {
EXPANDED: "200px"
};
export const EXPANDED_SIZE = {
normal: 280,
normalMin: 200,
normalMax: 380,
large: 380,
largeMin: 300,
largeMax: 480
};
export const RESIZE_CONFIG = {
MOBILE_MIN_HEIGHT: 200,
MOBILE_MAX_HEIGHT_RATIO: 0.8,
RESIZE_DEBOUNCE_MS: 100
};
export const ITEM_TYPES = {
COMPONENT: "component",
LINK: "link",
BUTTON: "button"
};
export const BADGE_VARIANTS = ["success", "warning", "danger", "primaryLight", "primary", "primaryDark", "secondary"];
export const CURRENT_VIEW_SECTION_ID = "side-nav-current-view-section";
// Re-export commonly used theme tokens for convenience
// These reference existing theme values and should be used instead of hardcoded px values
export const SIDENAV_THEME_TOKENS = {
// Heights (use theme 'sizes' tokens)
MENU_ITEM_HEIGHT: "l",
// sizes.l = 24px - standard menu items
PINNED_ITEM_HEIGHT: "xl",
// sizes.xl = 32px - pinned teams/people with avatars
// Gaps (use theme 'space' tokens)
ITEM_CONTENT_GAP: "xxs",
// space.xxs = 2px - gap between avatar/icon and text
ITEM_PADDING: "xs",
// space.xs = 4px - item padding
ITEM_GAP: "xs",
// space.xs = 4px - gap between items
// Border radius (use theme 'radii' tokens)
BORDER_RADIUS: "2" // radii[2] - rounded corners
};