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

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

Edit this page on GitHub
Table of Contents