import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';

<Meta title="Colors" />

Consider the value at 500 to be the default.

<ColorPalette>
	<ColorItem
		title="color.primary"
		subtitle="Primary"
		colors={{
			50: 'rgb(var(--color-primary-50))',
			100: 'rgb(var(--color-primary-100))',
			200: 'rgb(var(--color-primary-200))',
			300: 'rgb(var(--color-primary-300))',
			400: 'rgb(var(--color-primary-400))',
			500: 'rgb(var(--color-primary-500))',
			600: 'rgb(var(--color-primary-600))',
			700: 'rgb(var(--color-primary-700))',
			800: 'rgb(var(--color-primary-800))',
			900: 'rgb(var(--color-primary-900))'
		}}
	/>
	<ColorItem
		title="color.secondary"
		subtitle="Secondary"
		colors={{
			50: 'rgb(var(--color-secondary-50))',
			100: 'rgb(var(--color-secondary-100))',
			200: 'rgb(var(--color-secondary-200))',
			300: 'rgb(var(--color-secondary-300))',
			400: 'rgb(var(--color-secondary-400))',
			500: 'rgb(var(--color-secondary-500))',
			600: 'rgb(var(--color-secondary-600))',
			700: 'rgb(var(--color-secondary-700))',
			800: 'rgb(var(--color-secondary-800))',
			900: 'rgb(var(--color-secondary-900))'
		}}
	/>
	<ColorItem
		title="color.tertiary"
		subtitle="Tertiary"
		colors={{
			50: 'rgb(var(--color-tertiary-50))',
			100: 'rgb(var(--color-tertiary-100))',
			200: 'rgb(var(--color-tertiary-200))',
			300: 'rgb(var(--color-tertiary-300))',
			400: 'rgb(var(--color-tertiary-400))',
			500: 'rgb(var(--color-tertiary-500))',
			600: 'rgb(var(--color-tertiary-600))',
			700: 'rgb(var(--color-tertiary-700))',
			800: 'rgb(var(--color-tertiary-800))',
			900: 'rgb(var(--color-tertiary-900))'
		}}
	/>
	<ColorItem
		title="color.success"
		subtitle="Success"
		colors={{
			50: 'rgb(var(--color-success-50))',
			100: 'rgb(var(--color-success-100))',
			200: 'rgb(var(--color-success-200))',
			300: 'rgb(var(--color-success-300))',
			400: 'rgb(var(--color-success-400))',
			500: 'rgb(var(--color-success-500))',
			600: 'rgb(var(--color-success-600))',
			700: 'rgb(var(--color-success-700))',
			800: 'rgb(var(--color-success-800))',
			900: 'rgb(var(--color-success-900))'
		}}
	/>
	<ColorItem
		title="color.warning"
		subtitle="Warning"
		colors={{
			50: 'rgb(var(--color-warning-50))',
			100: 'rgb(var(--color-warning-100))',
			200: 'rgb(var(--color-warning-200))',
			300: 'rgb(var(--color-warning-300))',
			400: 'rgb(var(--color-warning-400))',
			500: 'rgb(var(--color-warning-500))',
			600: 'rgb(var(--color-warning-600))',
			700: 'rgb(var(--color-warning-700))',
			800: 'rgb(var(--color-warning-800))',
			900: 'rgb(var(--color-warning-900))'
		}}
	/>
	<ColorItem
		title="color.error"
		subtitle="Error"
		colors={{
			50: 'rgb(var(--color-error-50))',
			100: 'rgb(var(--color-error-100))',
			200: 'rgb(var(--color-error-200))',
			300: 'rgb(var(--color-error-300))',
			400: 'rgb(var(--color-error-400))',
			500: 'rgb(var(--color-error-500))',
			600: 'rgb(var(--color-error-600))',
			700: 'rgb(var(--color-error-700))',
			800: 'rgb(var(--color-error-800))',
			900: 'rgb(var(--color-error-900))'
		}}
	/>
	<ColorItem
		title="color.surface"
		subtitle="Surface"
		colors={{
			50: 'rgb(var(--color-surface-50))',
			100: 'rgb(var(--color-surface-100))',
			200: 'rgb(var(--color-surface-200))',
			300: 'rgb(var(--color-surface-300))',
			400: 'rgb(var(--color-surface-400))',
			500: 'rgb(var(--color-surface-500))',
			600: 'rgb(var(--color-surface-600))',
			700: 'rgb(var(--color-surface-700))',
			800: 'rgb(var(--color-surface-800))',
			900: 'rgb(var(--color-surface-900))'
		}}
	/>
</ColorPalette>