vienna.tokens v3.9.1

icon: 🌀 name: Сборщик токенов и пресетов menu: Библиотеки и утилиты

route: /opensource/tokens

import { Package } from '@fcc/techhub'; import pkg from './package.json';

Сборщик токенов и пресетов

Сборщик токенов и пресетов генерирует файлы

• tokens-raw.json (компиляция yaml)
• tokens.json (только токены в формате ключ:значение)
• tokens.js (только токены)
• tokens.ts (только токены)
• presets.json (только пресеты)
• presets.css (только пресеты)
• presets.js (только пресеты)
• presets.ts (только пресеты)
• Другие платформы (TBD)

Запуск

Для единичной сборки или деплоя выполнить

npm run build

Во время разработки можно запустить

npm run build:watch

Схема YAML

Для токенов

space: <Пространство имен>
desc: <Необязательное описание>
<Название списка токенов>:
  desc: <Необязательное описание>
  <Название токена>:
    desc: <Необязательное описание>
    value: <Значение токена>
    prop: <Название prop свойства для генерации предпросмотра>

Для пресетов

space: <Пространство имен>
imports: [<Список файлов импорта, необязателен>]
<Название пресета>:
  values: [{ value: $space.tokens.token, prop: color }]

Поле imports можно не писать. Возможна любая глубина вложенности для сложных пресетов.

Refs

space: <Пространство имен>
imports: [<Список файлов импорта, необязателен>]
<Название пресета>:
  ref: $preset.part или [$preset.part1, $preset.part2, ...]
  <css-свойство>: значение

CLI

При включенном флаге cssPresets возможно написание пресетов в виде yaml-css

npm run build --cssPresets

Другие аргументы в CLI

npm run build --cssPresets --css --watch --config preset.config.json --prefix black

• Сгененрировать presets.css используется флаг --cssPresets с --css
• Режим наблюдения --watch
• Префикс названия --prefix <string>
• Путь к файлу конфигурации --config <string>

Список разрешенных CSS атрибутов

border-. color background-. padding-. margin-. box-shadow opacity font-. cursor

Конфигурация

Конфигурация хранится в файле preset.config.json

{
  "output": "выходная директория",
  "rootFolder": "корень токенов",
  "tokensSrc": "путь до токенов",
  "presetsSrc": "путь до пресетов",
  "defaultImports": "путь до импортов по умолчанию",
  "htmlTemplateSrc": "путь до шаблона страницы предпросмотра",
  "allowedProps": ["регулярные выражения разрешенных css свойств"],
  "prefix": "Префик названия"
}