{"id":483354,"date":"2026-06-11T14:30:41","date_gmt":"2026-06-11T14:30:41","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=483354"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=483354","title":{"rendered":"\u041d\u0430\u0437\u0430\u0434 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 UI-kit: \u043a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u0436\u0438\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0438"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b8\/d14\/7c1\/1b8d147c121cdb3d4c542b80d84e9325.png\" width=\"1920\" height=\"1080\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1b8\/d14\/7c1\/1b8d147c121cdb3d4c542b80d84e9325.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b8\/d14\/7c1\/1b8d147c121cdb3d4c542b80d84e9325.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>UI-kit, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u0417\u0430 \u043d\u0438\u043c \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0448\u043b\u043e\u0435: \u0441\u0442\u0430\u0440\u044b\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API, \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0440\u0435\u043d\u0434 \u0443\u0436\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443, \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.<\/p>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043c\u0438\u0440, \u044f Senior Vue.js Frontend Developer \u0432 <a href=\"https:\/\/lukit.ru\/\">\u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u00ab\u041b\u0443\u043a\u043e\u043c\u043e\u0440\u044c\u0435\u00bb<\/a>. \u0423\u0436\u0435 \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442 \u044f \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 ERP-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 UI-kit: \u043e\u043a\u043e\u043b\u043e 50 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 Vue 3 \u0438 TypeScript, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0435.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0434\u043b\u044f UI-kit \u0442\u0430\u043a\u043e\u0435 \u00ab\u043d\u0430\u0437\u0430\u0434 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0435\u00bb: \u0432 \u043e\u0434\u043d\u043e\u0439 \u0434\u043e\u043b\u0433\u043e\u0436\u0438\u0432\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0435 <code>sova<\/code>\u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. <\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0438 \u0442\u0438\u043c\u043b\u0438\u0434\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 UI-kit \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0438 \u0434\u0443\u043c\u0430\u044e\u0442, \u043a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0435\u0437 \u043f\u043e\u043b\u043e\u043c\u043a\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439. <strong>\u0412\u043d\u0443\u0442\u0440\u0438 \u2014 \u043a\u043e\u0434, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u0438 \u0447\u0435\u0441\u0442\u043d\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044b \u043f\u043e \u0438\u0442\u043e\u0433\u0430\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438.<\/strong><\/p>\n<hr\/>\n<h2>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h2>\n<p>\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0430 \u0436\u0438\u0432\u0451\u0442 \u0443\u0436\u0435 \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432 \u043d\u0435\u0439 \u043e\u043a\u043e\u043b\u043e \u043f\u044f\u0442\u0438\u0434\u0435\u0441\u044f\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: schema-driven \u0444\u043e\u0440\u043c\u044b, \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0432\u0435\u0440\u043b\u0435\u0438, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u0440\u0435\u0437 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.\u00a0<\/p>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u0432 \u041b\u0443\u043a\u043e\u043c\u043e\u0440\u044c\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0440\u0442\u0430\u043b\u0430, \u0438 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c UI: \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443. <\/p>\n<p>\u0427\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c: \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443 <code>EsmpInput<\/code>, \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 motion. \u041d\u043e \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438\u00a0 \u0431\u0440\u0435\u043d\u0434\u0430 \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u043c SCSS-\u0444\u0430\u0439\u043b\u0430\u043c \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 <code>--button-primary-bg<\/code>. \u0412 \u0442\u043e\u0439 \u0436\u0435 \u0432\u0435\u0442\u043a\u0435 \u043c\u044b \u0437\u0430\u043a\u0440\u044b\u043b\u0438 \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u043e\u043b\u0433\u043e\u0432: \u0442\u0438\u043f\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0443 SVG-\u0438\u043a\u043e\u043d\u043e\u043a, \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e 3-tier \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, Style Dictionary \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u044d\u0442\u043e \u0443\u0436\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435 <code>sova<\/code>.<\/p>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e UI-kit<\/h2>\n<p><code>@esmpfrontend\/ui<\/code> \u2014 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0430. \u042d\u0442\u043e Vue 3, \u043e\u043a\u043e\u043b\u043e 50 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u043a\u0430\u043a npm-\u043f\u0430\u043a\u0435\u0442 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 GitLab Registry \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0451 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e: \u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043e\u0432\u0435\u0440\u043b\u0435\u0438, \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u044f, \u0438\u043a\u043e\u043d\u043a\u0438. \u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u0442\u043e \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a, \u0430 \u0443 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c styleguide-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438.<\/p>\n<p>\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u041f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c: \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u044b \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u043b\u0435\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 <code>&lt;head&gt;<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043c\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0448\u043b\u0430 \u0441 API. \u0421\u0430\u043c UI-kit \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c: \u0431\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0442\u043e\u043a \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0431\u0435\u0437 \u00ab\u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u0445\u00bb \u0441\u0431\u043e\u0440\u043e\u043a. \u0415\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 \u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0438\u043c\u0451\u043d CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>EsmpInput<\/code>, <code>EsmpSelect<\/code>, <code>EsmpSidebar<\/code>, <code>EsmpDatepicker<\/code>, \u0436\u0438\u0432\u0451\u0442 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c props, emits, \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: disabled, readonly, error, loading.\u00a0<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0440\u0435\u043d\u0434, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044e\u0442 \u0441\u0440\u0430\u0437\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<h2>\u0414\u043e \u044d\u0442\u043e\u0433\u043e: \u043e\u0434\u043d\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 Tier \u0431\u0435\u0437 \u0447\u0451\u0442\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b<\/h2>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c SCSS \u0436\u0438\u043b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">\/* src\/styles\/variables\/_colors.scss *\/$color-accent-primary: #0055ff;$color-accent-primary-hover: #0044cc;$color-text-on-accent: #ffffff;$color-bg-surface: #ffffff;$color-border-default: #d1d5db;\/\/ ...\/* src\/styles\/_root.scss *\/:root {  --esmp-ui-button-view-primary-background-color: #{variables.$color-accent-primary};  --esmp-ui-button-view-primary-background-color-hover: #{variables.$color-accent-primary-hover};  --esmp-ui-button-view-primary-text-color: #{variables.$color-text-on-accent};  --esmp-ui-input-background-color: #{variables.$color-bg-surface};  --esmp-ui-input-border-color: #{variables.$color-border-default};  --esmp-ui-input-border-color-active: #{variables.$color-accent-primary};  --esmp-ui-sidebar-background-color: #{variables.$color-bg-surface};  \/* ... \u0435\u0449\u0451 \u043e\u043a\u043e\u043b\u043e \u0434\u0432\u0443\u0445\u0441\u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 *\/}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043b\u0435\u0436\u0430\u043b\u0438 \u0432 SCSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0430 \u0432 <code>:root <\/code>\u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u00ab\u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443\u00bb. \u0422\u0430\u043a \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u043e\u0434 \u0441\u0435\u0431\u044f. \u041a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0441\u0434\u0432\u0438\u0433\u0430\u043b \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043d\u0430 \u043f\u043e\u043b\u0442\u043e\u043d\u0430, \u0432\u0441\u0451 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u043e\u0441\u044c\u00a0\u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430: \u043c\u044b \u043c\u0435\u043d\u044f\u043b\u0438 SCSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0438 \u043e\u043d\u0430 \u043f\u0440\u043e\u0440\u0430\u0441\u0442\u0430\u043b\u0430 \u0432 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u0431\u044b\u043b \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0436\u0438\u0432\u0443\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0432 \u0434\u0443\u0431\u043b\u044f\u0445 hex-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435. \u041f\u043e \u0441\u0443\u0442\u0438 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0431\u044b\u043b \u043e\u0434\u0438\u043d: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a SCSS-\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c. \u0427\u0451\u0442\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u00ab\u043f\u0430\u043b\u0438\u0442\u0440\u0430 \/ \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00bb \u043d\u0435 \u0431\u044b\u043b\u043e. <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u043e\u0432\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u043e\u043b\u044c \u00ab\u0444\u043e\u043d \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043d\u043e\u043f\u043a\u0435, \u0431\u0435\u0439\u0434\u0436\u0435 \u0438 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u2014 \u0435\u0451 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c, \u0430 \u043b\u044e\u0431\u043e\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u0442\u0440\u0438-\u0447\u0435\u0442\u044b\u0440\u0435 \u043c\u0435\u0441\u0442\u0430.<\/p>\n<p>\u0421 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u044b\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 <code>rgba(0, 85, 255, 0.1)<\/code> \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u2014 \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438: <code>--accent-10<\/code>, <code>--accent-20<\/code> \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u00a0\u0412\u0442\u043e\u0440\u043e\u0439 \u2014 \u0432\u0437\u044f\u0442\u044c hex \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0432 JS, \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 rgb-\u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c alpha. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041e\u043d \u0440\u0430\u0431\u043e\u0447\u0438\u0439, \u043d\u043e \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0445\u0430\u043a, \u0447\u0435\u043c \u043d\u0430 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0422\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 \u0435\u0451 \u043d\u0435\u0442 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441, \u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u0435\u0451 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 Tier 2. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c\u00a0 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 <code>data-theme=\"dark\".<\/code> \u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043e\u043d\u0430 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u043a\u0430\u043a \u00ab\u0431\u043e\u043d\u0443\u0441 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb \u0432\u043e\u0448\u043b\u0430 \u0432 \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443.<\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0442\u043e\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0432\u043e\u043f\u0440\u043e\u0441\u044b. <code>dist\/ui.es.js<\/code> \u0432\u0435\u0441\u0438\u043b \u043e\u043a\u043e\u043b\u043e 940 KB raw. \u0412\u043d\u0443\u0442\u0440\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u044b\u043b\u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b <code>lodash<\/code>, <code>dayjs<\/code>, <code>mitt<\/code>, <code>@popperjs\/core<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0432 <code>node_modules<\/code> \u043c\u043e\u0433\u043b\u0438 \u043b\u0435\u0436\u0430\u0442\u044c \u0434\u0432\u0435 \u043a\u043e\u043f\u0438\u0438 <code>lodash<\/code>: \u043d\u0430\u0448\u0430 \u0438 \u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f.<\/p>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0447\u0435\u0440\u0435\u0437 <code>vite-plugin-svg-icons<\/code>. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b \u0441\u0431\u043e\u0440\u0449\u0438\u043a: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441 SVG \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u043b \u043f\u043b\u0430\u0433\u0438\u043d \u0432 <code>vite.config.ts<\/code>. \u042d\u0442\u043e \u043f\u044f\u0442\u044c-\u0441\u0435\u043c\u044c \u0441\u0442\u0440\u043e\u043a boilerplate \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043b\u044e\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0438\u043a\u043e\u043d\u043e\u043a \u0443 \u0441\u0435\u0431\u044f.<\/p>\n<p>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0430 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438. \u041e\u043f\u0435\u0447\u0430\u0442\u0430\u043b\u0441\u044f \u0432 <code>bgSurfac1<\/code> \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0448\u044c runtime warning, \u0430 IDE \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0451\u0442.<\/p>\n<p>\u041f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438\u0441\u044c \u0438 \u0440\u0430\u043d\u044c\u0448\u0435. \u041d\u043e \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u043e\u0442\u0434\u0435\u043b \u043f\u0440\u0438\u0448\u0451\u043b \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u043e\u043d\u0438 \u0441\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c \u0432 \u043e\u0434\u043d\u0443 \u043e\u0431\u0449\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e: \u0442\u0440\u043e\u0433\u0430\u0435\u0448\u044c \u0447\u0442\u043e-\u0442\u043e \u043e\u0434\u043d\u043e \u2014 \u043f\u043e\u0447\u0442\u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0437\u0430\u0446\u0435\u043f\u0438\u0448\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.<\/p>\n<h2>\u0420\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0433\u043e UI<\/h2>\n<p>\u0412 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u0430\u043b\u0438\u0442\u0440\u0430, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u044f, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u0438. \u0423 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u043d\u0430\u0448\u0430 \u0437\u043e\u043d\u0430 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0412 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c \u0442\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043a\u0430\u043a \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u0431\u0440\u0435\u043d\u0434\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u0442\u043e\u043d\u0430.<\/p>\n<p>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0436\u0451\u0441\u0442\u043a\u0438\u043c\u0438.<\/p>\n<p>API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c: props, emits, slots, \u0438\u043c\u0435\u043d\u0430 CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0435\u0437 breaking changes. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0432\u0435\u0440\u0445 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e <code>yarn upgrade<\/code>. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u0432\u043e\u0438 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b \u0438 \u0434\u0435\u0434\u043b\u0430\u0439\u043d\u044b, \u0438 \u043e\u043d\u0438 \u043d\u0435 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430 \u043d\u0430\u0448 \u0442\u0435\u043c\u043f: \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u043e \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u0438\u043e\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u0438 \u043d\u0430\u043c, \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u2014 \u0445\u043e\u0442\u044f \u0431\u044b \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0435\u0445\u0430\u043b\u043e.<\/p>\n<p>\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c.<\/p>\n<p>\u0422\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u0412 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u2014 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0438 \u0442\u0451\u043c\u043d\u044b\u0439. \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043d\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043a <code>data-theme=\"dark\".<\/code> \u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 \u043f\u043e\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0442\u0435\u043c\u0430, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u0435\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0437\u0430\u0434\u0430\u0447\u0430 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0434\u043d\u043e\u0439 \u0444\u0440\u0430\u0437\u043e\u0439: \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0430\u0437\u044b. \u0427\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c: \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443 EsmpInput, \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 motion.\u00a0\u041d\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0438 spacing-\u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u0442\u044c \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0436\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043f\u043e \u0441\u043e\u0440\u043e\u043a\u0430 SCSS-\u0444\u0430\u0439\u043b\u0430\u043c.<\/p>\n<p>\u0412 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u0431\u044b\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u00ab\u043a\u0440\u0430\u0441\u043e\u0442\u043e\u0439\u00bb \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u2014 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h2>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438\u0441\u044c<\/h2>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043a\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 \u0442\u0440\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<h2>Vanilla CSS variables \u0431\u0435\u0437 build-tool<\/h2>\n<p>\u0421\u0430\u043c\u043e\u0435 \u043b\u0451\u0433\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0430\u0432\u0438\u0442\u044c SCSS-\u0444\u0430\u0439\u043b\u044b \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u0441\u043b\u0430\u043b hex \u2014 \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 hex. \u0422\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0447\u0435\u0440\u0435\u0437 <code>[data-theme=\"dark\"] { ... } <\/code>\u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>\u041f\u043b\u044e\u0441\u044b \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b: \u043d\u043e\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c, \u043b\u044e\u0431\u043e\u0439 \u0434\u0436\u0443\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u041c\u0438\u043d\u0443\u0441\u044b \u2014 \u0442\u0435 \u0436\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0443\u0436\u0435 \u0436\u0438\u043b\u0438. \u0415\u0434\u0438\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u0440\u0430\u0432\u0434\u044b \u043d\u0435\u0442, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0441 Figma \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0443\u0447\u043d\u043e\u0439 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442. \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043b\u0438\u0431\u043e JS-\u0445\u0430\u043a\u043e\u043c, \u043b\u0438\u0431\u043e \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c alpha. \u041b\u044e\u0431\u0430\u044f \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430 \u0432 \u0438\u043c\u0435\u043d\u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0434\u0435.\u00a0<\/p>\n<p>\u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u0431\u0440\u043e\u0441\u0438\u043b\u0438: \u043e\u043d \u043d\u0435 \u0440\u0435\u0448\u0430\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h2>Tailwind \u043a\u0430\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b<\/h2>\n<p>\u0421 Tailwind \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435. \u0412 Tailwind v4 (\u044f\u043d\u0432\u0430\u0440\u044c 2025) <a href=\"https:\/\/tailwindcss.com\/blog\/tailwindcss-v4\">\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0430 \u0438\u0437 tailwind.config.js \u0432 CSS<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0447\u0435\u0440\u0435\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>@theme<\/code>:<\/p>\n<pre><code class=\"javascript\">@import \"tailwindcss\";@theme {  --color-accent-500: #0055ff;  --color-accent-600: #0044cc;  --color-fg-default: #0a0e1a;  --spacing-md: 16px;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0437 \u044d\u0442\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Tailwind \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b: <code>bg-accent-500<\/code>, <code>text-fg-default<\/code>, <code>p-md<\/code>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.\u00a0<\/p>\n<p>\u0418\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a \u0442\u043e\u043c\u0443, \u043a \u0447\u0435\u043c\u0443 \u043c\u044b \u0438 \u0442\u0430\u043a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u0438: \u043e\u0434\u0438\u043d \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0432 CSS \u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0433\u043e JS-\u043a\u043e\u043d\u0444\u0438\u0433\u0430.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e UI-kit Tailwind \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b. \u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 SCSS-\u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0430 Tailwind \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u0435\u0439\u0441 \u00ab\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u0441\u0442\u0438\u043b\u0435\u043c\u00bb. \u041e\u043d \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d \u043d\u0430 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u044f\u043c\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.\u00a0<\/p>\n<p>\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0442\u043e\u0436\u0435 \u043b\u043e\u0436\u0438\u043b\u0430\u0441\u044c \u043f\u043b\u043e\u0445\u043e. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 <code>@theme<\/code> \u0443\u0436\u0435 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 CSS, \u0438 \u00ab\u043f\u0435\u0440\u0435\u0437\u0430\u043b\u0438\u0442\u044c\u00bb \u0438\u0445 \u0441 API \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p>Tailwind \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f. Tailwind preset \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e UI-kit \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u043d\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430.<\/p>\n<h2>CSS-in-JS: Vanilla Extract, Stitches, styled-components<\/h2>\n<p>\u0418\u0434\u0435\u044f \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f: \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0440\u044f\u043c\u043e \u0432 TypeScript. IDE \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043c\u0435\u043d\u0430, \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043b\u043e\u0432\u044f\u0442\u0441\u044f \u0435\u0449\u0451 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438.<\/p>\n<p>\u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432\u0438\u0434\u043d\u044b \u0431\u044b\u0441\u0442\u0440\u043e. Vue 3 + CSS-in-JS\u00a0 \u2014 \u043d\u0435 \u0441\u0430\u043c\u0430\u044f \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430: \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043f\u043e\u0434 React, \u0430 \u0434\u043b\u044f Vue \u043d\u0443\u0436\u043d\u044b \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430. \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0436\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0437\u0438\u044f \u2014 <a href=\"https:\/\/blog.logrocket.com\/compiled-a-css-in-js-library-without-the-runtime-cost\/\">runtime cost<\/a>. <code>styled-components<\/code> \u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u00a0 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 CSS \u043d\u0430 \u043b\u0435\u0442\u0443 \u0438 \u0438\u043d\u0436\u0435\u043a\u0442\u044f\u0442 <code>&lt;style&gt;<\/code> \u0432 <code>&lt;head&gt;<\/code> \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 props \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.\u00a0<\/p>\n<p>\u0421\u0430\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u2014 \u043e\u043a\u043e\u043b\u043e 12 KB gzip, \u043d\u043e \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 JS-\u0434\u0432\u0438\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0438 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 FCP \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u0445. \u0414\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043f\u044f\u0442\u044c\u0434\u0435\u0441\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u043b\u0438\u0448\u043d\u0438\u0439 JS-\u043f\u0430\u0440\u0441\u0438\u043d\u0433 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435.<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435: \u043d\u0430\u0448\u0430 \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e runtime \u0447\u0435\u0440\u0435\u0437 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u041f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 <code>&lt;head&gt;<\/code>, \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 JS-\u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0430. \u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 CSS-in-JS \u043e\u0437\u043d\u0430\u0447\u0430\u043b \u0431\u044b\u00a0 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043d\u0443\u043b\u044f. \u042d\u0442\u043e \u043f\u0440\u044f\u043c\u043e\u0435 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044e \u00abAPI \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f\u00bb.<\/p>\n<h2>\u0427\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u043b\u0438<\/h2>\n<p>\u041c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0430 \u0442\u043e\u0439 \u0436\u0435 \u0431\u0430\u0437\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u043e \u0441 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0438 \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439. \u0422\u0440\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u0442 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0434\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0436\u0451\u0441\u0442\u043a\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c \u0441\u0441\u044b\u043b\u043e\u043a.\u00a0<\/p>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u2014 JSON \u0438\u0437 Tokens Studio \u0432 Figma. Style Dictionary \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 build-tool: \u043e\u0434\u0438\u043d build-\u0448\u0430\u0433 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 SCSS, JSON-\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442, Tailwind preset \u0434\u043b\u044f v3-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, CSS-\u0444\u0430\u0439\u043b \u0441 @theme-\u0431\u043b\u043e\u043a\u043e\u043c \u0434\u043b\u044f v4-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 TypeScript-\u0442\u0438\u043f\u044b. <code>Channel-syntax -rgb<\/code> \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0431\u0435\u0437 JS-\u0445\u0430\u043a\u0430.<\/p>\n<p>Build-step \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u043e\u043d \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u044e \u0440\u0443\u0447\u043d\u0443\u044e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u0435\u0439\u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u0439 trade-off.<\/p>\n<h2>3-tier \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430<\/h2>\n<p>\u0418\u0434\u0435\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u0442\u0440\u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u043e\u0434\u043d\u043e \u0436\u0451\u0441\u0442\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0443\u0440\u043e\u0432\u043d\u044f N \u043c\u043e\u0436\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u2264 N. \u042d\u0442\u043e \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c, \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<h2>Tier 1: \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b<\/h2>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u2014 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0418\u043c\u0435\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a:\u00a0 <code>--esmp-ui-accent-500<\/code>, <code>--esmp-ui-neutral-100<\/code>. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e: \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u0440\u0443\u0442\u0438\u043d\u0430.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 opaque-\u0446\u0432\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 -rgb \u0441\u0438\u0431\u043b\u0438\u043d\u0433 \u0441 channel-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">:root {  --esmp-ui-accent-500-rgb: 0 85 255;  --esmp-ui-accent-500: rgb(var(--esmp-ui-accent-500-rgb));  --esmp-ui-neutral-990-rgb: 10 14 26;  --esmp-ui-neutral-990: rgb(var(--esmp-ui-neutral-990-rgb));}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0423 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0443\u0441: \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0432 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u043c hex, \u0430 \u0432 RGB-\u043a\u0430\u043d\u0430\u043b\u0430\u0445. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 #0055ff \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a 0 85 255.\u00a0<\/p>\n<p>\u0412 Tokens Studio \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u043d\u043e \u0432 \u043f\u0430\u043b\u0438\u0442\u0440\u0435 \u0441\u0440\u0430\u0437\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c. \u0423 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u044b\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c #0055ff, \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443\u00a0 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0410 \u0433\u0434\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0439 \u0441\u0438\u043d\u0438\u0439\u00bb. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439: Tier 1 \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437 JSON-\u0444\u0430\u0439\u043b\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432.<\/p>\n<p>\u0417\u0430\u0442\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c CSS, \u0431\u0435\u0437 JS-\u0445\u0430\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">.banner {  background: rgb(var(--esmp-ui-accent-500-rgb) \/ 0.1);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u043e\u0432\u043d\u043e \u044d\u0442\u0443 \u0436\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Tailwind preset \u0434\u043b\u044f alpha-modifier: \u043a\u043b\u0430\u0441\u0441 <code>bg-esmp-accent\/40 <\/code>\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043a\u0430\u043a <code>rgb(var(--esmp-ui-accent-500-rgb) \/ 0.4)<\/code>. \u0422\u043e, \u0447\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e <code>color2k<\/code> \u0438\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e JS-\u0445\u0435\u043b\u043f\u0435\u0440\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0436\u0438\u0432\u0451\u0442 \u0432 CSS-\u0434\u0432\u0438\u0436\u043a\u0435.<\/p>\n<h2>Tier 2: \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u043b\u0438<\/h2>\n<p>Tier 2 \u2014 \u044d\u0442\u043e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442. \u0418\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u043f\u0440\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0418\u043c\u0435\u043d\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0440\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0430 \u043d\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">:root {  --esmp-ui-fg-default: var(--esmp-ui-neutral-990);  --esmp-ui-fg-default-rgb: var(--esmp-ui-neutral-990-rgb);  --esmp-ui-bg-surface0: var(--esmp-ui-neutral-50);  --esmp-ui-bg-surface1: var(--esmp-ui-neutral-100);  --esmp-ui-interactive-accent: var(--esmp-ui-accent-500);  --esmp-ui-interactive-accent-hover: var(--esmp-ui-accent-600);  --esmp-ui-interactive-on-accent: var(--esmp-ui-neutral-50);  --esmp-ui-accent-container-default:    rgb(var(--esmp-ui-accent-500-rgb) \/ 0.1);  --esmp-ui-border-soft: var(--esmp-ui-neutral-200);}[data-theme=\"dark\"] {  --esmp-ui-fg-default: var(--esmp-ui-neutral-dark-50);  --esmp-ui-bg-surface0: var(--esmp-ui-neutral-dark-900);  --esmp-ui-interactive-accent: var(--esmp-ui-accent-200);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0436\u0438\u0432\u0451\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0431\u043b\u043e\u043a\u0435 Tier 2 \u043f\u043e\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c <code>[data-theme=\"dark\"]<\/code>. Tier 1 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u044f\u0437\u0438 Tier 2 \u2192 Tier 1.\u00a0<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u043d\u0435\u0442. \u041d\u0430\u0431\u043e\u0440 \u0440\u043e\u043b\u0435\u0439 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d: \u043a\u0430\u0436\u0434\u0430\u044f \u0440\u043e\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0438\u043b\u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b Tier 1 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 data-theme.\u00a0<\/p>\n<p>\u0412 Sova-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u0431\u044b\u043b\u043e \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432: default\/light \u0438 default\/dark. \u0412 esmp-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435.<\/p>\n<p>\u0418\u043c\u0435\u043d\u0430 \u0440\u043e\u043b\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>fg-default<\/code>, <code>bg-surface1<\/code>, <code>interactive-accent<\/code>, <code>border-soft<\/code>, \u0436\u0438\u0432\u0443\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041a\u043d\u043e\u043f\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>--esmp-ui-interactive-accent<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043b\u044f \u043d\u0435\u0451 \u044d\u0442\u043e \u00ab\u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u043e\u043d\u00bb. \u0415\u0441\u043b\u0438 \u043f\u043e\u0437\u0436\u0435\u00a0 \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0444\u043e\u043d \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0438\u043b\u0438 \u0431\u0435\u0439\u0434\u0436\u0443, \u043c\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0440\u043e\u043b\u044c, \u0430 \u043d\u0435 \u0437\u0430\u0432\u043e\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435,\u00a0 \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <code>dist\/tokens.manifest.json<\/code>:<\/p>\n<pre><code class=\"javascript\">{  \"version\": \"4.0.0\",  \"tokens\": [    {      \"name\": \"fgDefault\",      \"cssVar\": \"--esmp-ui-fg-default\",      \"type\": \"color\",      \"customizable\": true,      \"defaultValue\": \"#0a0e1a\",      \"description\": \"Primary foreground color\"    },    {      \"name\": \"interactiveAccent\",      \"cssVar\": \"--esmp-ui-interactive-accent\",      \"type\": \"color\",      \"customizable\": true,      \"defaultValue\": \"#0055ff\"    }  ]}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0434\u043c\u0438\u043d\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u043c\u044b \u043f\u043e\u0434 \u0431\u0440\u0435\u043d\u0434, \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 JSON \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 UI: \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u043b\u0435\u0439 \u0438 \u043f\u0440\u0435\u0432\u044c\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0442\u0435\u043c\u044b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439 \u00ab\u0438\u043c\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00bb \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 <code>&lt;head&gt;<\/code> \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0443\u0442\u0438\u043b\u0438\u0442\u0443 <code>$EsmpTheming<\/code>.\u00a0<\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445\u00a0 \u00ab\u043a\u0440\u0443\u0442\u0438\u043b\u043e\u043a\u00bb \u0440\u0443\u043a\u0430\u043c\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043c\u0430\u0448\u0438\u043d\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442.<\/p>\n<h2>Tier 3: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0430\u043b\u0438\u0430\u0441\u044b<\/h2>\n<p>\u0421\u0442\u0430\u0440\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u0432\u0438\u0434\u0430 <code>--esmp-ui-button-view-primary-background-color<\/code> \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0438\u0441\u044c. \u041e\u043d\u0438 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a legacy-\u0430\u043b\u0438\u0430\u0441\u044b:<\/p>\n<pre><code class=\"javascript\">:root {  --esmp-ui-button-view-primary-background-color:    var(--esmp-ui-interactive-accent);  --esmp-ui-button-view-primary-background-color-hover:    var(--esmp-ui-interactive-accent-hover);  --esmp-ui-input-background-color:    var(--esmp-ui-bg-surface0);  --esmp-ui-sidebar-background-color:    var(--esmp-ui-bg-surface1);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0430\u043a \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043e\u043f\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u044d\u0442\u0438 \u0438\u043c\u0435\u043d\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 Tier 3 \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u0441\u0442\u0430\u0439\u043b\u0433\u0430\u0439\u0434\u043e\u043c: \u0432\u0441\u0451 \u043d\u043e\u0432\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0438\u0434\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 Tier 2 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e.<\/p>\n<p>\u0412 \u0440\u0435\u0435\u0441\u0442\u0440\u0435 <code>src\/tokens\/deprecations.json<\/code> \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0438\u043c\u0451\u043d \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u044b \u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>removalVersion: \"5.0\"<\/code>. \u0412 dev-\u0441\u0431\u043e\u0440\u043a\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u0440\u0443\u0435\u0442 <code>console.warn<\/code> \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a deprecated-\u0438\u043c\u0435\u043d\u0438 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0437\u0436\u0435 \u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0440\u0435\u043b\u0438\u0437\u0435.\u00a0<\/p>\n<h2>\u0416\u0451\u0441\u0442\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u0441\u044b\u043b\u043e\u043a<\/h2>\n<p>Tier N \u043c\u043e\u0436\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 Tier \u2264 N. \u042d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u043b\u044e\u0431\u044b\u0445 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0438\u043c\u0451\u043d. \u041e\u043d\u043e \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c, \u0433\u0434\u0435 \u0436\u0438\u0432\u0451\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b, \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433. \u0415\u0441\u043b\u0438 \u0437\u0430\u0432\u0442\u0440\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0437\u0430\u0445\u043e\u0442\u044f\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c <code>accent-500 \u0432 brand-base<\/code>, \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u0435\u0434\u0451\u0442\u0441\u044f \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u043c\u0435\u0441\u0442\u0443 \u0432 Tier 1 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u0435\u0439.<\/p>\n<p>\u0418 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043f\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0430 Tier 2; \u043f\u0440\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f Tier 1 (\u043f\u0430\u043b\u0438\u0442\u0440\u0430) \u0438 \u0441\u0432\u044f\u0437\u0438 Tier 1 \u2192 Tier 2. \u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0436\u043d\u0438\u043c.<\/p>\n<h2>\u041e\u0442 Figma \u0434\u043e \u043f\u0430\u043a\u0435\u0442\u0430: pipeline<\/h2>\n<p>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u2014 JSON-\u0444\u0430\u0439\u043b \u0438\u0437 <a href=\"https:\/\/docs.tokens.studio\/\">Tokens Studio for Figma<\/a>. \u041f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 Figma \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d JSON. \u0424\u0430\u0439\u043b \u043b\u0435\u0436\u0438\u0442 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 <code>src\/tokens\/source\/sova-tokens.json<\/code>.\u00a0<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0435\u0442\u0430:\u00a0<\/p>\n<p><code>default\/base<\/code> \u2014 \u043f\u0430\u043b\u0438\u0442\u0440\u044b accent, neutral, success, warning, error, info \u043f\u043e 17 \u0441\u0442\u0443\u043f\u0435\u043d\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 motion \u0438 spacing primitives;\u00a0<\/p>\n<p><code>default\/alias<\/code> \u2014 composite typography, spacing scale, z-index;<\/p>\n<p><code>default\/light<\/code> \u0438 <code>default\/dark<\/code> \u2014 \u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b.\u00a0<\/p>\n<p>\u0417\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e JSON \u0432 \u043a\u043e\u0434 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 <a href=\"https:\/\/amzn.github.io\/style-dictionary\/\">Style Dictionary<\/a> \u2014 open-source \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 Amazon \u0434\u043b\u044f \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0445\u00a0 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u0418\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043e\u043d\u0430 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 JS-\u043e\u0431\u044a\u0435\u043a\u0442, \u043d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u0448 \u043a\u043e\u043d\u0444\u0438\u0433 (<code>build\/style-dictionary.config.mjs<\/code>, \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442):<\/p>\n<pre><code class=\"javascript\">import StyleDictionary from 'style-dictionary';import { register } from '@tokens-studio\/sd-transforms';register(StyleDictionary);StyleDictionary.registerFormat({  name: 'scss\/primitives-channel',  format: ({ dictionary }) =&gt; {    const colors = dictionary.allTokens      .filter(t =&gt; t.$type === 'color' &amp;&amp; t.path[0] === 'base')      .map(t =&gt; {        const { r, g, b } = parseHex(t.$value);        return `  --esmp-ui-${kebab(t.path)}-rgb: ${r} ${g} ${b};\\n` +               `  --esmp-ui-${kebab(t.path)}: rgb(var(--esmp-ui-${kebab(t.path)}-rgb));`;      })      .join('\\n');    return `:root {\\n${colors}\\n}\\n`;  },});StyleDictionary.registerFormat({  name: 'json\/tokens-manifest',  format: ({ dictionary }) =&gt; JSON.stringify({    version: pkg.version,    tokens: dictionary.allTokens      .filter(t =&gt; t.path[0] === 'light' &amp;&amp; t.customizable !== false)      .map(t =&gt; ({        name: camelCase(t.path.slice(1)),        cssVar: `--esmp-ui-${kebab(t.path.slice(1))}`,        type: t.$type,        customizable: true,        defaultValue: t.$value,        description: t.$description ?? '',      })),  }, null, 2),});\/\/ ...\u0435\u0449\u0451 \u0444\u043e\u0440\u043c\u0430\u0442\u044b: tailwind preset, tailwind v4 theme.css, theming-tokens.d.ts<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/github.com\/tokens-studio\/sd-transforms\">@tokens-studio\/sd-transforms<\/a> \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c Tokens Studio-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438: \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b <code>lighten<\/code>, <code>darken<\/code>, <code>mix<\/code>, <code>alpha<\/code> (\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 color spaces: <code>srgb<\/code>, <code>hsl<\/code>, <code>lch<\/code>, <code>p3<\/code>), references \u0432\u0438\u0434\u0430 <code>{accent.500}<\/code>, composite-\u0442\u043e\u043a\u0435\u043d\u044b (\u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u044f, \u0442\u0435\u043d\u0438), \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0435\u0434\u0438\u043d\u0438\u0446. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e Style Dictionary \u0432\u0438\u0434\u0438\u0442 \u0441\u044b\u0440\u043e\u0439 JSON Tokens Studio \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0418\u0437 \u043e\u0434\u043d\u043e\u0433\u043e JSON-\u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 <code>yarn build:tokens<\/code> \u0440\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u043c\u044c \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432: <code>primitives.generated.scss<\/code><em> (Tier 1, channel-syntax), <\/em><code>typography.generated.scss<\/code> (Tier 1 typography), <code>_semantic.generated.scss<\/code> (Tier 2 light + dark), <code>tokens.manifest.json<\/code> \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, <code>tailwind.preset.cjs<\/code> \u0434\u043b\u044f Tailwind v3-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, <code>tailwind.theme.css<\/code> \u0434\u043b\u044f Tailwind v4-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 (\u0441 \u0431\u043b\u043e\u043a\u043e\u043c @theme) \u0438 <code>theming-tokens.generated.d.ts <\/code>\u0441 TypeScript-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c.<\/p>\n<p>\u0426\u0438\u043a\u043b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0441\u0432\u0435\u0436\u0438\u0439 JSON, \u043a\u043b\u0430\u0434\u0451\u043c \u0435\u0433\u043e \u0432 <code>src\/tokens\/source\/sova-tokens.json<\/code>, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c yarn build:tokens, \u0441\u043c\u043e\u0442\u0440\u0438\u043c diff. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c <code>deprecations.json<\/code>. \u041a\u043e\u043c\u043c\u0438\u0442, PR, \u0440\u0435\u0432\u044c\u044e. \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0440\u0443\u0447\u043d\u044b\u0445 \u00ab\u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0438 hex \u0432 SCSS\u00bb, \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0438\u043c\u0451\u043d \u0438\u0437 camelCase \u0432 kebab-case \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0411\u0438\u043b\u0434 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434 <code>yarn build:library<\/code>, \u0432 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u0430\u043a\u0435\u0442\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b.<\/p>\n<h2>\u0427\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u0430 \u0442\u043e\u043a\u0435\u043d\u0430\u0445, \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c \u0431\u044b \u0442\u0443\u0442, \u043d\u043e \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432 \u0448\u0438\u0440\u043e\u043a\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u0430. \u041a \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u0437\u044f\u043b\u0438\u0441\u044c \u0437\u0430 \u0432\u0435\u0442\u043a\u0443 <code>sova<\/code>, \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u0438\u0441\u044c \u0435\u0449\u0451 \u0447\u0435\u0442\u044b\u0440\u0435 \u0434\u043e\u043b\u0433\u0430, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0432 \u043a\u0432\u0430\u0440\u0442\u0430\u043b \u043f\u0440\u043e\u0441\u0438\u043b\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0443. \u0420\u0430\u0437 \u0442\u043e\u043a\u0435\u043d\u044b \u043c\u0435\u043d\u044f\u043b\u0438 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c\u0438, \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0442\u043e\u0447\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u0432 \u0442\u043e\u0439 \u0436\u0435 \u0432\u0435\u0442\u043a\u0435.<\/p>\n<h2>\u0422\u0438\u043f\u044b \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/h2>\n<p><code>tokens.manifest.json<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b. \u0414\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u00a0 JSON-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442, \u0430 \u0434\u043b\u044f TypeScript \u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0442\u0438\u043f\u043e\u0432. \u0418\u0437 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 build-\u0448\u0430\u0433\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f <code>theming-tokens.generated.d.ts<\/code>:<\/p>\n<pre><code class=\"javascript\">\/** * AUTO-GENERATED by Style Dictionary from src\/tokens\/source\/sova-tokens.json. * Do not edit directly. Run `yarn build:tokens` after updating the source JSON. *\/export interface EsmpThemingTokens {  \/** --esmp-ui-fg-default *\/  fgDefault: string;  \/** --esmp-ui-fg-secondary *\/  fgSecondary: string;  \/** --esmp-ui-bg-surface0 *\/  bgSurface0: string;  \/** --esmp-ui-bg-surface1 *\/  bgSurface1: string;  \/** --esmp-ui-interactive-accent *\/  interactiveAccent: string;  \/** --esmp-ui-interactive-accent-hover *\/  interactiveAccentHover: string;  \/\/ ... \u0432\u0441\u0435 customizable \u0440\u043e\u043b\u0438 \u0438\u0437 tokens.manifest.json}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h2>\u0423\u0442\u0438\u043b\u0438\u0442\u0430 $EsmpTheming<\/h2>\n<p><code>$EsmpTheming<\/code> \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 <code>app.config.globalProperties<\/code> \u043f\u0440\u0438 <code>app.use(EsmpUI)<\/code>. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0447\u0438\u0442\u0430\u0435\u0442 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 :root \u0447\u0435\u0440\u0435\u0437 <code>document.documentElement.style.setProperty.<\/code>\u00a0<\/p>\n<p>\u0414\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u044d\u0442\u043e \u0431\u044b\u043b <code>Proxy&lt;{}&gt; <\/code>\u0431\u0435\u0437 \u0442\u0438\u043f\u043e\u0432: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0433 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443, \u0430 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0435 \u043e\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0442, \u0443\u0437\u043d\u0430\u0432\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 runtime.<\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u0430 \u0443\u0442\u0438\u043b\u0438\u0442\u0430, \u0435\u0441\u043b\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0432 \u0441\u0442\u0438\u043b\u044f\u0445? \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0442\u0435\u043c\u0430 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441 API \u0432 \u0432\u0438\u0434\u0435 JSON-\u0441\u043b\u043e\u0432\u0430\u0440\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0440\u0435\u043d\u0434\u043e\u0432. \u0422\u0430\u043a\u043e\u0439 JSON \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 JS-\u0443\u0442\u0438\u043b\u0438\u0442\u0443, \u0447\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e CSS-\u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u0435\u0451 \u0432 <code>&lt;head&gt;<\/code>.\u00a0<\/p>\n<p>\u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b, \u0438 \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0438\u043c\u044f, \u0441\u0440\u0430\u0437\u0443 \u0440\u0443\u0433\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>console.warn<\/code>. \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044f \u0432 <code>&lt;head&gt;<\/code> \u0442\u0430\u043a \u043d\u0435 \u0443\u043c\u0435\u0435\u0442.<\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0442\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u0435\u043c\u043e-\u0431\u043b\u043e\u043a\u0435 \u00ab\u0432\u043e\u0442 \u0442\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435\u00bb. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u0435\u043d \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0438\u0437 Vue-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 CSS.<\/p>\n<p>\u0414\u043b\u044f deprecated \u0438\u043c\u0451\u043d \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0442\u043e\u0436\u0435 \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0438\u043c\u0435\u043d\u0438:<\/p>\n<p><code>proxy.$EsmpTheming.buttonViewPrimaryBackgroundColor = '#fff'<\/code><\/p>\n<p>\u0412 dev-\u0441\u0431\u043e\u0440\u043a\u0435 \u043e\u043d\u0430 \u043f\u0438\u0448\u0435\u0442: \u044d\u0442\u043e \u0438\u043c\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 <code>interactiveAccent<\/code>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 <code>$EsmpTheming<\/code> \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u043a\u0430\u043a EsmpThemingClass &amp; EsmpThemingTokens. IDE \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043c\u0435\u043d\u0430 \u043f\u0440\u0438 <code>$EsmpTheming.&lt;TAB&gt;<\/code>, \u0430 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443:<\/p>\n<pre><code class=\"javascript\">proxy.$EsmpTheming.fgDefault = '#ff5722';     \/\/ \u2705 okproxy.$EsmpTheming.bgSurface1 = '#ffffff';    \/\/ \u2705 okproxy.$EsmpTheming.fgDefualt = '#fff';\/\/ \u274c Property 'fgDefualt' does not exist on type 'EsmpThemingTokens'.\/\/    Did you mean 'fgDefault'?proxy.$EsmpTheming.setVarValue('totallyMadeUp', '#fff');\/\/ \u274c Argument of type '\"totallyMadeUp\"' is not assignable\/\/    to parameter of type 'keyof EsmpThemingTokens'.<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>Runtime \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f: \u0442\u043e\u0442 \u0436\u0435 Proxy, \u0442\u043e\u0442 \u0436\u0435 <code>theme.utils.js<\/code>. \u0418\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0435\u0440\u0445.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0443\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 JSON \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0435\u0433\u043e \u043f\u043e\u0447\u0442\u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 TypeScript-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439.<\/p>\n<h2>SVG-\u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0430\u043a\u0435\u0442\u0435<\/h2>\n<p>\u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043e\u043a\u043e\u043b\u043e 816 \u0438\u043a\u043e\u043d\u043e\u043a \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u043d\u0430 \u043f\u043e\u0440\u0442\u0430\u043b\u0435. \u041e\u043d\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043a\u0430\u043a .svg-\u0444\u0430\u0439\u043b\u044b \u0432 <code>src\/icons\/svg\/<\/code>, \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 <code>yarn build:library<\/code> \u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d SVG-sprite.<\/p>\n<p>\u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 XML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:none\"&gt;  &lt;symbol id=\"24-user\" viewBox=\"0 0 24 24\"&gt;    &lt;path d=\"M12 12c2.21 0 4-1.79 4-4...\" \/&gt;  &lt;\/symbol&gt;  &lt;symbol id=\"24-settings\" viewBox=\"0 0 24 24\"&gt;    &lt;path d=\"...\" \/&gt;  &lt;\/symbol&gt;  &lt;!-- ... 814 symbol-\u043e\u0432 --&gt;&lt;\/svg&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>SVG-sprite \u0432\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 JS-\u0431\u0430\u043d\u0434\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>app.use(EsmpUI)<\/code>, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <code>injectSprite(): sprite<\/code>, \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 <code>document.body<\/code>, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u0441\u0435 <code>&lt;EsmpIcon&gt;<\/code> \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 <code>&lt;symbol&gt; <\/code>\u0447\u0435\u0440\u0435\u0437 <code>&lt;use href=\"#24-user\" \/&gt;<\/code>. \u041d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p><code>EsmpIcon<\/code> \u2014 \u0442\u043e\u043d\u043a\u0430\u044f \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 <code>&lt;svg&gt;&lt;use&gt;<\/code>:<\/p>\n<pre><code class=\"javascript\">&lt;template&gt;  &lt;EsmpIcon name=\"24-user\" size=\"24\" \/&gt;  &lt;EsmpIcon name=\"16-arrow-down\" size=\"16\" \/&gt;&lt;\/template&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u043c\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e:<\/p>\n<pre><code class=\"javascript\">type EsmpIconName = '24-user' | '24-settings' | \/* ... 816 \u0438\u043c\u0451\u043d *\/ | (string &amp; {});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>IDE \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430, \u0430 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 fallback \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 URL, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 CDN-\u0438\u043a\u043e\u043d\u043a\u0443:\u00a0<\/p>\n<p><code>&lt;EsmpIcon name=\"https:\/\/cdn.example.com\/custom.svg\" \/&gt;<\/code>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 sprite \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438\u0441\u0447\u0435\u0437 <code>createSvgIconsPlugin({ iconDirs: [...] })<\/code> \u0438 \u043f\u044f\u0442\u044c \u0441\u0442\u0440\u043e\u043a boilerplate. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0443\u0448\u043b\u0438 \u043b\u0438\u0448\u043d\u0438\u0435 \u0448\u0430\u0433\u0438\u00a0\u0441\u0431\u043e\u0440\u043a\u0438: \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043a\u043e\u043d\u043e\u043a, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 .svg \u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p>\u0412 \u043f\u043b\u0430\u043d\u0430\u0445 \u2014 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0432 \u0442\u043e\u0442 \u0436\u0435 sprite:<\/p>\n<pre><code class=\"javascript\">import EsmpUI from '@esmpfrontend\/ui';import customIcons from '@\/icons\/*.svg?raw';app.use(EsmpUI, {  customIcons,});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 \u043d\u0435 \u0441\u0442\u0430\u0432\u0438\u043b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0443\u0436\u0435 \u0434\u0430\u0451\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 UI-kit, \u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0442\u0443 \u0436\u0435 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430. \u041f\u043e\u043a\u0430 \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0442, \u043d\u043e \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433.<\/p>\n<h2>Externalize runtime deps<\/h2>\n<p>\u0414\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442 \u0431\u0430\u043d\u0434\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0435\u0441\u0438\u043b 940 KB raw. \u0417\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438 <code>lodash<\/code>, <code>dayjs<\/code>, <code>mitt<\/code>, <code>@popperjs\/core<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0431\u044b\u043b\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439: \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b. \u041d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u043e \u043a \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0 <code>lodash<\/code> \u0435\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c JS-\u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0438 \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0432 <code>node_modules<\/code> \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u0435 \u043a\u043e\u043f\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>Runtime-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 <code>peerDependencies<\/code> \u0447\u0435\u0440\u0435\u0437 Rollup <code>external<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ vite.config.tsbuild: {  lib: { entry: 'src\/index.ts', formats: ['es'] },  rollupOptions: {    external: [      'vue',      'lodash',      \/^lodash\\\/\/,           \/\/ 'lodash\/kebabCase' \u0438 \u0442.\u043f.      'dayjs',      \/^dayjs\\\/\/,            \/\/ 'dayjs\/locale\/ru'      'mitt',      '@popperjs\/core',      'autosize',      'color2k',      '@melloware\/coloris',      'vue-draggable-plus',    ],  },},<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412 <code>package.json dependencies<\/code> \u043e\u043f\u0443\u0441\u0442\u0435\u043b\u0438, \u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0438 \u0432 <code>peerDependencies<\/code>:<\/p>\n<pre><code class=\"javascript\">{  \"dependencies\": {},  \"peerDependencies\": {    \"vue\": \"^3.5.0\",    \"lodash\": \"^4.17.21\",    \"mitt\": \"^3.0.0\",    \"@popperjs\/core\": \"^2.11.0\",    \"dayjs\": \"^1.11.0\"  },  \"peerDependenciesMeta\": {    \"@melloware\/coloris\": { \"optional\": true },    \"autosize\": { \"optional\": true },    \"color2k\": { \"optional\": true },    \"vue-draggable-plus\": { \"optional\": true }  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0427\u0430\u0441\u0442\u044c peer-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 optional: \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <code>@melloware\/coloris<\/code> \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f <code>EsmpColorPicker<\/code>, <code>autosize<\/code> \u0434\u043b\u044f <code>EsmpInput<\/code> \u0441 textarea, <code>vue-draggable-plus<\/code> \u0434\u043b\u044f drag-and-drop. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. Required peers \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043e\u0431\u0449\u0438\u043c\u0438: <code>vue<\/code>, <code>lodash<\/code>, <code>mitt<\/code>, <code>@popperjs\/core<\/code>, <code>dayjs<\/code>.<\/p>\n<p><code>dayjs <\/code>\u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f required: \u043e\u043d \u043d\u0443\u0436\u0435\u043d <code>EsmpDatepicker<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 module-load. \u0421\u0430\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u2014 \u043e\u043a\u043e\u043b\u043e 7 KB gzip \u0441 \u043e\u0434\u043d\u043e\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u044e, \u2014 \u0438 \u043d\u0435\u0441\u0442\u0438 \u0435\u0451 \u0432 \u0431\u0430\u043d\u0434\u043b\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e. \u041d\u043e <code>dayjs<\/code>\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0435\u043d, \u0432 \u043b\u044e\u0431\u043e\u043c \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0436\u0438\u0432\u043e\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u043d \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043a\u043e\u043f\u0438\u044f \u0435\u0433\u043e \u0432 <code>node_modules<\/code> \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u2014 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442. \u041c\u044b \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u044f\u0435\u043c, \u043a\u0430\u043a \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u044f\u043d\u0443\u0442\u044c <code>dayjs<\/code> \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043d\u0430 2026 \u2014 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 JS <a href=\"https:\/\/tc39.es\/proposal-temporal\/\">Temporal API<\/a>. \u0412 \u043c\u0430\u0440\u0442\u0435 2026 \u043e\u043d <a href=\"https:\/\/www.bloomberg.com\/company\/stories\/temporal-is-now-official-transforming-javascript-dates-times-with-bloomberg-support\/\">\u0434\u043e\u0441\u0442\u0438\u0433 TC39 Stage 4<\/a> \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Chrome 144+, Firefox 139+, Edge 144+. \u0412 Safari \u043e\u043d \u043f\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Technical Preview \u0437\u0430 \u0444\u043b\u0430\u0433\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u0435\u043d <a href=\"https:\/\/github.com\/fullcalendar\/temporal-polyfill\">temporal-polyfill<\/a> \u2014 \u043e\u043a\u043e\u043b\u043e 20 KB gzip, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432\u0435\u0441\u044c TC39 test suite.\u00a0<\/p>\n<p>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435: \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c <code>EsmpDatepicker<\/code> \u043d\u0430 Temporal \u0441 polyfill \u0434\u043b\u044f Safari \u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 <code>dayjs<\/code> \u0438\u0437 required peer-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u0434\u0430\u0441\u0442 \u0442\u0443 \u0436\u0435 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u0442\u0430\u043c\u0438 \u2014 <code>date arithmetic<\/code>, <code>time zones<\/code>, <code>durations<\/code>, \u043d\u043e \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u0442\u0430\u043f\u0430 <code>externalize: dist\/ui.es.js<\/code>\u0443\u043f\u0430\u043b \u0441 940 KB \u0434\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 150 KB raw (!). \u0423 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0432 <code>node_modules<\/code> \u043e\u0434\u043d\u0430 \u043a\u043e\u043f\u0438\u044f <code>lodash<\/code> \u0438 \u043e\u0434\u043d\u0430 \u043a\u043e\u043f\u0438\u044f <code>dayjs<\/code>, \u043a\u0430\u043a \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c.<\/p>\n<p>\u0417\u0430\u043e\u0434\u043d\u043e \u0438\u0437 <code>dependencies<\/code> \u0443\u0434\u0430\u043b\u0438\u043b\u0438 <code>core-js<\/code>\u00a0\u0438 <code>vue-router<\/code>. <code>Core-js <\/code>\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u2014 <code>grep<\/code> \u043f\u043e <code>src\/<\/code> \u0431\u044b\u043b \u043f\u0443\u0441\u0442\u044b\u043c. Vue-router \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 dev-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u0432 runtime \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f.<\/p>\n<h2>\u041e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 deprecations.json<\/h2>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0440\u0438\u0441\u043a \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u0438\u0437 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0443\u0436\u0435 \u043e\u043f\u0438\u0440\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b\u0438.\u00a0<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u0430\u043d\u0434, \u0438 \u043e\u043d\u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e. \u041a\u0442\u043e-\u0442\u043e \u043d\u0430 v3.2, \u043a\u0442\u043e-\u0442\u043e \u043d\u0430 v3.5.<\/p>\n<p>\u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <code>src\/tokens\/deprecations.json<\/code>:<\/p>\n<pre><code class=\"javascript\">{  \"version\": 1,  \"removalVersion\": \"5.0\",  \"entries\": [    {      \"oldName\": \"buttonViewPrimaryBackgroundColor\",      \"oldCssVar\": \"--esmp-ui-button-view-primary-background-color\",      \"newName\": \"interactiveAccent\",      \"newCssVar\": \"--esmp-ui-interactive-accent\",      \"reason\": \"Component-specific token replaced by Tier 2 semantic role.\"    },    {      \"oldName\": \"inputBackgroundColor\",      \"oldCssVar\": \"--esmp-ui-input-background-color\",      \"newName\": \"bgSurface0\",      \"newCssVar\": \"--esmp-ui-bg-surface0\",      \"reason\": \"Component-specific token replaced by Tier 2 semantic role.\"    }  ]}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412 dev-\u0441\u0431\u043e\u0440\u043a\u0435 <code>$EsmpTheming<\/code> \u043b\u043e\u0433\u0438\u0440\u0443\u0435\u0442 <code>console.warn<\/code> \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a deprecated-\u0438\u043c\u0435\u043d\u0438 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d, \u0431\u0435\u0437 \u0441\u043f\u0430\u043c\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0421\u0442\u0430\u0440\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a aliases (\u0441\u043c. Tier 3) \u0434\u043e \u0432\u0435\u0440\u0441\u0438\u0438 <code>removalVersion<\/code>. \u041a\u043e\u043c\u0430\u043d\u0434\u0430-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0441\u0430\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f: \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u044d\u0442\u043e \u043d\u0435 \u0434\u0430\u0451\u0442, \u043d\u043e \u0438 \u043d\u0435 \u0434\u0430\u0432\u0438\u0442 \u0441\u0440\u043e\u043a\u0430\u043c\u0438.<\/p>\n<p><code>deprecations.json<\/code> \u043a\u043e\u043c\u043c\u0438\u0442\u0438\u0442\u0441\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u043a\u0430 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441: Tokens Studio \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e deprecated-\u0438\u043c\u0435\u043d\u0430\u0445 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u044e\u0447.\u00a0<\/p>\n<p>\u0421\u0442\u0430\u0440\u044b\u0439 \u043a\u043b\u044e\u0447 \u0438 \u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f: \u0435\u0441\u043b\u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0432\u0430 JSON-\u0441\u043d\u044d\u043f\u0448\u043e\u0442\u0430, \u0441\u0442\u0430\u0440\u044b\u0439 \u0438 \u043d\u043e\u0432\u044b\u0439, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 <code>path<\/code> \u2192 <code>cssVar<\/code> \u0434\u0430\u0441\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0439. \u0422\u043e\u0433\u0434\u0430 <code>deprecations.json<\/code> \u043c\u043e\u0436\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043c \u0436\u0435 <code>style-dictionary-<\/code>\u0448\u0430\u0433\u043e\u043c, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435 <code>reason<\/code>.<\/p>\n<h2>\u041f\u043e\u043b\u0433\u043e\u0434\u0430 \u0432 \u0432\u0435\u0442\u043a\u0435 sova<\/h2>\n<p>\u0412\u0435\u0442\u043a\u0430 <code>sova<\/code> \u043f\u0440\u043e\u0436\u0438\u043b\u0430 \u043f\u043e\u0447\u0442\u0438 \u0448\u0435\u0441\u0442\u044c \u043c\u0435\u0441\u044f\u0446\u0435\u0432. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442, \u0430 \u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 pull request \u043d\u0430 \u043f\u0430\u0440\u0443 \u0434\u043d\u0435\u0439. \u0412 \u0441\u0443\u043c\u043c\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043e\u043a\u043e\u043b\u043e 131 \u043a\u043e\u043c\u043c\u0438\u0442\u0430 \u0431\u0435\u0437 \u0443\u0447\u0451\u0442\u0430 merge-\u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u0438\u0437 <code>main<\/code>.<\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u0438\u0437 <code>main<\/code> \u0437\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u0430\u043d\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043a\u0430\u043a \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438: \u0431\u0435\u0440\u0443\u0442 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0430\u043a\u0435\u0442\u0430 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0435\u0451 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0412 \u0441\u0430\u043c\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043e\u043d\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u044f\u0442 \u0440\u0435\u0434\u043a\u043e.\u00a0<\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u043a\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043a \u043c\u0435\u043b\u043a\u0438\u043c \u0444\u0438\u043a\u0441\u0430\u043c \u0438 \u0440\u0435\u0434\u043a\u0438\u043c \u043d\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443. \u0416\u0451\u0441\u0442\u043a\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u0432 \u0434\u0443\u0445\u0435 \u00ab\u0434\u0440\u0443\u0433\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043b\u043e\u043c\u0430\u043b\u0430 \u043d\u0430\u0448 <code>alias<\/code> \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u0440\u043e\u0435 \u0438\u043c\u044f \u0432 main\u00bb \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u043e: \u043f\u0440\u0438 \u0435\u0436\u0435\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u044b\u0445 merge\u2019\u0430\u0445 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0434\u0438\u0444\u0444\u044b, \u0431\u0435\u0437 \u0431\u043b\u043e\u043a\u0435\u0440\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0421\u0430\u043c \u043e\u0431\u044a\u0451\u043c \u0440\u0430\u0431\u043e\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 <code>sova<\/code> \u043c\u044b \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u043b\u0438 \u043d\u0430 \u043f\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u0431\u044b\u043b \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u00ab\u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0432\u0438\u0434\u00bb, \u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0431\u044b\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<ol>\n<li>\n<p>\u0422\u0438\u043f\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. <code>Volar\/WebStorm IntelliSense<\/code>, <code>augmentation GlobalComponents<\/code> \u0438 <code>ComponentCustomProperties<\/code>. \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u0430\u0432\u0435\u043b\u0438 <code>consumer-fixture<\/code> \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u043d\u0438-\u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 <code>vue-tsc --noEmit<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 CI \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u0442\u0438\u043f\u044b \u0432\u0438\u0434\u043d\u044b \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0432\u0435\u0440\u043b\u0435\u0438: <code>$EsmpNotify<\/code>, <code>$EsmpModal<\/code>, <code>$EsmpLoader<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 <code>install()<\/code> \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>createVNode + render<\/code>, \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 Vue-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 <code>module load<\/code>. \u0412 DevTools \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 app, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d. <code>Overlays<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a <code>provide\/inject<\/code> \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0422\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <code>$EsmpTheming<\/code> \u0438 3-tier \u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u0442\u043e, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435 \u043f\u0440\u043e <code>generated .d.ts<\/code>.<\/p>\n<\/li>\n<li>\n<p>SVG sprite auto-inject. Pre-built sprite \u0432 JS-\u0431\u0430\u043d\u0434\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>Externalize runtime deps. \u0422\u043e, \u0447\u0442\u043e\u00a0 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435 \u043f\u0440\u043e <code>peerDependencies<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u0441\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0431\u044b\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043d\u0438\u0442\u044c\u044e \u0432 \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435. \u041a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u044f\u0442\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u0438 type-\u0447\u0435\u043a\u0430\u043c\u0438. \u0418\u043d\u0430\u0447\u0435 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c <code>merge <\/code>\u0438\u0437 <code>main<\/code> \u0440\u0438\u0441\u043a\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c.<\/p>\n<p>\u0421\u0430\u043c\u044b\u043c \u0446\u0435\u043d\u043d\u044b\u043c \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u043c \u0432\u0435\u0442\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f CI-\u0433\u0435\u0439\u0442 \u0442\u0438\u043f\u043e\u0432.\u00a0<\/p>\n<p><code>tests\/types\/consumer-fixture\/<\/code>\u2014 \u044d\u0442\u043e \u043c\u0438\u043d\u0438-\u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 Vue + <code>vue-tsc<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f <code>&lt;EsmpInput size=\"huge\" \/&gt;<\/code>\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0430 <code>&lt;EsmpInput size=\"large\" \/&gt;<\/code> \u2014 \u043d\u0435\u0442. \u041e\u043d \u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 <code>app.use(EsmpUI)<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>$EsmpTheming<\/code>, <code>$EsmpNotify<\/code> \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 IDE \u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 <code>tsc<\/code>.\u00a0<\/p>\n<p>\u042d\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435 \u043f\u0440\u043e runtime, \u0430 \u043f\u0440\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 .<a href=\"http:\/\/d.ts\">d.ts<\/a>. \u0424\u0438\u043a\u0441\u0442\u0443\u0440\u0430 \u043d\u0430 <code>vue-tsc<\/code> \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c. \u041a\u0430\u0436\u0434\u043e\u0435 breaking change \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u043e \u0441\u044e\u0434\u0430 \u043d\u043e\u0432\u044b\u0439 \u043a\u0435\u0439\u0441, \u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u044d\u0442\u0430 \u0444\u0438\u043a\u0441\u0442\u0443\u0440\u0430 \u043f\u043e\u0439\u043c\u0430\u043b\u0430 \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u0438\u044e \u043f\u043e \u0442\u0438\u043f\u0430\u043c \u0435\u0449\u0451 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0430 \u0434\u043e\u0448\u043b\u0430 \u0431\u044b \u0434\u043e \u0440\u0435\u043b\u0438\u0437\u0430.<\/p>\n<p>\u0420\u0435\u0433\u0440\u0435\u0441\u0441\u0438\u043e\u043d\u043d\u044b\u0435 runtime-\u0442\u0435\u0441\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 Tier 1 \u2014 \u0441\u043a\u0430\u0436\u0435\u043c, \u0435\u0441\u043b\u0438 <code>accent-500<\/code> \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u0442\u043e\u043d\u0430 \u2014 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c. \u042d\u0442\u043e \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438: <code>hover<\/code>, <code>disabled<\/code>, <code>error.<\/code> \u041f\u043b\u044e\u0441 \u2013 \u0440\u0443\u0447\u043d\u043e\u0439 styleguide-\u043e\u0431\u0445\u043e\u0434 \u0433\u043b\u0430\u0437\u0430\u043c\u0438.<\/p>\n<p>\u0418\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0432\u0448\u0435\u0433\u043e \u2014 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b Tokens Studio \u0438 \u0438\u0445 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u0432 <code>@tokens-studio\/sd-transforms<\/code>.\u00a0<\/p>\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u2014 \u044d\u0442\u043e <code>lighten<\/code>, <code>darken<\/code>, <code>mix<\/code>, <code>alpha<\/code>;\u00a0 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 <code>color spaces:srgb<\/code>, <code>hsl<\/code>, <code>lch<\/code>, <code>p3<\/code>. \u0418\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 <code>sd-transforms<\/code> \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 hex.\u00a0<\/p>\n<p>\u041e\u0434\u0438\u043d \u0440\u0430\u0437 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0438 \u0442\u0451\u043c\u043d\u044b\u0439 hex \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u0430 \u0438 \u0440\u0430\u0437\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0441\u043b\u0435 <code>darken<\/code>. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 color space. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0438\u0434\u0443\u0442 \u0447\u0435\u0440\u0435\u0437 <code>srgb + lighten\/darken<\/code> \u043f\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0438\u0441\u0430\u043b\u0430\u0441\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. <code>docs\/migration.md<\/code> \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u043b \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043f\u0440\u043e \u043a\u0430\u0436\u0434\u043e\u0435 breaking change. \u041a\u0430\u0436\u0434\u0430\u044f \u0442\u0435\u043c\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0430 \u0442\u0443\u0434\u0430 \u0441\u0432\u043e\u044e \u0441\u0435\u043a\u0446\u0438\u044e: \u0447\u0442\u043e \u0431\u044b\u043b\u043e, \u0447\u0442\u043e \u0441\u0442\u0430\u043b\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044e. \u041a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0441\u043b\u0438\u044f\u043d\u0438\u044f <code>sova<\/code> \u0432 <code>main<\/code> migration guide \u0443\u0436\u0435 \u0431\u044b\u043b \u0433\u043e\u0442\u043e\u0432 \u2014 \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0437\u0430\u0434\u043d\u0438\u043c \u0447\u0438\u0441\u043b\u043e\u043c.<\/p>\n<h2>\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438<\/h2>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 UI-kit \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0435\u0437 \u0440\u0430\u0437\u0440\u044b\u0432\u0430 \u0441 \u043f\u0440\u043e\u0448\u043b\u044b\u043c. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API, \u0441\u0442\u0430\u0440\u044b\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 legacy-\u0430\u043b\u0438\u0430\u0441\u044b, \u0430 \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b \u043d\u0430 3-tier-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0430\u043b\u043e \u043b\u0435\u0433\u0447\u0435. \u0411\u0430\u043d\u0434\u043b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0441 940 \u041a\u0411 \u0434\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 150 \u041a\u0411 raw. \u0412 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0431\u0430\u043d\u0434\u043b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0434\u043d\u0430 \u043a\u043e\u043f\u0438\u044f <code>lodash<\/code> \u0438 \u043e\u0434\u043d\u0430 \u043a\u043e\u043f\u0438\u044f <code>dayjs<\/code>, \u0431\u0435\u0437 \u0434\u0443\u0431\u043b\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u0414\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448.<\/p>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438 \u0442\u043e\u0436\u0435 \u0441\u0442\u0430\u043b\u0438 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0412\u0441\u0435 816 \u0438\u043a\u043e\u043d\u043e\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u0438\u043d SVG-sprite \u0432\u043d\u0443\u0442\u0440\u0438 JS-\u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043d\u0436\u0435\u043a\u0442\u044f\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c <code>vite-plugin-svg-icons<\/code>, \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>.svg <\/code>\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c boilerplate \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0442\u0430\u043b\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0430 \u043f\u043e\u0437\u0434\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445. \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0442\u0435\u043f\u0435\u0440\u044c \u043b\u043e\u0432\u0438\u0442 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0432 IDE: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;EsmpInput size=\"huge\" \/&gt;<\/code> \u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438, \u0430 \u043d\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0440\u0435\u0432\u044c\u044e \u0438\u043b\u0438 \u0432 runtime.<\/p>\n<p>\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0439. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-theme=\"dark\"<\/code> \u043d\u0430 <code>&lt;html&gt;<\/code> \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 Tier 2-\u0440\u043e\u043b\u0438, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u041d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u043e\u043b\u044f\u0445 Tier 2, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>Tailwind-\u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430. <code>tailwind.preset.cjs <\/code>\u0434\u043b\u044f v3 \u0438 <code>tailwind.theme.css <\/code>\u0434\u043b\u044f v4 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043f\u0430\u043a\u0435\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u044b \u0432\u0440\u043e\u0434\u0435 <code>bg-esmp-accent-default\/40<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u0445 \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0432\u0430\u0436\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043c\u0435\u0436\u0434\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438. \u041e\u043d \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d \u0441\u0440\u0430\u0437\u0443 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><code>tokens.manifest.json <\/code>\u2014 \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><code>theming-tokens.generated.d.ts<\/code> \u2014 \u0434\u043b\u044f TypeScript;<\/p>\n<\/li>\n<li>\n<p><code>tailwind.preset.cjs<\/code> \u0438 <code>tailwind.theme.css<\/code> \u2014 \u0434\u043b\u044f Tailwind-\u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u0440\u0430\u0432\u0434\u044b: <code>sova-tokens.json<\/code> \u0438\u0437 Tokens Studio \u0438 \u043e\u0434\u043d\u0438\u043c build-\u0448\u0430\u0433\u043e\u043c. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c SCSS, TypeScript-\u0442\u0438\u043f\u044b, Tailwind-\u043a\u043e\u043d\u0444\u0438\u0433 \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041f\u043e \u043d\u0430\u0448\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c \u043e\u0446\u0435\u043d\u043a\u0430\u043c, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u043e\u0432\u044b\u0445 \u0444\u0438\u0447 \u0441\u0442\u0430\u043b\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 \u0442\u0440\u0438\u0434\u0446\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u0435\u0441\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Tier 2-\u0440\u043e\u043b\u044f\u0445, \u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0451\u043c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 Tailwind-\u043a\u043e\u043d\u0444\u0438\u0433\u0435. \u042d\u0442\u0438 \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u0449\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<h2>\u0427\u0442\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u043d\u0430\u0447\u0435<\/h2>\n<p>Style Dictionary \u0441\u0442\u043e\u0438\u043b\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0430\u043d\u044c\u0448\u0435 \u2014 \u0435\u0449\u0451 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0421 \u0433\u043e\u0442\u043e\u0432\u044b\u043c build-\u0448\u0430\u0433\u043e\u043c \u043b\u044e\u0431\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u043e\u0431\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0431\u044b \u0434\u0435\u0448\u0435\u0432\u043b\u0435: \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0443\u0447\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u043e\u043a \u0432 SCSS, \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u0433\u043b\u0430\u0437\u0430\u043c\u0438.\u00a0 \u041c\u044b \u0432\u043e\u0448\u043b\u0438 \u0432 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0443\u0436\u0435 \u0441 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u043e\u043c, \u0438 \u044d\u0442\u043e \u0441\u043f\u0430\u0441\u043b\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d \u0441\u0442\u043e\u044f\u043b \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442 \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u0435\u0435.<\/p>\n<p>\u0421 Tier 3 \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c \u0441\u043b\u043e\u0435\u043c \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u043c\u0430\u0445\u043d\u0443\u043b\u0438\u0441\u044c. \u0421\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u0436\u0438\u0432\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0438\u043c\u0451\u043d \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438, \u0430 \u0432 \u043d\u043e\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u0442\u0443\u0434\u0430 \u0443\u0436\u0435 \u043d\u0435 \u043f\u0438\u0448\u0443\u0442.\u00a0<\/p>\n<p>\u0418\u0434\u0435\u044f \u00ab\u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u043e\u043b\u044c \u043d\u0435 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u0435\u0439\u0441, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d\u00bb \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. \u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0443\u0436\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d,\u00a0 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0435\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043d\u0430\u0431\u043e\u0440 Tier 2 \u0440\u043e\u043b\u0435\u0439.<\/p>\n<p><code>dayjs<\/code> \u0442\u043e\u0436\u0435 \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c.\u00a0 \u041e\u043d \u0432\u0441\u0451 \u0435\u0449\u0451 <code>required peer<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e EsmpUI \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 <code>module-load<\/code> \u0432 <code>EsmpDatepicker<\/code>. \u0415\u0441\u043b\u0438 \u0431\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0433\u0440\u0443\u0437\u0438\u043b\u0430\u0441\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u0431\u0435\u0437 \u0434\u0430\u0442\u0430\u043f\u0438\u043a\u0435\u0440\u0430 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <code>dayjs<\/code>.\u00a0<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u2014 Temporal API \u0441 polyfill \u0434\u043b\u044f Safari. \u041f\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b <code>dayjs<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u0439\u0442\u0438 \u0438\u0437 required peers.<\/p>\n<p>\u0418\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u043e\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0431\u044b \u0442\u0430\u043a \u0436\u0435: Tokens Studio \u043a\u0430\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b, <code>channel syntax -rgb<\/code> \u0434\u043b\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u0441\u0430\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u0441\u044b\u043b\u043e\u043a <code>Tier N \u2192 Tier \u2264 N<\/code>.\u00a0<\/p>\n<p>Tokens Studio \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0440\u0443\u0447\u043d\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438: JSON \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u0437 Figma \u043e\u0434\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439. Channel syntax<code> -rgb<\/code> \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0446\u0435\u043b\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 JS-\u0445\u0430\u043a\u043e\u0432 \u0441 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c hex, \u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0435 \u0434\u0430\u0451\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0433\u0440\u0430\u0444 \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438 \u0438 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>Tree-shaking per-component \u2014 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u043f\u043e\u0441\u043b\u0435 <code>sova<\/code>. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u044b\u043b \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043e\u043f\u044b\u0442: \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0435\u0442\u043a\u0430-\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433, \u043f\u0435\u0440\u0435\u0435\u0437\u0434 \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0430 ESM-only \u0438\u043b\u0438 <code>tree-shaking per-component<\/code>, \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445: \u043a\u0430\u043a \u0432\u044b \u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u0432\u044b\u043b\u0435\u0437\u043b\u0438.<\/p>\n<p>\u0413\u043e\u0442\u043e\u0432 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043b\u044e\u0431\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0435 \u0432\u043b\u0435\u0437\u043b\u0438. \u041a \u043a\u0440\u0438\u0442\u0438\u043a\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e: \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435 \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c. \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430!<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1046493\/\">https:\/\/habr.com\/ru\/articles\/1046493\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UI-kit, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u0417\u0430 \u043d\u0438\u043c \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0448\u043b\u043e\u0435: \u0441\u0442\u0430\u0440\u044b\u0435 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API, \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0440\u0435\u043d\u0434 \u0443\u0436\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443, \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435.\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043c\u0438\u0440, \u044f Senior Vue.js Frontend Developer \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u00ab\u041b\u0443\u043a\u043e\u043c\u043e\u0440\u044c\u0435\u00bb. \u0423\u0436\u0435 \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442 \u044f \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 ERP-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 UI-kit: \u043e\u043a\u043e\u043b\u043e 50 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 Vue 3 \u0438 TypeScript, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0435.\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0434\u043b\u044f UI-kit \u0442\u0430\u043a\u043e\u0435 \u00ab\u043d\u0430\u0437\u0430\u0434 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0435\u00bb: \u0432 \u043e\u0434\u043d\u043e\u0439 \u0434\u043e\u043b\u0433\u043e\u0436\u0438\u0432\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0435 sova\u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0438 \u0442\u0438\u043c\u043b\u0438\u0434\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 UI-kit \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0438 \u0434\u0443\u043c\u0430\u044e\u0442, \u043a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0435\u0437 \u043f\u043e\u043b\u043e\u043c\u043a\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439. \u0412\u043d\u0443\u0442\u0440\u0438 \u2014 \u043a\u043e\u0434, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u0438 \u0447\u0435\u0441\u0442\u043d\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044b \u043f\u043e \u0438\u0442\u043e\u0433\u0430\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438.\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f UI-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0430 \u0436\u0438\u0432\u0451\u0442 \u0443\u0436\u0435 \u0448\u0435\u0441\u0442\u044c \u043b\u0435\u0442. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432 \u043d\u0435\u0439 \u043e\u043a\u043e\u043b\u043e \u043f\u044f\u0442\u0438\u0434\u0435\u0441\u044f\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: schema-driven \u0444\u043e\u0440\u043c\u044b, \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0432\u0435\u0440\u043b\u0435\u0438, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u0440\u0435\u0437 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.\u00a0\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u0432 \u041b\u0443\u043a\u043e\u043c\u043e\u0440\u044c\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0440\u0442\u0430\u043b\u0430, \u0438 \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c UI: \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443. \u0427\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c: \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443 EsmpInput, \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 motion. \u041d\u043e \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b, \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438\u00a0 \u0431\u0440\u0435\u043d\u0434\u0430 \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u043c SCSS-\u0444\u0430\u0439\u043b\u0430\u043c \u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 &#8212;button-primary-bg. \u0412 \u0442\u043e\u0439 \u0436\u0435 \u0432\u0435\u0442\u043a\u0435 \u043c\u044b \u0437\u0430\u043a\u0440\u044b\u043b\u0438 \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u043e\u043b\u0433\u043e\u0432: \u0442\u0438\u043f\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0443 SVG-\u0438\u043a\u043e\u043d\u043e\u043a, \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0442\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u0438.\u00a0\u0414\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e 3-tier \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, Style Dictionary \u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u044d\u0442\u043e \u0443\u0436\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435 sova.\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e UI-kit@esmpfrontend\/ui \u2014 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0420\u043e\u0441\u0442\u0435\u043b\u0435\u043a\u043e\u043c\u0430. \u042d\u0442\u043e Vue 3, \u043e\u043a\u043e\u043b\u043e 50 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u043a\u0430\u043a npm-\u043f\u0430\u043a\u0435\u0442 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 GitLab Registry \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0451 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e: \u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043e\u0432\u0435\u0440\u043b\u0435\u0438, \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u044f, \u0438\u043a\u043e\u043d\u043a\u0438. \u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u0442\u043e \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a, \u0430 \u0443 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c styleguide-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438.\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u041f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c: \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u044b \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u043b\u0435\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 &lt;head&gt;, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043c\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0448\u043b\u0430 \u0441 API. \u0421\u0430\u043c UI-kit \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c: \u0431\u0435\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0442\u043e\u043a \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0431\u0435\u0437 \u00ab\u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u0445\u00bb \u0441\u0431\u043e\u0440\u043e\u043a. \u0415\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 \u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0438\u043c\u0451\u043d CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, EsmpInput, EsmpSelect, EsmpSidebar, EsmpDatepicker, \u0436\u0438\u0432\u0451\u0442 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c props, emits, \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: disabled, readonly, error, loading.\u00a0\u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0440\u0435\u043d\u0434, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044e\u0442 \u0441\u0440\u0430\u0437\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.\u0414\u043e \u044d\u0442\u043e\u0433\u043e: \u043e\u0434\u043d\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 Tier \u0431\u0435\u0437 \u0447\u0451\u0442\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b\u0412 \u043d\u0430\u0448\u0435\u043c SCSS \u0436\u0438\u043b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:\/* src\/styles\/variables\/_colors.scss *\/$color-accent-primary: #0055ff;$color-accent-primary-hover: #0044cc;$color-text-on-accent: #ffffff;$color-bg-surface: #ffffff;$color-border-default: #d1d5db;\/\/ &#8230;\/* src\/styles\/_root.scss *\/:root {  &#8212;esmp-ui-button-view-primary-background-color: #{variables.$color-accent-primary};  &#8212;esmp-ui-button-view-primary-background-color-hover: #{variables.$color-accent-primary-hover};  &#8212;esmp-ui-button-view-primary-text-color: #{variables.$color-text-on-accent};  &#8212;esmp-ui-input-background-color: #{variables.$color-bg-surface};  &#8212;esmp-ui-input-border-color: #{variables.$color-border-default};  &#8212;esmp-ui-input-border-color-active: #{variables.$color-accent-primary};  &#8212;esmp-ui-sidebar-background-color: #{variables.$color-bg-surface};  \/* &#8230; \u0435\u0449\u0451 \u043e\u043a\u043e\u043b\u043e \u0434\u0432\u0443\u0445\u0441\u043e\u0442 \u0442\u0430\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 *\/}\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043b\u0435\u0436\u0430\u043b\u0438 \u0432 SCSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0430 \u0432 :root \u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u00ab\u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443\u00bb. \u0422\u0430\u043a \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u0445 \u043f\u043e\u0434 \u0441\u0435\u0431\u044f. \u041a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0441\u0434\u0432\u0438\u0433\u0430\u043b \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043d\u0430 \u043f\u043e\u043b\u0442\u043e\u043d\u0430, \u0432\u0441\u0451 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u043e\u0441\u044c\u00a0\u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430: \u043c\u044b \u043c\u0435\u043d\u044f\u043b\u0438 SCSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0438 \u043e\u043d\u0430 \u043f\u0440\u043e\u0440\u0430\u0441\u0442\u0430\u043b\u0430 \u0432 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.\u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u0431\u044b\u043b \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0436\u0438\u0432\u0443\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u043d\u0435 \u0432 \u0434\u0443\u0431\u043b\u044f\u0445 hex-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435. \u041f\u043e \u0441\u0443\u0442\u0438 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0431\u044b\u043b \u043e\u0434\u0438\u043d: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a SCSS-\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c. \u0427\u0451\u0442\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u00ab\u043f\u0430\u043b\u0438\u0442\u0440\u0430 \/ \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00bb \u043d\u0435 \u0431\u044b\u043b\u043e. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u043e\u0432\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u043e\u043b\u044c \u00ab\u0444\u043e\u043d \u0430\u043a\u0446\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043d\u043e\u043f\u043a\u0435, \u0431\u0435\u0439\u0434\u0436\u0435 \u0438 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u2014 \u0435\u0451 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c, \u0430 \u043b\u044e\u0431\u043e\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0432 \u0442\u0440\u0438-\u0447\u0435\u0442\u044b\u0440\u0435 \u043c\u0435\u0441\u0442\u0430.\u0421 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u044b\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 rgba(0, 85, 255, 0.1) \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u2014 \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438: &#8212;accent-10, &#8212;accent-20 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u00a0\u0412\u0442\u043e\u0440\u043e\u0439 \u2014 \u0432\u0437\u044f\u0442\u044c hex \u0438\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0432 JS, \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 rgb-\u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c alpha. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041e\u043d \u0440\u0430\u0431\u043e\u0447\u0438\u0439, \u043d\u043e \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0445\u0430\u043a, \u0447\u0435\u043c \u043d\u0430 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.\u0422\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 \u0435\u0451 \u043d\u0435\u0442 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441, \u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u0435\u0451 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 Tier 2. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c\u00a0 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 data-theme=&#187;dark&#187;. \u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043e\u043d\u0430 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u043a\u0430\u043a \u00ab\u0431\u043e\u043d\u0443\u0441 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb \u0432\u043e\u0448\u043b\u0430 \u0432 \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443.\u0420\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430 \u0442\u043e\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0432\u043e\u043f\u0440\u043e\u0441\u044b. dist\/ui.es.js \u0432\u0435\u0441\u0438\u043b \u043e\u043a\u043e\u043b\u043e 940 KB raw. \u0412\u043d\u0443\u0442\u0440\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u044b\u043b\u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b lodash, dayjs, mitt, @popperjs\/core \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0432 node_modules \u043c\u043e\u0433\u043b\u0438 \u043b\u0435\u0436\u0430\u0442\u044c \u0434\u0432\u0435 \u043a\u043e\u043f\u0438\u0438 lodash: \u043d\u0430\u0448\u0430 \u0438 \u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f.\u0418\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0447\u0435\u0440\u0435\u0437 vite-plugin-svg-icons. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b \u0441\u0431\u043e\u0440\u0449\u0438\u043a: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441 SVG \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u043b \u043f\u043b\u0430\u0433\u0438\u043d \u0432 vite.config.ts. \u042d\u0442\u043e \u043f\u044f\u0442\u044c-\u0441\u0435\u043c\u044c \u0441\u0442\u0440\u043e\u043a boilerplate \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043b\u044e\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0438\u043a\u043e\u043d\u043e\u043a \u0443 \u0441\u0435\u0431\u044f.\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u0430 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438. \u041e\u043f\u0435\u0447\u0430\u0442\u0430\u043b\u0441\u044f \u0432 bgSurfac1 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0448\u044c runtime warning, \u0430 IDE \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0451\u0442.\u041f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438\u0441\u044c \u0438 \u0440\u0430\u043d\u044c\u0448\u0435. \u041d\u043e \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d-\u043e\u0442\u0434\u0435\u043b \u043f\u0440\u0438\u0448\u0451\u043b \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u043e\u043d\u0438 \u0441\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c \u0432 \u043e\u0434\u043d\u0443 \u043e\u0431\u0449\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e: \u0442\u0440\u043e\u0433\u0430\u0435\u0448\u044c \u0447\u0442\u043e-\u0442\u043e \u043e\u0434\u043d\u043e \u2014 \u043f\u043e\u0447\u0442\u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0437\u0430\u0446\u0435\u043f\u0438\u0448\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.\u0420\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0433\u043e UI\u0412 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u0430\u043b\u0438\u0442\u0440\u0430, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u044f, motion, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u0438. \u0423 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u043d\u0430\u0448\u0430 \u0437\u043e\u043d\u0430 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0412 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0430\u0441\u044c \u0442\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043a\u0430\u043a \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u0431\u0440\u0435\u043d\u0434\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u0442\u043e\u043d\u0430.\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0436\u0451\u0441\u0442\u043a\u0438\u043c\u0438.API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c: props, emits, slots, \u0438\u043c\u0435\u043d\u0430 CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0435\u0437 breaking changes. \u041f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0432\u0435\u0440\u0445 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e yarn upgrade. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u0432\u043e\u0438 \u0440\u0435\u043b\u0438\u0437\u043d\u044b\u0435 \u0446\u0438\u043a\u043b\u044b \u0438 \u0434\u0435\u0434\u043b\u0430\u0439\u043d\u044b, \u0438 \u043e\u043d\u0438 \u043d\u0435 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430 \u043d\u0430\u0448 \u0442\u0435\u043c\u043f: \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u043e \u0440\u0435\u0433\u0440\u0435\u0441\u0441\u0438\u043e\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u0438 \u043d\u0430\u043c, \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u2014 \u0445\u043e\u0442\u044f \u0431\u044b \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0430\u0432\u0442\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0435\u0445\u0430\u043b\u043e.\u0422\u0435\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c.\u0422\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u0412 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u2014 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0438 \u0442\u0451\u043c\u043d\u044b\u0439. \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043d\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043a data-theme=&#187;dark&#187;. \u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 \u043f\u043e\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0442\u0435\u043c\u0430, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u0435\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0437\u0430\u0434\u0430\u0447\u0430 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043e\u0434\u043d\u043e\u0439 \u0444\u0440\u0430\u0437\u043e\u0439: \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0430\u0437\u044b. \u0427\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c: \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443 EsmpInput, \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 motion.\u00a0\u041d\u043e \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0438 spacing-\u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u0442\u044c \u0432 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0436\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043f\u043e \u0441\u043e\u0440\u043e\u043a\u0430 SCSS-\u0444\u0430\u0439\u043b\u0430\u043c.\u0412 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0434\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u0431\u044b\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u00ab\u043a\u0440\u0430\u0441\u043e\u0442\u043e\u0439\u00bb \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u2014 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438\u0441\u044c\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043a\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 \u0442\u0440\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.Vanilla CSS variables \u0431\u0435\u0437 build-tool\u0421\u0430\u043c\u043e\u0435 \u043b\u0451\u0433\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0430\u0432\u0438\u0442\u044c SCSS-\u0444\u0430\u0439\u043b\u044b \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043f\u0440\u0438\u0441\u043b\u0430\u043b hex \u2014 \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 hex. \u0422\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u0447\u0435\u0440\u0435\u0437 [data-theme=&#187;dark&#187;] { &#8230; } \u0440\u0443\u043a\u0430\u043c\u0438.\u041f\u043b\u044e\u0441\u044b \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b: \u043d\u043e\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c, \u043b\u044e\u0431\u043e\u0439 \u0434\u0436\u0443\u043d \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u041c\u0438\u043d\u0443\u0441\u044b \u2014 \u0442\u0435 \u0436\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0443\u0436\u0435 \u0436\u0438\u043b\u0438. \u0415\u0434\u0438\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u0440\u0430\u0432\u0434\u044b \u043d\u0435\u0442, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0441 Figma \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0443\u0447\u043d\u043e\u0439 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442. \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043b\u0438\u0431\u043e JS-\u0445\u0430\u043a\u043e\u043c, \u043b\u0438\u0431\u043e \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c alpha. \u041b\u044e\u0431\u0430\u044f \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430 \u0432 \u0438\u043c\u0435\u043d\u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0434\u0435.\u00a0\u042d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u0431\u0440\u043e\u0441\u0438\u043b\u0438: \u043e\u043d \u043d\u0435 \u0440\u0435\u0448\u0430\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.Tailwind \u043a\u0430\u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b\u0421 Tailwind \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435. \u0412 Tailwind v4 (\u044f\u043d\u0432\u0430\u0440\u044c 2025) \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0430 \u0438\u0437 tailwind.config.js \u0432 CSS. \u0422\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0447\u0435\u0440\u0435\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 @theme:@import &#171;tailwindcss&#187;;@theme {  &#8212;color-accent-500: #0055ff;  &#8212;color-accent-600: #0044cc;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-483354","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/483354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=483354"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/483354\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=483354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=483354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=483354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}