### Start Development Server

Source: https://github.com/tahul/pinceau/blob/main/docs/README.md

Start the Nuxt 3 development server. Accessible at http://localhost:3000.

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Install Pinceau for Svelte

Source: https://github.com/tahul/pinceau/blob/main/README.md

Install the Pinceau Svelte integration and configure the Vite plugin.

```bash
pnpm install @pinceau/svelte
```

```typescript
// vite.config.ts
import Pinceau from '@pinceau/svelte/plugin'

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

--------------------------------

### Install Pinceau for React

Source: https://github.com/tahul/pinceau/blob/main/README.md

Install the Pinceau React integration and configure the Vite plugin.

```bash
pnpm install @pinceau/react
```

```typescript
// vite.config.ts
import Pinceau from '@pinceau/react/plugin'

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

--------------------------------

### Install Pinceau for Vue

Source: https://github.com/tahul/pinceau/blob/main/README.md

Install the Pinceau Vue integration and configure the Vite plugin.

```bash
pnpm install @pinceau/vue
```

```typescript
// vite.config.ts
import Pinceau from '@pinceau/vue/plugin'

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

--------------------------------

### Define Configuration Layers

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Example demonstrating how to define multiple configuration layers with different configurations.

```typescript
{
  layers: [
    // `string`
    './my-themes/basic/',
    // `ConfigLayer` with `tokens`
    {
      tokens: {
        color: {
          primary: 'red'
        }
      }
    },
    // `ConfigLayer` with `cwd`
    {
      path: './my-themes/figma',
      configFileName: 'figma.config'
    }
  ]
}
```

--------------------------------

### Install Dependencies

Source: https://github.com/tahul/pinceau/blob/main/docs/README.md

Install project dependencies using your preferred package manager (npm, pnpm, yarn, or bun).

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Define Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/0.tokens-config.md

Example of a basic theme configuration using defineTheme, including media queries, colors, and spacing.

```typescript
import { defineTheme } from '@pinceau/theme'

export default defineTheme({
  media: {
    tablet: '(min-width: 768px)',
    desktop: '(min-width: 1024px)',
  },

  color: {
    white: '#FFFFFF',
    black: '#191919',
    primary: '#ED4D31',
    secondary: '#4560B0',
    tertiary: '#FBEFDE'
  },

  space: {
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem'
  }
})
```

--------------------------------

### Pinceau Styling API Examples

Source: https://github.com/tahul/pinceau/blob/main/README.md

Demonstrates the usage of Pinceau's typed styling API for components and scoped/global CSS.

```typescript
const Component = $styled.a<Props>({ ...componentStyle })
const className = styled({ ...scopedCss })
css({ ...globalCss })
```

--------------------------------

### Configure Pinceau Nuxt Module

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Example of how to integrate the Pinceau Nuxt module with custom options.

```typescript
defineNuxtConfig({
  modules: ['pinceau/nuxt'],

  pinceau: {
    ...options
  }
})
```

--------------------------------

### Install Pinceau with npm

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Use this command to add Pinceau as a development dependency in your project using npm.

```bash
npm install pinceau --save-dev
```

--------------------------------

### Install Pinceau with yarn

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Use this command to add Pinceau as a development dependency in your project using yarn.

```bash
yarn add pinceau --save-dev
```

--------------------------------

### Accessing Script Setup Context in Computed Styles

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/3.computed-styles.md

Utilize the component's script setup context within computed style functions for dynamic styling. This example uses a reactive `currentColor` ref to control the button's background color.

```vue
<script setup lang="ts">
type ThemeColors = keyof PinceauTheme['color']

const currentColor = ref<ThemeColors>('green')

const setCurrentColor = (value: ThemeColors) => (currentColor.value = value)
</script>

<style lang="ts">
css({
  '.my-button': {
    backgroundColor: () => currentColor.value
  }
})
</style>
```

--------------------------------

### Install Pinceau with pnpm

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Use this command to add Pinceau as a development dependency in your project using pnpm.

```bash
pnpm install -D pinceau
```

--------------------------------

### Referencing Tokens in Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/0.tokens-config.md

Example of defining a token by referencing another existing token within the theme configuration.

```typescript
defineTheme({
  primary: '$color.blue.5',
  blue: {
    0: '#C5CDE8',
    1: '#B6C1E2',
    2: '#99A8D7',
    3: '#7B8FCB',
    4: '#5E77C0',
    5: '#4560B0',
    6: '#354A88',
    7: '#25345F',
    8: '#161E37',
    9: '#06080F',
  },
})
```

--------------------------------

### Color Scheme Mode: Media Query Example

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Demonstrates how Pinceau translates dark mode styles to CSS media queries.

```css
.my-button {
  background-color: var(--color-gray-100);
}

