Mirinae - Cloudforet Design System

🧩 Mirinae Design System

Mirinae Storybook

👨‍👩‍👧 Author

See our OWNERS file.

📝 License

This project is Apache 2.0 licensed.

Chart License

Mirinae design system internally uses amCharts for Dynamic Chart.
Before using the design system, look carefully at amCharts' license.
If you want to purchase the amCharts license that suits you and use it on your application, see the license FAQ.

https://www.amcharts.com/online-store/licenses-explained/

How to Use

1. Install

npm install @spaceone/design-system vue vue-router vue-i18n vue-fragment @amcharts

2. Set plugin

Add following lines to main.js file.

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

Vue.use(MirinaeDesignSystem, pluginOptions);

Plugin Options

interface MirinaeDSOptions {
    installVueRouter?: boolean;
    installVueI18n?: boolean;
    installFragment?: boolean;
    amchartsLicenses?: string[];
}

3. Set components locally

Example:

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

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

How to Apply Styles

Mirinae 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';
import '@spaceone/design-system/dist/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 mirinaeTailwind = require('@spaceone/design-system/tailwind.config.js')

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

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

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