Плейграунд

Соберите CSS-переменные, переменные и миксины LESS и SCSS из своих токенов прямо в браузере, без установки пакета.

Плейграунд запускает mixin-dictionary в браузере. Измените токены, и через долю секунды изменятся результат и превью. Вкладки входа:

tokens.json — базовые токены в формате DTCG: палитра, размеры, шрифты, текстовые стили, тени, брейкпоинты, анимации. Из typography, брейкпоинтов min/max и keyframes собираются миксины;
light.json и dark.json — семантические токены тем: data-theme переключает их на любом элементе страницы;
config.json — platforms, mediaAliases, keyframesAliases и themes.default, см. конфигурацию. Поля source и output не нужны: токены берутся из вкладок.

Сборка…

{
  "color": {
    "$type": "color",
    "white": { "$value": "#ffffff" },
    "black": { "$value": "#000000" },
    "gray": {
      "100": { "$value": "#f4f4f5" },
      "200": { "$value": "#e4e4e7" },
      "500": { "$value": "#71717a" },
      "700": { "$value": "#3f3f46" },
      "800": { "$value": "#27272a" },
      "900": { "$value": "#18181b" }
    },
    "blue": {
      "400": { "$value": "#60a5fa" },
      "600": { "$value": "#2563eb" }
    }
  },
  "size": {
    "$type": "dimension",
    "4": { "$value": { "value": 4, "unit": "px" } },
    "8": { "$value": { "value": 8, "unit": "px" } },
    "16": { "$value": { "value": 16, "unit": "px" } },
    "24": { "$value": { "value": 24, "unit": "px" } },
    "32": { "$value": { "value": 32, "unit": "px" } },
    "48": { "$value": { "value": 48, "unit": "px" } }
  },
  "rounded": {
    "$type": "dimension",
    "sm": { "$value": "{size.4}" },
    "md": { "$value": "{size.8}" },
    "lg": { "$value": "{size.16}" },
    "full": { "$value": { "value": 999, "unit": "px" } }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "sans": { "$value": ["Inter", "sans-serif"] },
      "mono": { "$value": ["JetBrains Mono", "monospace"] }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400 },
      "bold": { "$value": 700 }
    },
    "leading": {
      "$type": "number",
      "tight": { "$value": 1.25 },
      "normal": { "$value": 1.5 }
    },
    "size": {
      "$type": "dimension",
      "16": { "$value": "{size.16}" },
      "24": { "$value": "{size.24}" },
      "32": { "$value": "{size.32}" },
      "48": { "$value": "{size.48}" }
    },
    "h48": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.48}",
        "lineHeight": "{font.leading.tight}",
        "fontWeight": "{font.weight.bold}"
      }
    },
    "h32": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.32}",
        "lineHeight": "{font.leading.tight}",
        "fontWeight": "{font.weight.bold}"
      }
    },
    "t16": {
      "$type": "typography",
      "$value": {
        "fontSize": "{font.size.16}",
        "lineHeight": "{font.leading.normal}",
        "fontWeight": "{font.weight.regular}"
      }
    }
  },
  "shadow": {
    "$type": "shadow",
    "card": {
      "$value": [
        { "color": "#0000001a", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" },
        { "color": "#0000001a", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "-2px" }
      ]
    }
  },
  "screen": {
    "$type": "dimension",
    "md": {
      "min": { "$value": { "value": 769, "unit": "px" } },
      "max": { "$value": { "value": 1024, "unit": "px" } }
    },
    "lg": {
      "min": { "$value": { "value": 1025, "unit": "px" } }
    }
  },
  "animation": {
    "show": { "$value": "show 300ms ease-in forwards" }
  },
  "keyframes": {
    "$type": "number",
    "show": {
      "from": { "opacity": { "$value": 0 } },
      "to": { "opacity": { "$value": 1 } }
    }
  }
}

Сборка…

Превью

Сборка…

Как это работает

В браузере вызывается generate() — тот же код, что в CLI. Токены и конфиг не отправляются на сервер и не покидают страницу.
Генератор загружается при первой сборке, а не вместе со страницей.
Превью строится из css/index.css и показывает палитру, шрифты, текстовые стили, скругления и тени. Если убрать платформу css из platforms, превью пропадёт, а scss и less останутся.
Превью — изолированный iframe без доступа к сети.
Цвета в примере записаны строками ("#2563eb"), чтобы их было удобно править. Объектная форма DTCG (colorSpace, components, hex) тоже поддерживается.
Если в токенах ошибка, под редактором показывается сообщение, а результат остаётся последним успешным.

Что дальше

Скопируйте токены и конфиг в проект и запустите CLI: быстрый старт. Готовые токены той же структуры лежат в pbstyles. Для темы Tailwind есть плейграунд tailwind-dictionary.

Как это работает

Что дальше

На этой странице