Blush

Component Library and Design System.

Check the documentation available online

🧰 Tools and Technologies used

• Vue
• Vite
• Sass
• Storybook
• Cypress
• GitHub Actions
• Material Icons
• ESLint
• StyleLint

Usage

Import blush as an external package and use its components and design tokens

Install Blush

npm install blush-ds

Import the Blush global style into your main.js

import 'blush-ds/dist/style.css'

Use components by importing them

<!-- App.vue -->
<script>
    import { blushAlert } from 'blush-ds'
</script>
<template>
    <blush-alert
		title="Alert"
		text="Description alert"
		type="informative"
		:show-dismiss="true"
		@on-dismiss="console.log('dismiss alert')"
	/>
</template>

To use our design tokens, simply import the utils file with all of them.

/* some css file */
@import "blush-ds/src/utils/tokens/tokens.scss";

💡 If you are using the Vite bundler, you can import the tokens globally like this (this is what we recommend):

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use 'sass:map';
          @import "blush-ds/src/utils/tokens/tokens.scss";
        `
      }
    }
  }
})

💻 How to use in dev mode

Install dependencies

npm install

Run the dev server with hot-reload

npm run dev

Build a version to production

npm run build

Start the Storybook server to see components documentation

npm run storybook

Run the Cypress executable to tests

npx cypress open

Run Lint with ESLint

npm run eslint

Run ESLint Fix

npm run eslint:fix

Run Lint with StyleLint

npm run stylelint

Run StyleLint Fix

npm run stylelint:fix