- Notifications
You must be signed in to change notification settings - Fork20
🖌️ Make your <script> lighter and your <style> smarter
License
Tahul/pinceau
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Make your
<script>lighter and your<style>smarter.
🦾 Typed Styling API inspired from the tools you alreadylove
constComponent=$styled.a<Props>({ ...componentStyle})constclassName=styled({ ...scopedCss})css({ ...globalCss})
🎨 Multi-layersDesign Tokens compatible theme configuration
⚡ Plug & play support for anyVite-based framework
🪄 Comes with everything you need to build a robust design system
- Smart output engine that usesstatic CSS orCSSOM when you need it
- Style colocation
- Style composition
- Responsive variants API
- Theming and local tokens
- Runtime theme swapping
🧱 Fully modulable, let you disable every feature you do not need but needs no configuration to start
🌐 SSR-ready with optimized hydration and noJS/CSS style duplication
✅300+ tests covering every core packages and integrations
🍦VSCode extension forDX Sugar
Pinceau v1 is currently in
⚠️ beta, feel free to report any feedback you may have inissues.
Vue
pnpm install @pinceau/vue
// vite.config.tsimportPinceaufrom'@pinceau/vue/plugin'exportdefaultdefineConfig({plugins:[Pinceau(), ...yourPlugins],})
Example:examples/vite-vue/vite.config.ts
Svelte
pnpm install @pinceau/svelte
// vite.config.tsimportPinceaufrom'@pinceau/svelte/plugin'exportdefaultdefineConfig({plugins:[Pinceau(), ...yourPlugins],})
React
pnpm install @pinceau/react
// vite.config.tsimportPinceaufrom'@pinceau/react/plugin'exportdefaultdefineConfig({plugins:[Pinceau(), ...yourPlugins],})
Use our theme or create yours
Use our default theme,🎨 Pigments:
// vite.config.tsexportdefaultdefineConfig({plugins:[Pinceau({theme:{layers:['@pinceau/pigments']}})]})
Or build your intheme.config.ts:
// theme.config.tsimport{defineTheme}from'@pinceau/theme'exportdefaultdefineTheme({// Media queriesmedia:{mobile:'(min-width: 320px)',tablet:'(min-width: 768px)',desktop:'(min-width: 1280px)'},// Some Design tokenscolor:{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 propertiesutils:{px:(value:PropertyValue<'padding'>)=>({paddingLeft:value,paddingRight:value}),py:(value:PropertyValue<'padding'>)=>({paddingTop:value,paddingBottom:value})}})
Example:examples/theme/theme.config.ts
This package takes a lot of inspiration from these amazing projects:
MIT License © 2022-PRESENTYaël GUILLOUX
“All you need to paint is a few tools, a little instruction, and a vision in your mind.” • Bob Ross
About
🖌️ Make your <script> lighter and your <style> smarter