### Install @tokenami/ds Package

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Installs the @tokenami/ds package using npm. This is the initial step to integrate the design system into your project.

```sh
npm install @tokenami/ds
```

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

### Install Tokenami CLI and CSS Utility

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Installs the Tokenami command-line interface and the core CSS utility package as development dependencies using npm.

```sh
npm install -D tokenami && npm install @tokenami/css
```

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

### Run Development Server - Bash Commands

Source: https://github.com/dspindola/tokenami/blob/main/examples/nextjs/README.md

Commands to start the development server for a Next.js project using different package managers (npm, yarn, pnpm, bun). These commands initiate the local development environment for building and testing the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Run Tokenami Watcher for CSS Generation

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Starts the Tokenami CLI in watch mode to continuously build CSS files. It specifies an output file and watches for changes, recompiling as needed.

```sh
npx tokenami --output ./public/styles.css --watch
```

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

### Set Up CSS Utility with Aliases

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Configures a CSS utility function by importing `createCss` and a configuration object. This setup is essential for resolving conflicts when using custom property aliases across components. The `config` object is passed to `createCss` to initialize the utility.

```typescript
// css.ts
import { createCss } from '@tokenami/css';
import config from '../.tokenami/tokenami.config';

export const css = createCss(config);
```

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

### Style Composition with Includes in Tokenami CSS

Source: https://context7.com/dspindola/tokenami/llms.txt

Shows how to compose styles using the `includes` option for better code reuse. This example uses `css` and `css.compose` from '@tokenami/css' to create reusable style blocks for buttons.

```tsx
import { css, type TokenamiCSS } from '@tokenami/css';

// Reusable focus styles (inline)
const focusable = css({
  '--focus_outline': 'var(--outline_sm)',
  '--focus_outline-offset': 2,
  '--focus_outline-color': 'var(--color_primary)',
});

// Base button (composed, extracted to stylesheet)
const baseButton = css.compose({
  '--display': 'inline-flex',
  '--align-items': 'center',
  '--justify-content': 'center',
  '--padding': 4,
  '--border-radius': 'var(--radii_rounded)',
  '--font-weight': 500,
  '--transition': 'all 0.2s ease',
});

// Specialized button inheriting base styles
const primaryButton = css.compose({
  includes: [baseButton, focusable],
  '--background': 'var(--color_primary)',
  '--color': 'var(--color_white)',
  '--hover_background': 'var(--color_primary-dark)',
});

function PrimaryButton(props) {
  const [cn, styles] = primaryButton();
  return <button {...props} className={cn(props.className)} style={styles(props.style)} />;
}

// Conflicting styles are moved inline
// Output: <button class="tk-abc" style="--focus_outline: var(--outline_sm); --background: var(--color_primary);">

```

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

### Configure Editor Suggestions for Tokenami

Source: https://context7.com/dspindola/tokenami/llms.txt

Optimizes editor suggestions for a better developer experience when working with Tokenami. It enables graceful filtering and word start matching for string suggestions, improving autocompletion accuracy.

```json
{
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.suggest.filterGraceful": false,
  "editor.suggest.matchOnWordStartOnly": true
}
```

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

### Adjust Fluid Padding Breakpoints

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Modifies the breakpoint range for fluid padding. This example changes the clamping from 'min-max' to 'sm-md', affecting when the minimum and maximum padding values are applied.

```tsx
css({
- '--padding': 'var(--fluid-p-clamp_min-max)',
+ '--padding': 'var(--fluid-p-clamp_sm-md)',
  '--fluid-p-min': 2,
  '--fluid-p-max': 4,
});
```

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

### CI Setup for Tokenami Type Checking

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Ensures accurate Tokenami type checking in a Continuous Integration environment by running both `tokenami check` and `tsc --noEmit`. This is necessary because development builds with widened types might not reveal Tokenami-specific type errors.

```sh
tokenami check; tsc --noEmit
```

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

### TypeScript Utility Types for Tokenami CSS Components

Source: https://context7.com/dspindola/tokenami/llms.txt

