Accordion component
Closed this issue · 4 comments
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.
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);
@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.
http://localhost:6006/?path=/story/accordion--default&globals=theme:light
http://localhost:6006/?path=/story/accordion--default&globals=theme:dark
the color falls back to the light one, but on a dark background is not visible
I'll add the dark mode tokens today.