adata-ui 2.1.40 → 2.1.41-beta.1

package/components/elements/button/AButton.vue

@@ -35,13 +35,13 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const classes = computed(() => [
-  'text-body-md-strong rounded-sm cursor-pointer outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm cursor-pointer outline-hidden transition duration-200 select-none',
   props.block ? 'w-full' : '',
   typeSwitchValues[props.view][props.variant],
   sizeSwitchValues[props.form][props.size]
 ])
 const disabledClasses = computed(() => [
-  'text-body-md-strong rounded-sm outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm outline-hidden transition duration-200 select-none',
   props.block ? 'w-full' : '',
   disabledTypeSwitchValues[props.view],
   sizeSwitchValues[props.form][props.size]
@@ -49,91 +49,94 @@ const disabledClasses = computed(() => [
 
 const typeSwitchActiveValues: ViewSwitchValues = {
   default: {
-    primary: 'bg-deepblue-900 text-white dark:bg-gray-200',
-    success: 'bg-deepblue-900 text-white dark:bg-gray-200',
-    danger: 'bg-deepblue-900 text-white dark:bg-gray-200 ',
-    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    primary: 'bg-secondary-500 text-white',
+    success: 'bg-secondary-500 text-white',
+    danger: 'bg-secondary-500 text-white ',
+    gray: 'bg-secondary-500 text-white hover:text-primary',
     ghost:
-      'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+      'bg-secondary-500 text-white hover:text-primary'
   },
   transparent: {
-    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
-    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
-    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    primary: 'bg-action-primary text-action-primary-fg',
+    success: 'bg-success text-white',
+    danger: 'bg-action-danger text-action-danger-fg',
+    gray: 'bg-secondary-500 text-white hover:text-primary',
     ghost:
-      'bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 hover:text-deepblue-900 dark:hover:text-gray-200'
+      /* ghost на тёмной поверхности: активная «инверсия» — константный white */
+      'bg-white text-secondary-500 hover:text-secondary-500'
   },
   outline: {
-    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
-    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
-    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    primary: 'bg-action-primary text-action-primary-fg',
+    success: 'bg-success text-white',
+    danger: 'bg-action-danger text-action-danger-fg',
+    gray: 'bg-secondary-500 text-white hover:text-primary',
     ghost:
-      'bg-gray-500 text-white dark:bg-gray-500 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+      'bg-gray-400 text-white hover:text-primary'
   },
   rounded: {
-    primary: 'bg-deepblue-900 text-white dark:bg-gray-200',
-    success: 'bg-deepblue-900 text-white dark:bg-gray-200',
-    danger: 'bg-deepblue-900 text-white dark:bg-gray-200 ',
-    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    primary: 'bg-secondary-500 text-white',
+    success: 'bg-secondary-500 text-white',
+    danger: 'bg-secondary-500 text-white ',
+    gray: 'bg-secondary-500 text-white hover:text-primary',
     ghost:
-      'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+      'bg-secondary-500 text-white hover:text-primary'
   },
 }
 
+/* осознанно константные инверсии: active:bg-secondary-500/белое-на-цветном — keep-лист ДС */
 const typeSwitchValues: ViewSwitchValues = {
   default: {
     primary:
-      'bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200',
+      'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
     success:
-      'bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200',
+      'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
     danger:
-      'bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200',
-    gray: 'bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900',
+      'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gray: 'bg-muted text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white',
     ghost:
-      'bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900'
+      'bg-main text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white'
   },
   transparent: {
     primary:
-      'text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900',
+      'text-brand hover:bg-brand-subtle active:bg-action-primary-hover active:text-action-primary-fg',
     success:
-      'text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900',
+      'text-success hover:bg-success-subtle active:bg-success active:text-white',
     danger:
-      'text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900',
-    gray: 'text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900',
+      'text-danger hover:bg-danger/20 active:bg-danger active:text-white',
+    gray: 'text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white',
     ghost:
-      'text-white hover:bg-deepblue-900/10 active:bg-white active:text-deepblue-900 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-900 dark:active:text-gray-200'
+      /* ghost на тёмной поверхности: активная «инверсия» — константный white */
+      'text-white hover:bg-secondary-500/10 dark:hover:bg-white/10 active:bg-white active:text-secondary-500'
   },
   outline: {
     primary:
-      'border border-blue-700 text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900',
+      'border border-brand text-brand hover:bg-brand-subtle active:bg-action-primary-hover active:text-action-primary-fg',
     success:
-      'border border-green-500 text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900',
+      'border border-success text-success hover:bg-success-subtle active:bg-success active:text-white',
     danger:
-      'border border-red-500 text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:border-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900',
-    gray: 'border border-gray-500/50 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:border-gray-500/50 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900',
+      'border border-danger text-danger hover:bg-danger/20 active:bg-danger active:text-white',
+    gray: 'border border-strong text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white',
     ghost:
-      'border border-white text-white hover:bg-deepblue-900 active:bg-gray-500 active:text-white dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-500 dark:active:text-gray-900'
+      'border border-white text-white hover:bg-secondary-500 active:bg-gray-400 active:text-white'
   },
   rounded: {
     primary:
-      'rounded-[32px] bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200',
+      'rounded-[32px] bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
     success:
-      'rounded-[32px] bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200',
+      'rounded-[32px] bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
     danger:
-      'rounded-[32px] bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200',
-    gray: 'rounded-[32px] bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900',
+      'rounded-[32px] bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gray: 'rounded-[32px] bg-muted text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white',
     ghost:
-      'rounded-[32px] bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900'
+      'rounded-[32px] bg-main text-primary hover:bg-action-secondary-hover active:bg-secondary-500 active:text-white'
   },
 }
 
 const disabledTypeSwitchValues: DisabledViewSwitchValues = {
   default:
-    'bg-deepblue-900/5 text-deepblue-900/20 dark:bg-gray-200/5 dark:text-gray-200/20 pointer-events-none',
-  transparent: 'text-gray-500/50 pointer-events-none',
-  outline: 'border border-gray-500/50 text-gray-500/50 pointer-events-none'
+    'pointer-events-none bg-action-disabled text-action-disabled-fg',
+  transparent: 'pointer-events-none text-disabled',
+  outline: 'pointer-events-none border border-default text-disabled'
 }
 
 const sizeSwitchValues: SizeSwitchValues = {

package/components/elements/button/AButtonV2.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 
-type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type View = 'solid' | 'outline' | 'ghost' | 'soft' | 'gradient'
 type Size = 'xs' | 'sm' | 'md' | 'lg'
 type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
-type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 
 const props = withDefaults(defineProps<{
   view?: View
@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   disabled?: boolean
   block?: boolean
+  glow?: boolean
+  square?: boolean
   type?: 'button' | 'submit' | 'reset'
 }>(), {
   view: 'solid',
@@ -26,6 +28,8 @@ const props = withDefaults(defineProps<{
   loading: false,
   disabled: false,
   block: false,
+  glow: false,
+  square: false,
   type: 'button',
 })
 
@@ -33,37 +37,65 @@ const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
 const VIEW_CLASS: Record<Color, Record<View, string>> = {
   blue: {
-    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+    solid: 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
+    gradient: 'bg-linear-to-r from-brand-500 to-brand-400 text-inverted hover:brightness-105',
+    outline: 'border border-brand bg-action-secondary text-brand hover:bg-brand-subtle active:bg-blue-subtle',
+    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
+    soft: 'bg-brand-subtle text-brand hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
   green: {
-    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
-    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
-    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
-    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
+    solid: 'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    gradient: 'bg-linear-to-r from-green-600 to-green-500 text-inverted hover:brightness-105',
+    outline: 'border border-success bg-action-secondary text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
+    ghost: 'text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
+    soft: 'bg-success-subtle text-success hover:bg-green-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
   },
   red: {
-    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
-    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
-    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
-    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
+    solid: 'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gradient: 'bg-linear-to-r from-red-600 to-red-500 text-inverted hover:brightness-105',
+    outline: 'border border-danger bg-action-secondary text-danger hover:bg-danger-subtle active:bg-red-subtle',
+    ghost: 'text-danger hover:bg-danger-subtle active:bg-red-subtle',
+    soft: 'bg-danger-subtle text-danger hover:bg-red-subtle active:bg-red-200/70 dark:active:bg-red-500/25',
   },
   gray: {
-    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
-    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
+    /* осознанно константный серый solid: action-gray триады нет в ДС */
+    solid: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+    gradient: 'bg-linear-to-r from-gray-600 to-gray-500 text-inverted hover:brightness-105',
+    outline: 'border border-strong bg-action-secondary text-primary hover:border-strong hover:bg-action-secondary-hover active:bg-badge',
+    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
+    soft: 'bg-badge text-quaternary hover:bg-badge active:bg-badge/70',
   },
   white: {
-    solid: 'bg-white text-blue-700 shadow-sm hover:bg-blue-50 hover:shadow-md active:bg-blue-100 dark:bg-gray-900 dark:hover:bg-gray-800',
-    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
-    ghost: 'text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:text-blue-300 dark:hover:bg-blue-950/40',
-    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+    solid: 'bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    gradient: 'bg-linear-to-r from-white to-brand-50 text-brand-600 hover:brightness-105',
+    outline: 'border border-brand bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    ghost: 'text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    soft: 'bg-brand-subtle text-brand-600 hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
 }
 
+/* Тень вынесена из VIEW_CLASS: конфликт shadow-утилит Tailwind решает порядком
+   в стилях, а не порядком классов, поэтому glow должен ЗАМЕНЯТЬ базовую тень. */
+const RAISED_VIEWS: View[] = ['solid', 'gradient']
+
+const BASE_ELEVATION = 'shadow-xs hover:shadow-md'
+
+/* Цветная тень: форма и цвет раздельно. Тон берётся из примитивов, а не из
+   семантики — ореол не должен сам менять оттенок между темами; пара dark: —
+   осознанная подгонка плотности (на #161617 40% блюмит). */
+const GLOW_CLASS: Record<Color, string> = {
+  blue: 'shadow-md shadow-brand-500/30 hover:shadow-lg hover:shadow-brand-500/40 dark:shadow-brand-400/25 dark:hover:shadow-brand-400/35',
+  green: 'shadow-md shadow-green-600/30 hover:shadow-lg hover:shadow-green-600/40 dark:shadow-green-500/25 dark:hover:shadow-green-500/35',
+  red: 'shadow-md shadow-red-600/30 hover:shadow-lg hover:shadow-red-600/40 dark:shadow-red-500/25 dark:hover:shadow-red-500/35',
+  gray: 'shadow-md shadow-gray-500/25 hover:shadow-lg hover:shadow-gray-500/35 dark:shadow-gray-400/20 dark:hover:shadow-gray-400/30',
+  white: 'shadow-md shadow-brand-500/25 hover:shadow-lg hover:shadow-brand-500/35 dark:shadow-brand-400/20 dark:hover:shadow-brand-400/30',
+}
+
+const elevationClass = computed(() => {
+  if (!RAISED_VIEWS.includes(props.view)) return ''
+  return props.glow ? GLOW_CLASS[props.color] : BASE_ELEVATION
+})
+
 const SIZE_CLASS: Record<Size, string> = {
   xs: 'h-6 gap-1 px-2 text-body-sm',
   sm: 'h-8 gap-1.5 px-3 text-body-sm',
@@ -71,13 +103,24 @@ const SIZE_CLASS: Record<Size, string> = {
   lg: 'h-12 gap-2.5 px-5 text-body-lg',
 }
 
+/* Квадрат под одну иконку: ЗАМЕНЯЕТ SIZE_CLASS, а не дописывается к нему —
+   `px-0` рядом с `px-4` проиграет (конфликт решает порядок в stylesheet), из-за
+   чего такие кнопки обычно лепят через `!w-10 !px-0`. */
+const SQUARE_CLASS: Record<Size, string> = {
+  xs: 'size-6',
+  sm: 'size-8',
+  md: 'size-10',
+  lg: 'size-12',
+}
+
 const ROUNDED_CLASS: Record<Rounded, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  full: 'rounded-full',
+  'none': 'rounded-none',
+  'sm': 'rounded-sm',
+  'md': 'rounded-md',
+  'lg': 'rounded-lg',
+  'xl': 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  'full': 'rounded-full',
 }
 
 const ICON_SIZE: Record<Size, string> = {
@@ -97,10 +140,11 @@ function onClick(event: MouseEvent) {
   <button
     :type="type"
     :disabled="disabled || loading"
-    class="button-v2 inline-flex select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    class="button-v2 inline-flex items-center justify-center font-semibold transition-all duration-150 select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       VIEW_CLASS[color][view],
-      SIZE_CLASS[size],
+      elevationClass,
+      square ? SQUARE_CLASS[size] : SIZE_CLASS[size],
       ROUNDED_CLASS[rounded],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',

package/components/elements/button-login/index.vue

@@ -5,9 +5,10 @@ const { t } = useI18n()
 </script>
 
 <template>
+  <!-- осознанно константный: фокус-кольцо ring-brand-500/50 — keep-лист ДС -->
   <button
     type="button"
-    class="hidden h-8 cursor-pointer items-center rounded-lg bg-blue-700 px-3.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-600 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
+    class="hidden h-8 cursor-pointer items-center rounded-lg bg-action-primary px-3.5 text-body-md-strong text-action-primary-fg transition-colors duration-150 hover:bg-action-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 lg:inline-flex"
     data-test-id="header-login-button"
     @click="$emit('click')"
   >

package/components/elements/carousel/config.ui.ts

@@ -8,8 +8,8 @@ export const ui = {
   indicators: {
     wrapper: 'absolute z-10 flex items-center justify-center gap-3 bottom-4 inset-x-0',
     base: 'rounded-full h-3 w-3',
-    active: 'bg-primary-500 dark:bg-primary-400 bg-blue-700',
-    inactive: 'bg-gray-200 dark:bg-gray-800 mix-blend-overlay',
+    active: 'bg-action-primary',
+    inactive: 'bg-badge mix-blend-overlay',
   },
 }
 export default {ui}

package/components/elements/chip-wrapper/AChipWrapper.vue

@@ -13,10 +13,11 @@ const props = withDefaults(defineProps<Props>(), {
   inset: false,
 })
 const ui = {
-  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
-  base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
+  wrapper: 'relative inline-flex items-center justify-center shrink-0',
+  /* осознанно константный text-white: цифра на цветной плашке; ring — вырез под фон, флипается через var */
+  base: 'absolute rounded-full ring-1 ring-(--background-color-main) flex items-center justify-center text-white font-medium whitespace-nowrap',
   background: {
-    green: 'bg-green-500 dark:bg-green-500'
+    green: 'bg-success'
   },
   position: {
     'top-right': 'top-0 right-0',

package/components/elements/chips/AChips.vue

@@ -10,8 +10,8 @@ withDefaults(defineProps<Props>(), {view: 'outline', size: 'sm'})
 
 
 const chipView = {
-  standard: 'text-deepblue border-gray focus-visible:outline-gray',
-  outline: 'text-blue border-blue focus-visible:outline-blue'
+  standard: 'border-strong text-primary focus-visible:outline-(--border-color-strong)',
+  outline: 'border-brand text-brand focus-visible:outline-(--border-color-focus)'
 }
 
 const sizeOptions = {
@@ -22,8 +22,9 @@ const sizeOptions = {
 </script>
 
 <template>
+  <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
   <button
-    :class="twMerge(['flex items-center gap-2 rounded-2xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
+    :class="twMerge(['flex items-center gap-2 rounded-2xl border border-solid px-2.5 text-body-sm hover:bg-action-secondary-hover focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-action-primary active:text-action-primary-fg disabled:border-default disabled:text-action-disabled-fg', chipView[view], sizeOptions[size]], $attrs.class)"
   >
     <slot/>
   </button>

package/components/elements/companies/AOurClients.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-4 lg:gap-8">
     <slot name="title">
-      <h2 class="md:heading-01 heading-02">{{ t('our_clients.title') }}</h2>
+      <h2 class="text-h2 md:text-display-sm">{{ t('our_clients.title') }}</h2>
     </slot>
     <a-infinite-carousel>
       <div class="flex items-center justify-center">

package/components/elements/count-up/ACountUp.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// Декоративный счётчик: анимирует 0 → `to` при монтировании.
+// С пропом `play` поведение другое: значение сразу стоит на `to`, а анимация
+// играет заново на каждое изменение триггера (ховер карточки в лендингах).
+const props = withDefaults(defineProps<{
+  to: number
+  duration?: number
+  suffix?: string
+  locale?: string
+  play?: number
+}>(), {
+  duration: 1100,
+  suffix: '',
+  locale: 'ru-RU',
+})
+
+const isTriggered = computed(() => props.play !== undefined)
+
+const value = ref(isTriggered.value ? props.to : 0)
+const display = computed(() => `${Math.round(value.value).toLocaleString(props.locale)}${props.suffix}`)
+
+let raf = 0
+
+function run() {
+  cancelAnimationFrame(raf)
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    value.value = props.to
+    return
+  }
+  value.value = 0
+  let start = 0
+  const step = (ts: number) => {
+    if (!start) start = ts
+    const progress = Math.min(1, (ts - start) / props.duration)
+    value.value = props.to * (1 - (1 - progress) ** 3)
+    if (progress < 1) raf = requestAnimationFrame(step)
+  }
+  raf = requestAnimationFrame(step)
+}
+
+onMounted(() => {
+  if (!isTriggered.value) run()
+})
+
+watch(() => props.play, (next) => {
+  if (next) run()
+})
+
+onUnmounted(() => cancelAnimationFrame(raf))
+</script>
+
+<template>
+  <span>{{ display }}</span>
+</template>

package/components/elements/curve-block/ACurveBlock.vue

@@ -112,17 +112,17 @@ const props = defineProps<{
 
     <div class="absolute left-6 top-6 flex flex-col gap-4 pr-6">
       <div class="flex items-center gap-2 title">
-        <div class="rounded-[4px] icon-item bg-deepblue-900/5 dark:bg-gray-200/5 p-1">
+        <div class="rounded-[4px] icon-item bg-muted p-1">
           <component
             :is="icon"
             class="size-6 shrink-0"
           />
         </div>
-        <p class="text-base  font-semibold">
+        <p class="text-body-lg-strong">
           {{ title }}
         </p>
       </div>
-      <p class="text-left text-sm text-gray-600 dark:text-gray-200">
+      <p class="text-left text-body-md text-quaternary">
         {{ description }}
       </p>
     </div>
@@ -192,10 +192,13 @@ const props = defineProps<{
 </template>
 
 <style lang="scss" scoped>
+/* Сплошные цвета — на токенах: сами переключаются в тёмной теме.
+   SVG-градиенты обводки — фирменные (те же стопы, что .bg-gradient-blue),
+   свапаются парой light/dark ассетов ниже. */
 .border-path {
   stroke-dasharray: 1200;
   stroke-dashoffset: 1200;
-  fill: #F4F5F6;
+  fill: var(--background-color-muted);
 }
 
 .border-path--large {
@@ -206,29 +209,29 @@ const props = defineProps<{
 .animated-border {
   stroke-dasharray: 180;
   stroke-dashoffset: 180;
-  fill: #F4F5F6;
+  fill: var(--background-color-muted);
 }
 
 .active-item .title {
-  color: #0070EB;
+  color: var(--text-color-brand);
 }
 .active-item .border-path {
-  fill: #0070EB1A;
+  fill: var(--background-color-brand-subtle);
 }
 .active-item .icon-item {
-  background: #2C3E500D;
+  background: color-mix(in srgb, var(--text-color-primary) 5%, transparent);
 }
 
 .curve-block:hover .border-path,
 .curve-block:hover .animated-border {
   transition: stroke-dashoffset 2s ease, fill 2s ease;
   stroke-dashoffset: 0;
-  fill: white;
+  fill: var(--background-color-main);
 }
 
 .curve-block:hover .icon-item {
-  background-color: #E0EFFF;
-  color: #0070EB;
+  background-color: var(--background-color-blue-subtle);
+  color: var(--text-color-brand);
   transition: all 2s ease, fill 2s ease;
 }
 
@@ -249,43 +252,7 @@ const props = defineProps<{
 }
 
 .arrow {
-  fill: #0070EB;
-}
-
-.dark {
-  .border-path,
-  .animated-border {
-    fill: #26282b;
-  }
-
-  .active-item .title {
-    color: #1b98e2;
-  }
-
-  .active-item .border-path {
-    fill: #1B98E21A;
-  }
-
-  .active-item .icon-item {
-    background: #E3E5E80D;
-  }
-
-
-  .curve-block:hover .icon-item {
-    background-color: rgba(30, 88, 156, 0.6);
-    color: #1b98e2;
-    transition: all 2s ease, fill 2s ease;
-  }
-
-
-  .curve-block:hover .border-path,
-  .curve-block:hover .animated-border {
-    fill: #131415;
-
-  }
-  .arrow {
-    fill: #1b98e2;
-  }
+  fill: var(--color-icon-brand);
 }
 </style>