Demonstrates type-safe component props and variant extraction using Tokenami's TypeScript utility types. This example defines a `Card` component with variants and extracts token types for `color` and `radii`.

```tsx
import { type TokenamiStyle, type Variants, type TokenValue, css } from '@tokenami/css';
import * as React from 'react';

// Extract variant types from composed styles
const card = css.compose({
  '--border-radius': 'var(--radii_rounded)',

  variants: {
    elevation: {
      low: { '--box-shadow': 'var(--shadow_sm)' },
      high: { '--box-shadow': 'var(--shadow_lg)' },
    },
    padding: {
      none: { '--padding': 0 },
      small: { '--padding': 2 },
      large: { '--padding': 6 },
    },
  },
});

// Component with variant and style props
interface CardProps
  extends TokenamiStyle<React.ComponentProps<'div'>>,
    Variants<typeof card> {
  children: React.ReactNode;
}

function Card({ elevation = 'low', padding = 'small', ...props }: CardProps) {
  const [cn, styles] = card({ elevation, padding });
  return <div {...props} className={cn(props.className)} style={styles(props.style)} />;
}

// Get token value types
type ColorToken = TokenValue<'color'>;  // 'var(--color_primary)' | 'var(--color_secondary)' | ...
type RadiiToken = TokenValue<'radii'>;  // 'var(--radii_rounded)' | 'var(--radii_circle)'

// Usage with type safety
<Card
  elevation="high"
  padding="large"
  style={{
    '--background': 'var(--color_slate-100)', // Type-safe token
    '--color': 'var(--color_slate-900)',
  }}>
  Card content
</Card>

```

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

### Apply Gradient Background

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Applies a gradient background to an element using Tokenami's CSS utility. It combines gradient direction tokens with color tokens for the start and end points of the gradient.

```tsx
css({
  '--background-image': 'var(--gradient_to-b)',
  '--gradient-from': 'var(--color_crimson9)',
  '--gradient-to': 'var(--color_green10)',
});
```

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

### Improve Tokenami Autocomplete Speed and Accuracy in VS Code

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Optimizes IntelliSense behavior in VS Code for Tokenami by disabling graceful filtering and prioritizing word start matches. This reduces noise and improves the relevance and speed of suggestions. Add these settings to your workspace's `.vscode/settings.json`.

```json
{
  "editor.suggest.filterGraceful": false,
  "editor.suggest.matchOnWordStartOnly": true
}
```

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

### Initialize Tokenami Project

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Initializes a new Tokenami project, likely setting up configuration files and directories required for the library to function.

```sh
npx tokenami init
```

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

### Initialize Tokenami Project CLI

Source: https://context7.com/dspindola/tokenami/llms.txt

Initializes a new Tokenami project by creating necessary configuration files and TypeScript definitions for autocompletion. This command can be run interactively or with custom configuration paths.

```bash
# Install Tokenami
npm install -D tokenami && npm install @tokenami/css

# Initialize project (interactive prompts for TypeScript/JavaScript and folder selection)
npx tokenami init

# Initialize with custom config path
npx tokenami init --config ./custom/path/tokenami.config.ts

# Generated files:
# .tokenami/tokenami.config.ts - Configuration file
# .tokenami/tokenami.env.d.ts - TypeScript definitions

```

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

### Apply Base and Overridden Styles with Tokenami `css` Utility

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Shows how to use the `css` utility in Tokenami to apply base styles and then override them with additional style objects. This is useful for creating components with default styles that can be easily modified.

```tsx
function Button(props) {
  return (
    <button
      {...props}
      style={css(
        { '--padding': 4 }, // Base styles
        props.style // Overrides
      )}
    />
  );
}
```

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

### Apply Tokenami Styles in React

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Demonstrates how to import and use the `css` utility from Tokenami within a React component to apply styles directly to an element using CSS variables.

```tsx
import { css } from '@tokenami/css';

function Page() {
  return <h1 style={css({ '--margin-top': 0, '--margin-bottom': 5 })}>Hello, World!</h1>;
}
```

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

### Build Tokenami CSS Stylesheets CLI

