Skip to content
/ pinceau Public
generated from unplugin/unplugin-starter
  • Sponsor
  • Notifications You must be signed in to change notification settings
  • Fork 20

πŸ–ŒοΈ Make your <script> lighter and your <style> smarter

License

Notifications You must be signed in to change notification settings

Tahul/pinceau

Folders and files

NameName
Last commit message
Last commit date

Latest commit

702e22b Β· Dec 6, 2023
Oct 19, 2023
Oct 15, 2023
Dec 6, 2023
Dec 6, 2023
Dec 6, 2023
Dec 6, 2023
Dec 6, 2023
Oct 15, 2023
Oct 15, 2023
Aug 31, 2022
Nov 28, 2023
Oct 15, 2023
Nov 28, 2023
Oct 15, 2023
Dec 6, 2023
Dec 6, 2023
Oct 15, 2023
Oct 15, 2023
Oct 19, 2023

Repository files navigation

Pinceau Cover

Pinceau NPM version

Make your <script> lighter and your <style> smarter.

πŸ•ΉοΈ Try it online β€’ πŸ“– Documentation

  • 🦾 Typed Styling API inspired from the tools you already love

    • const Component = $styled.a<Props>({ ...componentStyle })
      const className = styled({ ...scopedCss })
      css({ ...globalCss })
  • 🎨 Multi-layers Design Tokens compatible theme configuration

  • ⚑ Plug & play support for any Vite-based framework

    Vue, React, Svelte, Nuxt, Astro

  • πŸͺ„ Comes with everything you need to build a robust design system

    • Smart output engine that uses static CSS or CSSOM 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 no JS/CSS style duplication

  • βœ… 300+ tests covering every core packages and integrations

  • 🍦 VSCode extension for DX Sugar

Planned support for: Qwik, SolidJS, Preact, Lit, yours ?

Pinceau v1 is currently in ⚠️ beta, feel free to report any feedback you may have in issues.

βš™οΈ Install

Vue
pnpm install @pinceau/vue
// vite.config.ts
import Pinceau from '@pinceau/vue/plugin'

export default defineConfig({
  plugins: [
    Pinceau(),
    ...yourPlugins
  ],
})

Example: examples/vite-vue/vite.config.ts

Svelte
pnpm install @pinceau/svelte
// vite.config.ts
import Pinceau from '@pinceau/svelte/plugin'

export default defineConfig({
  plugins: [
    Pinceau(),
    ...yourPlugins
  ],
})

Example: examples/vite-svelte/vite.config.ts

React
pnpm install @pinceau/react
// vite.config.ts
import Pinceau from '@pinceau/react/plugin'

export default defineConfig({
  plugins: [
    Pinceau(),
    ...yourPlugins
  ],
})

Example: examples/vite-react/vite.config.ts

Use our theme or create yours

Use our default theme, 🎨 Pigments:

// vite.config.ts
export default defineConfig({
  plugins: [
    Pinceau({
      theme: {
        layers: ['@pinceau/pigments']
      }
    })
  ]
})

Or build your in theme.config.ts:

// theme.config.ts
import { defineTheme } from '@pinceau/theme'

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: examples/theme/theme.config.ts

πŸ’– Credits

This package takes a lot of inspiration from these amazing projects:

Stitches β€’ vanilla-extract β€’ unocss β€’ style-dictionary

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

About

πŸ–ŒοΈ Make your <script> lighter and your <style> smarter

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Sponsor

Packages

No packages published

Contributors 14