### Install Style Dictionary and Style Dictionary Utils

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Installs the style-dictionary-utils and style-dictionary packages as development dependencies using npm.

```bash
npm i -D style-dictionary-utils style-dictionary
```

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

### Complete Build Example with Style Dictionary Utils (JavaScript)

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This example demonstrates a full build configuration using style-dictionary-utils. It initializes Style Dictionary with custom logging settings and extends it to define multiple platforms (CSS, ESM, TypeScript) with specific transformations, formats, and filters. The script then cleans and builds all configured platforms.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary({
  log: {
    warnings: 'warn',
    verbosity: 'verbose',
    errors: { brokenReferences: 'throw' },
  },
})

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json5'],
  platforms: {
    // CSS output with advanced features
    css: {
      prefix: 'ds',
      buildPath: 'dist/css/',
      basePxFontSize: 16,
      outputUnit: 'rem',
      colorOutputFormat: 'hex',
      transformGroup: 'css/extended',
      files: [
        {
          format: 'css/advanced',
          destination: 'tokens.css',
          filter: 'isSource',
          options: {
            selector: ':root',
            outputReferences: true,
            rules: [
              {
                atRule: '@media (prefers-color-scheme: dark)',
                selector: ':root',
                matcher: (token) => token.filePath.includes('dark'),
              },
            ],
          },
        },
      ],
    },
    // JavaScript ES Module output
    esm: {
      prefix: 'tokens',
      buildPath: 'dist/js/',
      transforms: ['name/pathToCamelCase', 'w3c-color/css', 'dimension/css'],
      files: [
        {
          format: 'javascript/esm',
          destination: 'tokens.mjs',
          filter: 'isSource',
        },
      ],
    },
    // TypeScript declarations
    types: {
      buildPath: 'dist/types/',
      transforms: ['name/pathToCamelCase'],
      files: [
        {
          format: 'typescript/esm-declarations',
          destination: 'tokens.d.ts',
          filter: 'isSource',
          options: { rootName: 'DesignTokens' },
        },
      ],
    },
  },
})

await extendedSd.cleanAllPlatforms()
await extendedSd.buildAllPlatforms()
```

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

### Initialize and Extend Style Dictionary with Utils (TypeScript)

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Demonstrates how to import and use the StyleDictionary object from style-dictionary-utils to extend its configuration. It shows how to define platforms, transforms, and file outputs, and then build all configured platforms. This example is for Style Dictionary v4 and requires awaiting the extend method.

```typescript
// build.ts
import {StyleDictionary} from 'style-dictionary-utils'

const myStyleDictionary = new StyleDictionary()

// when using style dictionary 4 you whave to await the extend method
const extendedSd = await myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['color/css', 'shadow/css'],
      files: [
        {
          filter: 'isSource',
          destination: 'tokens.ts',
          format: 'javascript/esm',
        },
      ],
    },
  },
})