Source: https://context7.com/dspindola/tokenami/llms.txt

Generates static CSS stylesheets by scanning source files for Tokenami properties and values. Supports watch mode for development and minification for production builds. Custom glob patterns can also be specified.

```bash
# Build stylesheet once
npx tokenami --output ./public/styles.css

# Watch mode for development
npx tokenami --output ./public/styles.css --watch

# With custom config and minification for production
npx tokenami --config ./custom/tokenami.config.ts --output ./dist/styles.css --minify

# Specify custom glob patterns
npx tokenami "./src/**/*.tsx" --output ./public/styles.css

# Reference in HTML
# <link rel="stylesheet" href="/styles.css" />

```

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

### Responsive and Selector Combinations in Tokenami CSS

Source: https://context7.com/dspindola/tokenami/llms.txt

Illustrates combining breakpoints, selectors, and grid values for responsive designs using the `css` function from '@tokenami/css'. Supports media queries, hover states, focus states, container queries, and custom CSS variables.

```tsx
import { css } from '@tokenami/css';

function ResponsiveComponent() {
  return (
    <div style={css({
      // Base styles using grid system
      '--padding': 2,                    // 8px (2 * 4px grid)
      '--background': 'var(--color_slate-100)',

      // Responsive breakpoints
      '--md_padding': 4,                 // 16px at medium screens
      '--lg_padding': 6,                 // 24px at large screens

      // Hover states with media query
      '--hover_background': 'var(--color_slate-200)',
      '--hover_color': 'var(--color_primary)',

      // Combined responsive + hover
      '--md_hover_background': 'var(--color_slate-300)',
      '--lg_hover_padding': 8,

      // Focus states
      '--focus_outline': 'var(--outline_sm)',
      '--focus_outline-offset': 2,

      // Container queries
      '--md-container_padding': 5,

      // Custom CSS variables (triple dash)
      '---custom-shadow': '0 4px 6px rgba(0,0,0,0.1)',
      '--box-shadow': 'var(---custom-shadow)',
    })}>
      Content
    </div>
  );
}

```

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

### Configure Tokenami Theme with Colors and Radii

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Sets up the basic theme configuration for Tokenami, defining color palettes and radius values. This configuration is crucial for establishing design system constraints.

```typescript
export default createConfig({
  theme: {
    color: {
      'slate-100': '#f1f5f9',
      'slate-700': '#334155',
      'sky-500': '#0ea5e9',
    },
    radii: {
      rounded: '10px',
      circle: '9999px',
      none: 'none',
    },
  },
});
```

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

### Configure TypeScript for Tokenami Plugin

Source: https://context7.com/dspindola/tokenami/llms.txt

Sets up TypeScript or jsconfig for the Tokenami plugin, ensuring proper type definitions and integration. It includes the Tokenami environment declaration file and enables the 'tokenami' plugin within TypeScript's compiler options.

```json
{
  "include": [".tokenami/tokenami.env.d.ts", "src"],
  "compilerOptions": {
    "plugins": [{ "name": "tokenami" }]
  }
}
```

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

### Apply Conditional and Overridden Styles with Tokenami `css` Utility

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Demonstrates using the `css` utility in Tokenami to apply base styles, conditional styles, and prop-based overrides. The order of arguments determines precedence, with later styles overriding earlier ones.

```tsx
function Button(props) {
  const disabled = props.disabled && {
    '--opacity': 0.5,
    '--pointer-events': 'none',
  };

  return (
    <button
      {...props}
      style={css(
        { '--padding': 4 }, // Base styles
        disabled, // Conditional styles
        props.style // Props override
      )}
    />
  );
}
```

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

### Create Theme Configuration for Tokenami

Source: https://context7.com/dspindola/tokenami/llms.txt