@media (prefers-color-scheme: dark) {
  .my-button {
    background-color: var(--color-gray-900);
  }
}
```

--------------------------------

### Define Theme with Design Tokens

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/1.design-tokens.md

Example of defining a theme using Pinceau's `defineTheme` function, showcasing media queries, colors, and spacing as design tokens.

```typescript
defineTheme({
  media: {
    tablet: '(min-width: 768px)',
    desktop: '(min-width: 1024px)',
  },

  color: {
    white: '#FFFFFF',
    black: '#191919',
    primary: '#ED4D31',
    secondary: '#4560B0',
    tertiary: '#FBEFDE',
  },

  space: {
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
  }
})
```

--------------------------------

### Color Scheme Mode: Class Example

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Shows how Pinceau generates CSS for dark mode using a class-based approach.

```css
.my-button {
  background-color: var(--color-gray-100);
}

:root.dark .my-button {
  background-color: var(--color-gray-900);
}
```

--------------------------------

### Basic Vue SFC Playground Setup

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/index-dist.html

Mounts the Vue SFC Playground component to the DOM. Requires the 'vue-repl' and 'monaco-editor' packages. Ensure the necessary CSS is imported.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue SFC Playground</title>
    <style>body { margin: 0; } #app { height: 100vh; }</style>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index-dist.js"></script>
</body>
</html>
```

--------------------------------

### Local Token Usage with Regular Tokens Syntax

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/1.css-function.md

Example of using a local token with the standard theme token syntax within the css() function.

```ts
css({ div: { color: '{button.primary}' } })
```

--------------------------------

### Color Scheme Mode: Style Example

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Illustrates how Pinceau handles dark mode styles using CSS variables within a style block.

```typescript
css({
  '.my-button': {
    'backgroundColor': '{color.gray.100}',
    '@dark': {
      backgroundColor: '{color.gray.900}'
    }
  }
})
```

--------------------------------

### Configure Pinceau Vite Plugin

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Add the Pinceau Vite plugin to your vite.config.ts file to enable Pinceau functionality. Defaults are sufficient to start.

```typescript
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    // https://pinceau.dev
    Pinceau({ ...options }),
    // https://vuejs.org
    Vue(),
  ],
})
```

--------------------------------

### Using Media Queries in Plain CSS

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Apply media queries in plain CSS files, separating styles for different conditions. This example targets dark mode and a custom media query `@md`.

```css
html {
  color: $dt('color.gray.900');
  padding: $dt('space.4');
}

@dark {
  html {
    color: $dt('color.gray.100');
  }
}

@md {
  html {
    padding: $dt('space.8');
  }
}
```

--------------------------------

### Using Media Queries in PostCSS

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Utilize media queries in PostCSS files using Pinceau's `$dt()` helper for theme values. This example shows dark mode and a custom media query `@md`.

```css
html {
  color: $dt('color.gray.900');
  padding: $dt('space.4');

  @dark {
    color: $dt('color.gray.100');
  }

  @md {
    padding: $dt('space.8');
  }
}
```

--------------------------------

### Vue SFC Playground Initialization with Monaco Editor

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/index-dist.html

Initializes the Vue SFC Playground, passing Monaco as the editor component. This setup is suitable for projects that use Monaco Editor for code editing.

```javascript
import { createApp } from 'vue'
import { Repl } from './dist/vue-repl'
import Monaco from './dist/monaco-editor'
import './dist/style.css'

createApp(Repl, {
  editor: Monaco,
}).mount('#app')
```

--------------------------------

### Native Color Scheme Media Query

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Example of a native CSS media query for detecting the user's preferred color scheme (dark or light).

```css
@media (prefers-color-scheme: {dark|light})
```

--------------------------------

### Using Enum Variants with Responsive Props

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/4.variants.md

Illustrates how to use enum variants with responsive props, allowing a variant to change based on media queries. For example, the `size` prop can be 'sm' initially and 'xl' on larger screens.

```vue
<MyButton :size="{ initial: 'sm', lg: 'xl' }" />
```

--------------------------------

### Using Media Queries with css() in Vue

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Apply media queries within the `css()` function in Vue components. This example demonstrates using `@dark` for dark mode and a custom media query `@md` for a breakpoint.

```vue
<style lang="ts">
css({
  html: {
    color: '{color.gray.900}'
    padding: '{space.4}'

    '@dark': {
      color: '{color.gray.100}'
    }

    '@md': {
      padding: '{space.8}'
    }
  }
})
</style>
```

--------------------------------

### Class-based Color Scheme Media Query

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Example of a CSS selector using a root class for detecting dark or light mode, typically used with Pinceau's 'class' color scheme mode.