extendedSd.buildAllPlatforms()
```

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

### Color Transformation to CSS

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Explains the 'color/css' value transformer, which converts W3C color tokens into CSS color values. It supports various output formats including hex, rgb, rgba, hsl, hsla, and rgbFloat, configurable via the 'colorOutputFormat' platform option. The example shows setting the output to 'hsl'.

```javascript
myStyleDictionary.extend({
  platforms: {
    css: {
      transforms: ['color/css'],
      colorOutputFormat: 'hsl', // optional: defaults to 'hex'
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

```javascript
{
  color: {
    primary: {
      value: {
        colorSpace: "srgb",
        components: [0.051, 0.439, 0.902],
        alpha: 1
      },
      $type: "color"
    }
  }
}
```

```javascript
{
  color: {
    primary: {
      value: "#0d70e6",
      $type: "color"
    }
  }
}
```

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

### Convert Token Path to Dot Notation

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This transform converts nested token paths into a flat dot notation structure. It is useful for generating output formats like JSON or JavaScript objects where a flattened key-value structure is desired. The example shows how to apply it to a 'json' platform.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "colors": {
//     "red": {
//       "100": { "$value": "#fee2e2", "$type": "color" }
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    json: {
      prefix: 'ds',
      transforms: ['name/pathToDotNotation'],
      buildPath: 'dist/',
      files: [{ format: 'javascript/esm', destination: 'tokens.mjs' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output token name: ds.colors.red.100
```

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

### Convert Token Path to camelCase Notation

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This transform converts nested token paths into camelCase notation. It's beneficial for generating JavaScript-friendly token names. The example configures a 'js' platform to use this transform.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "colors": {
//     "bg": {
//       "default": { "$value": "#ffffff", "$type": "color" }
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    js: {
      transforms: ['name/pathToCamelCase'],
      buildPath: 'dist/',
      files: [{ format: 'javascript/esm', destination: 'tokens.mjs' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output token name: colorsBgDefault
```

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

### CSS Format with Advanced Options

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Demonstrates how to use the 'css/advanced' format for custom CSS output. This format allows for specifying media queries and custom selectors, enabling more dynamic styling based on attributes like theme and screen size. It also supports token filtering via a matcher function.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "css": {
      "transforms": //...,
      "files": [{
        // ...
        "format": "css/advanced",
        "options": {
          selector: `body[theme="dark"]`, // defaults to :root; set to false to disable
          rules: [
          {
            atRule: '@media (min-width: 768px)',
            selector: `body[size="medium"]` // this will be used instead of body[theme="dark"]
            matcher: (token: StyleDictionary.TransformedToken) => token.filePath.includes('tablet'), // tokens that match this filter will be added inside the media query
          }]
        }
      }]
    }
  }
});
```

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

### Convert W3C Color Tokens to CSS

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Shows how to use the 'w3c-color/css' transformer to convert W3C color tokens into CSS color values. It supports multiple output formats like hex, rgb, hsl, and their alpha variants, with options to specify the desired format.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "color": {
//     "primary": {
//       "$value": {
//         "colorSpace": "srgb",
//         "components": [0.051, 0.439, 0.902],
//         "alpha": 1
//       },
//       "$type": "color"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['w3c-color/css'],
      colorOutputFormat: 'hsl', // 'hex' (default), 'rgb', 'rgba', 'hsl', 'hsla', 'rgbFloat'
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output with hex (default): --color-primary: #0d70e6;
// Output with hsl: --color-primary: hsl(213deg 89% 48% / 1);
// Output with rgb: --color-primary: rgba(13, 112, 230, 1);
```

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

### Using the 'css/extended' Transform Group

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Demonstrates how to apply the predefined 'css/extended' transform group to a platform configuration. This group includes a comprehensive set of transforms for generating CSS, combining standard CSS transforms with additional utility transforms.

```javascript
myStyleDictionary.extend({
  platforms: {
    css: {
      transformGroup: 'css/extended',
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Convert W3C Dimension Tokens to CSS

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Illustrates the use of the 'dimension/css' transformer for converting W3C dimension tokens to CSS values. This transformer supports pixel (px) and rem units, with options to control the output unit and whether to append the unit.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "spacing": {
//     "medium": {
//       "$value": { "value": 16, "unit": "px" },
//       "$type": "dimension"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['dimension/css'],
      basePxFontSize: 16, // base for rem conversion (default: 16)
      outputUnit: 'rem', // 'px' or 'rem' (default: original unit)
      appendUnit: true, // append unit to output (default: true)
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output with px: --spacing-medium: 16px;
// Output with rem: --spacing-medium: 1rem;
```

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

### Registering a Custom Transform Group

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Shows how to register a custom transform group named 'webHex'. This simplifies the configuration by allowing multiple transforms to be referenced by a single group name, promoting reusability and cleaner code.

```javascript
myStyleDictionary.registerTransformGroup({
  name: 'webHex',
  transforms: ['color/css', 'dimension/css', 'typography/css'],
})
```

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

### Use CSS Extended Transform Group

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Demonstrates how to use the 'css/extended' transform group to apply all predefined CSS transforms from the package. This group combines standard W3C transforms with custom transformers for comprehensive CSS output.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css/extended', // includes all transforms below
      buildPath: 'dist/css/',
      files: [
        {
          format: 'css/advanced',
          destination: 'tokens.css',
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Included transforms:
// - w3c-border/css
// - w3c-color/css
// - cubicBezier/css
// - dimension/css
// - duration/css
// - typography/css
// - fontFamily/css
// - fontWeight/css
// - gradient/css
// - name/kebab
// - shadow/css
// - strokeStyle/css
// - transition/css
```

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

### Register Custom Transform with Style Dictionary Utils (JavaScript)

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Shows how to register a custom transform, 'transform/pxToRem', with the StyleDictionary object imported from style-dictionary-utils. This allows for custom token transformations.

```javascript
// build.ts
import { StyleDictionary } from 'style-dictionary-utils'

StyleDictionary.registerTransform({
  name: 'transform/pxToRem',
  $type: `value`,
  transitive: true,
  transform: () => // ...
})
```

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

### Convert W3C Shadow Tokens to CSS

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Details how to use the 'shadow/css' transformer to convert W3C shadow tokens into CSS box-shadow values. This transformer can handle both single and multiple shadow definitions, integrating with color and dimension transformers.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "shadow": {
//     "card": {
//       "$value": {
//         "offsetX": { "value": 0, "unit": "px" },
//         "offsetY": { "value": 4, "unit": "px" },
//         "blur": { "value": 8, "unit": "px" },
//         "spread": { "value": 0, "unit": "px" },
//         "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.1 },
//         "inset": false
//       },
//       "$type": "shadow"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['shadow/css', 'dimension/css', 'w3c-color/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --shadow-card: 0px 4px 8px 0px #0000001a;
// Multiple shadows are comma-separated: 0px 4px 8px 0px #0000001a, inset 0px 2px 4px 0px #00000033
```

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

### Transform Token Name to PascalCase Path

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Replaces token names with their PascalCase path equivalent. Add 'name/pathToPascalCase' to the transforms array to enable this naming convention.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['name/pathToPascalCase'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Convert Font Weight Tokens to Numeric CSS Values

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This utility converts W3C fontWeight string values (e.g., 'bold', 'light') into their corresponding numeric CSS values. It supports a predefined mapping of string names to numeric weights. The 'fontWeight/css' transform is required. Input is a token object, and output is CSS custom properties with numeric font weights.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "fontWeight": {
//     "light": { "$value": "light", "$type": "fontWeight" },
//     "bold": { "$value": "bold", "$type": "fontWeight" },
//     "black": { "$value": "black", "$type": "fontWeight" }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['fontWeight/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output:
// --font-weight-light: 300;
// --font-weight-bold: 700;
// --font-weight-black: 900;

// Supported values: thin(100), hairline(100), extra-light(200), light(300),
// normal(400), regular(400), medium(500), semi-bold(600), bold(700),
// extra-bold(800), black(900), extra-black(950)
```

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

### Convert Clamp Tokens to CSS clamp() Function

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This snippet demonstrates how to use the 'clamp/css' transform to convert Style Dictionary tokens with min, ideal, and max values into the CSS clamp() function. It requires the 'clamp/css' transform to be registered and assumes tokens are structured with a '$value' object containing 'min', 'ideal', and 'max' properties.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "size": {
//     "fluid": {
//       "$value": {
//         "min": "1.5rem",
//         "ideal": "0.5vw + 0.75rem",
//         "max": "2.5rem"
//       },
//       "$type": "clamp"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['clamp/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --size-fluid: clamp(1.5rem, 0.5vw + 0.75rem, 2.5rem);
```

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

### Export CSS variables with advanced options using style-dictionary-utils

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Exports design tokens as CSS variables, supporting advanced features like media queries, custom selectors, and rule-based grouping. It leverages Style Dictionary's extendable configuration to apply custom transformations and format outputs.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['name/kebab', 'w3c-color/css', 'dimension/css'],
      buildPath: 'dist/css/',
      files: [
        {
          format: 'css/advanced',
          destination: 'tokens.css',
          options: {
            selector: 'body[theme="dark"]', // defaults to :root
            outputReferences: true,
            rules: [
              {
                atRule: '@media (min-width: 768px)',
                selector: 'body[size="medium"]',
                matcher: (token) => token.filePath.includes('tablet'),
              },
              {
                atRule: ['@supports (display: grid)', '@media screen'],
                matcher: (token) => token.path.includes('grid'),
              },
            ],
          },
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output:
// body[theme="dark"] {
//   --color-background-primary: #ff0000;
// }
// @media (min-width: 768px) {
//   body[size="medium"] {
//     --color-button-primary: #c1c1c1;
//   }
// }
```

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

### Export TypeScript declaration files with style-dictionary-utils

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Generates TypeScript declaration files (.d.ts) for design tokens, including type definitions for improved developer experience and static analysis. The format can be customized with options like `rootName`.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    ts: {
      buildPath: 'dist/types/',
      files: [
        {
          format: 'typescript/esm-declarations',
          destination: 'tokens.d.ts',
          options: {
            rootName: 'DesignTokens', // customize root type name
          },
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output (tokens.d.ts):
// export default {
//   colors: {
//     primary: string,
//     secondary: string,
//   },
// }
```

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

### Convert Typography Tokens to CSS Font Shorthand

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This utility converts W3C typography tokens into CSS font shorthand values. It requires 'typography/css', 'fontFamily/css', 'fontWeight/css', and 'dimension/css' transforms. It takes a token object with typography details and outputs a CSS custom property with the shorthand font value.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "typography": {
//     "body": {
//       "$value": {
//         "fontWeight": 500,
//         "fontSize": { "value": 16, "unit": "px" },
//         "lineHeight": 1.5,
//         "fontFamily": ["Helvetica", "Arial", "sans-serif"]
//       },
//       "$type": "typography"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['typography/css', 'fontFamily/css', 'fontWeight/css', 'dimension/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --typography-body: 500 16px/1.5 Helvetica, Arial, sans-serif;
```

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

### Filter Tokens to Include Only Source Files

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

The 'isSource' filter ensures that only tokens defined directly in the primary source files are included in the build output, excluding any tokens that might be referenced or included from other files. This is useful for maintaining a clear separation between base tokens and extended or theme-specific ones.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  include: ['tokens/base/*.json'], // These tokens are excluded by filter
  source: ['tokens/theme/*.json'], // Only these tokens are included
  platforms: {
    css: {
      transforms: ['w3c-color/css'],
      buildPath: 'dist/',
      files: [
        {
          format: 'css/advanced',
          destination: 'theme-tokens.css',
          filter: 'isSource', // Only outputs tokens from source files
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()
```

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

### Transform Dimension to CSS Units (px/rem)

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Converts W3C dimension tokens to CSS dimension values, supporting px and rem units. Platform options allow customization of output unit, base font size for conversion, and unit appending.

```javascript
myStyleDictionary.extend({
  platforms: {
    css: {
      transforms: ['dimension/css'],
      basePxFontSize: 16, // optional: base font size for rem conversion
      outputUnit: 'rem', // optional: 'px' or 'rem'
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### JavaScript CommonJS Export Format

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Demonstrates the 'javascript/commonJs' format for exporting token dictionaries as CommonJS modules. This is suitable for Node.js environments or older JavaScript projects that rely on the CommonJS module system.

```javascript
exports.default = {
  colors: {
    primary: '#0D70E6',
  },
}
```

```javascript
myStyleDictionary.extend({
  "platforms": {
    "js": {
      "transforms": //...,
      "files": [{
        // ...
        "format": "javascript/commonJs",
      }]
    }
  }
});
```

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

### Export design tokens as CommonJS modules using style-dictionary-utils

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Exports design tokens in the CommonJS module format, suitable for Node.js environments. The configuration utilizes Style Dictionary's platform definitions to specify the output file and format.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    js: {
      buildPath: 'dist/js/',
      files: [
        {
          format: 'javascript/commonJs',
          destination: 'tokens.js',
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output (tokens.js):
// exports.default = {
//   colors: {
//     primary: '#0D70E6',
//   },
// }
```

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

### TypeScript ESM Declarations Format

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Illustrates the 'typescript/esm-declarations' format, which creates TypeScript declaration files for ES Modules. This format is ideal for integrating style tokens into TypeScript projects, providing type safety and autocompletion.

```javascript
export default {
  colors: {
    primary: string,
  },
}
```

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //...,
      "files": [{
        // ...
        "format": "typescript/esm-declarations",
      }]
    }
  }
});
```

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

### Convert Cubic Bezier Tokens to CSS cubic-bezier() Values

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This utility converts W3C cubicBezier tokens into CSS `cubic-bezier()` function values. The 'cubicBezier/css' transform is essential for this conversion. It takes a token object with cubic Bézier coordinates and outputs a CSS custom property containing the correctly formatted `cubic-bezier()` string.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "easing": {
//     "ease-out": {
//       "$value": [0.0, 0.0, 0.58, 1.0],
//       "$type": "cubicBezier"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['cubicBezier/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
```

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

### Export design tokens as ES6 modules using style-dictionary-utils

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

Exports design tokens as an ES6 module, maintaining a nested structure for easy import and use in modern JavaScript projects. This format is configured through Style Dictionary's platform settings.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    js: {
      prefix: 'tokens',
      transforms: ['name/pathToCamelCase'],
      buildPath: 'dist/js/',
      files: [
        {
          format: 'javascript/esm',
          destination: 'tokens.mjs',
          options: {
            prettier: { printWidth: 120 },
          },
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output (tokens.mjs):
// export default {
//   colors: {
//     primary: '#0D70E6',
//     secondary: '#28D29F',
//   },
// }
```

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

### JavaScript ESM Export Format

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Shows how to export a token dictionary using the 'javascript/esm' format, which generates ES6 module export statements. This is useful for modern JavaScript projects that utilize ES Modules.

```javascript
export default {
  colors: {
    primary: '#0D70E6',
  },
}
```

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //...,
      "files": [{
        // ...
        "format": "javascript/esm",
      }]
    }
  }
});
```

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

### Transform Token Name to Dot Notation Path

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Replaces token names with their full dot-notation path, ideal for flat file structures like .js or .json. To use, include 'name/pathToDotNotation' in the transforms array.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['name/pathToDotNotation'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Convert Gradient Tokens to CSS Gradient Values

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This utility converts W3C gradient tokens into CSS gradient values. It requires 'gradient/css' and 'w3c-color/css' transforms. The input is a token object defining gradient colors and angle. The output is a CSS custom property containing the gradient definition, usable with `background: linear-gradient(...)`.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "gradient": {
//     "primary": {
//       "$value": [
//         { "color": { "colorSpace": "srgb", "components": [0.157, 0.545, 0.824] }, "position": 0 },
//         { "color": { "colorSpace": "srgb", "components": [0.157, 0.824, 0.624] }, "position": 1 }
//       ],
//       "angle": "45deg",
//       "$type": "gradient"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['gradient/css', 'w3c-color/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --gradient-primary: 45deg, #288bd2 0%, #28d29f 100%;
// Use with: background: linear-gradient(var(--gradient-primary));
```

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

### Convert W3C Border Tokens to CSS border Shorthand

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This transform converts W3C-compliant border tokens into the CSS border shorthand property. It requires 'w3c-border/css', 'dimension/css', and 'w3c-color/css' transforms to be applied. The input token should have a '$value' object detailing width, style, and color.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "border": {
//     "primary": {
//       "$value": {
//         "width": { "value": 1, "unit": "px" },
//         "style": "solid",
//         "color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 1 }
//       },
//       "$type": "border"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['w3c-border/css', 'dimension/css', 'w3c-color/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --border-primary: 1px solid #000000;
```

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

### Filter Tokens from Source Files with isSource Filter

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The isSource filter is used to include only tokens originating from 'source' files in the output. It excludes tokens that are brought in via 'include' directives. This filter can be used by name in the Style Dictionary configuration or imported as a function for custom use.

```javascript
// Using registered filter by name
myStyleDictionary.extend({
  platforms: {
    ts: {
      files: [{
        filter: "isSource", // ← registered filter name
        // ...
      }]
    }
  }
});

// Importing and using filter function directly
import {isSourceFilter} from 'style-dictionary-utils/filter/isSource.js'

// Use in custom transformer
StyleDictionary.registerTransform({
  name: 'my-custom-transform',
  filter: isSourceFilter, // ← imported filter function
  transform: (token) => // ...
});
```

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //...,
      "files": [{
        "filter": "isSource",
        // ...
      }]
    }
  }
});
```

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

### Transform Token Name to camelCase Path

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Converts token names to their camelCase path representation. Integrate 'name/pathToCamelCase' into your transforms array for this functionality.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['name/pathToCamelCase'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Filter Tokens by Transition Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The `isTransitionFilter` allows only tokens with a `$type` property of `transition`. This is useful for isolating transition-related design tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isTransition",
        // …
      }]
    }
  }
});
```

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

### Filter Tokens by Shadow Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Use `isShadowFilter` to include only tokens where the `$type` property is `shadow`. This is ideal for organizing shadow-related design tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isShadow",
        // …
      }]
    }
  }
});
```

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

### Transform Typography to CSS Font String

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Converts W3C typography tokens into a CSS font string. This transformer is applied by including 'typography/css' in the transforms array.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['typography/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Filter Tokens by Clamp Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The `isClampFilter` includes tokens with a `$type` of `clamp` and a `$value` that is an object containing `min`, `ideal`, and `max` properties. This is for fluid typography or spacing tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isClamp",
        // …
      }]
    }
  }
});
```

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

### Transform Clamp Value to CSS clamp() Function with clamp/css

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The clamp/css transformer converts tokens of type 'clamp' into a CSS clamp() function string. It expects a $value object with 'min', 'ideal', and 'max' properties and outputs a 'clamp(min, ideal, max)' string. This is useful for creating responsive typography or spacing.

```javascript
myStyleDictionary.extend({
  platforms: {
    json: {
      transforms: ['clamp/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

```json
{
  size: {
    small: {
      value: {
        min: "1.5rem",
        ideal: "0.5vw + 0.75rem",
        max: "2.5rem"
      },
      $type: "clamp"
    }
  }
}
```

```json
{
  size: {
    small: {
      value: "clamp(1.5rem, 0.5vw + 0.75rem, 2.5rem)",
      $type: "clamp"
    }
  }
}
```

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

### Transform FontWeight to CSS FontWeight Number

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Converts W3C fontWeight tokens to their corresponding CSS numeric values. Apply this transformation by adding 'fontWeight/css' to your transforms list.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['fontWeight/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Transform FontFamily to CSS Font Family String

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Transforms W3C fontFamily tokens into a CSS font-family string. Use 'fontFamily/css' in your transforms configuration to activate this feature.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['fontFamily/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

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

### Convert Font Family Tokens to CSS Font-Family Strings

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

This utility transforms W3C fontFamily tokens (arrays) into CSS font-family strings. It automatically quotes font names containing spaces. The primary dependency is 'fontFamily/css'. It processes an input token object and generates a CSS custom property with the formatted font-family value.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'

// Token input:
// {
//   "fontFamily": {
//     "body": {
//       "$value": ["Helvetica Neue", "helvetica", "sans-serif"],
//       "$type": "fontFamily"
//     }
//   }
// }

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['fontFamily/css'],
      buildPath: 'dist/',
      files: [{ format: 'css/advanced', destination: 'tokens.css' }],
    },
  },
})

await extendedSd.buildAllPlatforms()

// Output: --font-family-body: 'Helvetica Neue', helvetica, sans-serif;
// (Font names with spaces are automatically quoted)
```

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

### Transform Cubic Bezier to CSS String with cubicBezier/css

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The cubicBezier/css transformer converts W3C cubic Bezier tokens of type 'cubicBezier' into a CSS cubic-bezier function string. It takes an object with x1, y1, x2, y2 properties and outputs a 'cubic-bezier(x1, y1, x2, y2)' string. This is useful for generating CSS compatible easing functions.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['cubicBezier/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

```json
{
  shadow: {
    small: {
      value: {
        x1: 0.5,
        y1: 0,
        x2: 1,
        y2: 1
      },
      $type: "cubicBezier"
    }
  }
}
```

```json
{
  shadow: {
    small: {
      value: "cubic-bezier(0.5, 0, 1, 1)",
      $type: "cubicBezier"
    }
  }
}
```

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

### Transform Gradient to CSS String with gradient/css

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The gradient/css transformer converts W3C gradient tokens of type 'gradient' into a CSS gradient string. It takes a structured gradient value as input and outputs a formatted CSS string. This is useful for generating CSS compatible gradient styles from design tokens.

```javascript
myStyleDictionary.extend({
  platforms: {
    ts: {
      transforms: ['gradient/css'],
      files: [
        {
          // ...
        },
      ],
    },
  },
})
```

```json
{
  gradients: {
    blueToGreen: {
      angle: "45deg"
      value: value: [
        {
          "color": "#288BD2",
          "position": 0
        },
        {
          "color": "#28D29F",
          "position": 1
        }
      ],
      $type: "gradient"
    }
  }
}
```

```json
{
  gradients: {
    blueToGreen: {
      value: "45deg, #288BD2 0%, #28D29F 100%",
      $type: "gradient"
    }
  }
}
```

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

### Filter Tokens by Cubic Bezier Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The `isCubicBezierFilter` selects tokens where the `$type` property is `cubicBezier`. This is specifically for managing cubic-bezier timing function tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isCubicBezier",
        // …
      }]
    }
  }
});
```

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

### Filter Typography Tokens with isTypography Filter

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The isTypography filter allows you to select tokens specifically typed as 'typography'. This is beneficial for isolating and processing typography-related design tokens, such as font families, sizes, and weights. It can be used directly by name or imported for custom implementations.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //...,
      "files": [{
        "filter": "isTypography",
        // ...
      }]
    }
  }
});
```

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