Defines the design system configuration including theme tokens, breakpoints, selectors, and global styles. This function ensures design constraints are enforced throughout the application. It accepts options for file inclusion/exclusion, theme modes, responsive breakpoints, selectors, property aliases, and global styles.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  include: ['./app/**/*.{ts,tsx}'],
  exclude: ['./app/**/*.test.{ts,tsx}'],
  grid: '0.25rem', // Base spacing unit (4px at default font size)

  theme: {
    modes: {
      light: {
        color: {
          primary: '#0ea5e9',
          secondary: '#334155',
          background: '#ffffff',
        },
      },
      dark: {
        color: {
          primary: '#38bdf8',
          secondary: '#94a3b8',
          background: '#0f172a',
        },
      },
    },
    root: {
      radii: {
        rounded: '10px',
        circle: '9999px',
      },
      'text-size': {
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem',
      },
    },
  },

  responsive: {
    md: '@media (min-width: 768px)',
    lg: '@media (min-width: 1024px)',
    'md-container': '@container (min-width: 400px)',
  },

  selectors: {
    hover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
    'parent-hover': '.parent:hover > &',
    focus: '&:focus-visible',
  },

  aliases: {
    p: ['padding'],
    px: ['padding-inline'],
    py: ['padding-block'],
    size: ['width', 'height'],
  },

  properties: {
    width: ['grid', 'container'],
    height: ['grid', 'container'],
  },

  globalStyles: {
    '*, *::before, *::after': {
      boxSizing: 'border-box',
    },
    body: {
      fontFamily: 'system-ui, sans-serif',
      lineHeight: 1.5,
      margin: 0,
    },
  },

  keyframes: {
    wiggle: {
      '0%, 100%': { transform: 'rotate(-3deg)' },
      '50%': { transform: 'rotate(3deg)' },
    },
  },

  themeSelector: (mode) => (mode === 'root' ? ':root' : `[data-theme="${mode}"]`),
});

// Apply theme: <body data-theme="dark">

```

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

### Extend Styles with Tokenami Includes

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Shows how to extend existing styles by composing multiple CSS definitions using the `includes` property. This is useful for creating reusable style utilities and combining them into new components.

```tsx
// Reusable focus styles (will appear inline)
const focusable = css({
  '--focus_outline': 'var(--outline_sm)',
  '--outline-offset': 'var(--outline-offset_sm)',
});

// Base button styles (composed so will be extracted into stylesheet)
const button = css.compose({
  '--background': 'var(--color_primary)',
  '--color': 'var(--color_white)',
  '--padding': 4,
});

// New button that includes both
const tomatoButton = css.compose({
  includes: [button, focusable],
  '--background': 'var(--color_tomato)',
});
```

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

### Apply Tokenami Arbitrary Selectors for Styling

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Demonstrates using arbitrary selectors within Tokenami's `css` utility for advanced styling. These selectors allow targeting elements based on pseudo-classes, attributes, or descendant relationships directly within inline styles.

```tsx
<div
  style={css({
    '--{&:hover}_color': 'var(--color_primary)',
    '--{&:has(:focus)}_border-color': 'var(--color_highlight)',
    '--{&[data-state=open]}_border-color': 'var(--color_primary)',
    // use underscore for spaces in your selector
    '--{&_p}_color': 'var(--color_primary)',
  })}
/>
```

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

### Use Multiple CSS Variants Together

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Demonstrates how to apply multiple variants to a component dynamically. It composes the CSS class names and styles from the defined variants based on the provided props.

```tsx
function Card(props) {
  const [cn, css] = card({ color: 'blue', size: 'large' });
  return <div {...props} className={cn(props.className)} style={css(props.style)} />;
}
```

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

### Define Multiple Themes (Light and Dark) with Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Configures Tokenami to support multiple themes (e.g., light and dark) using the 'modes' key. Shared tokens are placed in 'root', and distinct tokens are defined per mode. This enables dynamic theme switching via generated classes like '.theme-light' and '.theme-dark'.

```typescript
export default createConfig({
  theme: {
    modes: {
      light: {
        color: {
          primary: '#f1f5f9',
          secondary: '#334155',
        },
      },
      dark: {
        color: {
          primary: '#0ea5e9',
          secondary: '#f1f5f9',
        },
      },
    },
    root: {
      radii: {
        rounded: '10px',
        circle: '9999px',
        none: 'none',
      },
    },
  },
});
```

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

### Use Tokenami Arbitrary Values with Fallback

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Illustrates how to use arbitrary values in Tokenami with a triple-dash fallback for TypeScript compatibility and developer experience. This pattern prevents type errors and provides a default value when theme tokens are not explicitly used.

```tsx
<div style={css({ '--padding': 'var(---, 20px)' })} />
```

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

### Create Custom CSS Utility with Tokenami

Source: https://context7.com/dspindola/tokenami/llms.txt

Creates a configured CSS utility using custom aliases, essential for managing property aliases and ensuring proper conflict resolution within your components. This utility can then be used to apply styles dynamically.

```typescript
// css.ts
import { createCss } from '@tokenami/css';
import config from '../.tokenami/tokenami.config';

