import { Meta, Title, ColorPalette, ColorItem } from "@storybook/blocks";
import { colors } from "@data/colorTokens";

<Meta title="Foundation/Colors" />
<Title>Colors</Title>

**css variable**

`--color-[colorName]-[colorSwatchesLevel]`

```css
.selector {
  color: var(--color-blue-100);
}
```

**css class**

`.color-[colorName]-[colorSwatchesLevel]`

```html
<div class="color-blue-100">color-blue-100</div>
```

<ColorPalette>
  {Object.keys(colors).map((color) => (
    <ColorItem key={color} title={color} colors={colors[color]} />
  ))}
</ColorPalette>