@joaomelo/tokens v0.1.1

Minimal system of design tokens set as CSS custom props and vue composable helpers.

The tokens list can be consulted in the tokens css file. Colors tokens are heavily based on open color.

Vue composables regarding reactive media queries for screen size tokens are: useIsAtLeastSM, useIsAtLeastMD, useIsAtLeastLG and useIsAtLeastXG.

Install with npm i @joaomelo/tokens, then import as early as possible to activate the custom props.

//index.js

import '@joaomelo/tokens'
//...

Helper composables can be imported as usual in Vue components.

<script setup>
import { useIsAtLeastSM } from "@joaomelo/media-query"
const isSM = useIsAtLeastSM();
</script>