A Material You plugin and component library for Vite / Vue 3.

Warning This is extremely early in development.

Add the package to your project:

pnpm add halcyon-vue

Load the plugin in your Vite setup:

import { defineConfig } from 'vite'
import { Halcyon } from 'halcyon-vue/plugin'
import theme from './theme.json'
// ...
export default defineConfig({
    plugins: [
        // ...
        Halcyon({ theme })
    ]
})

Import the stylesheets:

// main.ts
import 'halcyon:reset.css' // optional if you're already using a css reset
import 'halcyon:theme.css' // sets up the theme variables
import 'halcyon:base.css'  // includes global styles (e.g. body)
import 'halcyon-vue/style' // includes component styles

Now you can use the components however you should wish:

<script setup>
import { HButton } from 'halcyon-vue'

const alert = (msg) => window.alert(msg) // vue why
</script>
<template>
    <div>
        <HButton
            kind="filled"
            content="Press me!"
            @click="alert('yippee')"
        />
    </div>
</template>

You can browse our documentation online!

You should use the Material Theme Builder to generate a theme. From there, download the JSON - you can then use the theme in Halcyon by passing it into the plugin.

The theme variables are just CSS variables, so you can replace them in your own CSS:

.this-part-is-very-red {
    --halcyon-primary: #ff0000;
}

It's not required, but you should import a couple fonts for the most accurate experience. In particular, Roboto Flex (or Roboto if your target doesn't support variable fonts) and Noto Sans (as a fallback font) are used. Here's a snippet you can put into your index.html to import Roboto Flex and Noto Sans:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Roboto+Flex:wght@400;500;700&display=swap" rel="stylesheet">

(This snippet probably imports more than you'll need, so consider selecting the fonts on Google Fonts yourself.)

You should use unplugin-icons for Material Design icons. It's what the docs use, and it's the only thing tested with.

MIT