Tahul
Pinceau
Make your
<script>lighter and your<style>smarter.
🎨 play.pinceau.dev • 🧑🎨 Documentation
- Ships 0kb of JavaScript to the client
- Design tokens compatible configuration
- Fully-typed styling API
- Opt-in runtime engine
- Developer Experience that feels like a native Vue feature
- Plug & play with Nuxt 3 and Vite
- Ready for Nuxt Studio
- Pinceau VSCode extension for DX Sugar
⚙️ Install
npm i pinceau
<summary>Nuxt</summary>
ts
// nuxt.config.js
export default defineNuxtConfig({
modules: [
'pinceau/nuxt',
],
pinceau: {
...PinceauOptions
}
})
Example: playground/
> This module only works with Nuxt 3.
<summary>Vite</summary>
ts
// vite.config.ts
import Pinceau from 'pinceau/vite'
export default defineConfig({
plugins: [
Pinceau(PinceauOptions),
],
})
Example: playground/_vite.config.ts
<summary>Create your theme</summary>
ts
// tokens.config.ts
import { defineTheme } from 'pinceau'
export default 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 })
}
})
Example: playground/theme/tokens.config.ts
Learn more about Pinceau in the documentation].
💖 Credits
Thanks to these amazing people that helped me along the way:
This package takes a lot of inspiration from these amazing projects:
License
MIT License © 2022-PRESENT Yaël GUILLOUX
“All you need to paint is a few tools, a little instruction, and a vision in your mind.” • Bob Ross