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

Accordion component

gjones opened this issue · comments

commented

Summary

We need a basic accordion component for Click UI. We should give it three sizes small, medium, and large and the states default (collapsed), hover, and active (expanded).

See Figma.

CleanShot 2023-06-08 at 16 36 23@2x

Tokens provided:

  --click-accordion-color-label-active: var(--click-global-color-text-default);
  --click-accordion-color-label-hover: lch(13.9 1.33 305);
  --click-accordion-color-label-default: var(--click-global-color-text-default);
  --click-accordion-large-typography-label-active: var(--typography-styles-text-lg);
  --click-accordion-large-typography-label-default: var(--typography-styles-text-lg);
  --click-accordion-large-space-gap: var(--spaces-1);
  --click-accordion-large-icon-size-width: var(--click-image-large-size-width);
  --click-accordion-large-icon-size-height: var(--click-image-large-size-height);
  --click-accordion-medium-typography-label-active: var(--typography-styles-text-md);
  --click-accordion-medium-typography-label-default: var(--typography-styles-text-md);
  --click-accordion-medium-space-gap: var(--spaces-1);
  --click-accordion-medium-icon-size-width: var(--click-image-medium-size-width);
  --click-accordion-medium-icon-size-height: var(--click-image-medium-size-height);
  --click-accordion-small-typography-label-active: var(--typography-styles-text-sm);
  --click-accordion-small-typography-label-default: var(--typography-styles-text-sm);
  --click-accordion-small-space-gap: var(--spaces-1);
  --click-accordion-small-icon-size-width: var(--click-image-small-size-width);
  --click-accordion-small-icon-size-height: var(--click-image-small-size-height);
commented

@gjones it seems the accordion colors are missing from the dark theme

commented

@serdec Is that causing a problem? The way it works in Figma is that if its not set it just uses the light theme version. In this case because --click-accordion-color-label-active: var(--click-global-color-text-default); and text-default automatically switches to white in dark mode, it would simply inherit that value, is this not the case? I can easily create tokens if necessary.

commented

I'll add the dark mode tokens today.