adata-ui 2.1.40 → 2.1.41-beta.1

package/components/forms/input/date/AInputDate.vue

@@ -46,17 +46,17 @@ const range = defineModel<{
 const uiConfig = {
   wrapper: 'transition duration-500 w-full',
   "input-wrapper": {
-    base: 'relative inline-block w-full text-sm sm:min-w-full'
+    base: 'relative inline-block w-full text-body-md sm:min-w-full'
   },
-  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-primary mt-0 hover:outline-1 hover:outline-(--border-color-focus) focus:outline-1 focus:outline-(--border-color-focus)',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md'
   },
-  color: 'bg-deepblue-900 bg-opacity-5 dark:bg-gray-200 dark:bg-opacity-5',
-  error: 'outline outline-1 outline-red-500 focus:outline-0 focus:border-red-500 hover:border-red-500',
+  color: 'bg-muted',
+  error: 'outline outline-1 outline-(--border-color-danger) focus:outline-0 focus:border-danger hover:border-danger',
   label: {
-    base: 'absolute left-4 top-[50%] d-flex text-gray-500 pointer-events-none transition-all ease duration-300 transform translate-y-[-50%] whitespace-nowrap',
+    base: 'absolute left-4 top-[50%] text-secondary pointer-events-none transition-all ease duration-300 whitespace-nowrap',
     'move-label': '!left-10'
   },
   default: {
@@ -139,23 +139,23 @@ const labelClass = computed(() => twMerge(twJoin(
             <span class="text">{{ label }}</span>
             <span
               v-if="required"
-              class="text-red-600"
+              class="text-danger"
             > *</span>
           </label>
 
           <button
             v-if="isClearable"
-            class="absolute top-1/2 right-12 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 bg-deepblue-900 bg-opacity-10 dark:bg-gray-200 dark:bg-opacity-10 rounded-full p-1"
+            class="pointer-events-click absolute right-12 top-1/2 translate-y-[-50%] transform rounded-full bg-badge p-1 text-2xl hover:opacity-80"
             type="button"
             @click="date = new Date()"
           >
             <a-icon-x-mark
               filled
-              class="!mb-0 fill-gray-600 dark:fill-gray-300"
+              class="!mb-0 fill-icon-default"
             />
           </button>
           <button
-            class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
+            class="absolute top-1/2 right-4 text-secondary fill-icon-secondary pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
             type="button"
             @click="() => togglePopover()"
           >
@@ -171,6 +171,10 @@ const labelClass = computed(() => twMerge(twJoin(
 </template>
 
 <style scoped>
+.label {
+  transform: translateY(-50%);
+}
+
 .input {
   &:focus ~ .label,
   &:not(:focus):valid ~ .label,

package/components/forms/input/password/AInputPassword.vue

@@ -34,7 +34,7 @@ const inputProps = computed(() => {
   >
     <template #endButton>
       <button
-        class="absolute top-1/2 right-4 text-gray-500 fill-gray-500 pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
+        class="absolute top-1/2 right-4 text-secondary fill-icon-secondary pointer-events-click text-2xl transform translate-y-[-50%] hover:opacity-80 disabled:pointer-events-none"
         :disabled="disabled"
         type="button"
         :data-test-id="iconEyeTestId"

package/components/forms/input/standard/AInputStandard.vue

@@ -48,19 +48,19 @@ const uiConfig = {
     readonly: 'pointer-events-none user-select-none',
     disabled: 'pointer-events-none user-select-none opacity-40'
   },
-  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 hover:outline outline-offset-[-1px] hover:outline-1 hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500 mt-0',
+  base: 'w-full border-0 rounded-sm text-primary mt-0 outline-offset-[-1px] hover:outline-1 hover:outline-(--border-color-focus) focus:outline-1 focus:outline-(--border-color-focus)',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[18px] md',
     smEx: 'h-8 pl-4 pr-10 py-1.5 sm',
     mdEx: 'h-10 pl-4 pr-10 pb-1.5 pt-[18px] md'
   },
-  color: 'bg-deepblue-50 dark:bg-gray-200 dark:bg-opacity-5',
+  color: 'bg-muted',
   error:
-    'outline outline-1 outline-red-500 focus:outline-0 focus:border-red-500 hover:border-red-500',
-  readonly: 'bg-white opacity-30',
+    'outline outline-1 outline-(--border-color-danger) focus:outline-0 focus:border-danger hover:border-danger',
+  readonly: 'bg-main opacity-30',
   label: {
-    base: 'absolute left-4 top-[50%] d-flex text-gray-500 pointer-events-none transition-all ease duration-300 transform translate-y-[-50%] whitespace-nowrap text-ellipsis md:max-w-[90%] overflow-hidden',
+    base: 'absolute left-4 top-[50%] text-secondary pointer-events-none transition-all ease duration-300 whitespace-nowrap text-ellipsis md:max-w-[90%] overflow-hidden',
     'move-label': '!left-10 md:max-w-[calc(90%-40px)]'
   },
   default: {
@@ -249,7 +249,7 @@ defineExpose({
         <div
           v-if="autocompleteList.length && isFocused"
           :class="[
-            'absolute z-[31] w-full flex flex-col gap-4 rounded bg-gray-200 p-2 dark:bg-gray-800',
+            'absolute z-[31] w-full flex flex-col gap-4 rounded bg-badge p-2',
             isDropdownUp ? 'bottom-[44px]' : 'top-[44px]'
           ]"
         >
@@ -260,8 +260,8 @@ defineExpose({
             <li
               v-for="(item, idx) in autocompleteList"
               :key="idx"
-              class="cursor-pointer rounded px-4 py-[10px] transition-colors hover:bg-gray-50 hover:dark:bg-gray-900"
-              :class="{ 'bg-gray-100 dark:bg-gray-700': currentItemIndex === idx }"
+              class="cursor-pointer rounded px-4 py-[10px] transition-colors hover:bg-action-secondary-hover"
+              :class="{ 'bg-brand-subtle': currentItemIndex === idx }"
               @mousedown="onSelectOption(item)"
               @touchend="onSelectOptionMobile(item)"
               @touchmove="mobileAutocomMoved = true"
@@ -295,37 +295,37 @@ defineExpose({
       >
       <label
         :for="label"
-        :class="[{ '!translate-y-[-17px] !text-[10px]': modelValue }, labelClass]"
+        :class="[{ 'label--floated': modelValue }, labelClass]"
         class="label"
       >
         <span class="text">{{ label }}</span>
         <span
           v-if="required"
-          class="text-red-600"
+          class="text-danger"
         > *</span>
       </label>
 
       <component
         :is="startIcon"
         v-if="startIcon"
-        class="pointer-events-none absolute left-4 top-1/2 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        class="pointer-events-none absolute left-4 top-1/2 translate-y-[-50%] transform fill-icon-secondary text-base text-secondary"
         filled
       />
       <component
         :is="endIcon"
         v-if="endIcon"
-        class="pointer-events-none absolute right-4 top-1/2 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        class="pointer-events-none absolute right-4 top-1/2 translate-y-[-50%] transform fill-icon-secondary text-base text-secondary"
         filled
       />
       <button
         v-if="isClearable"
-        class="pointer-events-click absolute right-4 top-1/2 translate-y-[-50%] transform rounded-full bg-deepblue-900 bg-opacity-10 p-1 text-2xl hover:opacity-80 dark:bg-gray-200 dark:bg-opacity-10"
+        class="pointer-events-click absolute right-4 top-1/2 translate-y-[-50%] transform rounded-full bg-badge p-1 text-2xl hover:opacity-80"
         type="button"
         @click="onClear"
       >
         <a-icon-x-mark
           filled
-          class="!mb-0 fill-gray-600 dark:fill-gray-300"
+          class="!mb-0 fill-icon-default"
         />
       </button>
       <slot name="endButton" />
@@ -354,6 +354,15 @@ defineExpose({
   </div>
 </template>
 <style scoped>
+.label {
+  transform: translateY(-50%);
+}
+
+.label--floated {
+  font-size: 10px;
+  transform: translateY(-17px);
+}
+
 .input {
   &:focus ~ .label,
   &:not(:focus):valid ~ .label,

package/components/forms/input/textarea/ATextarea.vue

@@ -33,22 +33,22 @@ const props = withDefaults(defineProps<Props>(), {
 const uiConfig = {
   wrapper: 'transition duration-500 w-full',
   'input-wrapper': {
-    base: 'relative inline-block h-full w-full text-sm sm:min-w-full pt-5 hover:outline hover:outline-1 outline-offset-[-1px] hover:outline-blue-700 hover:dark:outline-blue-500 focus:outline focus:outline-blue-700 focus:dark:outline-blue-500',
+    base: 'relative inline-block h-full w-full text-body-md sm:min-w-full pt-5 outline-offset-[-1px] hover:outline-1 hover:outline-(--border-color-focus) focus-within:outline-1 focus-within:outline-(--border-color-focus)',
     readonly: 'pointer-events-none user-select-none',
     disabled: 'pointer-events-none user-select-none opacity-40',
-    color: 'bg-deepblue-900/5 dark:bg-gray-200/5'
+    color: 'bg-muted'
   },
-  base: 'w-full border-0 rounded-sm text-deepblue-900 dark:text-gray-200 outline-none mt-0',
+  base: 'w-full border-0 rounded-sm text-primary outline-hidden mt-0',
   size: {
     sm: 'h-8 px-4 py-1.5 sm',
     md: 'h-10 px-4 pb-1.5 pt-[8px] md'
   },
-  color: 'bg-deepblue-900/0 dark:bg-gray-200/0',
+  color: 'bg-transparent',
   error:
-    'outline outline-1 outline-red-500 focus:outline-0 focus:border-red-500 hover:border-red-500',
-  readonly: 'bg-white opacity-30',
+    'outline outline-1 outline-(--border-color-danger) focus:outline-0 focus:border-danger hover:border-danger',
+  readonly: 'bg-main opacity-30',
   label: {
-    base: 'absolute left-4 top-5 d-flex text-gray-500 pointer-events-none transition-all ease duration-300 transform translate-y-[-50%] whitespace-nowrap',
+    base: 'absolute left-4 top-5 text-secondary pointer-events-none transition-all ease duration-300 whitespace-nowrap',
     'move-label': '!left-10'
   },
   default: {
@@ -127,22 +127,22 @@ const labelClass = computed(() =>
       />
       <label :class="labelClass" :for="label" class="label cursor-pointer">
         <span class="text">{{ label }}</span>
-        <span v-if="required" class="text-red-600"> *</span>
+        <span v-if="required" class="text-danger"> *</span>
       </label>
 
       <component
         :is="startIcon"
         v-if="startIcon"
-        class="pointer-events-none absolute left-4 top-5 translate-y-[-50%] transform fill-gray-500 text-base text-gray-500"
+        class="pointer-events-none absolute left-4 top-5 translate-y-[-50%] transform fill-icon-secondary text-base text-secondary"
         filled
       />
       <button
         v-if="isClearable"
-        class="pointer-events-click absolute right-4 top-5 translate-y-[-50%] transform rounded-full bg-deepblue-900 bg-opacity-10 p-1 text-2xl hover:opacity-80 dark:bg-gray-200 dark:bg-opacity-10"
+        class="pointer-events-click absolute right-4 top-5 translate-y-[-50%] transform rounded-full bg-badge p-1 text-2xl hover:opacity-80"
         type="button"
         @click="modelValue = ''"
       >
-        <a-icon-x-mark class="!mb-0 fill-gray-600 dark:fill-gray-300" filled />
+        <a-icon-x-mark class="!mb-0 fill-icon-default" filled />
       </button>
       <slot name="endButton" />
     </div>
@@ -161,6 +161,10 @@ const labelClass = computed(() =>
 </template>
 
 <style scoped>
+.label {
+  transform: translateY(-50%);
+}
+
 .input {
   &::-webkit-scrollbar {
     display: none;

package/components/forms/input/textarea/ATextareaV2.vue

@@ -30,7 +30,7 @@ interface Props {
   readonly?: boolean
   error?: string | string[]
   size?: 'sm' | 'md'
-  variant?: 'default' | 'gray' | 'blue'
+  variant?: 'default' | 'gray' | 'blue' | 'canvas'
   rows?: number
   resize?: 'none' | 'vertical' | 'both'
   maxlength?: number
@@ -57,15 +57,20 @@ const errorMessages = computed(() => {
 
 const fieldClass = computed(() => {
   if (props.disabled) {
-    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+    return 'border-default bg-badge/70'
   }
   if (props.variant === 'gray') {
-    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+    /* по макету ДС-2026 у залитого поля бордер видимый, а не прозрачный */
+    return 'border-default bg-muted'
   }
   if (props.variant === 'blue') {
-    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+    return 'border-brand-200 bg-brand-subtle'
   }
-  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+  if (props.variant === 'canvas') {
+    /* «утопленная» зона ДС: bg-canvas глубже bg-muted в дарке (парно с AInputV2) */
+    return 'border-default bg-canvas'
+  }
+  return 'border-default bg-main'
 })
 
 const resizeClass = computed(() => {
@@ -122,19 +127,19 @@ defineExpose({ focus, blur, textareaRef })
 </script>
 
 <template>
-  <div class="textarea-v2 relative w-full text-sm" v-bind="wrapperAttrs">
+  <div class="textarea-v2 relative w-full text-body-md" v-bind="wrapperAttrs">
     <div
-      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      class="textarea-v2__field relative rounded-10 border border-solid transition-colors duration-200 focus-within:border-focus focus-within:ring-2 focus-within:ring-brand-500/20 hover:border-brand"
       :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
     >
       <label
         v-if="label"
         :for="inputId"
         :data-size="size"
-        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-gray-500 dark:text-gray-400"
+        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-secondary"
         :class="{ 'textarea-v2__label--floated': isLabelFloated }"
       >
-        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+        {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
       </label>
 
       <textarea
@@ -147,7 +152,7 @@ defineExpose({ focus, blur, textareaRef })
         :disabled="disabled"
         :readonly="readonly"
         :tabindex="disabled ? -1 : 0"
-        class="textarea-v2__input text-deepblue-900 block w-full bg-transparent leading-snug outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        class="textarea-v2__input block w-full bg-transparent leading-snug text-primary outline-hidden placeholder:text-secondary disabled:cursor-not-allowed"
         :class="[resizeClass, paddingClass]"
         v-bind="inputAttrs"
         @focus="onFocus"
@@ -156,7 +161,7 @@ defineExpose({ focus, blur, textareaRef })
 
       <span
         v-if="maxlength"
-        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-[10px] text-gray-400 dark:text-gray-500"
+        class="textarea-v2__counter pointer-events-none absolute right-3 bottom-1.5 text-body-sm text-icon-disabled"
       >
         {{ modelValue?.length ?? 0 }}/{{ maxlength }}
       </span>
@@ -170,7 +175,7 @@ defineExpose({ focus, blur, textareaRef })
       leave-from-class="textarea-v2__error-leave-from"
       leave-to-class="textarea-v2__error-leave-to"
     >
-      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+      <p v-if="hasError" class="mt-1 flex flex-col text-body-sm text-danger">
         <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
       </p>
     </transition>
@@ -179,7 +184,7 @@ defineExpose({ focus, blur, textareaRef })
 
 <style scoped>
 .textarea-v2__field--error {
-  border-color: theme('colors.red.500');
+  border-color: var(--border-color-danger);
 }
 
 .textarea-v2__field--disabled {

package/components/forms/radio-button/ARadioButton.vue

@@ -14,11 +14,11 @@
     >
     <label
       :for="name"
-      class="flex items-center text-deepblue-900 dark:text-gray-200 cursor-pointer w-full whitespace-nowrap"
+      class="flex items-center text-primary cursor-pointer w-full whitespace-nowrap"
       :class="[textSizeOptions[size]]"
     >
       <span v-if="side==='left'" class="select-none w-full"><slot/></span>
-      <component :is="currentComponent" class="text-deepblue-900 dark:text-gray-200 w-full"
+      <component :is="currentComponent" class="text-primary w-full"
                  :class="[sizeOptions[size]]"
       />
       <span v-if="side==='right'" class="select-none w-full"><slot/></span>
@@ -76,8 +76,8 @@ const sizeOptions = {
   sm: 'min-w-4 min-h-4 max-w-4 max-h-4'
 }
 const textSizeOptions = {
-  lg: 'text-sm gap-2',
-  sm: 'text-xs gap-2'
+  lg: 'text-body-md gap-2',
+  sm: 'text-body-sm gap-2'
 }
 
 watch(model, async (e) => {

package/components/forms/request-demo/ARequestDemo.vue

@@ -51,21 +51,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="rounded-[20px] bg-blue-700 dark:bg-[#1B98E2] p-4 dark:bg-blue-500 lg:p-8">
+  <div class="rounded-[20px] bg-brand p-4 lg:p-8">
     <div class="flex w-full flex-col gap-4 lg:flex-row lg:justify-between">
-      <div class="flex flex-col gap-4 text-white dark:text-gray-900 lg:max-w-[50%] lg:gap-6">
+      <div class="flex flex-col gap-4 text-white lg:max-w-[50%] lg:gap-6">
         <slot name="title">
-          <p class="md:text-[32px] text-[24px]  font-bold">
+          <p class="text-h2 md:text-display-sm">
             {{ title || t('forms.request_demo.title') }}
           </p>
         </slot>
         <slot name="description">
-          <p class="text-base whitespace-pre-line">
+          <p class="text-body-lg whitespace-pre-line">
             {{ description || t('forms.request_demo.info') }}
           </p>
         </slot>
       </div>
-      <div class="rounded-[20px] bg-white p-6 dark:bg-gray-900 lg:w-[456px]">
+      <div class="rounded-[20px] bg-main p-6 lg:w-[456px]">
         <div class="flex flex-col gap-4">
           <slot name="inputs">
             <div class="flex flex-col gap-4">

package/components/forms/toggle/AToggle.vue

@@ -55,14 +55,14 @@ const offIconClassFormatted = computed(() => {
 
 
 const ui = {
-  "base": "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none transition ease-in-out",
+  "base": "relative inline-flex shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-hidden transition ease-in-out",
   "rounded": "rounded-full",
-  "ring": "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  "ring": "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-(--background-color-main)",
   "active": {
-    "blue": "bg-blue-700 dark:bg-blue-500",
-    "green": "bg-green"
+    "blue": "bg-action-primary",
+    "green": "bg-success"
   },
-  "inactive": "bg-gray-200 dark:bg-gray-200/20",
+  "inactive": "bg-badge",
   "size": {
     "2xs": "h-3 w-5",
     "xs": "h-3.5 w-6",
@@ -73,7 +73,8 @@ const ui = {
     "2xl": "h-8 w-[3.75rem]"
   },
   "container": {
-    "base": "pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
+    /* осознанно константный белый бегунок на цветном треке: bg-white не флипается в тёмной теме */
+    "base": "pointer-events-none relative inline-block rounded-full bg-white shadow-sm transform ring-0 transition ease-in-out duration-200",
     "active": {
       "2xs": "translate-x-2 rtl:-translate-x-2",
       "xs": "translate-x-2.5 rtl:-translate-x-2.5",
@@ -108,7 +109,7 @@ const ui = {
       "2xl": "h-6 w-6"
     },
     // "on": "text-{color}-500 dark:text-{color}-400",
-    // "off": "text-gray-400 dark:text-gray-500"
+    // "off": "text-icon-disabled"
   },
 }
 

package/components/forms/toggle/AToggleV2.vue

@@ -33,28 +33,29 @@ function toggle() {
     :aria-checked="model"
     :aria-disabled="disabled || undefined"
     :disabled="disabled"
-    class="toggle-v2 group inline-flex select-none items-center gap-2 rounded-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    class="toggle-v2 group inline-flex select-none items-center gap-2 rounded-full focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
     :class="labelSide === 'right' ? 'flex-row-reverse' : ''"
     @click="toggle"
   >
     <span
       v-if="label"
-      class="text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
+      class="text-quaternary transition-colors group-hover:text-primary"
       :class="s.text"
     >
       {{ label }}
     </span>
     <span
-      class="relative inline-flex shrink-0 items-center rounded-full ring-1 ring-inset transition-colors duration-200 group-focus-visible:ring-2 group-focus-visible:ring-blue-500/50"
+      class="relative inline-flex shrink-0 items-center rounded-full ring-1 ring-inset transition-colors duration-200 group-focus-visible:ring-2 group-focus-visible:ring-brand-500/50"
       :class="[
         s.track,
         model
-          ? 'bg-blue-600 ring-blue-600/30 dark:bg-blue-500 dark:ring-blue-400/30'
-          : 'bg-gray-200 ring-gray-300/60 dark:bg-gray-700 dark:ring-gray-600/60',
+          ? 'bg-brand ring-brand-500/30'
+          : 'bg-badge ring-(--border-color-strong)/60',
       ]"
     >
+      <!-- осознанно константный: белый бегунок на цветном треке, bg-white не флипается в тёмной теме -->
       <span
-        class="toggle-v2__knob inline-block rounded-full bg-white shadow-sm transition-transform duration-200 will-change-transform dark:bg-gray-100"
+        class="toggle-v2__knob inline-block rounded-full bg-white shadow-xs transition-transform duration-200 will-change-transform"
         :class="[s.knob, model ? s.on : s.off]"
       />
     </span>

package/components/modals/AConfirmationEmail.vue

@@ -7,14 +7,14 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex flex-col justify-center items-center gap-5">
-    <p class="heading-02">
+    <p class="text-h2">
       {{ $t('login.modal.title') }}
     </p>
     <a-ill-mail />
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ $t('login.modal.subtitle1') }}
     </p>
-    <p class="body-400 text-center">
+    <p class="text-body-md text-center">
       {{ $t('login.modal.confirmationEmail') }}
     </p>
     <div class="flex flex-col gap-2 w-full">

package/components/modals/AboutTariffModal.vue

@@ -34,12 +34,12 @@ const { t, rt, tm } = useI18n()
     @close="isOpen = false"
   >
     <div class="flex flex-col gap-5 lg:w-[458px]">
-      <h3 class="heading-02 text-center lg:text-left">
+      <h3 class="text-h2 text-center lg:text-left">
         {{ t('tariffs.aboutTariff') }}
       </h3>
       <div class="flex flex-col gap-2 lg:pb-0">
         <div
-          class="body-400 relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
+          class="text-body-md relative grid w-full grid-cols-1 grid-rows-2 gap-[43px] px-4 py-8 lg:max-w-[458px] lg:px-[70px] lg:py-[27px]"
         >
           <img
             class="absolute size-full"
@@ -51,7 +51,7 @@ const { t, rt, tm } = useI18n()
               <div>
                 {{ t('reuse.subscribe') }}
               </div>
-              <h4 class="md:heading-02 heading-03">
+              <h4 class="md:text-h2 text-h3">
                 {{ t(`tariffs.modals.${id}.name`) }}
               </h4>
             </div>
@@ -59,9 +59,9 @@ const { t, rt, tm } = useI18n()
               <div>
                 {{ t('reuse.startingFrom') }}
               </div>
-              <div class="md:heading-02 heading-03">
+              <div class="md:text-h2 text-h3">
                 {{ t(`tariffs.modals.${id}.price`) }} <span
-                  class="body-400"
+                  class="text-body-md"
                 >{{ t(`tariffs.modals.${id}.period`) }}</span>
               </div>
             </div>
@@ -71,9 +71,10 @@ const { t, rt, tm } = useI18n()
           </p>
         </div>
         <div class="flex flex-wrap gap-1 sm:gap-2">
+          <!-- осознанно константный text-white: белый текст на цветной brand-пилюле -->
           <div
             v-for="(item, index) in tm(`tariffs.modals.${id}.professions`)"
-            class=" h-7 rounded-full bg-blue-700 px-[10px] py-[5px] text-xs leading-[16px] text-white dark:bg-blue-500  dark:text-gray-900 "
+            class="h-7 rounded-full bg-brand px-[10px] py-[5px] text-body-sm text-white"
           >
             {{ rt(item) }}
           </div>
@@ -83,8 +84,8 @@ const { t, rt, tm } = useI18n()
             v-for="(item, index) in tm(`tariffs.modals.${id}.functions`)"
             class="flex items-center gap-[1.5px]"
           >
-            <checkmark-circle class="shrink-0 text-green-500 dark:text-green-400" />
-            <p class="text-xs">
+            <checkmark-circle class="shrink-0 text-success" />
+            <p class="text-body-sm">
               {{ rt(item) }}
             </p>
           </div>
@@ -92,7 +93,7 @@ const { t, rt, tm } = useI18n()
       </div>
       <div
         class="flex gap-4"
-        :class="device.isMobile ? 'bg-white dark:bg-gray-900 m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
+        :class="device.isMobile ? 'bg-main m-0 p-4 sticky bottom-0 left-0 w-full' : ''"
       >
         <a-button
           view="outline"

package/components/modals/AnotherDeviceModal.vue

@@ -22,23 +22,24 @@ function onToMain() {
   <a-modal-v2
     v-model="isOpen"
     width="424px"
+    hide-header-border
     @close="onClose"
   >
     <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-phone-check />
-      <p class="body-400 text-center">
+      <p class="text-h4 whitespace-pre-wrap text-center">
+        {{ t('modals.another_device_modal.title') }}
+      </p>
+      <p class="text-body-md whitespace-pre-wrap text-center text-quaternary">
         {{ t('modals.another_device_modal.info') }}
       </p>
-      <div
-        class="body-400 flex gap-2 rounded-md border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
+      <a-alert
+        color="red"
+        icon-type="triangle"
+        size="xs"
       >
-        <a-icon-warning-triangle
-          class="size-4 shrink-0"
-        />
-        <span class="text-xs">
-          {{ t('modals.another_device_modal.alert') }}
-        </span>
-      </div>
+        {{ t('modals.another_device_modal.alert') }}
+      </a-alert>
     </div>
     <template #footer>
       <div class="flex w-full gap-2">

package/components/modals/ApplicationAcceptedModal.vue

@@ -19,10 +19,11 @@ const modalText = {
     v-model="isOpen"
     width="424px"
     :persistent="true"
+    hide-header-border
   >
-    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-ok />
-      <p class="body-400 text-center">
+      <p class="text-body-md text-center text-quaternary">
         {{ modalText.info }}
       </p>
     </div>

package/components/modals/ConnectingTariffModal.vue

@@ -32,7 +32,7 @@ function cancel() {
   >
     <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
       <a-ill-turn-on-tariff />
-      <p class="body-400 whitespace-pre-wrap text-center">
+      <p class="text-body-md whitespace-pre-wrap text-center">
         {{ t('modals.connecting.questions') }}
       </p>
     </div>