```css
:root.{dark|light}
```

--------------------------------

### Define Computed Style Prop with Default Value

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/3.computed-styles.md

Define a component prop that can be used as a computed style. This example sets a default value of 'red' for the 'color' prop.

```vue
<script setup>
import { computedStyle } from 'pinceau/runtime'

defineProps({
  color: computedStyle('red')
})
</script>

<style scoped lang="ts">
css({
  '.my-button': {
    backgroundColor: props => props.color
  }
})
</style>
```

--------------------------------

### Define Typed Computed Style Prop with Theme Autocomplete

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/3.computed-styles.md

Define a component prop for computed styles with generic typing to leverage theme token autocompletion. This example types the 'color' prop to accept keys from the 'color' object in your Pinceau theme.

```vue
<script setup>
import { computedStyle } from 'pinceau/runtime'

defineProps({
  color: computedStyle<keyof PinceauTheme['color']>('primary')
})
</script>
```

--------------------------------

### Build for Production

Source: https://github.com/tahul/pinceau/blob/main/docs/README.md

Build the Nuxt 3 application for production deployment.

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Preview Production Build

Source: https://github.com/tahul/pinceau/blob/main/docs/README.md

Locally preview the production build of the Nuxt 3 application.

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Using Token Syntax

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/2.vscode-extension.md

Demonstrates the syntax for using tokens within your project. This is how Pinceau identifies and processes your defined tokens.

```typescript
'your.token'
```

--------------------------------

### Configure Pinceau with Default Theme

Source: https://github.com/tahul/pinceau/blob/main/README.md

Configure Pinceau to use the default Pigments theme.

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

--------------------------------

### Define Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/0.what-is-pinceau.md

Define media queries, design tokens for colors and spacing, and utility properties for padding in your theme configuration file.

```typescript
import { defineTheme } from '@pinceau/theme'

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 })
  }
})
```

--------------------------------

### MDC Syntax Usage

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Demonstrates using the custom MyButton component within Markdown files using MDC syntax.

```markdown
::my-button{color="primary" size="md"}
Hello world 🧑‍🎨
::
```

--------------------------------

### MDC Usage for Button Sizes

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Shows how to use the button component with different size props in Markdown content using MDC syntax.

```md
::my-button{size="sm"}
Small button
::

::my-button{size="md"}
Medium button
::

::my-button
---
size:
  initial: sm
  md: md
  lg: lg
  xl: xl
---
Responsive button
::
```

--------------------------------

### Defining Class Variants for Utility-First CSS

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/4.variants.md

Shows how to define class variants that apply utility classes like 'px-3 py-6' for different sizes. The `mediaPrefix` option is enabled to support responsive prefixes for these classes.

```ts
css({
  variants: {
    size: {
      sm: 'px-3 py-6',
      md: 'px-6 py-8',
      lg: 'px-8 py-12',
      xl: 'px-12 py-24',
      options: {
        default: 'sm',
        mediaPrefix: true
      },
    },
  },
})
```

--------------------------------

### MDC Usage for Dynamic Button

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Shows how to use the dynamic button component in Markdown with MDC syntax, passing the color prop as an attribute.

```md
::my-button{color="red"}
Red button
::

::my-button{color="teal"}
Teal button
::

::my-button{color="blue"}
Blue button
::
```

--------------------------------

### Using Computed Style Prop to Set CSS Custom Property

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/3.computed-styles.md

Consume a typed computed style prop to dynamically set a CSS custom property. This example binds the component's 'color' prop to the '--my-button-color' custom property, which is then used for the background color.

```vue
<style lang="ts">
css({
  '.my-button': {
    '--my-button-color': props => props.color,
    'backgroundColor': '{my.button.color}',
  }
})
</style>
```

--------------------------------

### Registering Utils at Runtime

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/4.utils-properties.md

To use utility properties with runtime features like Variants or the CSS Prop, import them into your Pinceau runtime plugin configuration. This ensures they are available without increasing bundle size for static styling.

```typescript
import { createApp } from 'vue'
import Pinceau from 'pinceau/runtime'
import utils from '@pinceau/outputs/utils'

const app = createApp()

app.use(Pinceau, { utils })
```

--------------------------------

### Enable Schema Support

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Set `schema` to `true` to enable support for platforms that use and output a `schema.ts` file. Nuxt Studio uses this to generate a form for token edition.

```typescript
schema: true
```

--------------------------------

### Vue Template Usage for Button Sizes

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Demonstrates how to use the button component with different size props in a Vue template.

```vue
<MyButton size="sm">
Small button
</MyButton>

<MyButton size="md">
Medium button
</MyButton>

<MyButton :size="{ initial: 'sm', md: 'md', lg: 'lg', xl: 'xl' }">
Responsive button
</MyButton>
```

