forge/Anvil
1
0
Fork 0
Code Pull requests Activity

docs: document color palettes

Browse source 
Right now it is using the default Skeleton.dev palette.
I feel like we need to adjust it to our needs.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-02-15 20:44:25 +01:00
parent 49cbd6178e
commit a5897dc63c
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
1 changed files with 120 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
stories/ColorPalette.mdx Normal file
View file

@ -0,0 +1,120 @@
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>