export const css = createCss(config);

// Usage in components
import { css } from './css';

function Card(props) {
  return (
    <div style={css(
      { '--p': 4 },           // Uses padding alias
      { '--px': 2 },          // Overrides horizontal padding
      props.style
    )}>
      {props.children}
    </div>
  );
}

```

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

### Arbitrary Selectors and Values in Tokenami CSS

Source: https://context7.com/dspindola/tokenami/llms.txt

Demonstrates using custom selectors like hover, has, and data attributes, along with arbitrary values, for rapid prototyping without modifying configuration. Uses the `css` function from '@tokenami/css'.

```tsx
import { css } from '@tokenami/css';

function InteractiveCard(props) {
  return (
    <div
      className="parent"
      style={css({
        // Arbitrary selector for hover state
        '--{&:hover}_color': 'var(--color_primary)',

        // Style when containing focused element
        '--{&:has(:focus)}_border-color': 'var(--color_highlight)',

        // Data attribute selector
        '--{&[data-state=open]}_border-color': 'var(--color_success)',

        // Descendant selector (use underscore for spaces)
        '--{&_p}_color': 'var(--color_muted)',

        // Arbitrary value with triple-dash fallback (adds friction to encourage theme usage)
        '--padding': 'var(---, 20px)',
        '--margin-top': 'var(---, 2.5rem)',
      })}>
      <p>Card content</p>
    </div>
  );
}

```

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

### Enable String Autocompletions in VS Code

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Configures VS Code to provide autocompletion suggestions for partial strings, which is necessary for Tokenami to update its suggestions effectively. This setting is added to the `.vscode/settings.json` file.

```json
{
  "editor.quickSuggestions": {
    "strings": true
  }
}
```

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

### Create Reusable Components with Tokenami `css.compose`

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Utilizes the `css.compose` API in Tokenami to create reusable styled components with variants. Styles defined in `compose` are extracted into a stylesheet and replaced with class names, optimizing markup and reducing repetition.

```tsx
const button = css.compose({
  '--background': 'var(--color_primary)',
  '--hover_background': 'var(--color_primary-dark)',
});

function Button(props) {
  const [cn, css] = button();
  return <button {...props} className={cn(props.className)} style={css(props.style)} />; 
}
```

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

### Configure Tokenami with Design System

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Configures Tokenami to include an external design system and specifies files to include for styling. This allows projects to consume and extend shared design tokens and styles.

```tsx
import designSystemConfig from '@acme/design-system';
import { createConfig } from '@tokenami/css';

export default createConfig({
  ...designSystemConfig,
  include: ['./app/**/*.{ts,tsx}', 'node_modules/@acme/design-system/tokenami.css'],
});
```

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

### Customize Theming Properties in Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Customizes how Tokenami maps design tokens to CSS properties. The `theme` object defines available tokens (like 'container' and 'pet'), while the `properties` object specifies which theme categories can be used for specific CSS properties. This allows for fine-grained control over design system consistency.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  theme: {
    container: {
      half: '50%',
      full: '100%',
    },
    pet: {
      cat: '"🐱"',
      dog: '"🐶"',
    },
  },
  properties: {
    width: ['grid', 'container'],
    height: ['grid', 'container'],
    content: ['pet'],
  },
});
```

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

### Define Custom Properties and Gradients with Tokenami Config

Source: https://context7.com/dspindola/tokenami/llms.txt

