@spaceone/design-system/src/styles/colors.stories.mdx

SpaceONE Design System

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
import PStatus from '@/data-display/status/PStatus.vue';
import {semanticColors, palette} from '@/styles/colors';

<Meta title='Foundation/Styles/Colors' parameters={{
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=2137%3A5668',
    }
}} argTypes={{
    color: {
        name: 'colors',
        description: 'Colors for SpaceONE Design System',
        defaultValue: null,
        table: {
            type: {
                summary: null
            },
            defaultValue: {
                summary: null
            },
        },
    },
}} />


export const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { PStatus },
    template: `
            <p-status v-if="typeof color !== 'object'"
                        :icon-color="color"
                        :text="color"
                        class="text-lg"
            />
    `,
});


# Colors

<br/>
<br/>

## All Colors

<Canvas>
    <Story name="all colors">
        {{
            props: {
                allColors: {
                    default: () => palette
                }
            },
            components: { PStatus },
            template: `
    <div>
        <template v-for="(col, name, idx) in allColors">
            <p-status v-if="typeof col !== 'object'"
                        :key="col + idx" :icon-color="col"
                        :text="name"
                        class="mr-4 text-lg"
            />
            <template v-else>
                <div :key="name + idx" class="my-4">
                    <p class="mb-3">
                        <strong class="text-lg capitalize">{{name}}</strong>
                        <span class="ml-2">
                        <p-status :icon-color="col[500]"
                                class="ml-1 text-lg"
                                />
                        </span>
                    </p>
                    <p-status v-for="(c, n, i) in col"
                                :key="c" :icon-color="c"
                                :text="n"
                                class="mr-4 text-lg"
                    />
                </div>
            </template>
        </template>
    </div>
    `,
        }}
    </Story>
</Canvas>

<br/>
<br/>

## Semantic


<Canvas>
    <Story name="semantic">
        {{
            props: {
                allColors: {
                    default: () => semanticColors
                }
            },
            components: { PStatus },
            template: `
    <div>
        <div v-for="(col, name, idx) in allColors" :key="col + idx"
            class="my-2">
            <p-status :icon-color="col"
                       :text="name"
                        class="text-lg"
            />
        </div>
    </div>
    `,
        }}
    </Story>
</Canvas>

<br/>
<br/>