Sidebar item component
gjones opened this issue · 1 comments
gjones commented
Summary
Adding the sidebar item and sidebar title components.
Tokens
--click-sidebar-navigation-item-color-background-default: var(--palette-utility-transparent);
--click-sidebar-navigation-item-color-background-hover: lch(91.6 1.1 266 / 0.6);
--click-sidebar-navigation-item-color-background-active: lch(91.6 1.1 266 / 0.6);
--click-sidebar-navigation-item-collapsible-space-y: var(--click-button-basic-space-y);
--click-sidebar-navigation-item-default-space-y: var(--click-button-basic-space-y);
--click-sidebar-navigation-title-color-active: var(--click-global-color-text-muted);
--click-sidebar-navigation-title-color-hover: var(--click-global-color-text-muted);
--click-sidebar-navigation-title-color-default: var(--click-global-color-text-muted);
--click-sidebar-navigation-title-typography-disabled: var(--typography-styles-text-sbold-sm);
--click-sidebar-navigation-title-typography-active: var(--typography-styles-text-sbold-sm);
--click-sidebar-navigation-title-typography-hover: var(--typography-styles-text-sbold-sm);
--click-sidebar-navigation-title-typography-default: var(--typography-styles-text-sbold-sm);
--click-sidebar-navigation-item-color-text-muted: var(--click-global-color-text-muted);
--click-sidebar-navigation-item-color-text-active: var(--click-global-color-text-default);
--click-sidebar-navigation-item-color-text-hover: var(--click-global-color-text-default);
--click-sidebar-navigation-item-color-text-default: var(--click-global-color-text-default);
--click-sidebar-navigation-item-collapsible-space-gap: var(--spaces-3);
--click-sidebar-navigation-item-collapsible-space-right: var(--spaces-3);
--click-sidebar-navigation-item-collapsible-space-left: var(--spaces-0);
--click-sidebar-navigation-item-mobile-space-gap: var(--spaces-3);
--click-sidebar-navigation-item-mobile-space-y: var(--spaces-3);
--click-sidebar-navigation-item-mobile-space-right: var(--spaces-3);
--click-sidebar-navigation-item-mobile-space-left: var(--spaces-0);
--click-sidebar-navigation-item-mobile-typography-active: var(--typography-styles-text-sbold-lg);
--click-sidebar-navigation-item-mobile-typography-hover: var(--typography-styles-text-lg);
--click-sidebar-navigation-item-mobile-typography-default: var(--typography-styles-text-lg);
--click-sidebar-navigation-item-typography-disabled: var(--typography-styles-text-sbold-md);
--click-sidebar-navigation-item-typography-active: var(--typography-styles-text-sbold-md);
--click-sidebar-navigation-item-typography-hover: var(--typography-styles-text-md);
--click-sidebar-navigation-item-typography-default: var(--typography-styles-text-md);
--click-sidebar-navigation-item-default-space-gap: var(--spaces-3);
--click-sidebar-navigation-item-default-space-x: var(--spaces-3);
--click-sidebar-navigation-item-radii-all-radius: var(--border-radii-1);
--click-sidebar-sql-sidebar-color-stroke-default: var(--click-global-color-stroke-default);
--click-sidebar-sql-sidebar-color-background-default: var(--click-global-color-background-muted);
--click-sidebar-sql-sidebar-color-stroke-default: var(--click-global-color-stroke-default);
--click-sidebar-sql-sidebar-color-background-default: var(--click-global-color-background-muted);
--click-sidebar-main-color-stroke-default: var(--click-global-color-stroke-default);
--click-sidebar-main-color-text-muted: var(--click-global-color-text-muted);
--click-sidebar-main-color-text-default: var(--click-global-color-text-default);
--click-sidebar-main-color-background-default: var(--click-global-color-background-default);