--------------------------------

### Define Media Queries in Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/2.media-queries.md

Declare custom media queries within the `media` key of your theme configuration file. These queries can be standard breakpoints or root class selectors.

```typescript
defineTheme({
  media: {
    // @tablet
    tablet: '(min-width: 768px)',
    // @desktop
    desktop: '(min-width: 1024px)',
    // @sepia
    sepia: ':root.sepia'
  },
})
```

--------------------------------

### Configure Vite for Multi-layer Theming

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/1.multi-layer.md

Use the `layers` option in Pinceau's Vite plugin to specify custom theme configuration paths and filenames. This allows for organizing themes in separate directories.

```typescript
import { defineConfig } from 'vite'
import Pinceau from 'pinceau/vite'

export default defineConfig({
  plugins: [
    Pinceau({
      theme: {
        layers: [
          {
            // Layer cwd
            path: resolve(__dirname, './theme'),
            // Custom configFileName at layer level
            configFileName: 'theme.config',
          },
        ]
      }
    })
  ]
})
```

--------------------------------

### REPL Message Handler

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Handles messages from the parent window for theme updates, script evaluation, and click capturing. It uses `parent.postMessage` to communicate results and errors back.

```javascript
;(() => {
  let scriptEls = []
  window.process = { env: {} }
  window.__modules__ = {}
  window.__export__ = (mod, key, get) => {
    Object.defineProperty(mod, key, {
      enumerable: true,
      configurable: true,
      get,
    })
  }
  window.__dynamic_import__ = (key) => {
    return Promise.resolve(window.__modules__[key])
  }

  async function handle_message(ev) {
    let { action, cmd_id } = ev.data
    const send_message = (payload) => parent.postMessage({ ...payload }, ev.origin)
    const send_reply = (payload) => send_message({ ...payload, cmd_id })
    const send_ok = () => send_reply({ action: 'cmd_ok' })
    const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack })

    if (action === 'theme') {
      const themeSheet = document.getElementById('pinceau-theme')
      if (themeSheet && ev.data.args.theme) themeSheet.innerHTML = ev.data.args.theme
    }

    if (action === 'eval') {
      try {
        if (scriptEls.length) {
          scriptEls.forEach((el) => {
            document.head.removeChild(el)
          })
          scriptEls.length = 0
        }

        let { script: scripts } = ev.data.args
        if (typeof scripts === 'string') scripts = [scripts]

        for (const script of scripts) {
          const scriptEl = document.createElement('script')
          scriptEl.setAttribute('type', 'module')
          // send ok in the module script to ensure sequential evaluation
          // of multiple proxy.eval() calls
          const done = new Promise((resolve) => {
            window.__next__ = resolve
          })
          scriptEl.innerHTML = script + `\nwindow.__next__()`
          document.head.appendChild(scriptEl)
          scriptEl.onerror = (err) => send_error(err.message, err.stack)
          scriptEls.push(scriptEl)
          await done
        }
        send_ok()
      } catch (e) {
        send_error(e.message, e.stack)
      }
    }

    if (action === 'catch_clicks') {
      try {
        const top_origin = ev.origin
        document.body.addEventListener('click', (event) => {
          if (event.which !== 1) return
          if (event.metaKey || event.ctrlKey || event.shiftKey) return
          if (event.defaultPrevented) return

          // ensure target is a link
          let el = event.target
          while (el && el.nodeName !== 'A') el = el.parentNode
          if (!el || el.nodeName !== 'A') return
          if (
            el.hasAttribute('download') ||
            el.getAttribute('rel') === 'external' ||
            el.target ||
            el.href.startsWith('javascript:')
          ) return

          if (el.href.startsWith(top_origin)) {
            const url = new URL(el.href)
            if (url.hash[0] === '#') {
              window.location.hash = url.hash
              return
            }
          }
          window.open(el.href, '_blank')
        })
        send_ok()
      } catch (e) {
        send_error(e.message, e.stack)
      }
    }
  }

  window.addEventListener('message', handle_message, false)
})();
```

--------------------------------

### Vue Template Usage

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Shows how to use the custom MyButton component in a Vue template.

```vue
<MyButton color="primary" size="md">
Hello world 🧑‍🎨
</MyButton>
```

--------------------------------

### Using Token Function Syntax

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/2.vscode-extension.md

Illustrates the alternative syntax for accessing tokens using a function call. This method is also recognized by Pinceau for token resolution.

```typescript
$dt('your.token')
```

--------------------------------

### Define Custom Pinceau Theme

Source: https://github.com/tahul/pinceau/blob/main/README.md

Define a custom theme configuration for Pinceau, including media queries, design tokens, and utility properties.