### Filter Tokens by Font Weight Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The `isFontWeightFilter` ensures that only tokens with a `$type` property of `fontWeight` are processed. This is useful for managing font weight design tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isFontWeight",
        // …
      }]
    }
  }
});
```

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

### Filter Tokens by Border Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

Employ `isBorderFilter` to include tokens solely with a `$type` property of `border`. This aids in managing border-related design tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isBorder",
        // …
      }]
    }
  }
});
```

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

### Filter Tokens by Attribute Existence

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

The `getHasAttribute` function generates a filter function to select tokens based on the presence of one or more attributes. It's useful for targeting tokens with specific metadata, like deprecation flags. You can register this as a new filter or use it directly within platform configurations.

```javascript
import StyleDictionary from 'style-dictionary-utils'
import {getHasAttribute} from 'style-dictionary-utils/filter/getHasAttribute.js'

StyleDictionary.registerFilter({
  name: 'shouldAvoid',
  matcher: getHasAttribute('deprecated', 'removed'),
})
```

```javascript
import StyleDictionary from 'style-dictionary-utils'
import {getHasAttribute} from 'style-dictionary-utils/filter/getHasAttribute.js'

myStyleDictionary.extend({
  "platforms": {
    "deprecatedJson": {
      "transforms": //...,
      "files": [{
        "filter": getHasAttribute('deprecated','removed'), // allows only tokens with a `deprecated` or `removed propery, e.g. if you want` to create a json with tokens not to use.
        // ...
      }]
    }
  }
});
```

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

