@iskra-ui/tokens 0.1.0

package/LICENCE.md

@@ -0,0 +1,79 @@
+# Лицензии
+
+Документ фиксирует правовой статус кода дизайн-системы **Искра.DCI** и сторонних компонентов, которые **поставляются потребителям** вместе с npm-пакетами `@iskra-ui/*`.
+
+---
+
+## Пакеты `@iskra-ui/*`
+
+| Пакет                 | Статус                                         |
+| --------------------- | ---------------------------------------------- |
+| `@iskra-ui/tokens`    | Проприетарное ПО                               |
+| `@iskra-ui/styles`    | Проприетарное ПО + сторонние шрифты (см. ниже) |
+| `@iskra-ui/icons`     | Проприетарное ПО                               |
+| `@iskra-ui/core`      | Проприетарное ПО                               |
+| `@iskra-ui/react`     | Проприетарное ПО                               |
+| `@iskra-ui/vue`       | Проприетарное ПО                               |
+| `@iskra-ui/dci-react` | Проприетарное ПО                               |
+
+Исходный код, дизайн-токены, компоненты, документация и торговые обозначения **Искра.DCI** / **ИСКРА.DCI** принадлежат правообладателю платформы. Все права защищены.
+
+Пакеты публикуются в публичном npm-реестре (`publishConfig.access: public`). Использование, копирование, распространение и модификация **вне условий, согласованных с правообладателем**, запрещены.
+
+Приватные пакеты монорепозитория (`@iskra-ui/eslint-config`, `@iskra-ui/tsconfig`, `@iskra-ui/docs-react`) распространяются только внутри репозитория и не публикуются в npm.
+
+---
+
+## Сторонние компоненты в составе поставки
+
+### Шрифты (`@iskra-ui/styles`)
+
+В бандл `@iskra-ui/styles` встроены variable-шрифты (self-hosted, без CDN):
+
+| Шрифт                                                | Файл                               | Лицензия                                                  |
+| ---------------------------------------------------- | ---------------------------------- | --------------------------------------------------------- |
+| [Inter](https://rsms.me/inter/)                      | `Inter-VariableFont_opsz_wght.ttf` | [SIL Open Font License 1.1](https://openfontlicense.org/) |
+| [JetBrains Mono](https://www.jetbrains.com/lp/mono/) | `JetBrainsMono_wght_.ttf`          | [SIL Open Font License 1.1](https://openfontlicense.org/) |
+
+Шрифты копируются в `packages/styles/dist/fonts/` при сборке пакета. При распространении производных продуктов необходимо сохранять уведомления OFL для этих файлов.
+
+**Краткое условие OFL 1.1:** шрифты можно использовать, изучать, модифицировать и распространять при условии, что производные шрифты не продаются отдельно и что уведомление об авторских правах и лицензии OFL сохраняется в составе дистрибутива.
+
+### Иконки (`@iskra-ui/icons`)
+
+Набор `@iskra-ui/icons` — **оригинальная SVG-разметка** Искра.DCI (16×16, stroke 1.5px), нарисованная под геометрию outline-иконок, принятую в бренде.
+
+Геометрия согласована со стилем:
+
+| Источник                                      | Лицензия | Примечание                                                             |
+| --------------------------------------------- | -------- | ---------------------------------------------------------------------- |
+| [Feather Icons](https://feathericons.com/)    | MIT      | Референс по stroke и сетке; глифы в репозитории не копируются дословно |
+| [Heroicons](https://heroicons.com/) (outline) | MIT      | Допустимый заменитель при отсутствии глифа в наборе                    |
+
+MIT-лицензии Feather Icons и Heroicons **не распространяются** на код `@iskra-ui/icons`, но указаны как происхождение визуального языка. При публикации открытых форков или выноса иконок в отдельный OSS-пакет — сверьтесь с юридической службой правообладателя.
+
+### Инструменты разработки (не входят в npm-поставку)
+
+Зависимости dev/build (React, Vue, Vite, Storybook, ESLint, Turbo, Changesets и др.) подчиняются лицензиям соответствующих проектов. Они **не включаются** в publishable-артефакты `@iskra-ui/*` и в этом документе не перечисляются.
+
+---
+
+## Торговые марки
+
+**Искра**, **Искра.DCI**, **ИСКРА.DCI**, логотип-искра и маскот **Бит** — элементы бренда платформы. Их использование вне продуктов правообладателя регулируется отдельно от лицензии на исходный код.
+
+Названия **React**, **Vue**, **pnpm**, **Storybook** и других сторонних проектов принадлежат их владельцам.
+
+---
+
+## Вопросы по лицензированию
+
+По условиям использования пакетов `@iskra-ui/*`, white-label брендингу и включению компонентов в сторонние продукты обращайтесь к правообладателю платформы Искра.DCI.
+
+---
+
+## См. также
+
+- [README.md](README.md) — обзор монорепозитория
+- [docs/PACKAGES.md](docs/PACKAGES.md) — состав поставки пакетов
+- [CONTRIBUTING.md](CONTRIBUTING.md) — разработка и релизы

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+// GENERATED by @iskra-ui/tokens — do not edit.
+export type TokenName = "--border" | "--focus-ring" | "--border-width-thin" | "--border-width-regular" | "--border-width-strong" | "--bp-sm" | "--bp-md" | "--bp-lg" | "--bp-xl" | "--bg" | "--panel" | "--panel-soft" | "--panel-muted" | "--line" | "--line-soft" | "--fg1" | "--fg2" | "--fg3" | "--accent" | "--accent-hover" | "--accent-safe" | "--accent-soft" | "--accent-line" | "--fg-on-accent" | "--fg-on-status" | "--scrim" | "--status-ok" | "--status-warn" | "--status-err" | "--status-off" | "--status-info" | "--ease" | "--dur" | "--dur-fast" | "--dur-normal" | "--dur-slow" | "--opacity-disabled" | "--opacity-muted" | "--opacity-overlay" | "--opacity-pressed" | "--radius" | "--radius-sm" | "--control-h" | "--control-h-lg" | "--control-s" | "--control-m" | "--control-l" | "--icon-sm" | "--icon-md" | "--avatar-sm" | "--avatar-md" | "--avatar-lg" | "--min-target" | "--s1" | "--s2" | "--s3" | "--s4" | "--s5" | "--s6" | "--s7" | "--s8" | "--font-ui" | "--font-display" | "--font-mono" | "--text-h1" | "--lh-h1" | "--wt-h1" | "--text-h2" | "--lh-h2" | "--wt-h2" | "--text-h3" | "--lh-h3" | "--wt-h3" | "--text-ui" | "--lh-ui" | "--wt-ui" | "--text-ui-med" | "--wt-ui-med" | "--text-small" | "--lh-sm" | "--text-mono" | "--lh-mono" | "--text-label" | "--z-dropdown" | "--z-sticky" | "--z-overlay" | "--z-modal" | "--z-toast" | "--z-tooltip";
+export type BrandName = "aurora";
+export declare const tokens: Record<TokenName, string>;
+export declare const themes: { cold: Partial<Record<TokenName, string>>; warm: Partial<Record<TokenName, string>> };
+export declare const brands: Record<BrandName, Partial<Record<TokenName, string>>>;
+export declare const tokenNames: TokenName[];
+export declare function cssVar(name: TokenName | string, fallback?: string): string;

package/dist/index.js

@@ -0,0 +1,155 @@
+// GENERATED by @iskra-ui/tokens — do not edit.
+export const tokens = {
+  "--border": "1px solid var(--line)",
+  "--focus-ring": "0 0 0 1px var(--accent)",
+  "--border-width-thin": "1px",
+  "--border-width-regular": "1px",
+  "--border-width-strong": "2px",
+  "--bp-sm": "640px",
+  "--bp-md": "768px",
+  "--bp-lg": "1024px",
+  "--bp-xl": "1280px",
+  "--bg": "#0d1117",
+  "--panel": "#161b22",
+  "--panel-soft": "#1d2530",
+  "--panel-muted": "#202a35",
+  "--line": "#30363d",
+  "--line-soft": "rgba(48, 54, 61, 0.5)",
+  "--fg1": "#f0f6fc",
+  "--fg2": "#8b949e",
+  "--fg3": "#6e7681",
+  "--accent": "#00ffc2",
+  "--accent-hover": "#00cc9a",
+  "--accent-safe": "#00aa85",
+  "--accent-soft": "rgba(0, 170, 133, 0.14)",
+  "--accent-line": "rgba(0, 170, 133, 0.32)",
+  "--fg-on-accent": "#0d1117",
+  "--fg-on-status": "#ffffff",
+  "--scrim": "#0d1117",
+  "--status-ok": "#00ffc2",
+  "--status-warn": "#f97316",
+  "--status-err": "#f85149",
+  "--status-off": "#6e7681",
+  "--status-info": "#58a6ff",
+  "--ease": "cubic-bezier(.2,.6,.2,1)",
+  "--dur": ".15s",
+  "--dur-fast": "100ms",
+  "--dur-normal": "150ms",
+  "--dur-slow": "250ms",
+  "--opacity-disabled": 0.45,
+  "--opacity-muted": 0.7,
+  "--opacity-overlay": 0.6,
+  "--opacity-pressed": 0.85,
+  "--radius": "4px",
+  "--radius-sm": "2px",
+  "--control-h": "32px",
+  "--control-h-lg": "36px",
+  "--control-s": "28px",
+  "--control-m": "32px",
+  "--control-l": "36px",
+  "--icon-sm": "16px",
+  "--icon-md": "20px",
+  "--avatar-sm": "24px",
+  "--avatar-md": "32px",
+  "--avatar-lg": "48px",
+  "--min-target": "24px",
+  "--s1": "4px",
+  "--s2": "8px",
+  "--s3": "12px",
+  "--s4": "16px",
+  "--s5": "24px",
+  "--s6": "32px",
+  "--s7": "48px",
+  "--s8": "64px",
+  "--font-ui": "'Inter', system-ui, -apple-system, sans-serif",
+  "--font-display": "'Inter', system-ui, -apple-system, sans-serif",
+  "--font-mono": "'JetBrains Mono', ui-monospace, 'SF Mono', monospace",
+  "--text-h1": "24px",
+  "--lh-h1": 1.2,
+  "--wt-h1": 600,
+  "--text-h2": "20px",
+  "--lh-h2": 1.2,
+  "--wt-h2": 600,
+  "--text-h3": "18px",
+  "--lh-h3": 1.2,
+  "--wt-h3": 600,
+  "--text-ui": "14px",
+  "--lh-ui": 1.4,
+  "--wt-ui": 400,
+  "--text-ui-med": "14px",
+  "--wt-ui-med": 500,
+  "--text-small": "12px",
+  "--lh-sm": 1.4,
+  "--text-mono": "13px",
+  "--lh-mono": 1.45,
+  "--text-label": "11px",
+  "--z-dropdown": 1000,
+  "--z-sticky": 1100,
+  "--z-overlay": 1200,
+  "--z-modal": 1300,
+  "--z-toast": 1400,
+  "--z-tooltip": 1500
+};
+
+export const themes = {
+  "cold": {
+    "--bg": "#eef2f7",
+    "--panel": "#e2e8f0",
+    "--panel-soft": "#e9eef4",
+    "--panel-muted": "#dce3ec",
+    "--line": "#cdd5e0",
+    "--line-soft": "rgba(205, 213, 224, 0.6)",
+    "--fg1": "#1c2128",
+    "--fg2": "#57606a",
+    "--fg3": "#8b949e",
+    "--accent": "#00aa85",
+    "--accent-hover": "#009478",
+    "--accent-safe": "#008268",
+    "--accent-soft": "#e6f7f2",
+    "--accent-line": "rgba(0, 170, 133, 0.32)",
+    "--status-ok": "#00aa85",
+    "--status-warn": "#d0610a",
+    "--status-err": "#d0302a",
+    "--status-off": "#6e7681",
+    "--status-info": "#2e6da4"
+  },
+  "warm": {
+    "--bg": "#f5f0e8",
+    "--panel": "#ede8df",
+    "--panel-soft": "#f0ebe3",
+    "--panel-muted": "#e4ded3",
+    "--line": "#d8d2c8",
+    "--line-soft": "rgba(216, 210, 200, 0.6)",
+    "--fg1": "#1c1a17",
+    "--fg2": "#6b6560",
+    "--fg3": "#9a948c",
+    "--accent": "#009b78",
+    "--accent-hover": "#008268",
+    "--accent-safe": "#00795d",
+    "--accent-soft": "#e8f5f0",
+    "--accent-line": "rgba(0, 155, 120, 0.32)",
+    "--status-ok": "#009b78",
+    "--status-warn": "#c2620a",
+    "--status-err": "#c23b36",
+    "--status-off": "#7a756e",
+    "--status-info": "#3a6fa8"
+  }
+};
+
+export const brands = {
+  "aurora": {
+    "--accent": "#7c5cff",
+    "--accent-hover": "#6a47f5",
+    "--accent-safe": "#6a47f5",
+    "--accent-soft": "rgba(124, 92, 255, 0.14)",
+    "--accent-line": "rgba(124, 92, 255, 0.32)",
+    "--status-ok": "#7c5cff"
+  }
+};
+
+export const tokenNames = Object.keys(tokens);
+
+export function cssVar(name, fallback) {
+  const n = name.startsWith('--') ? name : '--' + name;
+  return fallback == null ? `var(${n})` : `var(${n}, ${fallback})`;
+}

package/dist/tokens.css

@@ -0,0 +1,163 @@
+/* Искра.DCI design tokens — GENERATED by @iskra-ui/tokens (do not edit). */
+/* Hard-Shell Minimal · single accent hue · root font-size is intentionally 14px. */
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --border: 1px solid var(--line);
+  --focus-ring: 0 0 0 1px var(--accent);
+  --border-width-thin: 1px;
+  --border-width-regular: 1px;
+  --border-width-strong: 2px;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+  --bg: #0d1117; /** Global page background */
+  --panel: #161b22; /** Elevated graphite — cards, modals */
+  --panel-soft: #1d2530;
+  --panel-muted: #202a35;
+  --line: #30363d;
+  --line-soft: rgba(48, 54, 61, 0.5);
+  --fg1: #f0f6fc; /** Primary text */
+  --fg2: #8b949e; /** Secondary text, placeholders */
+  --fg3: #6e7681; /** Tertiary / disabled */
+  --accent: #00ffc2; /** Indicators, borders, focus ONLY — never accent text on dark */
+  --accent-hover: #00cc9a;
+  --accent-safe: #00aa85; /** AA-safe accent for text/fills */
+  --accent-soft: rgba(0, 170, 133, 0.14);
+  --accent-line: rgba(0, 170, 133, 0.32);
+  --fg-on-accent: #0d1117; /** Dark text/icons on bright accent fills (accent stays bright across themes — stable) */
+  --fg-on-status: #ffffff; /** White text on saturated status fills (stable across themes) */
+  --scrim: #0d1117; /** Modal/overlay scrim base — always dark */
+  --status-ok: #00ffc2; /** Sync / Online */
+  --status-warn: #f97316; /** Drift / Warning */
+  --status-err: #f85149; /** Error / Critical */
+  --status-off: #6e7681; /** Maintenance / Inactive */
+  --status-info: #58a6ff; /** Info / Neutral (used minimally) */
+  --ease: cubic-bezier(.2,.6,.2,1);
+  --dur: .15s;
+  --dur-fast: 100ms;
+  --dur-normal: 150ms;
+  --dur-slow: 250ms;
+  --opacity-disabled: 0.45;
+  --opacity-muted: 0.7;
+  --opacity-overlay: 0.6;
+  --opacity-pressed: 0.85;
+  --radius: 4px;
+  --radius-sm: 2px;
+  --control-h: 32px;
+  --control-h-lg: 36px;
+  --control-s: 28px;
+  --control-m: 32px;
+  --control-l: 36px;
+  --icon-sm: 16px;
+  --icon-md: 20px;
+  --avatar-sm: 24px;
+  --avatar-md: 32px;
+  --avatar-lg: 48px;
+  --min-target: 24px;
+  --s1: 4px;
+  --s2: 8px;
+  --s3: 12px;
+  --s4: 16px;
+  --s5: 24px;
+  --s6: 32px;
+  --s7: 48px;
+  --s8: 64px;
+  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+  --text-h1: 24px;
+  --lh-h1: 1.2;
+  --wt-h1: 600;
+  --text-h2: 20px;
+  --lh-h2: 1.2;
+  --wt-h2: 600;
+  --text-h3: 18px;
+  --lh-h3: 1.2;
+  --wt-h3: 600;
+  --text-ui: 14px;
+  --lh-ui: 1.4;
+  --wt-ui: 400;
+  --text-ui-med: 14px;
+  --wt-ui-med: 500;
+  --text-small: 12px;
+  --lh-sm: 1.4;
+  --text-mono: 13px;
+  --lh-mono: 1.45;
+  --text-label: 11px;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+  --z-tooltip: 1500;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.theme-cold {
+  --bg: #eef2f7;
+  --panel: #e2e8f0;
+  --panel-soft: #e9eef4;
+  --panel-muted: #dce3ec;
+  --line: #cdd5e0;
+  --line-soft: rgba(205, 213, 224, 0.6);
+  --fg1: #1c2128;
+  --fg2: #57606a;
+  --fg3: #8b949e;
+  --accent: #00aa85;
+  --accent-hover: #009478;
+  --accent-safe: #008268;
+  --accent-soft: #e6f7f2;
+  --accent-line: rgba(0, 170, 133, 0.32);
+  --status-ok: #00aa85;
+  --status-warn: #d0610a;
+  --status-err: #d0302a;
+  --status-off: #6e7681;
+  --status-info: #2e6da4;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.theme-warm {
+  --bg: #f5f0e8;
+  --panel: #ede8df;
+  --panel-soft: #f0ebe3;
+  --panel-muted: #e4ded3;
+  --line: #d8d2c8;
+  --line-soft: rgba(216, 210, 200, 0.6);
+  --fg1: #1c1a17;
+  --fg2: #6b6560;
+  --fg3: #9a948c;
+  --accent: #009b78;
+  --accent-hover: #008268;
+  --accent-safe: #00795d;
+  --accent-soft: #e8f5f0;
+  --accent-line: rgba(0, 155, 120, 0.32);
+  --status-ok: #009b78;
+  --status-warn: #c2620a;
+  --status-err: #c23b36;
+  --status-off: #7a756e;
+  --status-info: #3a6fa8;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.brand-aurora {
+  --accent: #7c5cff;
+  --accent-hover: #6a47f5;
+  --accent-safe: #6a47f5;
+  --accent-soft: rgba(124, 92, 255, 0.14);
+  --accent-line: rgba(124, 92, 255, 0.32);
+  --status-ok: #7c5cff;
+}

package/dist/tokens.json

@@ -0,0 +1,91 @@
+{
+  "--border": "1px solid var(--line)",
+  "--focus-ring": "0 0 0 1px var(--accent)",
+  "--border-width-thin": "1px",
+  "--border-width-regular": "1px",
+  "--border-width-strong": "2px",
+  "--bp-sm": "640px",
+  "--bp-md": "768px",
+  "--bp-lg": "1024px",
+  "--bp-xl": "1280px",
+  "--bg": "#0d1117",
+  "--panel": "#161b22",
+  "--panel-soft": "#1d2530",
+  "--panel-muted": "#202a35",
+  "--line": "#30363d",
+  "--line-soft": "rgba(48, 54, 61, 0.5)",
+  "--fg1": "#f0f6fc",
+  "--fg2": "#8b949e",
+  "--fg3": "#6e7681",
+  "--accent": "#00ffc2",
+  "--accent-hover": "#00cc9a",
+  "--accent-safe": "#00aa85",
+  "--accent-soft": "rgba(0, 170, 133, 0.14)",
+  "--accent-line": "rgba(0, 170, 133, 0.32)",
+  "--fg-on-accent": "#0d1117",
+  "--fg-on-status": "#ffffff",
+  "--scrim": "#0d1117",
+  "--status-ok": "#00ffc2",
+  "--status-warn": "#f97316",
+  "--status-err": "#f85149",
+  "--status-off": "#6e7681",
+  "--status-info": "#58a6ff",
+  "--ease": "cubic-bezier(.2,.6,.2,1)",
+  "--dur": ".15s",
+  "--dur-fast": "100ms",
+  "--dur-normal": "150ms",
+  "--dur-slow": "250ms",
+  "--opacity-disabled": 0.45,
+  "--opacity-muted": 0.7,
+  "--opacity-overlay": 0.6,
+  "--opacity-pressed": 0.85,
+  "--radius": "4px",
+  "--radius-sm": "2px",
+  "--control-h": "32px",
+  "--control-h-lg": "36px",
+  "--control-s": "28px",
+  "--control-m": "32px",
+  "--control-l": "36px",
+  "--icon-sm": "16px",
+  "--icon-md": "20px",
+  "--avatar-sm": "24px",
+  "--avatar-md": "32px",
+  "--avatar-lg": "48px",
+  "--min-target": "24px",
+  "--s1": "4px",
+  "--s2": "8px",
+  "--s3": "12px",
+  "--s4": "16px",
+  "--s5": "24px",
+  "--s6": "32px",
+  "--s7": "48px",
+  "--s8": "64px",
+  "--font-ui": "'Inter', system-ui, -apple-system, sans-serif",
+  "--font-display": "'Inter', system-ui, -apple-system, sans-serif",
+  "--font-mono": "'JetBrains Mono', ui-monospace, 'SF Mono', monospace",
+  "--text-h1": "24px",
+  "--lh-h1": 1.2,
+  "--wt-h1": 600,
+  "--text-h2": "20px",
+  "--lh-h2": 1.2,
+  "--wt-h2": 600,
+  "--text-h3": "18px",
+  "--lh-h3": 1.2,
+  "--wt-h3": 600,
+  "--text-ui": "14px",
+  "--lh-ui": 1.4,
+  "--wt-ui": 400,
+  "--text-ui-med": "14px",
+  "--wt-ui-med": 500,
+  "--text-small": "12px",
+  "--lh-sm": 1.4,
+  "--text-mono": "13px",
+  "--lh-mono": 1.45,
+  "--text-label": "11px",
+  "--z-dropdown": 1000,
+  "--z-sticky": 1100,
+  "--z-overlay": 1200,
+  "--z-modal": 1300,
+  "--z-toast": 1400,
+  "--z-tooltip": 1500
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@iskra-ui/tokens",
+  "version": "0.1.0",
+  "description": "Искра.DCI design tokens (DTCG) → CSS variables + typed TS map via Style Dictionary.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./src/*": "./src/*"
+  },
+  "devDependencies": {
+    "style-dictionary": "^5.4.0",
+    "typescript": "^6.0.0",
+    "@iskra-ui/tsconfig": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/brands/aurora.json

@@ -0,0 +1,9 @@
+{
+  "$description": "White-label brand pack «Aurora» — re-tints the accent hue only. Applied via .brand-aurora and composes on top of any theme (dark/cold/warm).",
+  "accent": { "$type": "color", "$value": "#7C5CFF" },
+  "accent-hover": { "$type": "color", "$value": "#6A47F5" },
+  "accent-safe": { "$type": "color", "$value": "#6A47F5" },
+  "accent-soft": { "$type": "color", "$value": "rgba(124,92,255,.14)" },
+  "accent-line": { "$type": "color", "$value": "rgba(124,92,255,.32)" },
+  "status-ok": { "$type": "color", "$value": "#7C5CFF" }
+}

package/src/primitives/palette.json

@@ -0,0 +1,41 @@
+{
+  "palette": {
+    "$type": "color",
+    "$description": "Primitive brand palette. Physical values only — referenced by semantic tokens, base layer for white-label brand packs.",
+    "mint": {
+      "bright": {
+        "$value": "#00FFC2",
+        "$description": "Cyber Mint — signal/indicator/border/focus only"
+      },
+      "mid": { "$value": "#00CC9A", "$description": "Mint hover / pressed accent" },
+      "safe": { "$value": "#00AA85", "$description": "AA-safe mint for accent TEXT on dark" }
+    },
+    "anthracite": {
+      "deep": { "$value": "#0D1117", "$description": "Global page background" }
+    },
+    "base": {
+      "white": {
+        "$value": "#FFFFFF",
+        "$description": "Pure white — text on saturated status fills"
+      }
+    },
+    "graphite": {
+      "100": { "$value": "#161B22", "$description": "Elevated panels, cards, modals" },
+      "200": { "$value": "#1D2530", "$description": "Slightly raised insets" },
+      "300": { "$value": "#202A35", "$description": "Table headers, hover fills" }
+    },
+    "slate": {
+      "line": { "$value": "#30363D", "$description": "Hairline borders / dividers" }
+    },
+    "ink": {
+      "primary": { "$value": "#F0F6FC" },
+      "secondary": { "$value": "#8B949E" },
+      "tertiary": { "$value": "#6E7681" }
+    },
+    "status": {
+      "orange": { "$value": "#F97316" },
+      "red": { "$value": "#F85149" },
+      "blue": { "$value": "#58A6FF" }
+    }
+  }
+}

package/src/semantic/border.json

@@ -0,0 +1,8 @@
+{
+  "$description": "Borders & elevation. No shadows — depth is a 1px hairline + a surface-color step.",
+  "border": { "$type": "string", "$value": "1px solid var(--line)" },
+  "focus-ring": { "$type": "string", "$value": "0 0 0 1px var(--accent)" },
+  "border-width-thin": { "$type": "dimension", "$value": "1px" },
+  "border-width-regular": { "$type": "dimension", "$value": "1px" },
+  "border-width-strong": { "$type": "dimension", "$value": "2px" }
+}

package/src/semantic/breakpoint.json

@@ -0,0 +1,7 @@
+{
+  "$description": "Responsive breakpoints and container widths.",
+  "bp-sm": { "$type": "dimension", "$value": "640px" },
+  "bp-md": { "$type": "dimension", "$value": "768px" },
+  "bp-lg": { "$type": "dimension", "$value": "1024px" },
+  "bp-xl": { "$type": "dimension", "$value": "1280px" }
+}

package/src/semantic/color.json

@@ -0,0 +1,85 @@
+{
+  "$description": "Semantic color tokens — canonical Искра.DCI CSS variables (dark theme / default). Keys map 1:1 to existing --var names to preserve compatibility.",
+  "bg": {
+    "$type": "color",
+    "$value": "{palette.anthracite.deep}",
+    "$description": "Global page background"
+  },
+  "panel": {
+    "$type": "color",
+    "$value": "{palette.graphite.100}",
+    "$description": "Elevated graphite — cards, modals"
+  },
+  "panel-soft": { "$type": "color", "$value": "{palette.graphite.200}" },
+  "panel-muted": { "$type": "color", "$value": "{palette.graphite.300}" },
+  "line": { "$type": "color", "$value": "{palette.slate.line}" },
+  "line-soft": { "$type": "color", "$value": "rgba(48,54,61,.5)" },
+
+  "fg1": { "$type": "color", "$value": "{palette.ink.primary}", "$description": "Primary text" },
+  "fg2": {
+    "$type": "color",
+    "$value": "{palette.ink.secondary}",
+    "$description": "Secondary text, placeholders"
+  },
+  "fg3": {
+    "$type": "color",
+    "$value": "{palette.ink.tertiary}",
+    "$description": "Tertiary / disabled"
+  },
+
+  "accent": {
+    "$type": "color",
+    "$value": "{palette.mint.bright}",
+    "$description": "Indicators, borders, focus ONLY — never accent text on dark"
+  },
+  "accent-hover": { "$type": "color", "$value": "{palette.mint.mid}" },
+  "accent-safe": {
+    "$type": "color",
+    "$value": "{palette.mint.safe}",
+    "$description": "AA-safe accent for text/fills"
+  },
+  "accent-soft": { "$type": "color", "$value": "rgba(0,170,133,.14)" },
+  "accent-line": { "$type": "color", "$value": "rgba(0,170,133,.32)" },
+
+  "fg-on-accent": {
+    "$type": "color",
+    "$value": "{palette.anthracite.deep}",
+    "$description": "Dark text/icons on bright accent fills (accent stays bright across themes — stable)"
+  },
+  "fg-on-status": {
+    "$type": "color",
+    "$value": "{palette.base.white}",
+    "$description": "White text on saturated status fills (stable across themes)"
+  },
+  "scrim": {
+    "$type": "color",
+    "$value": "{palette.anthracite.deep}",
+    "$description": "Modal/overlay scrim base — always dark"
+  },
+
+  "status-ok": {
+    "$type": "color",
+    "$value": "{palette.mint.bright}",
+    "$description": "Sync / Online"
+  },
+  "status-warn": {
+    "$type": "color",
+    "$value": "{palette.status.orange}",
+    "$description": "Drift / Warning"
+  },
+  "status-err": {
+    "$type": "color",
+    "$value": "{palette.status.red}",
+    "$description": "Error / Critical"
+  },
+  "status-off": {
+    "$type": "color",
+    "$value": "{palette.ink.tertiary}",
+    "$description": "Maintenance / Inactive"
+  },
+  "status-info": {
+    "$type": "color",
+    "$value": "{palette.status.blue}",
+    "$description": "Info / Neutral (used minimally)"
+  }
+}

package/src/semantic/motion.json

@@ -0,0 +1,8 @@
+{
+  "$description": "Motion — minimal and functional (~150ms color/border transitions).",
+  "ease": { "$type": "cubicBezier", "$value": "cubic-bezier(.2,.6,.2,1)" },
+  "dur": { "$type": "duration", "$value": ".15s" },
+  "dur-fast": { "$type": "duration", "$value": "100ms" },
+  "dur-normal": { "$type": "duration", "$value": "150ms" },
+  "dur-slow": { "$type": "duration", "$value": "250ms" }
+}

package/src/semantic/opacity.json

@@ -0,0 +1,7 @@
+{
+  "$description": "Opacity aliases for state.",
+  "opacity-disabled": { "$type": "number", "$value": 0.45 },
+  "opacity-muted": { "$type": "number", "$value": 0.7 },
+  "opacity-overlay": { "$type": "number", "$value": 0.6 },
+  "opacity-pressed": { "$type": "number", "$value": 0.85 }
+}

package/src/semantic/radius.json

@@ -0,0 +1,5 @@
+{
+  "$description": "Corner radius — fixed 4px everywhere, 2px for tiny chips/tags.",
+  "radius": { "$type": "dimension", "$value": "4px" },
+  "radius-sm": { "$type": "dimension", "$value": "2px" }
+}

package/src/semantic/size.json

@@ -0,0 +1,14 @@
+{
+  "$description": "Control heights, icon and avatar sizes. Control sizes s·m·l map to 28·32·36px.",
+  "control-h": { "$type": "dimension", "$value": "32px" },
+  "control-h-lg": { "$type": "dimension", "$value": "36px" },
+  "control-s": { "$type": "dimension", "$value": "28px" },
+  "control-m": { "$type": "dimension", "$value": "32px" },
+  "control-l": { "$type": "dimension", "$value": "36px" },
+  "icon-sm": { "$type": "dimension", "$value": "16px" },
+  "icon-md": { "$type": "dimension", "$value": "20px" },
+  "avatar-sm": { "$type": "dimension", "$value": "24px" },
+  "avatar-md": { "$type": "dimension", "$value": "32px" },
+  "avatar-lg": { "$type": "dimension", "$value": "48px" },
+  "min-target": { "$type": "dimension", "$value": "24px" }
+}

package/src/semantic/space.json

@@ -0,0 +1,11 @@
+{
+  "$description": "Spacing scale — strict 8px grid (4px allowed for micro-detail).",
+  "s1": { "$type": "dimension", "$value": "4px" },
+  "s2": { "$type": "dimension", "$value": "8px" },
+  "s3": { "$type": "dimension", "$value": "12px" },
+  "s4": { "$type": "dimension", "$value": "16px" },
+  "s5": { "$type": "dimension", "$value": "24px" },
+  "s6": { "$type": "dimension", "$value": "32px" },
+  "s7": { "$type": "dimension", "$value": "48px" },
+  "s8": { "$type": "dimension", "$value": "64px" }
+}

package/src/semantic/typography.json

@@ -0,0 +1,34 @@
+{
+  "$description": "Type families + scale. Sizes are px on an intentional 14px root (data-dense product).",
+  "font-ui": { "$type": "fontFamily", "$value": "'Inter', system-ui, -apple-system, sans-serif" },
+  "font-display": {
+    "$type": "fontFamily",
+    "$value": "'Inter', system-ui, -apple-system, sans-serif"
+  },
+  "font-mono": {
+    "$type": "fontFamily",
+    "$value": "'JetBrains Mono', ui-monospace, 'SF Mono', monospace"
+  },
+
+  "text-h1": { "$type": "dimension", "$value": "24px" },
+  "lh-h1": { "$type": "number", "$value": 1.2 },
+  "wt-h1": { "$type": "number", "$value": 600 },
+  "text-h2": { "$type": "dimension", "$value": "20px" },
+  "lh-h2": { "$type": "number", "$value": 1.2 },
+  "wt-h2": { "$type": "number", "$value": 600 },
+  "text-h3": { "$type": "dimension", "$value": "18px" },
+  "lh-h3": { "$type": "number", "$value": 1.2 },
+  "wt-h3": { "$type": "number", "$value": 600 },
+
+  "text-ui": { "$type": "dimension", "$value": "14px" },
+  "lh-ui": { "$type": "number", "$value": 1.4 },
+  "wt-ui": { "$type": "number", "$value": 400 },
+  "text-ui-med": { "$type": "dimension", "$value": "14px" },
+  "wt-ui-med": { "$type": "number", "$value": 500 },
+
+  "text-small": { "$type": "dimension", "$value": "12px" },
+  "lh-sm": { "$type": "number", "$value": 1.4 },
+  "text-mono": { "$type": "dimension", "$value": "13px" },
+  "lh-mono": { "$type": "number", "$value": 1.45 },
+  "text-label": { "$type": "dimension", "$value": "11px" }
+}

package/src/semantic/z-index.json

@@ -0,0 +1,9 @@
+{
+  "$description": "Stacking order for overlay layers.",
+  "z-dropdown": { "$type": "number", "$value": 1000 },
+  "z-sticky": { "$type": "number", "$value": 1100 },
+  "z-overlay": { "$type": "number", "$value": 1200 },
+  "z-modal": { "$type": "number", "$value": 1300 },
+  "z-toast": { "$type": "number", "$value": 1400 },
+  "z-tooltip": { "$type": "number", "$value": 1500 }
+}

package/src/themes/cold.json

@@ -0,0 +1,22 @@
+{
+  "$description": "Cold light theme (off-white, neutral) — redefines the same semantic color tokens. Applied via .theme-cold.",
+  "bg": { "$type": "color", "$value": "#EEF2F7" },
+  "panel": { "$type": "color", "$value": "#E2E8F0" },
+  "panel-soft": { "$type": "color", "$value": "#E9EEF4" },
+  "panel-muted": { "$type": "color", "$value": "#DCE3EC" },
+  "line": { "$type": "color", "$value": "#CDD5E0" },
+  "line-soft": { "$type": "color", "$value": "rgba(205,213,224,.6)" },
+  "fg1": { "$type": "color", "$value": "#1C2128" },
+  "fg2": { "$type": "color", "$value": "#57606A" },
+  "fg3": { "$type": "color", "$value": "#8B949E" },
+  "accent": { "$type": "color", "$value": "#00AA85" },
+  "accent-hover": { "$type": "color", "$value": "#009478" },
+  "accent-safe": { "$type": "color", "$value": "#008268" },
+  "accent-soft": { "$type": "color", "$value": "#E6F7F2" },
+  "accent-line": { "$type": "color", "$value": "rgba(0,170,133,.32)" },
+  "status-ok": { "$type": "color", "$value": "#00AA85" },
+  "status-warn": { "$type": "color", "$value": "#D0610A" },
+  "status-err": { "$type": "color", "$value": "#D0302A" },
+  "status-off": { "$type": "color", "$value": "#6E7681" },
+  "status-info": { "$type": "color", "$value": "#2E6DA4" }
+}

package/src/themes/warm.json

@@ -0,0 +1,22 @@
+{
+  "$description": "Warm light theme (paper / sand) — redefines the same semantic color tokens. Applied via .theme-warm.",
+  "bg": { "$type": "color", "$value": "#F5F0E8" },
+  "panel": { "$type": "color", "$value": "#EDE8DF" },
+  "panel-soft": { "$type": "color", "$value": "#F0EBE3" },
+  "panel-muted": { "$type": "color", "$value": "#E4DED3" },
+  "line": { "$type": "color", "$value": "#D8D2C8" },
+  "line-soft": { "$type": "color", "$value": "rgba(216,210,200,.6)" },
+  "fg1": { "$type": "color", "$value": "#1C1A17" },
+  "fg2": { "$type": "color", "$value": "#6B6560" },
+  "fg3": { "$type": "color", "$value": "#9A948C" },
+  "accent": { "$type": "color", "$value": "#009B78" },
+  "accent-hover": { "$type": "color", "$value": "#008268" },
+  "accent-safe": { "$type": "color", "$value": "#00795D" },
+  "accent-soft": { "$type": "color", "$value": "#E8F5F0" },
+  "accent-line": { "$type": "color", "$value": "rgba(0,155,120,.32)" },
+  "status-ok": { "$type": "color", "$value": "#009B78" },
+  "status-warn": { "$type": "color", "$value": "#C2620A" },
+  "status-err": { "$type": "color", "$value": "#C23B36" },
+  "status-off": { "$type": "color", "$value": "#7A756E" },
+  "status-info": { "$type": "color", "$value": "#3A6FA8" }
+}