Configures custom design system properties, including gradients and color mixing, for advanced styling. It defines theme colors, gradient types, and custom properties like '--gradient-from' and '--mix-bg-color', expecting color or number inputs.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  theme: {
    color: {
      primary: '#0ea5e9',
      secondary: '#8b5cf6',
      white: '#ffffff',
      black: '#000000',
    },
    gradient: {
      radial: 'radial-gradient(circle at top, var(--gradient-from), var(--gradient-to) 80%)',
      linear: 'linear-gradient(135deg, var(--gradient-from), var(--gradient-to))',
    },
  },

  properties: {
    'background-image': ['gradient'],
  },

  customProperties: {
    'gradient-from': ['color'],
    'gradient-to': ['color'],
    'mix-bg-color': ['color'],
    'mix-bg-percent': ['number'],
  },
});

// Usage in components
css({
  '--background-image': 'var(--gradient_linear)',
  '--gradient-from': 'var(--color_primary)',
  '--gradient-to': 'var(--color_secondary)',
});
```

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

### Define Custom Properties for Design System Features

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Enables the creation of custom CSS properties that leverage existing theme tokens. The `customProperties` object defines new properties (e.g., 'gradient-from', 'gradient-to') and specifies which theme categories they should draw from (e.g., 'color'). The `properties` key then maps these custom properties to actual CSS properties like 'background-image'.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  theme: {
    color: {
      primary: '#f1f5f9',
      secondary: '#334155',
    },
    gradient: {
      radial: 'radial-gradient(circle at top, var(--gradient-from), var(--gradient-to) 80%)',
    },
  },
  properties: {
    'background-image': ['gradient'],
  },
  customProperties: {
    'gradient-from': ['color'],
    'gradient-to': ['color'],
  },
});
```

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

### Type Style Prop with TokenamiStyle

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Shows how to use the `TokenamiStyle` TypeScript utility type to correctly type the `style` prop of components that utilize the Tokenami `css` utility. This allows the `style` prop to accept Tokenami-specific properties while maintaining type safety.

```typescript
import { type TokenamiStyle, css } from '@tokenami/css';

interface ButtonProps extends TokenamiStyle<React.ComponentProps<'button'>> {}

function Button(props: ButtonProps) {
  return <button {...props} style={css({}, props.style)} />;
}
```

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

### Apply Responsive Styles with Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Applies styles that change based on defined breakpoints. It uses the breakpoint names as prefixes to CSS properties, allowing for different values at different screen or container sizes.

```tsx
<div
  style={css({
    '--padding': 2, // Base padding
    '--md_padding': 4, // Padding at medium breakpoint
    '--lg_padding': 6, // Padding at large breakpoint
    '--md-self_padding': 8, // Padding when container is medium
  })}
/>
```

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

### Check Tokenami Properties CLI

Source: https://context7.com/dspindola/tokenami/llms.txt

Runs type checking for Tokenami properties using the TypeScript compiler to ensure correct usage of design tokens. This command is useful for integrating into CI/CD pipelines to catch potential errors early.

```bash
# Check for type errors in Tokenami properties
npx tokenami check

# With custom config
npx tokenami check --config ./custom/tokenami.config.ts

# Integrate into CI/CD pipeline
npm run build && tokenami check && tsc --noEmit

```

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

### Configure Breakpoints in Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Defines responsive breakpoints for use in styling. These breakpoints can be media queries or container queries, enabling responsive design adjustments based on screen or container size.

```ts
export default createConfig({
  responsive: {
    md: '@media (min-width: 700px)',
    lg: '@media (min-width: 1024px)',
    'md-self': '@container (min-width: 400px)', // Container queries work too!
  },
});
```

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

### Configure Tokenami with @tokenami/ds

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Integrates the @tokenami/ds configuration into your tokenami.config.js file. It merges the design system's defaults with your project's specific include paths.

```tsx
import designSystemConfig from '@tokenami/ds';
import { createConfig } from '@tokenami/css';

export default createConfig({
  ...designSystemConfig,
  include: ['./app/**/*.{ts,tsx}'],
});
```

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

