adata-ui 2.1.40 → 2.1.41-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (258) hide show
  1. package/-error.vue +2 -2
  2. package/.playground/app.vue +13 -13
  3. package/.playground/nuxt.config.ts +1 -1
  4. package/CLAUDE.md +63 -0
  5. package/assets/styles/main.css +12 -0
  6. package/assets/styles/theme.css +583 -0
  7. package/assets/styles/ui.css +247 -0
  8. package/components/elements/a-select-row/ASelectRowV2.vue +13 -17
  9. package/components/elements/a-select-row/index.vue +13 -12
  10. package/components/elements/accordion/AAccordion.vue +2 -2
  11. package/components/elements/accordion/AAccordionGroup/AAccordionGroup.vue +1 -1
  12. package/components/elements/accordion/AAccordionGroup/ui.config.ts +4 -4
  13. package/components/elements/accordion/ui.config.ts +4 -4
  14. package/components/elements/alert/AAlert.vue +5 -5
  15. package/components/elements/bg-block/ABgBlock.vue +1 -1
  16. package/components/elements/button/AButton.vue +48 -45
  17. package/components/elements/button/AButtonV2.vue +74 -30
  18. package/components/elements/button-login/index.vue +2 -1
  19. package/components/elements/carousel/config.ui.ts +2 -2
  20. package/components/elements/chip-wrapper/AChipWrapper.vue +4 -3
  21. package/components/elements/chips/AChips.vue +4 -3
  22. package/components/elements/companies/AOurClients.vue +1 -1
  23. package/components/elements/count-up/ACountUp.vue +54 -0
  24. package/components/elements/curve-block/ACurveBlock.vue +15 -48
  25. package/components/elements/curve-block-v2/ACurveBlockV2.vue +60 -25
  26. package/components/elements/digit-badge/ADigitBadge.vue +17 -16
  27. package/components/elements/empty-box/empty-box-V2.vue +92 -0
  28. package/components/elements/error-template/index.vue +99 -31
  29. package/components/elements/feature-description/AFeatureDescription.vue +8 -8
  30. package/components/elements/illustrations/noAccess.vue +1 -1
  31. package/components/elements/infinite-carousel/AInfiniteCarousel.vue +44 -16
  32. package/components/elements/leave-note/ALeaveNote.vue +2 -2
  33. package/components/elements/pagination/APagination.vue +8 -8
  34. package/components/elements/section-heading/ASectionHeading.vue +35 -0
  35. package/components/elements/segmented/ASegmentedV2.vue +24 -21
  36. package/components/elements/select/ASelect.vue +28 -27
  37. package/components/elements/select/ASelectMobile.vue +5 -5
  38. package/components/elements/select/ASelectV2.vue +20 -28
  39. package/components/elements/select/ui/select-button.vue +8 -8
  40. package/components/elements/select/ui/select-list.vue +2 -2
  41. package/components/elements/show-more/AShowMore.vue +2 -2
  42. package/components/elements/show-more/AShowMoreV2.vue +3 -3
  43. package/components/elements/skeleton/ASkeleton.vue +1 -1
  44. package/components/elements/slider/ASlider.vue +3 -2
  45. package/components/elements/slider/ASliderV2.vue +182 -0
  46. package/components/elements/star-rating/AStarRating.vue +2 -2
  47. package/components/elements/status-badge/AStatusBadge.vue +40 -36
  48. package/components/elements/step-slider/AStepSliderColCard.vue +77 -39
  49. package/components/elements/step-slider/AStepSliderColNumber.vue +74 -53
  50. package/components/elements/table/table.config.ts +8 -8
  51. package/components/elements/tree-select/components/ATreeSelectNode.vue +4 -4
  52. package/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue +3 -3
  53. package/components/elements/tree-select-modal/ATreeSelectModal.vue +4 -4
  54. package/components/features/color-mode/AColorMode.client.vue +2 -24
  55. package/components/features/dropdown/ADropdownV2.vue +1 -1
  56. package/components/features/lang-switcher/lang-switcher.vue +6 -6
  57. package/components/features/payment/banner/BasicPlusLimitBanner.vue +3 -23
  58. package/components/features/payment/banner/PaymentBanner.vue +3 -23
  59. package/components/features/payment/banner/UpSellBanner.vue +1 -21
  60. package/components/features/payment/process/PaymentKaspiQrSidePanel.vue +8 -7
  61. package/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue +5 -5
  62. package/components/features/payment/process/PaymentMethodSidePanel.vue +12 -12
  63. package/components/features/payment/process/PaymentTopUpSidePanel.vue +6 -6
  64. package/components/features/pk-mobile-services/APkMobileServices.vue +14 -43
  65. package/components/features//321/201hange-version/AChangeVersion.vue +1 -1
  66. package/components/forms/checkbox/ACheckbox.vue +8 -8
  67. package/components/forms/checkbox/ACheckboxV2.vue +8 -8
  68. package/components/forms/feedback-form/FeedbackForm.vue +8 -8
  69. package/components/forms/feedback-form/FeedbackFormV2.vue +9 -8
  70. package/components/forms/input/AInputV2.vue +39 -25
  71. package/components/forms/input/button/AInputButton.vue +1 -1
  72. package/components/forms/input/date/AInputDate.vue +13 -9
  73. package/components/forms/input/password/AInputPassword.vue +1 -1
  74. package/components/forms/input/standard/AInputStandard.vue +23 -14
  75. package/components/forms/input/textarea/ATextarea.vue +15 -11
  76. package/components/forms/input/textarea/ATextareaV2.vue +18 -13
  77. package/components/forms/radio-button/ARadioButton.vue +4 -4
  78. package/components/forms/request-demo/ARequestDemo.vue +5 -5
  79. package/components/forms/toggle/AToggle.vue +8 -7
  80. package/components/forms/toggle/AToggleV2.vue +7 -6
  81. package/components/modals/AConfirmationEmail.vue +3 -3
  82. package/components/modals/AboutTariffModal.vue +10 -9
  83. package/components/modals/AnotherDeviceModal.vue +11 -10
  84. package/components/modals/ApplicationAcceptedModal.vue +3 -2
  85. package/components/modals/ConnectingTariffModal.vue +1 -1
  86. package/components/modals/ContactsMobileModel.vue +5 -5
  87. package/components/modals/ContentNavigationModal.vue +8 -7
  88. package/components/modals/Insufficient-funds-modal.vue +4 -4
  89. package/components/modals/LimitReachedModal.vue +18 -7
  90. package/components/modals/NoAccessModal.vue +7 -3
  91. package/components/modals/PaymentMethodModal.vue +4 -4
  92. package/components/modals/RedirectsBanksModal.vue +4 -4
  93. package/components/modals/ReplenishModal.vue +2 -2
  94. package/components/modals/ReportBugConfirmModal.vue +2 -2
  95. package/components/modals/ReportBugModal.vue +2 -2
  96. package/components/modals/Resend.vue +4 -4
  97. package/components/modals/SubmitApplicationModal.vue +1 -5
  98. package/components/modals/id/AuthModal.vue +27 -47
  99. package/components/modals/id/IdAutoLogoutModal.vue +23 -24
  100. package/components/modals/id/IdBanner.vue +4 -24
  101. package/components/modals/id/IdConfirmAccountOtpModal.vue +5 -4
  102. package/components/modals/id/IdConfirmSuccessfulModal.vue +3 -3
  103. package/components/modals/id/IdLoginModal.vue +8 -8
  104. package/components/modals/id/IdModals.vue +1 -3
  105. package/components/modals/id/IdNewPasswordModal.vue +3 -3
  106. package/components/modals/id/IdOtpInput.vue +3 -3
  107. package/components/modals/id/IdPasswordSuccessfulModal.vue +3 -3
  108. package/components/modals/id/IdRecoveryModal.vue +3 -3
  109. package/components/modals/id/IdRegistrationModal.vue +4 -4
  110. package/components/modals/id/IdResetPasswordOtpModal.vue +5 -4
  111. package/components/modals/id/IdTwoFactorModal.vue +3 -2
  112. package/components/navigation/bottom-navigation/ABottomNavigation.vue +7 -7
  113. package/components/navigation/breadcrumbs/ABreadcrumbs.vue +4 -4
  114. package/components/navigation/footer/AFooter.vue +2 -2
  115. package/components/navigation/footer/ui/a-footer-accordion.vue +1 -1
  116. package/components/navigation/header/AHeader.vue +11 -11
  117. package/components/navigation/header/AlmatyContacts.vue +7 -7
  118. package/components/navigation/header/AstanaContacts.vue +4 -4
  119. package/components/navigation/header/CardGallery.vue +8 -7
  120. package/components/navigation/header/ContactMenu.vue +1 -1
  121. package/components/navigation/header/HeaderLink.vue +5 -5
  122. package/components/navigation/header/HeaderUsage.vue +14 -14
  123. package/components/navigation/header/ListItem.vue +4 -3
  124. package/components/navigation/header/NavCard.vue +6 -5
  125. package/components/navigation/header/NavList.vue +9 -8
  126. package/components/navigation/header/NotificationsMenu.vue +10 -10
  127. package/components/navigation/header/ProductMenu.vue +10 -9
  128. package/components/navigation/header/ProfileMenu.vue +13 -12
  129. package/components/navigation/header/SystemNotification.vue +4 -4
  130. package/components/navigation/line-tabs/ALineTabs.vue +10 -9
  131. package/components/navigation/pill-tabs/APillTabs.vue +18 -16
  132. package/components/navigation/pill-tabs/APillTabsV2.vue +40 -25
  133. package/components/navigation/side-navigation/ASideNavigation.vue +3 -3
  134. package/components/overlays/drawer/ADrawerV2.vue +12 -11
  135. package/components/overlays/modal/AModal.vue +4 -4
  136. package/components/overlays/modal/AModalV2.vue +17 -13
  137. package/components/overlays/side-panel/ASidePanel.vue +7 -7
  138. package/components/overlays/sideover/ASlideover.vue +4 -4
  139. package/components/overlays/tooltip/ATooltip.vue +3 -2
  140. package/components/overlays/tooltip/ATooltipV2.vue +2 -2
  141. package/composables/highlight.ts +2 -1
  142. package/eslint.config.mjs +14 -1
  143. package/icons/arrow/arrow-left.vue +14 -0
  144. package/icons/arrow-currency-gray.vue +1 -1
  145. package/icons/arrow-currency-green.vue +1 -1
  146. package/icons/arrow-currency-red.vue +1 -1
  147. package/icons/avatar.vue +1 -1
  148. package/icons/bar-chart-3.vue +3 -0
  149. package/icons/book-open.vue +3 -0
  150. package/icons/bookmark/bookmark-filled.vue +1 -0
  151. package/icons/braces.vue +3 -0
  152. package/icons/check/check-outline.vue +3 -0
  153. package/icons/chevron/chevron-down-outline.vue +3 -0
  154. package/icons/clipboard-list.vue +3 -0
  155. package/icons/clock-outline.vue +3 -0
  156. package/icons/company-egov-small.vue +1 -1
  157. package/icons/database.vue +3 -0
  158. package/icons/download-outline.vue +3 -0
  159. package/icons/download.vue +1 -1
  160. package/icons/egov.vue +1 -1
  161. package/icons/elicense.vue +1 -1
  162. package/icons/file-json.vue +3 -0
  163. package/icons/file-search.vue +3 -0
  164. package/icons/file-text.vue +3 -0
  165. package/icons/flask-conical.vue +3 -0
  166. package/icons/folder-open.vue +3 -0
  167. package/icons/gift-outline.vue +3 -0
  168. package/icons/globe-2.vue +3 -0
  169. package/icons/graph-loading.vue +2 -2
  170. package/icons/hand/hand-thumb-up-filled.vue +1 -1
  171. package/icons/home.vue +14 -0
  172. package/icons/invoice.vue +1 -0
  173. package/icons/key-round.vue +3 -0
  174. package/icons/letter/letter-a.vue +4 -2
  175. package/icons/letter/letter-b.vue +2 -2
  176. package/icons/letter/letter-c.vue +2 -2
  177. package/icons/letter/letter-d.vue +2 -2
  178. package/icons/letter/letter-e.vue +2 -2
  179. package/icons/logo.vue +1 -1
  180. package/icons/main-filter.vue +1 -1
  181. package/icons/menu.vue +4 -4
  182. package/icons/message/message.vue +1 -1
  183. package/icons/messages-square.vue +3 -0
  184. package/icons/more.vue +1 -1
  185. package/icons/payment/payment-card.vue +2 -2
  186. package/icons/radio/radio-check.vue +1 -1
  187. package/icons/robot-outline.vue +3 -0
  188. package/icons/scales/scale-outline.vue +3 -0
  189. package/icons/search-outline.vue +3 -0
  190. package/icons/send.vue +3 -0
  191. package/icons/star/star-filled.vue +1 -0
  192. package/icons/star/star-half-filled.vue +1 -0
  193. package/icons/sun.vue +1 -0
  194. package/icons/terminal.vue +3 -0
  195. package/icons/toasts/warning-triangle-toast.vue +1 -0
  196. package/icons/triangle-alert.vue +3 -0
  197. package/icons/users-outline.vue +3 -0
  198. package/icons/webhook.vue +3 -0
  199. package/icons/x-outline.vue +3 -0
  200. package/icons/yandex.vue +2 -1
  201. package/illustrations/address-location.vue +2 -2
  202. package/illustrations/award-badge.vue +105 -0
  203. package/illustrations/ball-with-chain.vue +7 -7
  204. package/illustrations/bill.vue +5 -5
  205. package/illustrations/buildings.vue +4 -4
  206. package/illustrations/calendar.vue +11 -11
  207. package/illustrations/chains.vue +12 -12
  208. package/illustrations/coin-percent.vue +3 -3
  209. package/illustrations/coins-stack.vue +4 -4
  210. package/illustrations/delete-dark.vue +1 -0
  211. package/illustrations/delete.vue +1 -0
  212. package/illustrations/doc-with-stamp.vue +5 -5
  213. package/illustrations/document.vue +3 -3
  214. package/illustrations/door.vue +79 -68
  215. package/illustrations/empty-badge-check.vue +20 -0
  216. package/illustrations/empty-ban.vue +18 -0
  217. package/illustrations/empty-box.vue +5 -5
  218. package/illustrations/empty-filter.vue +20 -0
  219. package/illustrations/empty-inbox.vue +19 -0
  220. package/illustrations/empty-scale.vue +22 -0
  221. package/illustrations/empty-search-x.vue +21 -0
  222. package/illustrations/empty-shopping-cart.vue +21 -0
  223. package/illustrations/empty-users-round.vue +20 -0
  224. package/illustrations/empty-wallet.vue +121 -155
  225. package/illustrations/graph-in-coin.vue +2 -2
  226. package/illustrations/hammer.vue +5 -5
  227. package/illustrations/hand-cash.vue +1 -1
  228. package/illustrations/info.vue +49 -36
  229. package/illustrations/mail-active.vue +86 -0
  230. package/illustrations/mail.vue +4 -4
  231. package/illustrations/no-access.vue +92 -0
  232. package/illustrations/ok.vue +86 -58
  233. package/illustrations/people-group.vue +1 -1
  234. package/illustrations/person-with-phone.vue +5 -5
  235. package/illustrations/person.vue +3 -3
  236. package/illustrations/phone-check.vue +104 -84
  237. package/illustrations/phone-payment-method.vue +1 -1
  238. package/illustrations/shield-user.vue +94 -0
  239. package/illustrations/stop-hand.vue +78 -71
  240. package/illustrations/stop-sign.vue +1 -1
  241. package/illustrations/suit.vue +93 -107
  242. package/illustrations/suitcase.vue +6 -6
  243. package/illustrations/terminal.vue +94 -228
  244. package/illustrations/trash-can.vue +60 -102
  245. package/illustrations/turn-on-tariff.vue +2 -2
  246. package/illustrations/two-persons.vue +2 -2
  247. package/lang/en.ts +25 -29
  248. package/lang/kk.ts +24 -28
  249. package/lang/ru.ts +24 -29
  250. package/nuxt.config.ts +11 -4
  251. package/package.json +7 -12
  252. package/assets/styles/index.scss +0 -166
  253. package/assets/styles/modules/_base.scss +0 -5
  254. package/assets/styles/modules/_typography.scss +0 -152
  255. package/components/elements/error-template/types.ts +0 -23
  256. package/illustrations/terminal-dark.vue +0 -48
  257. package/tailwind.config.ts +0 -194
  258. package/tests/AButton.test.ts +0 -81