```typescript
// 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 })
  }
})
```

--------------------------------

### CSS Output from Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/0.tokens-config.md

Generated CSS output from the theme.config.ts, showing CSS variables for media queries and tokens.

```css
@media {
  :root {
    --pinceau-mq: initial;
    --space-4: 1rem;
    --space-3: 0.75rem;
    --space-2: 0.5rem;
    --space-1: 0.25rem;
    --color-tertiary: #FBEFDE;
    --color-secondary: #4560B0;
    --color-primary: #ED4D31;
    --color-black: #191919;
    --color-white: #FFFFFF;
    --media-desktop: (min-width: 1024px);
    --media-tablet: (min-width: 768px);
  }
}
```

--------------------------------

### Enable Definitions Output

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Set `definitions` to `true` to toggle the output of `definitions.ts`, which feeds the VSCode extension.

```typescript
definitions: true
```

--------------------------------

### Utility Properties in css()

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/1.css-function.md

Shows how Pinceau's utility properties are integrated into the css() function, allowing them to be used like standard CSS attributes.

```ts
css({
  '.my-button': {
    // Will suggest `mx`
    '*': ''
  }
})
```

--------------------------------

### Typing Component Props with Theme Tokens and PropertyValue

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/3.computed-styles.md

Demonstrates how to use Pinceau's `ThemeTokens` and `PropertyValue` types to strongly type component props based on your theme configuration. `ThemeTokens` filters theme paths, while `PropertyValue` maps tokens to specific CSS properties.

```ts
defineTheme({
  color: {
    red: 'red',
    green: 'green',
    blue: 'blue',
    primary: {
      1: 'purple',
      2: 'violet'
    }
  }
})

const colors: ThemeTokens<'color'> = *
// All the tokens paths that starts with 'color'

const backgroundColors: PropertyValue<'backgroundColor'> = *
// All the tokens paths are mapped to backgroundColor CSS property

// '*' can be:
// 'color.red' | 'color.green' | 'color.blue'
// | 'color.primary.1' | 'color.primary.2'
```

--------------------------------

### Define a Responsive Token

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/3.responsive-tokens.md

Define a responsive token with initial and dark mode values. This token uses a light color in dark mode and a dark color in light mode.

```typescript
export default defineTheme({
  primary: {
    initial: '$color.blue.9',
    dark: '$color.blue.0'
  },
  blue: {
    0: '#C5CDE8',
    1: '#B6C1E2',
    2: '#99A8D7',
    3: '#7B8FCB',
    4: '#5E77C0',
    5: '#4560B0',
    6: '#354A88',
    7: '#25345F',
    8: '#161E37',
    9: '#06080F',
  },
})
```

--------------------------------

### Inject Pinceau Theme into HTML

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Add the `<pinceau />` tag to your index.html file to allow Vite to inject the generated Pinceau theme CSS.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- here's your usual <meta> and <link> tags -->

    <!-- here's where Vite injects your Pinceau theme -->
+   <pinceau />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

--------------------------------

### Vue Template Usage for Dynamic Button

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Demonstrates how to use the dynamic button component within a Vue template by passing different color props.

```vue
<MyButton color="red">
Red button
</MyButton>

<MyButton color="teal">
Teal button
</MyButton>

<MyButton color="blue">
Blue button
</MyButton>
```

--------------------------------

### Theme Token Usage in css()

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/1.css-function.md

Demonstrates how to use theme tokens within the css() function. These tokens are resolved to their CSS variable values.

```ts
css({
  '.my-button': {
    backgroundColor: '{color.primary.100}'
  }
})
```

```css
.my-button {
  background-color: var(--color-primary-100);
}
```

--------------------------------

### TypeScript Output from Theme Configuration

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/0.tokens-config.md

Generated TypeScript output from the theme.config.ts, defining the theme object, type, and paths.

```typescript
export const theme = {
  media: {
    tablet: {
      value: '(min-width: 768px)',
      variable: 'var(--media-tablet)',
      original: '(min-width: 768px)'
    },
    desktop: {
      value: '(min-width: 1024px)',
      variable: 'var(--media-desktop)',
      original: '(min-width: 1024px)'
    }
  },
  color: {
    white: {
      value: '#FFFFFF',
      variable: 'var(--color-white)',
      original: '#FFFFFF'
    },
    black: {
      value: '#191919',
      variable: 'var(--color-black)',
      original: '#191919'
    },
    primary: {
      value: '#ED4D31',
      variable: 'var(--color-primary)',
      original: '#ED4D31'
    },
    secondary: {
      value: '#4560B0',
      variable: 'var(--color-secondary)',
      original: '#4560B0'
    },
    tertiary: {
      value: '#FBEFDE',
      variable: 'var(--color-tertiary)',
      original: '#FBEFDE'
    }
  },
  space: {
    1: {
      value: '0.25rem',
      variable: 'var(--space-1)',
      original: '0.25rem'
    },
    2: {
      value: '0.5rem',
      variable: 'var(--space-2)',
      original: '0.5rem'
    },
    3: {
      value: '0.75rem',
      variable: 'var(--space-3)',
      original: '0.75rem'
    },
    4: {
      value: '1rem',
      variable: 'var(--space-4)',
      original: '1rem'
    }
  }
} as const

export type PinceauTheme = typeof theme

export type PinceauThemePaths = 'media.tablet' | 'media.desktop' | 'color.white' | 'color.black' | 'color.primary' | 'color.secondary' | 'color.tertiary' | 'space.1' | 'space.2' | 'space.3' | 'space.4'

export default theme
```