### Basic Styling with css Utility in React (TSX)

Source: https://context7.com/dspindola/tokenami/llms.txt

The 'css' utility from '@tokenami/css' is used for authoring styles in React components. It composes and resolves style overrides, preventing specificity conflicts. It accepts multiple style objects, with later objects taking precedence. Conditional styles and prop overrides can be passed as separate arguments.

```tsx
import { css } from '@tokenami/css';

function Button(props) {
  const disabled = props.disabled && {
    '--opacity': 0.5,
    '--pointer-events': 'none',
  };

  return (
    <button
      {...props}
      style={css(
        { '--padding': 4, '--background': 'var(--color_primary)' }, // Base styles
        disabled, // Conditional override
        props.style // Props override (last wins)
      )}
    />
  );
}

// Output: <button style="--padding: 4; --background: var(--color_primary);">

```

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

### Extend Component Props with Tokenami Variants Type

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Demonstrates how to use the `Variants` TypeScript utility type to augment component props with variant definitions from Tokenami. This ensures type safety when applying variants to components, enhancing developer experience and reducing errors.

```typescript
import { type Variants } from '@tokenami/css';

type ButtonElementProps = React.ComponentPropsWithoutRef<'button'>;
interface ButtonProps extends ButtonElementProps, Variants<typeof button> {}

```

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

### Define Global Styles with Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Provides global styles that will be included as part of the design system. This is used for setting base styles like box-sizing, font-family, and margin for all elements.

```ts
export default createConfig({
  globalStyles: {
    '*, *::before, *::after': {
      boxSizing: 'border-box',
    },
    body: {
      fontFamily: 'system-ui, sans-serif',
      lineHeight: 1.5,
      margin: 0,
      padding: 0,
    },
  },
});
```

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

### Apply Opacity to Background Color

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Applies a semi-transparent background color using Tokenami's CSS utility. It utilizes mix-blend tokens to set the color and its opacity percentage.

```tsx
css({
  '--background-color': 'var(--mix-bg_opacity)',
  '--mix-bg-color': 'var(--color_violet11)',
  '--mix-bg-percent': 50,
});
```

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

### Configure Custom Selectors in Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Defines custom selectors for applying styles based on element states or relationships. Uses the ampersand (&) to denote the injection point of the current element's selector. The `createConfig` function is used to define these selectors.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  selectors: {
    'parent-hover': '.parent:hover > &',
    hover: ['@media (hover: hover) and (pointer: fine)', '&:hover'],
  },
});
```

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

### Apply Fluid Padding with CSS

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Applies fluid padding to an element using Tokenami's CSS utility. It utilizes custom properties to define a padding range that scales between breakpoints.

```tsx
css({
  '--padding': 'var(--fluid-p-clamp_min-max)',
  '--fluid-p-min': 2,
  '--fluid-p-max': 4,
});
```

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

### Configure Animations in Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Defines CSS keyframes and theme aliases for animations. This allows for creating reusable animations that can be applied to elements through CSS custom properties.

```ts
export default createConfig({
  keyframes: {
    wiggle: {
      '0%, 100%': { transform: 'rotate(-3deg)' },
      '50%': { transform: 'rotate(3deg)' },
    },
  },
  theme: {
    anim: {
      wiggle: 'wiggle 1s ease-in-out infinite',
    },
  },
});
```

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

### Component Variants with css.compose in React (TSX)

Source: https://context7.com/dspindola/tokenami/llms.txt

The 'css.compose' function from '@tokenami/css' allows for creating reusable styled components with defined variants. It extracts static styles into a stylesheet and generates a unique class name for efficiency. Variants can be defined for properties like 'color' and 'size', and applied using the returned 'button' function.

```tsx
import { css, type Variants, type TokenamiStyle } from '@tokenami/css';

const button = css.compose({
  '--background': 'var(--color_primary)',
  '--hover_background': 'var(--color_primary-dark)',
  '--padding': 4,
  '--border-radius': 'var(--radii_rounded)',

  variants: {
    color: {
      blue: { '--background': 'var(--color_blue)' },
      green: { '--background': 'var(--color_green)' },
    },
    size: {
      small: { '--padding': 2 },
      large: { '--padding': 6 },
    },
  },
});

