siyeons/spaceone-design-system

SpaceONE Design System

SpaceONE Design System

🧩 SpaceOne Design System

SpaceOne storybook

👨‍👩‍👧 Author

See our OWNERS file.

📝 License

This project is Apache 2.0 licensed.

How to Use

1. Install

npm i -S @spaceone/design-system

2. Set plugin

Add following lines to main.js file.

import SpaceDesignSystem from '@spaceone/design-system';

Vue.use(SpaceDesignSystem);

3. Set components locally

Example:

import { PButtonTab, PDynamicLayout } from '@spaceone/design-system';

export default {
    components: {
        PButtonTab,
        PDynamicLayout,
    },
    ...
}

How to Apply Styles

SpaceONE Design System is based on Tailwindcss.

Global Styles

Case 1. All styles

If your project doesn't use tailwindcss, add the code below to main.ts.

import '@spaceone/design-system/dist/css/style.css';

Case 2. Without tailwindcss styles

If your project use tailwindcss, you don't need to import all styles.
In that case, add codes below to your tailwind.config.js.

const spaceoneTailwind = require('@spaceone/design-system/tailwind.config.js')

module.exports = {
    theme: {
        ...spaceoneTailwind.theme,
        // your customized theme
    },
    variants: [...spaceoneTailwind.variants, 
    //your customized variants 
    ],
    plugins: [
        ...spaceoneTailwind.plugins,
        //your customized plugins 
    ]
}

Also, you need to add codes below to your main.js.

import '@spaceone/design-system/dist/css/light-style.css';