--------------------------------

### Configure Volar for Pinceau TypeScript Support

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Manually add the Volar plugin and types to your tsconfig.json to enable full TypeScript support in `<style lang="ts">` blocks when using Vite.

```json
{
  "compilerOptions": {
    "types": ["@pinceau/outputs"]
  },
  "vueCompilerOptions": {
    "plugins": [
      "@pinceau/volar"
    ]
  }
}
```

--------------------------------

### Basic Component Styling

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Defines the base styles for a component using Pinceau's css() function within a Vue <style> block.

```vue
<style lang="ts">
css({
  '.my-button': {
    backgroundColor: '{color.blue.1}',
    padding: '{space.4}'
  }
})
</style>
```

--------------------------------

### Normalized Theme Structure

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/1.design-tokens.md

Illustrates the internal normalized structure of a Pinceau theme after processing, where each token is represented with a 'value' property.

```javascript
const theme = {
  media: {
    tablet: {
      value: '(min-width: 768px)'
    },
    desktop: {
      value: '(min-width: 1024px)'
    }
  },
  color: {
    white: {
      value: '#FFFFFF'
    },
    black: {
      value: '#191919'
    },
    primary: {
      value: '#ED4D31'
    },
    secondary: {
      value: '#4560B0'
    },
    tertiary: {
      value: '#FBEFDE'
    }
  },
  space: {
    1: {
      value: '0.25rem'
    },
    2: {
      value: '0.5rem'
    },
    3: {
      value: '0.75rem'
    },
    4: {
      value: '1rem'
    }
  }
}
```

--------------------------------

### Use Theme Tokens in CSS

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/0.what-is-pinceau.md

Access defined theme tokens for padding and background color within a Vue component's style block using Pinceau's CSS syntax.

```postcss
<style>
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>
```

--------------------------------

### Local Tokens in css()

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/1.css-function.md

Illustrates the use of local CSS custom properties within the css() function, which can be used like theme tokens and offer type-safe customization.

```ts
css({
  '.my-button': {
    // This is a local token
    '--button-primary': '{color.primary.100}',
    // Local tokens also supports Computed Styles
    '--button-secondary': props => `{color.${props.color}.100}`,
    // Local tokens are used like theme tokens
    'backgroundColor': '{button.primary}',
    'color': '{button.secondary}'
  }
})
```

--------------------------------

### Button Component with Variants

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Defines a button component with responsive sizing variants using Pinceau's css function and variants.

```vue
<script setup lang="ts">
import { computedStyle } from 'pinceau/runtime'

defineProps({
  color: computedStyle<keyof PinceauTheme['color']>('red'),
  ...variants,
})
</script>

<template>
  <button class="my-button">
    <span>
      <ContentSlot :use="$slots.default" unwrap="p" />
    </span>
  </button>
</template>

<style scoped lang="ts">
css({
  '.my-button': {
    ...previousStyling
  },
  'variants': {
    size: {
      sm: {
        span: {
          padding: '{space.3} {space.6}',
        },
      },
      md: {
        span: {
          padding: '{space.6} {space.8}'
        },
      },
      lg: {
        span: {
          padding: '{space.8} {space.12}'
        },
      },
      xl: {
        span: {
          padding: '{space.12} {space.24}'
        },
      },
      options: {
        default: 'sm',
      },
    },
  },
})
</style>
```

--------------------------------

### Custom Console Time Logging

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Overrides console.timeLog to send timing information to the parent process. Logs a warning if the timer label does not exist.

```javascript
const original_timelog = console.timeLog
const timers = new Map()

console.timeLog = (label = 'default') => {
  original_timelog(label)
  const now = performance.now()
  if (timers.has(label)) {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-log',
        args: [`${label}: ${now - timers.get(label)}ms`]
      },
      '*'
    )
  } else {
    parent.postMessage(
      {
        action: 'console',
        level: 'system-warn',
        args: [`Timer '${label}' does not exist`]
      },
      '*'
    )
  }
}
```

