Giters

ClickHouse / click-ui

The home of the ClickHouse design system and component library.

Home Page:https://click-ui.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sidebar item component

gjones opened this issue · comments

commented

Summary

Adding the sidebar item and sidebar title components.

Figma

CleanShot 2023-06-23 at 15 54 32@2x

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);
commented

done in #30