@joyfour/design-system v0.0.4

Install

npm install @joyfour/design-system

Vite Plugin

// vite.config.ts
import { MDCPlugin } from "material-design-system";

export default defineConfig({
  plugins: [
    // inject css to your app
    MDCPlugin({
      source: "#6750A4",
      customs: {
        info: "#D0BCFF",
      },
    })
  ],
});

Use Reference

// create palette or scheme refers
// it will refers to css-variables 
// it can accept string array of custom color names
const palette = createPaletteReference(['info'])
const scheme = createSchemeReference(['info'])

const primary40 = palette.primary[40]
const primary = scheme.dark.accent.primary.color

Use Theme

// create theme that compatible with Theme-UI
const theme = createTheme({
    // custom color names
    customs: ['info']
})