package/assets/styles/ui.css ADDED
@@ -0,0 +1,247 @@
1
+ /*
2
+ * Глобальные стили adata-ui вне Tailwind-слоёв (порт assets/styles/index.scss).
3
+ * Подключается через CSS-вход слоя (assets/styles/main.css).
4
+ */
5
+
6
+ html {
7
+ scrollbar-gutter: stable;
8
+ }
9
+
10
+ body {
11
+ padding: 0 !important;
12
+ /* Семантические токены переключаются в тёмной теме сами (см. theme.css). */
13
+ color: var(--text-color-primary);
14
+ background-color: var(--background-color-main);
15
+ }
16
+
17
+ /* Отключает жёлоб скроллбара на страницах со своим скроллом (схемы связей).
18
+ Вешается через useHead({ htmlAttrs: { class: … } }) и снимается при уходе со
19
+ страницы — в отличие от глобального <style> в layout'е, который утекал в
20
+ <head> навсегда. Специфичность класса выше html, !important не нужен. */
21
+ html.no-scroll-gutter {
22
+ scrollbar-gutter: initial;
23
+ }
24
+
25
+ html.no-scroll-gutter::-webkit-scrollbar {
26
+ width: 0;
27
+ }
28
+
29
+ html::-webkit-scrollbar {
30
+ width: 15px;
31
+ }
32
+
33
+ html::-webkit-scrollbar-thumb {
34
+ background: var(--border-color-strong);
35
+ }
36
+
37
+ .no-scrollbar::-webkit-scrollbar {
38
+ display: none;
39
+ }
40
+
41
+ /* Hide scrollbar for IE, Edge and Firefox */
42
+ .no-scrollbar {
43
+ -ms-overflow-style: none; /* IE and Edge */
44
+ scrollbar-width: none; /* Firefox */
45
+ }
46
+
47
+ @media (min-width: 320px) and (max-width: 767px) {
48
+ .a-container {
49
+ padding: 0;
50
+ }
51
+
52
+ .mobile-padding {
53
+ padding: 16px;
54
+ }
55
+ }
56
+
57
+ /* Осознанное hex-исключение (реестр в git-истории: git show 69039ec:docs/color-migration.md).
58
+ Тема — по классу .dark, как у соседнего .bg-gradient-banner. */
59
+ .bg-gradient-blue {
60
+ background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
61
+ }
62
+
63
+ .dark .bg-gradient-blue {
64
+ background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
65
+ }
66
+
67
+ /* Промо-баннеры (IdBanner, PaymentBanner, UpSellBanner, BasicPlusLimitBanner).
68
+ Осознанное hex-исключение, как .bg-gradient-blue (реестр в git-истории:
69
+ git show 69039ec:docs/color-migration.md). */
70
+ .bg-gradient-banner {
71
+ background: linear-gradient(239.71deg, #B3D5F9 -7.48%, #E6F1FD 39.62%, #CCE2FB 85.82%);
72
+ }
73
+
74
+ .dark .bg-gradient-banner {
75
+ background: linear-gradient(239.71deg, #17303F -7.48%, #161617 39.62%, #17303F 85.82%);
76
+ }
77
+
78
+ input::-webkit-outer-spin-button,
79
+ input::-webkit-inner-spin-button {
80
+ -webkit-appearance: none;
81
+ margin: 0;
82
+ }
83
+
84
+ .Toastify__toast-container {
85
+ z-index: 10002 !important;
86
+ }
87
+
88
+ @media (min-width: 481px) {
89
+ .Toastify__toast-container {
90
+ width: 600px;
91
+ }
92
+ }
93
+
94
+ .Toastify__toast-container .Toastify__toast {
95
+ min-height: 71px;
96
+ padding: 14px 16px;
97
+ border: 1px solid transparent;
98
+ border-left-width: 4px; /* акцентная полоса слева */
99
+ border-radius: 12px;
100
+ box-shadow: none;
101
+ }
102
+
103
+ .Toastify__toast-container .Toastify__toast-body {
104
+ margin: 0;
105
+ padding: 0;
106
+ gap: 12px;
107
+ align-items: center;
108
+ font-size: 16px;
109
+ font-weight: 500;
110
+ line-height: 24px;
111
+ }
112
+
113
+ .Toastify__toast-container .Toastify__toast-icon {
114
+ width: 24px;
115
+ height: 24px;
116
+ margin-inline-end: 0;
117
+ }
118
+
119
+ .Toastify__toast-container .Toastify__toast-icon svg {
120
+ width: 24px;
121
+ height: 24px;
122
+ }
123
+
124
+ .Toastify__toast-container .Toastify__close-button {
125
+ align-self: center;
126
+ color: var(--color-secondary-500);
127
+ opacity: 0.6;
128
+ }
129
+
130
+ .Toastify__toast-container .Toastify__close-button:hover {
131
+ opacity: 1;
132
+ }
133
+
134
+ /* info на brand: старый фон #eff6ff (стоковый blue-50) ≈ brand-50 — дельта в реестре (git show 69039ec:docs/color-migration.md) */
135
+ .Toastify__toast-container .Toastify__toast--info { background: var(--color-brand-50); border-color: var(--color-brand-500); color: var(--color-brand-500); }
136
+ .Toastify__toast-container .Toastify__toast--success { background: var(--color-green-50); border-color: var(--color-green-600); color: var(--color-green-600); }
137
+ .Toastify__toast-container .Toastify__toast--warning { background: var(--color-amber-50); border-color: var(--color-amber-600); color: var(--color-amber-600); }
138
+ .Toastify__toast-container .Toastify__toast--error { background: var(--color-red-50); border-color: var(--color-red-600); color: var(--color-red-600); }
139
+
140
+ .Toastify__toast-container .Toastify__toast--info .Toastify__progress-bar { background: var(--color-brand-500); }
141
+ .Toastify__toast-container .Toastify__toast--success .Toastify__progress-bar { background: var(--color-green-600); }
142
+ .Toastify__toast-container .Toastify__toast--warning .Toastify__progress-bar { background: var(--color-amber-600); }
143
+ .Toastify__toast-container .Toastify__toast--error .Toastify__progress-bar { background: var(--color-red-600); }
144
+
145
+ /* Тёмная тема (нежная, ручная подгонка — оставлена как явный оверрайд поверх токенов):
146
+ фон = тинт solid-хекса тона /10, но непрозрачный (тост плавает над контентом) —
147
+ композит поверх #161617; бордер rgba(solid,0.4); текст/иконка -400. */
148
+ .dark .Toastify__toast-container .Toastify__close-button { color: #e3e5e8; }
149
+
150
+ .dark .Toastify__toast-container .Toastify__toast--info { background: #14222e; border-color: rgba(6, 141, 255, 0.4); color: #43afed; }
151
+ .dark .Toastify__toast-container .Toastify__toast--success { background: #14241b; border-color: rgba(0, 166, 62, 0.4); color: #6bbd6e; }
152
+ .dark .Toastify__toast-container .Toastify__toast--warning { background: #2a1f15; border-color: rgba(225, 113, 0, 0.4); color: #ffc31e; }
153
+ .dark .Toastify__toast-container .Toastify__toast--error { background: #2b1416; border-color: rgba(231, 0, 11, 0.4); color: #f47e75; }
154
+
155
+ input[type="search"]::-webkit-search-cancel-button {
156
+ -webkit-appearance: none;
157
+ appearance: none;
158
+ }
159
+
160
+ input[type="search"]::-ms-clear {
161
+ display: none;
162
+ width: 0;
163
+ height: 0;
164
+ }
165
+
166
+ /* Firefox */
167
+ input[type="number"] {
168
+ -moz-appearance: textfield;
169
+ }
170
+
171
+ .visually-hidden {
172
+ position: absolute;
173
+ width: 1px;
174
+ height: 1px;
175
+ margin: -1px;
176
+ border: 0;
177
+ padding: 0;
178
+ white-space: nowrap;
179
+ clip-path: inset(100%);
180
+ clip: rect(0 0 0 0);
181
+ overflow: hidden;
182
+ }
183
+
184
+ /* Подложка hero-иллюстраций лендингов (§05 аудита: декоративный градиент — литерал).
185
+ Тема — по классу .dark, как у .bg-gradient-blue. */
186
+ .a-illus-backdrop {
187
+ position: relative;
188
+ overflow: hidden;
189
+ background: linear-gradient(145deg, #e4f2ff 0%, #c3e1ff 48%, #a5d2ff 100%);
190
+ box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
191
+ }
192
+
193
+ .a-illus-backdrop::before {
194
+ content: "";
195
+ position: absolute;
196
+ inset: 0;
197
+ background: radial-gradient(130px 130px at 80% 16%, rgba(255, 255, 255, .6), transparent 70%);
198
+ pointer-events: none;
199
+ }
200
+
201
+ .a-illus-backdrop::after {
202
+ content: "";
203
+ position: absolute;
204
+ inset: 0;
205
+ background-image: radial-gradient(rgba(6, 141, 255, .16) 1.3px, transparent 1.4px);
206
+ background-size: 15px 15px;
207
+ opacity: .55;
208
+ mask-image: linear-gradient(135deg, #000, transparent 55%);
209
+ pointer-events: none;
210
+ }
211
+
212
+ .dark .a-illus-backdrop {
213
+ background: linear-gradient(145deg, #15273b 0%, #101a27 55%, #0d1622 100%);
214
+ box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
215
+ }
216
+
217
+ .dark .a-illus-backdrop::before {
218
+ background: radial-gradient(130px 130px at 80% 16%, rgba(6, 141, 255, .14), transparent 70%);
219
+ }
220
+
221
+ /* Голубой ореол за hero лендинга (§05 аудита: декоративный градиент — литерал).
222
+ Тёмного варианта нет намеренно: та же rgba читается и на #fff, и на #161617.
223
+ Вешать на корень страницы лендинга, а не на body — pk-frontend это всё
224
+ приложение, а не набор лендингов. */
225
+ .a-page-glow {
226
+ position: relative;
227
+ z-index: 0;
228
+ }
229
+
230
+ /* z-index: -1 красится поверх фона хоста, но под его контентом — только если у
231
+ хоста есть свой контекст наложения (z-index: 0 выше). */
232
+ .a-page-glow::after {
233
+ content: "";
234
+ position: absolute;
235
+ inset: 0;
236
+ z-index: -1;
237
+ pointer-events: none;
238
+ background-repeat: no-repeat;
239
+ background-image: radial-gradient(
240
+ closest-side circle,
241
+ rgba(43, 127, 255, .1) 0%,
242
+ rgba(43, 127, 255, .05) 48%,
243
+ rgba(43, 127, 255, 0) 100%
244
+ );
245
+ background-size: 1500px 1500px;
246
+ background-position: 50% -420px;
247
+ }
package/components/elements/a-select-row/ASelectRowV2.vue CHANGED
@@ -81,20 +81,20 @@ defineExpose({ onClear })
81
81
  triggerLayoutClass,
82
82
  clearable ? 'pr-16' : 'pr-9',
83
83
  disabled
84
- ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
85
- : (btnClass || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
84
+ ? 'border-default bg-badge/70'
85
+ : (btnClass || 'border-default bg-main'),
86
86
  { 'select-row-v2__trigger--open': isOpen },
87
87
  ]"
88
- class="select-row-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
88
+ class="select-row-v2__trigger text-primary relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/20"
89
89
  @click="isOpen = !isOpen"
90
90
  >
91
91
  <span
92
92
  v-if="showFloatingLabel"
93
93
  :data-size="size"
94
- class="select-row-v2__label pointer-events-none absolute left-4 top-1/2 max-w-[calc(100%-48px)] truncate text-gray-500 dark:text-gray-400"
94
+ class="select-row-v2__label pointer-events-none absolute left-4 top-1/2 max-w-[calc(100%-48px)] truncate text-secondary"
95
95
  :class="{ 'select-row-v2__label--floated': isLabelFloated }"
96
96
  >
97
- {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
97
+ {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
98
98
  </span>
99
99
 
100
100
  <span ref="chipsRow" class="relative flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-start leading-none">
@@ -102,21 +102,21 @@ defineExpose({ onClear })
102
102
  <span
103
103
  v-for="item in visibleItems"
104
104
  :key="item.id"
105
- class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
105
+ class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
106
106
  @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
107
107
  >
108
108
  <span class="truncate">{{ item.name }}</span>
109
109
  <button
110
110
  v-if="deletable"
111
111
  type="button"
112
- class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-100 dark:hover:bg-blue-500/20"
112
+ class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-subtle"
113
113
  >
114
114
  <a-icon-x-mark class="size-2.5" />
115
115
  </button>
116
116
  </span>
117
117
  <span
118
118
  v-if="hiddenCount > 0"
119
- class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
119
+ class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium text-brand"
120
120
  >
121
121
  +{{ hiddenCount }}
122
122
  </span>
@@ -129,7 +129,7 @@ defineExpose({ onClear })
129
129
  <span
130
130
  v-for="item in selectedItems"
131
131
  :key="`measure-${item.id}`"
132
- class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-gray-50 px-2 py-0.5 text-body-sm"
132
+ class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-muted px-2 py-0.5 text-body-sm"
133
133
  >
134
134
  <span>{{ item.name }}</span>
135
135
  <span
@@ -144,13 +144,13 @@ defineExpose({ onClear })
144
144
  </span>
145
145
  </span>
146
146
  </template>
147
- <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
147
+ <span v-else class="text-secondary">&#8203;</span>
148
148
  </span>
149
149
 
150
150
  <button
151
151
  v-if="clearable && hasValue && !disabled"
152
152
  type="button"
153
- class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
153
+ class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
154
154
  @click.stop="onClear"
155
155
  >
156
156
  <a-icon-x-mark class="!m-0 size-3.5" />
@@ -160,7 +160,7 @@ defineExpose({ onClear })
160
160
  :class="{ 'rotate-180': isOpen }"
161
161
  class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
162
162
  >
163
- <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
163
+ <a-icon-chevron-down class="!m-0 size-4 text-icon-disabled" />
164
164
  </span>
165
165
  </button>
166
166
  </div>
@@ -179,11 +179,7 @@ defineExpose({ onClear })
179
179
  }
180
180
 
181
181
  .select-row-v2__chip:hover {
182
- background-color: theme('colors.blue.100');
183
- }
184
-
185
- :is(.dark) .select-row-v2__chip:hover {
186
- background-color: rgb(6 141 255 / 0.25);
182
+ background-color: var(--background-color-blue-subtle);
187
183
  }
188
184
 
189
185
  .select-row-v2__label {
package/components/elements/a-select-row/index.vue CHANGED
@@ -33,7 +33,7 @@ const items = computed(() => {
33
33
  })
34
34
  const emits = defineEmits<Emits>()
35
35
  const disabledStyles =
36
- 'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
36
+ 'disabled:pointer-events-none disabled:opacity-40 disabled:bg-action-disabled disabled:text-action-disabled-fg'
37
37
  const isOpen = defineModel<boolean>('isOpen')
38
38
 
39
39
  const minWidthOfChip = 100
@@ -78,13 +78,14 @@ const onClear = () => {
78
78
  </script>
79
79
  <template>
80
80
  <div>
81
+ <!-- осознанно константная тень фокуса #1B64B3: документированное исключение -->
81
82
  <button
82
83
  ref="buttonElement"
83
- class="hover:border-blue focus-visible:outline-blue
84
+ class="hover:border-brand focus-visible:outline-(--border-color-focus)
84
85
  relative flex w-full items-center justify-between gap-2 rounded-sm
85
- border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
86
- focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
87
- dark:hover:border-blue-700"
86
+ border border-solid border-default bg-muted min-h-10 text-secondary text-body-md px-4 py-1.5
87
+ focus-visible:shadow-[0_0_0_4px#1B64B3]
88
+ "
88
89
  :class="twMerge(disabledStyles, props.btnClass)"
89
90
  :disabled="disabled"
90
91
  @click="isOpen = !isOpen"
@@ -98,21 +99,21 @@ const onClear = () => {
98
99
  v-for="item in visibleItems"
99
100
  :key="item.id"
100
101
  size="md"
101
- class="text-deepblue-900 dark:text-gray-200 border-gray-500"
102
+ class="text-primary border-strong"
102
103
  :style="{ 'max-width': maxWidthOfChip + 'px' }"
103
104
  >
104
105
  <span class="truncate">{{ item.name }}</span>
105
106
  <button
106
107
  v-if="deletable"
107
- class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
108
+ class="rounded-full bg-badge"
108
109
  @click.stop="deleteItem(item)"
109
110
  >
110
- <a-icon-x-mark class="size-3 dark:text-gray-300" />
111
+ <a-icon-x-mark class="size-3" />
111
112
  </button>
112
113
  </a-chips>
113
114
  <a-chips
114
115
  v-if="countOfUnvisibleItems"
115
- class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
116
+ class="whitespace-nowrap border-brand text-brand"
116
117
  size="md"
117
118
  >
118
119
  + {{ countOfUnvisibleItems }}
@@ -124,13 +125,13 @@ const onClear = () => {
124
125
  </div>
125
126
  <!-- <button-->
126
127
  <!-- v-if="visibleItems && countOfVisibleItems && clearable"-->
127
- <!-- class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10"-->
128
+ <!-- class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-badge"-->
128
129
  <!-- @click.stop="onClear"-->
129
130
  <!-- >-->
130
- <!-- <a-icon-chevron-down class="!m-0 text-base dark:text-gray-300"/>-->
131
+ <!-- <a-icon-chevron-down class="!m-0 text-base"/>-->
131
132
  <!-- </button>-->
132
133
  <a-icon-chevron-down
133
- class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
134
+ class="!m-0 min-w-4 transition-all text-primary"
134
135
  :class="{ '-rotate-90': !isOpen }"
135
136
  />
136
137
  </button>
package/components/elements/accordion/AAccordion.vue CHANGED
@@ -156,10 +156,10 @@ defineExpose({
156
156
  :close="close"
157
157
  >
158
158
  <button :class="buttonClass">
159
- <span :class="size === 'md' ? 'text-sm': 'text-base'">{{ label }}</span>
159
+ <span :class="size === 'md' ? 'text-body-md-strong': 'text-body-lg-strong'">{{ label }}</span>
160
160
  <slot name="additional"/>
161
161
  <a-icon-chevron-down
162
- :arrow-attrs="{ class: 'stroke-deepblue-900' }"
162
+ :arrow-attrs="{ class: 'stroke-icon-strong' }"
163
163
  :class="[{ 'rotate-180': open }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
164
164
  :data-test-id="iconChevronTestId"
165
165
  />
package/components/elements/accordion/AAccordionGroup/AAccordionGroup.vue CHANGED
@@ -105,7 +105,7 @@ function onLeave(_el: Element, done: () => void) {
105
105
  >
106
106
  <span>{{ item.label }}</span>
107
107
  <a-icon-chevron-down
108
- :arrow-attrs="{class: 'stroke-deepblue-900'}"
108
+ :arrow-attrs="{class: 'stroke-icon-strong'}"
109
109
  width="16px"
110
110
  height="16px"
111
111
  :class="[{'rotate-180': !open, }, ui.item.icon ]"
package/components/elements/accordion/AAccordionGroup/ui.config.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  export default {
2
2
  wrapper: 'w-full flex flex-col',
3
- 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",
3
+ ring: "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-(--background-color-main)",
4
4
  item: {
5
5
  size: {
6
6
  md: 'text-sm ',
7
7
  lg: 'text-xl'
8
8
  },
9
9
  color: {
10
- gray: 'text-deepblue-900 dark:text-gray-200',
10
+ gray: 'text-primary',
11
11
  },
12
12
  icon: 'ms-auto transform transition-transform duration-200',
13
- accordion: 'px-4 py-3 rounded bg-white dark:bg-gray-900 transition-colors',
13
+ accordion: 'px-4 py-3 rounded bg-main transition-colors',
14
14
  content: '',
15
- button: 'flex justify-between gap-1 grow w-full items-center text-sm font-semibold text-start'
15
+ button: 'flex justify-between gap-1 grow w-full items-center text-body-md-strong text-start'
16
16
  },
17
17
 
18
18
  transition: {
package/components/elements/accordion/ui.config.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  export default {
2
2
  wrapper: 'w-full flex flex-col',
3
- 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",
3
+ ring: "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-(--background-color-main)",
4
4
  item: {
5
5
  size: {
6
6
  md: 'text-md ',
7
7
  lg: 'text-xl'
8
8
  },
9
9
  color: {
10
- gray: 'text-deepblue-900 dark:text-gray-200',
10
+ gray: 'text-primary',
11
11
  },
12
12
  icon: 'ms-auto transform transition-transform duration-200',
13
- accordion: 'p-4 rounded bg-white dark:bg-gray-900 transition-colors',
13
+ accordion: 'p-4 rounded bg-main transition-colors',
14
14
  content: '',
15
- button: 'flex justify-between gap-1 grow w-full items-center text-sm font-semibold text-start'
15
+ button: 'flex justify-between gap-1 grow w-full items-center text-body-md-strong text-start'
16
16
  },
17
17
 
18
18
  transition: {
package/components/elements/alert/AAlert.vue CHANGED
@@ -21,11 +21,11 @@ const sizeOptions = {
21
21
  }
22
22
 
23
23
  const colorOptions = {
24
- blue: 'bg-[#EFF6FF] border-[#068DFF] text-[#068DFF] dark:bg-[#068DFF]/10 dark:border-[#068DFF]/40 dark:text-blue-400',
25
- green: 'bg-[#F0FDF4] border-[#00A63E] text-[#00A63E] dark:bg-[#00A63E]/10 dark:border-[#00A63E]/40 dark:text-green-400',
26
- orange: 'bg-[#FFFBEB] border-[#E17100] text-[#E17100] dark:bg-[#E17100]/10 dark:border-[#E17100]/40 dark:text-orange-400',
27
- red: 'bg-[#FEF2F2] border-[#E7000B] text-[#E7000B] dark:bg-[#E7000B]/10 dark:border-[#E7000B]/40 dark:text-red-400',
28
- deepblue: 'bg-deepblue-100 border-deepblue-900 text-deepblue-900 dark:bg-gray-500/10 dark:border-gray-500/40 dark:text-gray-300',
24
+ blue: 'bg-brand-subtle border-brand text-brand',
25
+ green: 'bg-success-subtle border-success text-success',
26
+ orange: 'bg-warning-subtle border-warning text-warning',
27
+ red: 'bg-danger-subtle border-danger text-danger',
28
+ deepblue: 'border-strong bg-muted text-primary',
29
29
  }
30
30
 
31
31
  const rootClass = computed(() => [colorOptions[props.color], sizeOptions[props.size]])
package/components/elements/bg-block/ABgBlock.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <script setup lang="ts"></script>
2
2
 
3
3
  <template>
4
- <div class="md:rounded-md p-4 bg-white dark:bg-gray-900">
4
+ <div class="md:rounded-md p-4 bg-subtle border border-default">
5
5
  <slot />
6
6
  </div>
7
7
  </template>