### Filter Tokens by Type using getIsType

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

The `getIsType` filter creates a custom filter that matches tokens of specified types. This is useful for isolating tokens belonging to certain categories like dimensions, colors, or durations.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'
import { getIsType } from 'style-dictionary-utils/filter/getIsType.js'

// Register a filter for animation-related tokens
StyleDictionary.registerFilter({
  name: 'isAnimation',
  filter: getIsType('duration', 'transition', 'cubicBezier'),
})

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['cubicBezier/css', 'duration/css'],
      buildPath: 'dist/',
      files: [
        {
          format: 'css/advanced',
          destination: 'animations.css',
          filter: 'isAnimation',
        },
        // Or inline for size tokens:
        {
          format: 'css/advanced',
          destination: 'sizes.css',
          filter: getIsType('dimension', 'clamp'),
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()
```

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

### Filter Tokens by Attribute Values using getHasAttributeValue

Source: https://context7.com/lukasoppermann/style-dictionary-utils/llms.txt

The `getHasAttributeValue` filter creates a custom filter that matches tokens with specific attribute values. It can filter based on a single attribute-value pair or multiple pairs.

```javascript
import { StyleDictionary } from 'style-dictionary-utils'
import { getHasAttributeValue } from 'style-dictionary-utils/filter/getHasAttributeValue.js'

// Token input:
// {
//   "colors": {
//     "danger": {
//       "$value": "#ff0000",
//       "$type": "color",
//       "deprecated": true,
//       "category": "feedback"
//     }
//   }
// }

// Register as a named filter
StyleDictionary.registerFilter({
  name: 'isDeprecatedTrue',
  filter: getHasAttributeValue('deprecated', true),
})

const sd = new StyleDictionary()

const extendedSd = await sd.extend({
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transforms: ['w3c-color/css'],
      buildPath: 'dist/',
      files: [
        {
          format: 'css/advanced',
          destination: 'deprecated.css',
          filter: 'isDeprecatedTrue',
        },
        // Multiple attributes/values:
        {
          format: 'css/advanced',
          destination: 'feedback.css',
          filter: getHasAttributeValue(['category', 'group'], ['feedback', 'status']),
        },
      ],
    },
  },
})

await extendedSd.buildAllPlatforms()
```

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

### Filter Tokens by Font Family Type

Source: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/README.md

With `isFontFamilyFilter`, you can select tokens that have a `$type` property set to `fontFamily`. This simplifies the management of font family design tokens.

```javascript
myStyleDictionary.extend({
  "platforms": {
    "ts": {
      "transforms": //…,
      "files": [{
        "filter": "isFontFamily",
        // …
      }]
    }
  }
});
```