769e3bcab3
I included stories for the new components introduced by the Projects page. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
133 lines
4.3 KiB
Text
133 lines
4.3 KiB
Text
{/*
|
|
* Describe the color palette in use.
|
|
* Copyright (C) 2024 André Jaenisch
|
|
* SPDX-FileCopyrightText: 2024 André Jaenisch
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/}
|
|
|
|
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>
|