321 lines
11 KiB
JSON
321 lines
11 KiB
JSON
{
|
||
"$meta": {
|
||
"name": "KT AI Design Tokens",
|
||
"version": "5.4.0",
|
||
"comment": "Единый источник истины. Правки ТОЛЬКО здесь, затем: python3 scripts/build_tokens.py. Генерирует: kt-ai-tokens.css, kt-ai-print.css, figma-variables.json, kt-ai-tailwind-preset.cjs. Ссылка на primitive: значение вида $имя. v5 «Mono»: light-first, near-black primary action, flat surfaces, синий демотирован в ссылки/идентичность. v5.2: контраст AA как машинный гейт — пороги проверяются в build_tokens.py, а не глазами. v5.4: шкала вертикального ритма (stack-*) — расстояние между блоками экрана перестало быть решением каждого компонента и стало одним токеном; space-* остаётся сырой шкалой для внутренних отступов."
|
||
},
|
||
"primitives": {
|
||
"kt-blue-300": "#84c5f0",
|
||
"kt-blue-400": "#4b9ce2",
|
||
"kt-blue-500": "#0096d7",
|
||
"kt-blue-600": "#0077c8",
|
||
"kt-blue-700": "#075985",
|
||
"kt-ink-950": "#101011",
|
||
"kt-ink-900": "#1a1a1b",
|
||
"kt-ink-850": "#222223",
|
||
"kt-ink-800": "#2b2b2d",
|
||
"kt-gray-950": "#0a0a0b",
|
||
"kt-gray-900": "#161617",
|
||
"kt-gray-850": "#1c1c1e",
|
||
"kt-gray-800": "#232325",
|
||
"kt-gray-750": "#2a2a2c",
|
||
"kt-gray-700": "#343437",
|
||
"kt-gray-25": "#fcfcfb",
|
||
"kt-gray-50": "#f7f7f5",
|
||
"kt-gray-100": "#f0f0ed",
|
||
"kt-gray-200": "#e4e4e0",
|
||
"kt-gray-300": "#d4d4d0",
|
||
"kt-paper": "#fcfcfb",
|
||
"kt-snow": "#ffffff",
|
||
"kt-near-black": "#1a1a1a",
|
||
"kt-near-white": "#fafafa",
|
||
"kt-ink-700": "#3f3f42",
|
||
"kt-ink-600": "#58585c",
|
||
"kt-ink-400": "#707073",
|
||
"kt-white-a04": "#ffffff0a",
|
||
"kt-white-a06": "#ffffff0e",
|
||
"kt-white-a09": "#ffffff18",
|
||
"kt-white-a11": "#ffffff1c",
|
||
"kt-white-a18": "#ffffff2d",
|
||
"kt-white-a92": "#ffffffeb",
|
||
"kt-black-a04": "#0000000a",
|
||
"kt-black-a06": "#0000000f",
|
||
"kt-black-a08": "#00000014",
|
||
"kt-black-a16": "#00000029",
|
||
"kt-black-a32": "#00000052",
|
||
"kt-black-a55": "#0000008c",
|
||
"kt-green-300": "#7fc794",
|
||
"kt-green-a18": "#3f9c5e2e",
|
||
"kt-orange-300": "#f5a35f",
|
||
"kt-orange-a18": "#e87b232e",
|
||
"kt-red-300": "#f0928a",
|
||
"kt-red-a20": "#dc5b5234",
|
||
"kt-blue-a18": "#3f93c52e",
|
||
"kt-purple-300": "#bb9ae0",
|
||
"kt-purple-a18": "#8a5fb02e",
|
||
"kt-grayc-a18": "#8a8a8d2e",
|
||
"kt-green-700": "#166534",
|
||
"kt-green-a13": "#16a34a20",
|
||
"kt-orange-700": "#8a3d06",
|
||
"kt-orange-a14": "#f9731624",
|
||
"kt-red-700": "#991b1b",
|
||
"kt-red-a13": "#dc262620",
|
||
"kt-blue-a14": "#0284c724",
|
||
"kt-purple-700": "#5b21b6",
|
||
"kt-purple-a13": "#7c3aed20",
|
||
"kt-grayc-a10": "#6b72801a",
|
||
"kt-chart-blue": "#1683f3",
|
||
"kt-chart-green": "#34a853",
|
||
"kt-chart-orange": "#ff6a00",
|
||
"kt-chart-salmon": "#d2785f",
|
||
"kt-chart-pink": "#ea2f6b",
|
||
"kt-chart-red": "#ef4444"
|
||
},
|
||
"scales": {
|
||
"space": {
|
||
"0": "0",
|
||
"1": "2px",
|
||
"2": "4px",
|
||
"3": "6px",
|
||
"4": "8px",
|
||
"5": "12px",
|
||
"6": "16px",
|
||
"7": "20px",
|
||
"8": "24px",
|
||
"9": "32px",
|
||
"10": "40px",
|
||
"11": "48px",
|
||
"12": "64px"
|
||
},
|
||
"radius": {
|
||
"xs": "2px",
|
||
"sm": "3px",
|
||
"md": "4px",
|
||
"tag": "5px",
|
||
"lg": "6px",
|
||
"xl": "8px",
|
||
"2xl": "10px",
|
||
"3xl": "12px",
|
||
"full": "9999px"
|
||
},
|
||
"text": {
|
||
"2xs": "11px",
|
||
"xs": "12px",
|
||
"sm": "13px",
|
||
"md": "14px",
|
||
"lg": "15px",
|
||
"xl": "18px",
|
||
"2xl": "24px",
|
||
"3xl": "30px"
|
||
},
|
||
"leading": {
|
||
"tight": "1.25",
|
||
"normal": "1.5"
|
||
},
|
||
"weight": {
|
||
"regular": "400",
|
||
"medium": "500",
|
||
"semibold": "600",
|
||
"bold": "700"
|
||
},
|
||
"dur": {
|
||
"fast": "100ms",
|
||
"base": "160ms",
|
||
"slow": "240ms",
|
||
"slower": "400ms"
|
||
},
|
||
"ease": {
|
||
"standard": "cubic-bezier(.2, 0, 0, 1)",
|
||
"enter": "cubic-bezier(0, 0, .2, 1)",
|
||
"exit": "cubic-bezier(.4, 0, 1, 1)"
|
||
},
|
||
"z": {
|
||
"sticky": "20",
|
||
"dropdown": "30",
|
||
"drawer": "40",
|
||
"modal": "50",
|
||
"toast": "60",
|
||
"tooltip": "70"
|
||
},
|
||
"control-h": {
|
||
"sm": "28px",
|
||
"md": "32px",
|
||
"lg": "40px",
|
||
"touch": "44px"
|
||
},
|
||
"bp": {
|
||
"sm": "640px",
|
||
"md": "832px",
|
||
"lg": "1024px",
|
||
"xl": "1280px"
|
||
},
|
||
"layout": {
|
||
"sidebar-width": "232px",
|
||
"sidebar-collapsed-width": "52px",
|
||
"content-max": "1040px",
|
||
"content-wide": "1200px",
|
||
"content-table": "1180px",
|
||
"nav-row": "30px",
|
||
"table-row": "48px",
|
||
"table-row-compact": "38px",
|
||
"table-row-relaxed": "56px",
|
||
"chart-height": "200px",
|
||
"stack-tight": "12px",
|
||
"stack-block": "16px",
|
||
"stack-group": "24px",
|
||
"stack-region": "32px",
|
||
"pad-card": "20px"
|
||
},
|
||
"font": {
|
||
"sans": "\"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
|
||
"mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, monospace"
|
||
}
|
||
},
|
||
"themes": {
|
||
"light": {
|
||
"bg": "$kt-paper",
|
||
"bg-soft": "$kt-gray-50",
|
||
"bg-elevated": "$kt-snow",
|
||
"bg-sunken": "$kt-gray-100",
|
||
"bg-hover": "$kt-black-a04",
|
||
"bg-active": "$kt-black-a08",
|
||
"bg-glass": "color-mix(in srgb, #fcfcfb 85%, transparent)",
|
||
"inset-highlight": "#ffffff1f",
|
||
"ai-accent": "#7c4fe0",
|
||
"ai-gradient": "linear-gradient(135deg, #0096d7, #7c4fe0 92%)",
|
||
"ai-orb": "radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%)",
|
||
"orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)",
|
||
"fg-on-ai": "#ffffff",
|
||
"card-bg": "$kt-snow",
|
||
"card-bg-glow": "$kt-snow",
|
||
"card-border": "$kt-black-a08",
|
||
"card-border-hover": "$kt-black-a16",
|
||
"card-shadow": "0 1px 2px #0000000d",
|
||
"card-shadow-hover": "0 4px 14px #00000014",
|
||
"selection": "#1a1a1a16",
|
||
"fg": "$kt-near-black",
|
||
"fg-muted": "$kt-ink-600",
|
||
"fg-faint": "$kt-ink-400",
|
||
"fg-on-fill": "#ffffff",
|
||
"border": "$kt-black-a08",
|
||
"border-strong": "$kt-black-a16",
|
||
"divider": "$kt-black-a06",
|
||
"primary": "$kt-near-black",
|
||
"primary-hover": "#343437",
|
||
"primary-subtle": "$kt-black-a04",
|
||
"brand-blue": "$kt-blue-500",
|
||
"link": "$kt-blue-600",
|
||
"focus-ring": "#1a1a1a99",
|
||
"focus-shadow": "0 0 0 3px #1a1a1a1f",
|
||
"danger": "#dc2626",
|
||
"danger-hover": "#b91c1c",
|
||
"overlay": "$kt-black-a32",
|
||
"chip-default-bg": "$kt-black-a06",
|
||
"chip-default-fg": "#2d2d2f",
|
||
"chip-gray-bg": "$kt-grayc-a10",
|
||
"chip-gray-fg": "$kt-ink-700",
|
||
"chip-orange-bg": "$kt-orange-a14",
|
||
"chip-orange-fg": "$kt-orange-700",
|
||
"chip-green-bg": "$kt-green-a13",
|
||
"chip-green-fg": "$kt-green-700",
|
||
"chip-blue-bg": "$kt-blue-a14",
|
||
"chip-blue-fg": "$kt-blue-700",
|
||
"chip-purple-bg": "$kt-purple-a13",
|
||
"chip-purple-fg": "$kt-purple-700",
|
||
"chip-red-bg": "$kt-red-a13",
|
||
"chip-red-fg": "$kt-red-700",
|
||
"status-ok-bg": "$kt-green-a13",
|
||
"status-ok-fg": "$kt-green-700",
|
||
"status-warn-bg": "$kt-orange-a14",
|
||
"status-warn-fg": "$kt-orange-700",
|
||
"status-risk-bg": "$kt-red-a13",
|
||
"status-risk-fg": "$kt-red-700",
|
||
"status-info-bg": "$kt-grayc-a10",
|
||
"status-info-fg": "$kt-ink-700",
|
||
"chart-blue": "$kt-chart-blue",
|
||
"chart-green": "$kt-chart-green",
|
||
"chart-orange": "$kt-chart-orange",
|
||
"chart-salmon": "$kt-chart-salmon",
|
||
"chart-pink": "$kt-chart-pink",
|
||
"chart-red": "$kt-chart-red",
|
||
"chart-bar-fill": "#e4e4e0",
|
||
"shadow-sm": "0 1px 2px #0000000d",
|
||
"shadow-md": "0 4px 14px #00000014",
|
||
"shadow-lg": "0 2px 6px #00000012, 0 12px 32px #0000001f",
|
||
"shadow-xl": "0 3px 8px #00000014, 0 24px 64px #00000026"
|
||
},
|
||
"dark": {
|
||
"bg": "$kt-gray-950",
|
||
"bg-soft": "$kt-gray-900",
|
||
"bg-elevated": "$kt-gray-850",
|
||
"bg-sunken": "#060607",
|
||
"bg-hover": "$kt-white-a06",
|
||
"bg-active": "$kt-white-a09",
|
||
"bg-glass": "color-mix(in srgb, #0a0a0b 85%, transparent)",
|
||
"inset-highlight": "#00000014",
|
||
"ai-accent": "#7c4fe0",
|
||
"ai-gradient": "linear-gradient(135deg, #0096d7, #8b5cf6 92%)",
|
||
"ai-orb": "radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%)",
|
||
"orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)",
|
||
"fg-on-ai": "#ffffff",
|
||
"card-bg": "$kt-gray-900",
|
||
"card-bg-glow": "$kt-gray-900",
|
||
"card-border": "$kt-white-a09",
|
||
"card-border-hover": "$kt-white-a18",
|
||
"card-shadow": "none",
|
||
"card-shadow-hover": "none",
|
||
"selection": "#fafafa1f",
|
||
"fg": "$kt-white-a92",
|
||
"fg-muted": "#9b9b9e",
|
||
"fg-faint": "#848487",
|
||
"fg-on-fill": "$kt-ink-900",
|
||
"border": "$kt-white-a09",
|
||
"border-strong": "$kt-white-a18",
|
||
"divider": "$kt-white-a06",
|
||
"primary": "$kt-near-white",
|
||
"primary-hover": "#e4e4e7",
|
||
"primary-subtle": "$kt-white-a09",
|
||
"brand-blue": "$kt-blue-500",
|
||
"link": "$kt-blue-400",
|
||
"focus-ring": "#fafafa80",
|
||
"focus-shadow": "0 0 0 3px #fafafa24",
|
||
"danger": "#f0726a",
|
||
"danger-hover": "#f48a83",
|
||
"overlay": "$kt-black-a55",
|
||
"chip-default-bg": "$kt-white-a09",
|
||
"chip-default-fg": "$kt-white-a92",
|
||
"chip-gray-bg": "$kt-grayc-a18",
|
||
"chip-gray-fg": "$kt-gray-300",
|
||
"chip-orange-bg": "$kt-orange-a18",
|
||
"chip-orange-fg": "$kt-orange-300",
|
||
"chip-green-bg": "$kt-green-a18",
|
||
"chip-green-fg": "$kt-green-300",
|
||
"chip-blue-bg": "$kt-blue-a18",
|
||
"chip-blue-fg": "$kt-blue-300",
|
||
"chip-purple-bg": "$kt-purple-a18",
|
||
"chip-purple-fg": "$kt-purple-300",
|
||
"chip-red-bg": "$kt-red-a20",
|
||
"chip-red-fg": "$kt-red-300",
|
||
"status-ok-bg": "$kt-green-a18",
|
||
"status-ok-fg": "$kt-green-300",
|
||
"status-warn-bg": "$kt-orange-a18",
|
||
"status-warn-fg": "$kt-orange-300",
|
||
"status-risk-bg": "$kt-red-a20",
|
||
"status-risk-fg": "$kt-red-300",
|
||
"status-info-bg": "$kt-grayc-a18",
|
||
"status-info-fg": "$kt-gray-300",
|
||
"chart-blue": "$kt-chart-blue",
|
||
"chart-green": "$kt-chart-green",
|
||
"chart-orange": "$kt-chart-orange",
|
||
"chart-salmon": "$kt-chart-salmon",
|
||
"chart-pink": "$kt-chart-pink",
|
||
"chart-red": "$kt-chart-red",
|
||
"chart-bar-fill": "#2e2e31",
|
||
"shadow-sm": "0 1px 2px #00000052",
|
||
"shadow-md": "0 4px 16px #00000066",
|
||
"shadow-lg": "0 12px 40px #00000080",
|
||
"shadow-xl": "0 24px 80px #00000099"
|
||
}
|
||
}
|
||
}
|