This example demonstrates the use of a Style Dictionary tokens in Oikaze. Style Dictionary is configured through a config.json file which is used to generate a _variables.scss file. The style.scss file imports the necessary modules and uses Oikaze to create tokens based on the SCSS variables. These tokens are then used to generate CSS definitions for the :root element and apply styles to a .test class.

// config.json
{
  "source": ["./**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "./",
      "options": {
        "showFileHeader": false
      },
      "files": [
        {
          "destination": "_variables.scss",
          "format": "scss/map-deep"
        }
      ]
    }
  }
}

// _variables.scss

/**
 * Do not edit directly
 * Generated on by Style Dictionary
 */

$color-base-gray-light: #cccccc !default;
$color-base-gray-medium: #999999 !default;
$color-base-gray-dark: #111111 !default;
$color-base-red: #ff0000 !default;
$color-base-green: #00ff00 !default;
$color-font-base: #ff0000 !default;
$color-font-secondary: #00ff00 !default;
$color-font-tertiary: #cccccc !default;
$size-font-small: 0.75rem !default; // the small size of the font
$size-font-medium: 1rem !default; // the medium size of the font
$size-font-large: 2rem !default; // the large size of the font
$size-font-base: 1rem !default; // the base size of the font

$tokens: (
  'color': (
    'base': (
      'gray': (
        'light': $color-base-gray-light,
        'medium': $color-base-gray-medium,
        'dark': $color-base-gray-dark
      ),
      'red': $color-base-red,
      'green': $color-base-green
    ),
    'font': (
      'base': $color-font-base,
      'secondary': $color-font-secondary,
      'tertiary': $color-font-tertiary
    )
  ),
  'source': (
    '0': './**/*.json'
  ),
  'platforms': (
    'scss': (
      'transformGroup': 'scss',
      'buildPath': './',
      'options': (
        'showFileHeader': (

        )
      ),
      'files': (
        '0': (
          'destination': '_variables.scss',
          'format': 'scss/map-deep'
        )
      )
    )
  ),
  'size': (
    'font': (
      'small': $size-font-small,
      'medium': $size-font-medium,
      'large': $size-font-large,
      'base': $size-font-base
    )
  )
);

// style.scss
@use 'sass:meta';
@use 'sass:map';

@use './variables' as sd;

@use 'oikaze' as tokens with (
  $sets: (
    default: (
      color: map.get(sd.$tokens, 'color'),
      size: map.get(sd.$tokens, 'size'),
    ),
  )
);

:root {
  @include tokens.css-definitions();
}

.test {
  color: tokens.get('$color.font.base');
  color: tokens.get('color.font.secondary');

  color: tokens.alpha('color.base.green', 0.2);
  color: tokens.alpha('$color.base.red', 0.2);

  font-size: tokens.get('size.font.base');
  font-size: tokens.get('$size.font.large');

  font-size: tokens.rem('size.font.small');
  font-size: tokens.rem('$size.font.base');
}