What is Pinceau?
Pinceau is a playful styling framework for your Vue components.
It offers incrementally adoptable solutions that integrates nicely with existing components.
The objective is to take all the <style> related logic out of your <script> tags.
What does it look like?
Pinceau usage flows around your tokens.config file.
In this file, you can store all your Design tokens, Media queries and Utils properties.
tokens.config.ts
import { defineTheme } from 'pinceau'
defineTheme({
// Media queries
media: {
mobile: '(min-width: 320px)',
tablet: '(min-width: 768px)',
desktop: '(min-width: 1280px)'
},
// Some Design tokens
color: {
red: {
1: '#FCDFDA',
2: '#F48E7C',
3: '#ED4D31',
4: '#A0240E',
5: '#390D05',
},
green: {
1: '#CDF4E5',
2: '#9AE9CB',
3: '#36D397',
4: '#1B7D58',
5: '#072117',
}
},
space: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem'
},
// Utils properties
utils: {
px: (value: PropertyValue<'padding'>) => ({ paddingLeft: value, paddingRight: value }),
py: (value: PropertyValue<'padding'>) => ({ paddingTop: value, paddingBottom: value })
}
})
Once defined, these tokens will then be accessible accross you app in multiple ways.
In CSS or PostCSS, JS, TS or<style>tags:
component.vue
<style lang="postcss">
button {
padding: $dt('space.1') $dt('space.2');
background-color: $dt('red.1');
@dark {
background-color: $dt('red.5')
}
@desktop {
padding: $dt('space.2') $dt('space.4');
}
}
</style>
main.ts
const green500 = $dt('color.green.500');
Or even better, using thecss()function in your<style lang="ts">blocks:
<template>
<button class="my-button">
<slot />
</button>
</template>
<script setup>
defineProps({
color: computedStyle<keyof PinceauTheme['color']>('green'),
...variants
})
</script>
<style lang="ts">
css({
'.my-button': {
px: '{space.4}',
color: 'white',
backgroundColor: (props) => `{color.${props.color}.4}`,
},
variants: {
size: {
sm: {
padding: '{space.2}'
},
md: {
padding: '{space.3}'
},
lg: {
padding: '{space.4}'
},
options: {
default: 'sm'
}
}
}
})
</style>
How does it work?
Pinceau is a Vite plugin that reads and transform your Vue components.
It also comes with a Nuxt module, that supports Nuxt Studio.
It starts with a configuration file, that supports:
Once you are all setup with your theme, you're all set to use the styling features:
Thecss()function will provide you autocomplete on all your tokens.- The tokens helper will help you use your tokens in any context.
- Computed styles can help you build style-based props supporting tokens.
- Variants can help you build advanced and reusable responsive style props.
Edit this page on GitHub
Table of Contents