import { Meta, Story, Canvas, Title, Subtitle, Source, ArgsTable, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import Alert from '@lendi-ui/alert';
import { TITLE_FOUNDATIONS, TITLE_COLORS, TITLE_BASE_COLORS } from '../../../../../docs/content';
import * as stories from './all.stories.tsx';

<Meta title={`${TITLE_FOUNDATIONS}/${TITLE_COLORS}/${TITLE_BASE_COLORS}`}/>

<Title>{TITLE_BASE_COLORS}</Title>

<Subtitle>Common Color</Subtitle>

<Story name="Common Color" story={stories.CommonColor} />

<Subtitle>Themed Color</Subtitle>

<Alert variant='warn' heading='Use Semantic Colours' id="testId" aria-label="testLabel">
  Base Colours are simply colours. They do not have any design intention.
  Historically, Lendi has been designing with base colors directly. This is unscalable, and caused lots of inconsistencies.
  For future applications, please use Semantic Colours wherever possible.
</Alert>

The following table shows Palette Colours for current theme. Use Controls above to change theme.

**Note:** Base Colours are different between themes.

<Story name="Themed Color" story={stories.ThemedBaseColor} />