--------------------------------

### Console Proxying

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Proxies various console methods (`log`, `warn`, `error`, etc.) to send output to the parent window. It also handles duplicate messages and console grouping actions.

```javascript
let previous = { level: null, args: null }
;
['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach( (level) => {
  const original = console[level]
  console[level] = (...args) => {
    const msg = args[0]
    if (typeof msg === 'string') {
      if (
        msg.includes('You are running a development build of Vue') ||
        msg.includes('You are running the esm-bundler build of Vue')
      ) {
        return
      }
    }
    original(...args)

    const stringifiedArgs = stringify(args)
    if ( previous.level === level && previous.args && previous.args === stringifiedArgs ) {
      parent.postMessage(
        { action: 'console', level, duplicate: true },
        '*'
      )
    } else {
      previous = { level, args: stringifiedArgs }
      try {
        parent.postMessage({ action: 'console', level, args }, '*')
      } catch (err) {
        parent.postMessage(
          { action: 'console', level, args: args.map(toString) },
          '*'
        )
      }
    }
  }
})

;
[
  { method: 'group', action: 'console_group' },
  { method: 'groupEnd', action: 'console_group_end' },
  { method: 'groupCollapsed', action: 'console_group_collapsed' },
].forEach((group_action) => {
  const original = console[group_action.method]
  console[group_action.method] = (label) => {
    parent.postMessage({ action: group_action.action, label }, '*')
    original(label)
  }
})

const timers = new Map()
const original_time = console.time
const original_timelog = console.timeLog
const original_timeend = console.timeEnd

console.time = (label = 'default') => {
  original_time(label)
  timers.set(label
```

--------------------------------

### Custom Console Trace

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Overrides console.trace to send the stack trace to the parent process.

```javascript
const original_trace = console.trace
console.trace = (...args) => {
  const stack = new Error().stack
  parent.postMessage(
    {
      action: 'console',
      level: 'trace',
      args,
      stack
    },
    '*'
  )
  original_trace(...args)
}
```

--------------------------------

### Configure Pinceau Nuxt Module

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/1.installation.md

Add the Pinceau Nuxt module to your nuxt.config.ts file. Module options are the same as plugin options.

```typescript
defineNuxtConfig({
  modules: ['pinceau/nuxt'],
  pinceau: {
    ...options
  }
})
```

--------------------------------

### JSON Stringification with Proxy Handling

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Safely stringifies JSON data, replacing component proxies with a placeholder string to avoid errors during serialization.

```javascript
function stringify(args) {
  try {
    return JSON.stringify(args, (key, value) => {
      return isComponentProxy(value) ? '{component proxy}' : value
    })
  } catch (error) {
    return null
  }
}
```

--------------------------------

### Using $dt() for CSS Variables and Raw Values

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/2.tokens-helper.md

Demonstrates how to use the $dt() helper to retrieve CSS variable names or raw token values. Ensure your theme is defined before using $dt().

```typescript
defineTheme({
  color: {
    primary: {
      100: 'red'
    }
  }
})

$dt('color.primary.100') // var(--color-primary-100)

$dt('color.primary.100', 'value') // 'red'
```

--------------------------------

### Add Utility Imports

Source: https://github.com/tahul/pinceau/blob/main/docs/content/3.advanced/0.vite-plugin-options.md

Provide an array of strings to `utilsImports` to add imports to the top of the `utils.ts` output. This is useful when using external modules within your Utils properties.

```typescript
utilsImports: []
```

--------------------------------

### Define Utility Properties in theme.config.ts

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/4.utils-properties.md

Define custom utility properties like 'px' and 'mx' within your theme configuration file. These utilities abstract common CSS patterns for reuse.

```typescript
import type { PropertyValue } from '@pinceau/style'

export default defineTheme({
  space: {
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem'
  },

  utils: {
    px: (value: PropertyValue<'padding'>) => ({
      paddingLeft: value,
      paddingRight: value
    }),
    mx: (value: PropertyValue<'margin'>) => ({
      marginLeft: value,
      marginRight: value
    })
  }
})
```

--------------------------------

### MyButton Component with Pinceau Styling

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/0.your-first-component.md

Defines the complete MyButton component, including its template and scoped styles using Pinceau's css() function for advanced theming and responsiveness.

