dashbord-prodazh-po-regionam/design-system/kt-ai-tokens.css

396 lines
15 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* AUTOGENERATED из tokens.json v5.4.0 – НЕ ПРАВИТЬ РУКАМИ.
* Пересборка: python3 scripts/build_tokens.py
* Канон: 00_Система/08_Дизайн-система/docs/DESIGN.md */
@layer kt-tokens {
/* TIER 1. PRIMITIVES – в продуктовом CSS не использовать */
:root {
--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;
--kt-ai-space-0: 0;
--kt-ai-space-1: 2px;
--kt-ai-space-2: 4px;
--kt-ai-space-3: 6px;
--kt-ai-space-4: 8px;
--kt-ai-space-5: 12px;
--kt-ai-space-6: 16px;
--kt-ai-space-7: 20px;
--kt-ai-space-8: 24px;
--kt-ai-space-9: 32px;
--kt-ai-space-10: 40px;
--kt-ai-space-11: 48px;
--kt-ai-space-12: 64px;
--kt-ai-radius-xs: 2px;
--kt-ai-radius-sm: 3px;
--kt-ai-radius-md: 4px;
--kt-ai-radius-tag: 5px;
--kt-ai-radius-lg: 6px;
--kt-ai-radius-xl: 8px;
--kt-ai-radius-2xl: 10px;
--kt-ai-radius-3xl: 12px;
--kt-ai-radius-full: 9999px;
--kt-ai-text-2xs: 11px;
--kt-ai-text-xs: 12px;
--kt-ai-text-sm: 13px;
--kt-ai-text-md: 14px;
--kt-ai-text-lg: 15px;
--kt-ai-text-xl: 18px;
--kt-ai-text-2xl: 24px;
--kt-ai-text-3xl: 30px;
--kt-ai-leading-tight: 1.25;
--kt-ai-leading-normal: 1.5;
--kt-ai-weight-regular: 400;
--kt-ai-weight-medium: 500;
--kt-ai-weight-semibold: 600;
--kt-ai-weight-bold: 700;
--kt-ai-dur-fast: 100ms;
--kt-ai-dur-base: 160ms;
--kt-ai-dur-slow: 240ms;
--kt-ai-dur-slower: 400ms;
--kt-ai-ease-standard: cubic-bezier(.2, 0, 0, 1);
--kt-ai-ease-enter: cubic-bezier(0, 0, .2, 1);
--kt-ai-ease-exit: cubic-bezier(.4, 0, 1, 1);
--kt-ai-z-sticky: 20;
--kt-ai-z-dropdown: 30;
--kt-ai-z-drawer: 40;
--kt-ai-z-modal: 50;
--kt-ai-z-toast: 60;
--kt-ai-z-tooltip: 70;
--kt-ai-control-h-sm: 28px;
--kt-ai-control-h-md: 32px;
--kt-ai-control-h-lg: 40px;
--kt-ai-control-h-touch: 44px;
--kt-ai-bp-sm: 640px;
--kt-ai-bp-md: 832px;
--kt-ai-bp-lg: 1024px;
--kt-ai-bp-xl: 1280px;
--kt-ai-sidebar-width: 232px;
--kt-ai-sidebar-collapsed-width: 52px;
--kt-ai-content-max: 1040px;
--kt-ai-content-wide: 1200px;
--kt-ai-content-table: 1180px;
--kt-ai-nav-row: 30px;
--kt-ai-table-row: 48px;
--kt-ai-table-row-compact: 38px;
--kt-ai-table-row-relaxed: 56px;
--kt-ai-chart-height: 200px;
--kt-ai-stack-tight: 12px;
--kt-ai-stack-block: 16px;
--kt-ai-stack-group: 24px;
--kt-ai-stack-region: 32px;
--kt-ai-pad-card: 20px;
--kt-ai-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--kt-ai-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
/* TIER 2. SEMANTIC. Дефолт – light (v5 «Mono», light-first); dark – полноправный паритет */
:root,
[data-theme="kt-ai-terminal-light"],
[data-theme="light"] {
color-scheme: light;
--kt-ai-bg: var(--kt-paper);
--kt-ai-bg-soft: var(--kt-gray-50);
--kt-ai-bg-elevated: var(--kt-snow);
--kt-ai-bg-sunken: var(--kt-gray-100);
--kt-ai-bg-hover: var(--kt-black-a04);
--kt-ai-bg-active: var(--kt-black-a08);
--kt-ai-bg-glass: color-mix(in srgb, #fcfcfb 85%, transparent);
--kt-ai-inset-highlight: #ffffff1f;
--kt-ai-ai-accent: #7c4fe0;
--kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #7c4fe0 92%);
--kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%);
--kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
--kt-ai-fg-on-ai: #ffffff;
--kt-ai-card-bg: var(--kt-snow);
--kt-ai-card-bg-glow: var(--kt-snow);
--kt-ai-card-border: var(--kt-black-a08);
--kt-ai-card-border-hover: var(--kt-black-a16);
--kt-ai-card-shadow: 0 1px 2px #0000000d;
--kt-ai-card-shadow-hover: 0 4px 14px #00000014;
--kt-ai-selection: #1a1a1a16;
--kt-ai-fg: var(--kt-near-black);
--kt-ai-fg-muted: var(--kt-ink-600);
--kt-ai-fg-faint: var(--kt-ink-400);
--kt-ai-fg-on-fill: #ffffff;
--kt-ai-border: var(--kt-black-a08);
--kt-ai-border-strong: var(--kt-black-a16);
--kt-ai-divider: var(--kt-black-a06);
--kt-ai-primary: var(--kt-near-black);
--kt-ai-primary-hover: #343437;
--kt-ai-primary-subtle: var(--kt-black-a04);
--kt-ai-brand-blue: var(--kt-blue-500);
--kt-ai-link: var(--kt-blue-600);
--kt-ai-focus-ring: #1a1a1a99;
--kt-ai-focus-shadow: 0 0 0 3px #1a1a1a1f;
--kt-ai-danger: #dc2626;
--kt-ai-danger-hover: #b91c1c;
--kt-ai-overlay: var(--kt-black-a32);
--kt-ai-chip-default-bg: var(--kt-black-a06);
--kt-ai-chip-default-fg: #2d2d2f;
--kt-ai-chip-gray-bg: var(--kt-grayc-a10);
--kt-ai-chip-gray-fg: var(--kt-ink-700);
--kt-ai-chip-orange-bg: var(--kt-orange-a14);
--kt-ai-chip-orange-fg: var(--kt-orange-700);
--kt-ai-chip-green-bg: var(--kt-green-a13);
--kt-ai-chip-green-fg: var(--kt-green-700);
--kt-ai-chip-blue-bg: var(--kt-blue-a14);
--kt-ai-chip-blue-fg: var(--kt-blue-700);
--kt-ai-chip-purple-bg: var(--kt-purple-a13);
--kt-ai-chip-purple-fg: var(--kt-purple-700);
--kt-ai-chip-red-bg: var(--kt-red-a13);
--kt-ai-chip-red-fg: var(--kt-red-700);
--kt-ai-status-ok-bg: var(--kt-green-a13);
--kt-ai-status-ok-fg: var(--kt-green-700);
--kt-ai-status-warn-bg: var(--kt-orange-a14);
--kt-ai-status-warn-fg: var(--kt-orange-700);
--kt-ai-status-risk-bg: var(--kt-red-a13);
--kt-ai-status-risk-fg: var(--kt-red-700);
--kt-ai-status-info-bg: var(--kt-grayc-a10);
--kt-ai-status-info-fg: var(--kt-ink-700);
--kt-ai-chart-blue: var(--kt-chart-blue);
--kt-ai-chart-green: var(--kt-chart-green);
--kt-ai-chart-orange: var(--kt-chart-orange);
--kt-ai-chart-salmon: var(--kt-chart-salmon);
--kt-ai-chart-pink: var(--kt-chart-pink);
--kt-ai-chart-red: var(--kt-chart-red);
--kt-ai-chart-bar-fill: #e4e4e0;
--kt-ai-shadow-sm: 0 1px 2px #0000000d;
--kt-ai-shadow-md: 0 4px 14px #00000014;
--kt-ai-shadow-lg: 0 2px 6px #00000012, 0 12px 32px #0000001f;
--kt-ai-shadow-xl: 0 3px 8px #00000014, 0 24px 64px #00000026;
--kt-ai-command-shadow: var(--kt-ai-shadow-xl);
}
[data-theme="kt-ai-terminal"],
[data-theme="dark"] {
color-scheme: dark;
--kt-ai-bg: var(--kt-gray-950);
--kt-ai-bg-soft: var(--kt-gray-900);
--kt-ai-bg-elevated: var(--kt-gray-850);
--kt-ai-bg-sunken: #060607;
--kt-ai-bg-hover: var(--kt-white-a06);
--kt-ai-bg-active: var(--kt-white-a09);
--kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent);
--kt-ai-inset-highlight: #00000014;
--kt-ai-ai-accent: #7c4fe0;
--kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%);
--kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%);
--kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
--kt-ai-fg-on-ai: #ffffff;
--kt-ai-card-bg: var(--kt-gray-900);
--kt-ai-card-bg-glow: var(--kt-gray-900);
--kt-ai-card-border: var(--kt-white-a09);
--kt-ai-card-border-hover: var(--kt-white-a18);
--kt-ai-card-shadow: none;
--kt-ai-card-shadow-hover: none;
--kt-ai-selection: #fafafa1f;
--kt-ai-fg: var(--kt-white-a92);
--kt-ai-fg-muted: #9b9b9e;
--kt-ai-fg-faint: #848487;
--kt-ai-fg-on-fill: var(--kt-ink-900);
--kt-ai-border: var(--kt-white-a09);
--kt-ai-border-strong: var(--kt-white-a18);
--kt-ai-divider: var(--kt-white-a06);
--kt-ai-primary: var(--kt-near-white);
--kt-ai-primary-hover: #e4e4e7;
--kt-ai-primary-subtle: var(--kt-white-a09);
--kt-ai-brand-blue: var(--kt-blue-500);
--kt-ai-link: var(--kt-blue-400);
--kt-ai-focus-ring: #fafafa80;
--kt-ai-focus-shadow: 0 0 0 3px #fafafa24;
--kt-ai-danger: #f0726a;
--kt-ai-danger-hover: #f48a83;
--kt-ai-overlay: var(--kt-black-a55);
--kt-ai-chip-default-bg: var(--kt-white-a09);
--kt-ai-chip-default-fg: var(--kt-white-a92);
--kt-ai-chip-gray-bg: var(--kt-grayc-a18);
--kt-ai-chip-gray-fg: var(--kt-gray-300);
--kt-ai-chip-orange-bg: var(--kt-orange-a18);
--kt-ai-chip-orange-fg: var(--kt-orange-300);
--kt-ai-chip-green-bg: var(--kt-green-a18);
--kt-ai-chip-green-fg: var(--kt-green-300);
--kt-ai-chip-blue-bg: var(--kt-blue-a18);
--kt-ai-chip-blue-fg: var(--kt-blue-300);
--kt-ai-chip-purple-bg: var(--kt-purple-a18);
--kt-ai-chip-purple-fg: var(--kt-purple-300);
--kt-ai-chip-red-bg: var(--kt-red-a20);
--kt-ai-chip-red-fg: var(--kt-red-300);
--kt-ai-status-ok-bg: var(--kt-green-a18);
--kt-ai-status-ok-fg: var(--kt-green-300);
--kt-ai-status-warn-bg: var(--kt-orange-a18);
--kt-ai-status-warn-fg: var(--kt-orange-300);
--kt-ai-status-risk-bg: var(--kt-red-a20);
--kt-ai-status-risk-fg: var(--kt-red-300);
--kt-ai-status-info-bg: var(--kt-grayc-a18);
--kt-ai-status-info-fg: var(--kt-gray-300);
--kt-ai-chart-blue: var(--kt-chart-blue);
--kt-ai-chart-green: var(--kt-chart-green);
--kt-ai-chart-orange: var(--kt-chart-orange);
--kt-ai-chart-salmon: var(--kt-chart-salmon);
--kt-ai-chart-pink: var(--kt-chart-pink);
--kt-ai-chart-red: var(--kt-chart-red);
--kt-ai-chart-bar-fill: #2e2e31;
--kt-ai-shadow-sm: 0 1px 2px #00000052;
--kt-ai-shadow-md: 0 4px 16px #00000066;
--kt-ai-shadow-lg: 0 12px 40px #00000080;
--kt-ai-shadow-xl: 0 24px 80px #00000099;
--kt-ai-command-shadow: var(--kt-ai-shadow-xl);
}
/* data-theme="auto": dark при системной тёмной теме (дефолт light уже задан в :root) */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
color-scheme: dark;
--kt-ai-bg: var(--kt-gray-950);
--kt-ai-bg-soft: var(--kt-gray-900);
--kt-ai-bg-elevated: var(--kt-gray-850);
--kt-ai-bg-sunken: #060607;
--kt-ai-bg-hover: var(--kt-white-a06);
--kt-ai-bg-active: var(--kt-white-a09);
--kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent);
--kt-ai-inset-highlight: #00000014;
--kt-ai-ai-accent: #7c4fe0;
--kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%);
--kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%);
--kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
--kt-ai-fg-on-ai: #ffffff;
--kt-ai-card-bg: var(--kt-gray-900);
--kt-ai-card-bg-glow: var(--kt-gray-900);
--kt-ai-card-border: var(--kt-white-a09);
--kt-ai-card-border-hover: var(--kt-white-a18);
--kt-ai-card-shadow: none;
--kt-ai-card-shadow-hover: none;
--kt-ai-selection: #fafafa1f;
--kt-ai-fg: var(--kt-white-a92);
--kt-ai-fg-muted: #9b9b9e;
--kt-ai-fg-faint: #848487;
--kt-ai-fg-on-fill: var(--kt-ink-900);
--kt-ai-border: var(--kt-white-a09);
--kt-ai-border-strong: var(--kt-white-a18);
--kt-ai-divider: var(--kt-white-a06);
--kt-ai-primary: var(--kt-near-white);
--kt-ai-primary-hover: #e4e4e7;
--kt-ai-primary-subtle: var(--kt-white-a09);
--kt-ai-brand-blue: var(--kt-blue-500);
--kt-ai-link: var(--kt-blue-400);
--kt-ai-focus-ring: #fafafa80;
--kt-ai-focus-shadow: 0 0 0 3px #fafafa24;
--kt-ai-danger: #f0726a;
--kt-ai-danger-hover: #f48a83;
--kt-ai-overlay: var(--kt-black-a55);
--kt-ai-chip-default-bg: var(--kt-white-a09);
--kt-ai-chip-default-fg: var(--kt-white-a92);
--kt-ai-chip-gray-bg: var(--kt-grayc-a18);
--kt-ai-chip-gray-fg: var(--kt-gray-300);
--kt-ai-chip-orange-bg: var(--kt-orange-a18);
--kt-ai-chip-orange-fg: var(--kt-orange-300);
--kt-ai-chip-green-bg: var(--kt-green-a18);
--kt-ai-chip-green-fg: var(--kt-green-300);
--kt-ai-chip-blue-bg: var(--kt-blue-a18);
--kt-ai-chip-blue-fg: var(--kt-blue-300);
--kt-ai-chip-purple-bg: var(--kt-purple-a18);
--kt-ai-chip-purple-fg: var(--kt-purple-300);
--kt-ai-chip-red-bg: var(--kt-red-a20);
--kt-ai-chip-red-fg: var(--kt-red-300);
--kt-ai-status-ok-bg: var(--kt-green-a18);
--kt-ai-status-ok-fg: var(--kt-green-300);
--kt-ai-status-warn-bg: var(--kt-orange-a18);
--kt-ai-status-warn-fg: var(--kt-orange-300);
--kt-ai-status-risk-bg: var(--kt-red-a20);
--kt-ai-status-risk-fg: var(--kt-red-300);
--kt-ai-status-info-bg: var(--kt-grayc-a18);
--kt-ai-status-info-fg: var(--kt-gray-300);
--kt-ai-chart-blue: var(--kt-chart-blue);
--kt-ai-chart-green: var(--kt-chart-green);
--kt-ai-chart-orange: var(--kt-chart-orange);
--kt-ai-chart-salmon: var(--kt-chart-salmon);
--kt-ai-chart-pink: var(--kt-chart-pink);
--kt-ai-chart-red: var(--kt-chart-red);
--kt-ai-chart-bar-fill: #2e2e31;
--kt-ai-shadow-sm: 0 1px 2px #00000052;
--kt-ai-shadow-md: 0 4px 16px #00000066;
--kt-ai-shadow-lg: 0 12px 40px #00000080;
--kt-ai-shadow-xl: 0 24px 80px #00000099;
--kt-ai-command-shadow: var(--kt-ai-shadow-xl);
}
}
/* Системные предпочтения */
@media (prefers-reduced-motion: reduce) {
:root { --kt-ai-dur-fast: 0ms; --kt-ai-dur-base: 0ms; --kt-ai-dur-slow: 0ms; --kt-ai-dur-slower: 0ms; }
}
/* Сенсорная ширина: цель нажатия не меньше control-h-touch (Fitts, 44px).
sm и md здесь СОВПАДАЮТ: на сенсорной ширине «маленький» контрол
не имеет права быть меньше минимальной цели — это не размер, а порог. */
@media (pointer: coarse), (max-width: 767.98px) {
:root { --kt-ai-control-h-sm: var(--kt-ai-control-h-touch); --kt-ai-control-h-md: var(--kt-ai-control-h-touch); --kt-ai-control-h-lg: 48px; --kt-ai-nav-row: var(--kt-ai-control-h-touch); --kt-ai-table-row: 52px; --kt-ai-table-row-compact: 48px; }
}
} /* @layer kt-tokens */