adata-ui 2.1.40 → 2.1.41-beta.1

package/assets/styles/theme.css

@@ -0,0 +1,583 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+@source inline("{,hover:}bg-{brand,blue,green,yellow,red,orange,purple}-{400,500,600,700,900}/{10,20}");
+/* Класс инжектится в рантайме composables/highlight.ts — сканеру не виден. */
+@source inline("bg-yellow-subtle");
+
+@theme static {
+  --font-sans: "Open Sans", sans-serif;
+
+  /* Точка, с которой лендинги ДС-2026 расширяют контейнер (макет: min-[1920px]) */
+  --breakpoint-3xl: 1920px;
+  /* Дефолтная шкала v4 кончается на --container-7xl = 80rem = 1280px */
+  --container-8xl: 96rem;
+
+  --radius-*: initial;
+  --radius: 4px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-10: 10px;
+  --radius-14: 14px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-3xl: 24px;
+
+  --text-display-hero: 60px;
+  --text-display-hero--line-height: 72px;
+  --text-display-hero--letter-spacing: -0.025em;
+  --text-display-hero--font-weight: 700;
+
+  --text-display-lg: 40px;
+  --text-display-lg--line-height: 48px;
+  --text-display-lg--letter-spacing: -0.02em;
+  --text-display-lg--font-weight: 700;
+
+  --text-display-sm: 32px;
+  --text-display-sm--line-height: 40px;
+  --text-display-sm--letter-spacing: -0.015em;
+  --text-display-sm--font-weight: 700;
+
+  --text-h1: 28px;
+  --text-h1--line-height: 36px;
+  --text-h1--letter-spacing: -0.02em;
+  --text-h1--font-weight: 700;
+
+  --text-h2: 24px;
+  --text-h2--line-height: 32px;
+  --text-h2--letter-spacing: -0.015em;
+  --text-h2--font-weight: 700;
+
+  --text-h3: 20px;
+  --text-h3--line-height: 28px;
+  --text-h3--letter-spacing: -0.01em;
+  --text-h3--font-weight: 600;
+
+  --text-h4: 18px;
+  --text-h4--line-height: 28px;
+  --text-h4--letter-spacing: -0.005em;
+  --text-h4--font-weight: 600;
+
+  --text-h5: 16px;
+  --text-h5--line-height: 24px;
+  --text-h5--font-weight: 600;
+
+  --text-body-lg: 16px;
+  --text-body-lg--line-height: 24px;
+  --text-body-lg--font-weight: 400;
+
+  --text-body-lg-medium: 16px;
+  --text-body-lg-medium--line-height: 24px;
+  --text-body-lg-medium--font-weight: 500;
+
+  --text-body-lg-strong: 16px;
+  --text-body-lg-strong--line-height: 24px;
+  --text-body-lg-strong--font-weight: 600;
+
+  --text-body-md: 14px;
+  --text-body-md--line-height: 20px;
+  --text-body-md--font-weight: 400;
+
+  --text-body-md-medium: 14px;
+  --text-body-md-medium--line-height: 20px;
+  --text-body-md-medium--font-weight: 500;
+
+  --text-body-md-strong: 14px;
+  --text-body-md-strong--line-height: 20px;
+  --text-body-md-strong--font-weight: 600;
+
+  --text-body-sm: 12px;
+  --text-body-sm--line-height: 16px;
+  --text-body-sm--font-weight: 400;
+
+  --text-body-sm-medium: 12px;
+  --text-body-sm-medium--line-height: 16px;
+  --text-body-sm-medium--font-weight: 500;
+
+  --text-overline: 12px;
+  --text-overline--line-height: 16px;
+  --text-overline--letter-spacing: 0.02em;
+  --text-overline--font-weight: 600;
+
+  --text-overline-medium: 12px;
+  --text-overline-medium--line-height: 16px;
+  --text-overline-medium--letter-spacing: 0.02em;
+  --text-overline-medium--font-weight: 500;
+
+  /* @generated-colors:start (сгенерировано из Figma-токенов, генератор в update-plan.md / git show 8862721) */
+  /* brand */
+  --color-brand-50: #F0F8FF;
+  --color-brand-100: #DBEFFF;
+  --color-brand-200: #B3DCFF;
+  --color-brand-300: #75C0FF;
+  --color-brand-400: #3DA6FF;
+  --color-brand-500: #068DFF;
+  --color-brand-600: #007AE0;
+  --color-brand-700: #0066BD;
+  --color-brand-800: #005399;
+  --color-brand-900: #00427A;
+  /* base */
+  --color-base-bg-dark: #161617;
+  --color-base-bg-light: #FFFFFF;
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+  /* surface */
+  --color-surface-dark: #161617;
+  --color-surface-dark-2: #393D40;
+  /* chart */
+  --color-chart-amber: #F5A623;
+  --color-chart-blue: #0070EB;
+  --color-chart-green: #6BBD6E;
+  --color-chart-red: #FB2C36;
+  /* secondary */
+  --color-secondary-50: #F2F5F8;
+  --color-secondary-100: #DEE6ED;
+  --color-secondary-200: #C0CFDD;
+  --color-secondary-300: #92ABC4;
+  --color-secondary-400: #527598;
+  --color-secondary-500: #2C3E50;
+  --color-secondary-600: #253646;
+  --color-secondary-700: #1E2B38;
+  --color-secondary-800: #17212B;
+  --color-secondary-900: #10171E;
+  /* @generated-colors:end */
+
+  /* @generated-semantic-colors:start (светлые значения; тёмные — в @layer base .dark ниже)
+     Источник: Figma-артефакт «Семантические цвета» (таблица токенов — в git-истории: git show 69039ec:docs/color-migration.md).
+     Старый генератор (git show 8862721) к этому блоку неприменим: регенерация = дамп таблицы артефакта.
+     Именование: text/* → --text-color-*, bg/* → --background-color-*, border/* → --border-color-*,
+     action/* → --color-action-*, icon/* → --color-icon-* (последние два доступны из любых цветовых утилит). */
+  /* text */
+  --text-color-primary: #2C3E50;
+  --text-color-secondary: #99A1AF;
+  --text-color-tertiary: #FFFFFF;
+  --text-color-quaternary: #6A7282;
+  --text-color-disabled: #A1A1A1;
+  --text-color-inverted: #FFFFFF;
+  --text-color-brand: #068DFF;
+  --text-color-link: #068DFF;
+  --text-color-link-hover: #007AE0;
+  --text-color-success: #00A63E;
+  --text-color-warning: #FE9A00;
+  --text-color-danger: #FB2C36;
+  /* bg */
+  --background-color-main: #FFFFFF;
+  --background-color-canvas: #F3F4F6;
+  --background-color-subtle: #F9FAFB33;
+  --background-color-muted: #F3F4F6;
+  --background-color-overlay: #10182880;
+  --background-color-brand: #068DFF;
+  --background-color-brand-subtle: #F0F8FF;
+  --background-color-success: #00A63E;
+  --background-color-success-subtle: #DCFCE7;
+  --background-color-warning: #FE9A00;
+  --background-color-warning-subtle: #FEF3C6;
+  --background-color-danger: #FB2C36;
+  --background-color-danger-subtle: #FEF2F2;
+  --background-color-badge: #E5E7EB;
+  --background-color-red-subtle: #FEF2F2;
+  --background-color-orange-subtle: #FFEDD4;
+  --background-color-amber-subtle: #FEF3C6;
+  --background-color-yellow-subtle: #FEF9C2;
+  --background-color-lime-subtle: #ECFCCA;
+  --background-color-green-subtle: #DCFCE7;
+  --background-color-emerald-subtle: #D0FAE5;
+  --background-color-teal-subtle: #CBFBF1;
+  --background-color-cyan-subtle: #CEFAFE;
+  --background-color-sky-subtle: #DFF2FE;
+  --background-color-blue-subtle: #DBEFFF;
+  --background-color-indigo-subtle: #E0E7FF;
+  --background-color-violet-subtle: #EDE9FE;
+  --background-color-purple-subtle: #F3E8FF;
+  --background-color-fuchsia-subtle: #FAE8FF;
+  --background-color-pink-subtle: #FCE7F3;
+  --background-color-rose-subtle: #FFE4E6;
+  /* border */
+  --border-color-default: #E5E7EB;
+  --border-color-strong: #D1D5DC;
+  --border-color-focus: #068DFF;
+  --border-color-brand: #068DFF;
+  --border-color-info: #2B7FFF;
+  --border-color-success: #00A63E;
+  --border-color-warning: #E17100;
+  --border-color-danger: #FB2C36;
+  --border-color-red: #FFA2A2;
+  --border-color-orange: #FF6900;
+  --border-color-amber: #FE9A00;
+  --border-color-yellow: #F0B100;
+  --border-color-lime: #7CCF00;
+  --border-color-green: #00C950;
+  --border-color-emerald: #00BC7D;
+  --border-color-teal: #00BBA7;
+  --border-color-cyan: #00B8DB;
+  --border-color-sky: #00A6F4;
+  --border-color-indigo: #615FFF;
+  --border-color-violet: #8E51FF;
+  --border-color-purple: #AD46FF;
+  --border-color-fuchsia: #E12AFB;
+  --border-color-pink: #F6339A;
+  --border-color-rose: #FF2056;
+  /* action */
+  --color-action-primary: #068DFF;
+  --color-action-primary-hover: #007AE0;
+  --color-action-primary-active: #0066BD;
+  --color-action-primary-fg: #FFFFFF;
+  --color-action-secondary: #FFFFFF;
+  --color-action-secondary-hover: #F9FAFB;
+  --color-action-secondary-fg: #2C3E50;
+  --color-action-danger: #E7000B;
+  --color-action-danger-hover: #C10007;
+  --color-action-danger-fg: #FFFFFF;
+  --color-action-disabled: #E5E7EB;
+  --color-action-disabled-fg: #99A1AF;
+  /* icon */
+  --color-icon-default: #6A7282;
+  --color-icon-strong: #2C3E50;
+  --color-icon-secondary: #99A1AF;
+  --color-icon-disabled: #D1D5DC;
+  --color-icon-inverted: #FFFFFF;
+  --color-icon-brand: #068DFF;
+  --color-icon-on-brand: #FFFFFF;
+  --color-icon-white: #FFFFFF;
+  --color-icon-success: #00A63E;
+  --color-icon-warning: #FFB900;
+  --color-icon-danger: #E7000B;
+  --color-icon-red: #E7000B;
+  --color-icon-orange: #FF6900;
+  --color-icon-amber: #FE9A00;
+  --color-icon-yellow: #F0B100;
+  --color-icon-lime: #7CCF00;
+  --color-icon-green: #00A63E;
+  --color-icon-emerald: #00BC7D;
+  --color-icon-teal: #00BBA7;
+  --color-icon-cyan: #00B8DB;
+  --color-icon-sky: #00A6F4;
+  --color-icon-blue: #2B7FFF;
+  --color-icon-indigo: #615FFF;
+  --color-icon-violet: #8E51FF;
+  --color-icon-purple: #AD46FF;
+  --color-icon-fuchsia: #C800DE;
+  --color-icon-pink: #E60076;
+  --color-icon-rose: #FF2056;
+  /* хелперы вне артефакта (= bg/Main): замена бывшего флипа fill-white/stroke-white в иллюстрациях */
+  --fill-main: #FFFFFF;
+  --stroke-main: #FFFFFF;
+  /* @generated-semantic-colors:end */
+}
+
+/* Тёмная тема: переопределяются только СЕМАНТИЧЕСКИЕ токены (text-primary, bg-main,
+   border-default, action/icon-*); примитивные шкалы (gray-*, red-*, brand-* и т.д.)
+   константны в обеих темах. Утилиты компилируются в var(--…-*), поэтому семантические
+   классы переключаются сами; цветовые dark:-классы легальны для краевых случаев.
+   @layer base идёт после @layer theme → побеждает :root. */
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  .dark {
+    color-scheme: dark;
+    /* @generated-semantic-colors-dark:start (тёмные значения семантических токенов, 1:1 с артефактом —
+       включая тема-константные, чтобы регенерация из Figma была тупым дампом таблицы) */
+    /* text */
+    --text-color-primary: #FAFAFA;
+    --text-color-secondary: #99A1AF;
+    --text-color-tertiary: #FFFFFF;
+    --text-color-quaternary: #99A1AF;
+    --text-color-disabled: #D4D4D4;
+    --text-color-inverted: #161617;
+    --text-color-brand: #3DA6FF;
+    --text-color-link: #3DA6FF;
+    --text-color-link-hover: #B3DCFF;
+    --text-color-success: #00C950;
+    --text-color-warning: #FFB900;
+    --text-color-danger: #FF6467;
+    /* bg */
+    --background-color-main: #161617;
+    --background-color-canvas: #0F0F10;
+    --background-color-subtle: #171717;
+    --background-color-muted: #1F1F21;
+    --background-color-overlay: #00000099;
+    --background-color-brand: #068DFF;
+    --background-color-brand-subtle: #068DFF1A;
+    --background-color-success: #008236;
+    --background-color-success-subtle: #032E15;
+    --background-color-warning: #E17100;
+    --background-color-warning-subtle: #461901;
+    --background-color-danger: #FF6467;
+    --background-color-danger-subtle: #4608094D;
+    --background-color-badge: #4A5565;
+    --background-color-red-subtle: #82181A;
+    --background-color-orange-subtle: #7E2A0C;
+    --background-color-amber-subtle: #461901;
+    --background-color-yellow-subtle: #432004;
+    --background-color-lime-subtle: #192E03;
+    --background-color-green-subtle: #032E15;
+    --background-color-emerald-subtle: #002C22;
+    --background-color-teal-subtle: #022F2E;
+    --background-color-cyan-subtle: #053345;
+    --background-color-sky-subtle: #052F4A;
+    --background-color-blue-subtle: #00427A;
+    --background-color-indigo-subtle: #1E1A4D;
+    --background-color-violet-subtle: #2F0D68;
+    --background-color-purple-subtle: #3C0366;
+    --background-color-fuchsia-subtle: #4B004F;
+    --background-color-pink-subtle: #510424;
+    --background-color-rose-subtle: #4D0218;
+    /* border */
+    --border-color-default: #404040;
+    --border-color-strong: #6A7282;
+    --border-color-focus: #3DA6FF;
+    --border-color-brand: #3DA6FF;
+    --border-color-info: #51A2FF;
+    --border-color-success: #05DF72;
+    --border-color-warning: #FFB900;
+    --border-color-danger: #FF6467;
+    --border-color-red: #FF6467;
+    --border-color-orange: #FF8904;
+    --border-color-amber: #FFB900;
+    --border-color-yellow: #FDC700;
+    --border-color-lime: #9AE600;
+    --border-color-green: #05DF72;
+    --border-color-emerald: #00D492;
+    --border-color-teal: #00D5BE;
+    --border-color-cyan: #00D3F2;
+    --border-color-sky: #00BCFF;
+    --border-color-indigo: #7C86FF;
+    --border-color-violet: #A684FF;
+    --border-color-purple: #C27AFF;
+    --border-color-fuchsia: #ED6AFF;
+    --border-color-pink: #FB64B6;
+    --border-color-rose: #FF637E;
+    /* action */
+    --color-action-primary: #068DFF;
+    --color-action-primary-hover: #007AE0;
+    --color-action-primary-active: #0066BD;
+    --color-action-primary-fg: #FFFFFF;
+    --color-action-secondary: #262626;
+    --color-action-secondary-hover: #404040;
+    --color-action-secondary-fg: #FFFFFF;
+    --color-action-danger: #FF6467;
+    --color-action-danger-hover: #82181A;
+    --color-action-danger-fg: #FFFFFF;
+    --color-action-disabled: #404040;
+    --color-action-disabled-fg: #6A7282;
+    /* icon */
+    --color-icon-default: #D1D5DC;
+    --color-icon-strong: #F9FAFB;
+    --color-icon-secondary: #99A1AF;
+    --color-icon-disabled: #4A5565;
+    --color-icon-inverted: #2C3E50;
+    --color-icon-brand: #3DA6FF;
+    --color-icon-on-brand: #FFFFFF;
+    --color-icon-white: #000000;
+    --color-icon-success: #00C950;
+    --color-icon-warning: #FFB900;
+    --color-icon-danger: #FF6467;
+    --color-icon-red: #FF6467;
+    --color-icon-orange: #FF8904;
+    --color-icon-amber: #FFB900;
+    --color-icon-yellow: #FDC700;
+    --color-icon-lime: #9AE600;
+    --color-icon-green: #00C950;
+    --color-icon-emerald: #00D492;
+    --color-icon-teal: #00D5BE;
+    --color-icon-cyan: #00D3F2;
+    --color-icon-sky: #00BCFF;
+    --color-icon-blue: #51A2FF;
+    --color-icon-indigo: #7C86FF;
+    --color-icon-violet: #A684FF;
+    --color-icon-purple: #C27AFF;
+    --color-icon-fuchsia: #ED6AFF;
+    --color-icon-pink: #FB64B6;
+    --color-icon-rose: #FF637E;
+    /* хелперы (= bg/Main) */
+    --fill-main: #161617;
+    --stroke-main: #161617;
+    /* @generated-semantic-colors-dark:end */
+  }
+}
+
+/* Компат-слой поведения v3 (официальный upgrade guide) */
+@layer base {
+  /* В v4 дефолтный border-color стал currentColor; возвращаем прежний вид (= gray-200 в лайте) */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border-color-default, currentColor);
+  }
+
+  /* Плейсхолдеры: токена placeholder в ДС нет, ближайший — text/disabled
+     (осознанная светлая дельта #D1D5DC → #A1A1A1, см. git show 69039ec:docs/color-migration.md) */
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--text-color-disabled);
+  }
+
+  /* В v4 у кнопок cursor: default */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+/* Легаси-типографика (Figma DESIGN-SYSTEM-NEW, до ДС-2026) */
+@layer components {
+  .a-container {
+    @apply container mx-auto px-4 2xl:px-16;
+  }
+
+  /* Headings */
+  .heading-01 {
+    @apply font-bold text-[2rem] leading-10;
+  }
+
+  .heading-02 {
+    @apply font-bold text-2xl leading-8;
+  }
+
+  .heading-03 {
+    @apply font-semibold text-xl leading-6;
+  }
+
+  .heading-04 {
+    @apply font-semibold text-base leading-5;
+  }
+
+  .heading-05 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  /* Body */
+  .body-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .body-500 {
+    @apply font-medium text-sm leading-5;
+  }
+
+  .body-600 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  .body-s-400 {
+    @apply font-normal text-sm leading-4;
+  }
+
+  .body-s-500 {
+    @apply font-medium text-sm leading-4;
+  }
+
+  /* Caption */
+  .caption-400 {
+    @apply font-normal text-[0.625rem] leading-4;
+  }
+
+  .caption-500 {
+    @apply font-medium text-[0.625rem] leading-4;
+  }
+
+  .caption-700 {
+    @apply font-bold text-[0.625rem] leading-4;
+  }
+
+  /* Form */
+  .label-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .label-600 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  .label-s-400 {
+    @apply font-normal text-xs leading-4;
+  }
+
+  .label-s-700 {
+    @apply font-bold text-xs leading-4;
+  }
+
+  .optional-i-700 {
+    @apply font-bold italic text-sm leading-5;
+  }
+
+  .placeholder-300 {
+    @apply font-light text-sm leading-5;
+  }
+
+  .description-400 {
+    @apply font-normal text-xs leading-5;
+  }
+
+  /* Link */
+  .link-400 {
+    @apply font-normal text-sm leading-5;
+    color: var(--text-color-link);
+  }
+
+  .link-stroke-400 {
+    @apply font-normal text-sm leading-5;
+    color: var(--text-color-link);
+  }
+
+  .link-s-400 {
+    @apply font-normal text-sm leading-4;
+    color: var(--text-color-link);
+  }
+
+  .link-s-stroke-400 {
+    @apply font-normal text-sm leading-4;
+    color: var(--text-color-link);
+  }
+
+  .link-small-800 {
+    @apply font-bold text-sm leading-4;
+    color: var(--text-color-link);
+  }
+
+  /* Special Styles */
+  .display-80-700 {
+    @apply font-bold text-[5rem] leading-[6.5rem];
+  }
+
+  .display-80-400 {
+    @apply font-normal text-[5rem] leading-[6.5rem];
+  }
+
+  .display-60-700 {
+    @apply font-bold text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-60-400 {
+    @apply font-normal text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-48-700 {
+    @apply font-bold text-[3rem] leading-[4rem];
+  }
+
+  .display-48-400 {
+    @apply font-normal text-[3rem] leading-[4rem];
+  }
+
+  .numbers-60-700 {
+    @apply font-bold text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-60-400 {
+    @apply font-normal text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-40-700 {
+    @apply font-bold text-[2.5rem] leading-[3.375rem];
+  }
+
+  .numbers-40-400 {
+    @apply font-normal text-[2.5rem] leading-[3.375rem];
+  }
+}