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.

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:

<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>

const green500 = $dt('color.green.500');

• Or even better, using the css() 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:

• Design tokens
• Responsive tokens
• Media queries
• Utils properties

Once you are all setup with your theme, you're all set to use the styling features:

• The css() 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.