interface ButtonProps
  extends TokenamiStyle<React.ComponentProps<'button'>>,
    Variants<typeof button> {}

function Button(props: ButtonProps) {
  const [cn, styles] = button({ color: props.color, size: props.size });
  return <button {...props} className={cn(props.className)} style={styles(props.style)} />; 
}

// Usage: <Button color="blue" size="large">Click me</Button>
// Output: <button class="tk-abc" style="--background: var(--color_blue); --padding: 6;">

```

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

### Apply Fluid Font Sizes with CSS

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Sets fluid font sizes using Tokenami's CSS utility. It defines a font size range that scales across different breakpoints, using predefined fluid tokens for minimum and maximum sizes.

```tsx
css({
  '--font-size': 'var(--fluid-text-size-clamp_min-max)',
  '--fluid-text-size-min': 'var(--fluid-text-size_xs)',
  '--fluid-text-size-max': 'var(--fluid-text-size_lg)',
});
```

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

### Customize Tokenami Theme Selector

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Customizes the theme selector function in Tokenami's configuration. This allows defining how different modes (including 'root') are mapped to CSS selectors, typically for applying theme-specific styles.

```typescript
export default createConfig({
  themeSelector: (mode) => (mode === 'root' ? ':root' : `[data-theme=${mode}]`),
});
```

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

### Define Property Aliases in Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Configures shorthand aliases for CSS properties within Tokenami. This allows for more concise styling by mapping short keys (e.g., 'p', 'px') to longer property names (e.g., 'padding', 'padding-inline'). These aliases are defined in the `aliases` section of the configuration.

```typescript
import { createConfig } from '@tokenami/css';

export default createConfig({
  aliases: {
    p: ['padding'],
    px: ['padding-inline'],
    py: ['padding-block'],
    size: ['width', 'height'],
  },
});
```

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

### Apply Animation Styles with Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Applies a defined animation to an element using CSS custom properties. The animation is referenced via a theme alias defined in the Tokenami configuration.

```tsx
<div style={css({ '--animation': 'var(--anim_wiggle)' })} />
```

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

### Set Custom Color Space

Source: https://github.com/dspindola/tokenami/blob/main/packages/ds/README.md

Changes the color space for the application using an inline style. It sets the `--color-space` custom property, defaulting to 'srgb' but allowing overrides like 'oklch'.

```tsx
<body style={css({ '--color-space': 'oklch' })}></body>
```

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

### Define CSS Variants with Tokenami

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Defines different style variations for a component using the `variants` object. This allows for dynamic styling based on component props. It utilizes CSS custom properties for styling.

```tsx
const card = css.compose({
  '--border-radius': 'var(--radii_rounded)',
  '--color': 'var(--color_white)',
  '--font-size': 'var(--text-size_sm)',

  variants: {
    color: {
      blue: { '--background-color': 'var(--color_blue)' },
      green: { '--background-color': 'var(--color_green)' },
    },
    size: {
      small: { '--padding': 2 },
      large: { '--padding': 6 },
    },
  },
});
```

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

### Infer Token Types with TokenValue

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Illustrates the usage of the `TokenValue` TypeScript utility type to infer union types of CSS variable tokens based on the defined theme. This provides type checking for values derived from theme tokens, ensuring that only valid tokens are used.

```typescript
import { type TokenValue } from '@tokenami/css';

type Color = TokenValue<'color'>; // var(--color_slate-100) | var(--color_slate-700)
type Radii = TokenValue<'radii'>; // var(--radii_rounded) | var(--radii_circle)

```

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

### Configure Tokenami Grid Value

Source: https://github.com/dspindola/tokenami/blob/main/README.md

Sets a custom grid value for spacing in Tokenami. This value is used as a multiplier for numerical inputs to properties like padding and margin, allowing for consistent spacing based on a defined unit.

```typescript
export default createConfig({
  grid: '10px',
  // ... rest of your config
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.