```vue
<template>
  <button class="my-button">
    <span>
      <ContentSlot :use="$slots.default" unwrap="p" />
    </span>
  </button>
</template>

<style scoped lang="ts">
css({
  '.my-button': {
    '--button-primary': '{color.primary.600}',
    '--button-secondary': '{color.primary.500}',
    'display': 'inline-block',
    'borderRadius': '{radii.xl}',
    'transition': '{transition.all}',
    'color': '{color.white}',
    'boxShadow': '0 5px 0 {button.primary}, 0 12px 16px {color.dimmed}',
    'span': {
      display: 'inline-block',
      fontFamily: '{typography.font.display}',
      borderRadius: '{radii.lg}',
      fontSize: '{fontSize.xl}',
      lineHeight: '{lead.none}',
      transition: '{transition.all}',
      backgroundColor: '{button.primary}',
      boxShadow: 'inset 0 -1px 1px {color.dark}',
      padding: '{space.3} {space.6}'
    },
    '&:hover': {
      span: {
        backgroundColor: '{button.secondary}',
      }
    },
    '&:active': {
      span: {
        transform: 'translateY({space.1})'
      }
    }
  }
})
</style>
```

--------------------------------

### Generated Utility Functions

Source: https://github.com/tahul/pinceau/blob/main/docs/content/1.configuration/4.utils-properties.md

Pinceau generates utility functions from your theme configuration, making them available for import and use in your components. These functions mirror the definitions in theme.config.ts.

```typescript
import { PropertyValue } from '@pinceau/style'

export function px(value: PropertyValue<'padding'>) {
  return {
    paddingLeft: value,
    paddingRight: value,
  }
}

export function mx(value: PropertyValue<'margin'>) {
  return {
    marginLeft: value,
    marginRight: value,
  }
}

export const utils = { px, mx } as const

export type PinceauUtils = typeof utils

export default utils
```

--------------------------------

### Stringification Utility

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Provides a utility function to safely convert various values to strings, handling errors and specific object types.

```javascript
function toString(value) {
  if (value instanceof Error) {
    return value.message
  }
  for (const fn of [
    String,
    (v) => Object.prototype.toString.call(v),
    (v) => typeof v,
  ]) {
    try {
      return fn(value)
    } catch (err) {}
  }
}
```

--------------------------------

### Global Error Handling

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Catches global errors and unhandled promise rejections, sending them to the parent window. Includes specific handling to ignore certain cross-origin errors and Vue development build warnings.

```javascript
window.onerror = function (msg, url, lineNo, columnNo, error) {
  // ignore errors from import map polyfill - these are necessary for
  // it to detect browser support
  if (msg.includes('module specifier “vue”')) {
    // firefox only error, ignore
    return false
  }
  if (msg.includes("Module specifier, 'vue")) {
    // Safari only
    return false
  }

  try {
    parent.postMessage({ action: 'error', value: error }, '*')
  } catch (e) {
    parent.postMessage({ action: 'error', value: msg }, '*')
  }
}

window.addEventListener('unhandledrejection', (event) => {
  if (
    event.reason.message &&
    event.reason.message.includes('Cross-origin')
  ) {
    event.preventDefault()
    return
  }

  try {
    parent.postMessage(
      { action: 'unhandledrejection', value: event.reason },
      '*'
    )
  } catch (e) {
    parent.postMessage(
      { action: 'unhandledrejection', value: event.reason.message },
      '*'
    )
  }
})
```

--------------------------------

### Binding Pinceau Styles to a Nested Element

Source: https://github.com/tahul/pinceau/blob/main/docs/content/2.styling/4.variants.md

Demonstrates how to manually bind Pinceau styles to a nested element using `:class="$pinceau"`. This is useful when the root component does not support the `class` attribute or when styling a specific child element.

```vue
<template>
  <Transition>
    <div :class="$pinceau" />
  </Transition>
</template>
```

--------------------------------

### Custom Console Count

Source: https://github.com/tahul/pinceau/blob/main/integrations/repl/src/components/output/srcdoc.html

Overrides console.count to increment a counter for a given label and send the count to the parent process. Initializes the counter if it doesn't exist.

```javascript
const counter = new Map()
const original_count = console.count
const original_countreset = console.countReset
console.count = (label = 'default') => {
  counter.set(label, (counter.get(label) || 0) + 1)
  parent.postMessage(
    {
      action: 'console',
      level: 'system-log',
      args: `${label}: ${counter.get(label)}`
    },
    '*'
  )
  original_count(label)
}
```

--------------------------------

### Use CSS Function with Props and Variants

Source: https://github.com/tahul/pinceau/blob/main/docs/content/0.get-started/0.what-is-pinceau.md

Apply dynamic styles using the css() function in a Vue component's style block, referencing theme tokens and component props for dynamic styling and defining variants.

```vue
<script setup>
defineProps({
  color: computedStyle<keyof PinceauTheme['color']>('green'),
  ...variants
})
</script>

<template>
  <button class="my-button">
    <slot />
  </button>
</template>

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