[{"data":1,"prerenderedAt":921},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ffoundations\u002Ftokens":3},{"id":4,"title":5,"body":6,"component":910,"dependsOn":911,"description":912,"emitDescriptions":913,"extension":914,"meta":915,"navigation":232,"order":36,"path":916,"seo":917,"status":918,"stem":919,"__hash__":920},"docs\u002Fdocs\u002Ffoundations\u002Ftokens.md","Токени",{"type":7,"value":8,"toc":900},"minimark",[9,18,23,48,63,74,80,84,99,110,114,124,146,149,153,162,188,192,195,310,345,360,364,385,394,398,412,873,876,880,896],[10,11,12,13,17],"p",{},"Уся палітра живе в одному файлі — ",[14,15,16],"code",{},"app\u002Fassets\u002Fcss\u002Ftokens.css",". Він написаний\nчистим CSS без жодного синтаксису Tailwind, тому копіюється у проєкт на v3 і\nна v4 без змін.",[19,20,22],"h2",{"id":21},"чому-кожен-колір-оголошено-двічі","Чому кожен колір оголошено двічі",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-css shiki shiki-themes github-light github-dark","--accent: #1d4ed8;              --accent-rgb: 29, 78, 216;\n","css","",[14,31,32],{"__ignoreMap":29},[33,34,37,41,45],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sVt8B","--accent: ",[33,42,44],{"class":43},"s7hpK","#1d4ed8",[33,46,47],{"class":39},";              --accent-rgb: 29, 78, 216;\n",[10,49,50,51,54,55,58,59,62],{},"Tailwind v4 бере hex і отримує прозорість нативно через ",[14,52,53],{},"color-mix()",".\nTailwind v3 так не вміє — йому потрібен триплет, який шим ",[14,56,57],{},"withOpacity()","\nпідставляє в ",[14,60,61],{},"rgba(var(--accent-rgb), \u003Calpha>)",".",[10,64,65,66,70,71,73],{},"Формат саме через ",[67,68,69],"strong",{},"кому",", а не пробіл: у ваших наявних проєктах\n",[14,72,57],{}," написаний під комовий формат, тож файл падає до них без\nправок їхніх конфігів.",[10,75,76,77,62],{},"Розбіжність між hex і триплетом ловить ",[14,78,79],{},"bun run check:docs",[19,81,83],{"id":82},"іменування","Іменування",[10,85,86,87,90,91,94,95,98],{},"Токени названі за ",[67,88,89],{},"роллю",", а не за виглядом. ",[14,92,93],{},"--radius-card",", а не\n",[14,96,97],{},"--radius-12",". Інакше «зробимо тут трохи кругліше» розповзається по проєкту\nбез жодного правила, і за пів року в застосунку сім різних радіусів.",[10,100,101,102,105,106,109],{},"Те саме з кольорами: ",[14,103,104],{},"--bg-card"," замість ",[14,107,108],{},"--white",". У темній темі картка не\nбіла, але лишається карткою.",[19,111,113],{"id":112},"пара-яку-найчастіше-плутають","Пара, яку найчастіше плутають",[10,115,116,119,120,123],{},[14,117,118],{},"--accent"," і ",[14,121,122],{},"--accent-solid"," — різні токени навмисно:",[125,126,127,137],"ul",{},[128,129,130,132,133,136],"li",{},[14,131,118],{}," (#1d4ed8) — для ",[67,134,135],{},"тексту та іконок",". На білому дає 6.29:1.",[128,138,139,141,142,145],{},[14,140,122],{}," (#2563eb) — для ",[67,143,144],{},"заливки"," кнопки з білим текстом. Дає\n4.56:1, тобто рівно AA.",[10,147,148],{},"Один відтінок не може одночасно бути читабельним текстом і достатньо\nконтрастною заливкою під білим. Спроба обійтися однією змінною закінчується\nабо блідим текстом, або кнопкою, на якій білий підпис не читається.",[19,150,152],{"id":151},"що-змінюється-в-темній-темі-а-що-ні","Що змінюється в темній темі, а що ні",[10,154,155,157,158,161],{},[14,156,122],{}," лишається брендовим і ",[67,159,160],{},"світлішає"," на hover — на темному\nтлі це природніший напрямок реакції, ніж потемніння.",[10,163,164,165,168,169,172,173,176,177,119,180,183,184,187],{},"Брендова шкала веде себе неочевидно: ",[14,166,167],{},"700"," лишається ",[67,170,171],{},"темнішим"," за ",[14,174,175],{},"600",",\nбо це hover суцільних кнопок із білим текстом. А ",[14,178,179],{},"800",[14,181,182],{},"900"," навпаки\nсвітлішають, бо вживаються лише як джерело підкладок із прозорістю\n(",[14,185,186],{},"bg-primary-900\u002F30",") — темний відтінок під 30% прозорості над майже чорним\nтлом не дав би нічого видимого.",[19,189,191],{"id":190},"рух","Рух",[10,193,194],{},"Тривалості й криві — теж токени, з тієї ж причини, що й радіуси: без них\nу кожному компоненті власне число (75, 100, 150, 200, 300 мс), і інтерфейс\n«дихає» нерівно.",[24,196,198],{"className":26,"code":197,"language":28,"meta":29,"style":29},"--duration-fast: 120ms;   \u002F* hover, active, зміна кольору *\u002F\n--duration-base: 180ms;   \u002F* випадайки, підказки, перемикачі *\u002F\n--duration-slow: 260ms;   \u002F* модалка, drawer, панелі, що їдуть *\u002F\n\n--ease-out: cubic-bezier(0.22, 1, 0.36, 1);       \u002F* поява *\u002F\n--ease-in: cubic-bezier(0.4, 0, 1, 1);            \u002F* зникнення *\u002F\n--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n--ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1); \u002F* фізичний рух *\u002F\n",[14,199,200,209,218,227,234,256,271,289],{"__ignoreMap":29},[33,201,202,205],{"class":35,"line":36},[33,203,204],{"class":39},"--duration-fast: 120ms;   ",[33,206,208],{"class":207},"sJ8bj","\u002F* hover, active, зміна кольору *\u002F\n",[33,210,212,215],{"class":35,"line":211},2,[33,213,214],{"class":39},"--duration-base: 180ms;   ",[33,216,217],{"class":207},"\u002F* випадайки, підказки, перемикачі *\u002F\n",[33,219,221,224],{"class":35,"line":220},3,[33,222,223],{"class":39},"--duration-slow: 260ms;   ",[33,225,226],{"class":207},"\u002F* модалка, drawer, панелі, що їдуть *\u002F\n",[33,228,230],{"class":35,"line":229},4,[33,231,233],{"emptyLinePlaceholder":232},true,"\n",[33,235,237,240,244,247,250,253],{"class":35,"line":236},5,[33,238,239],{"class":39},"--ease-out: cubic-bezier(0",[33,241,243],{"class":242},"sScJk",".22",[33,245,246],{"class":39},", 1, 0",[33,248,249],{"class":242},".36",[33,251,252],{"class":39},", 1);       ",[33,254,255],{"class":207},"\u002F* поява *\u002F\n",[33,257,259,262,265,268],{"class":35,"line":258},6,[33,260,261],{"class":39},"--ease-in: cubic-bezier(0",[33,263,264],{"class":242},".4",[33,266,267],{"class":39},", 0, 1, 1);            ",[33,269,270],{"class":207},"\u002F* зникнення *\u002F\n",[33,272,274,277,280,283,286],{"class":35,"line":273},7,[33,275,276],{"class":39},"--ease-in-out: cubic-bezier(0",[33,278,279],{"class":242},".65",[33,281,282],{"class":39},", 0, 0",[33,284,285],{"class":242},".35",[33,287,288],{"class":39},", 1);\n",[33,290,292,295,298,301,304,307],{"class":35,"line":291},8,[33,293,294],{"class":39},"--ease-emphasized: cubic-bezier(0",[33,296,297],{"class":242},".32",[33,299,300],{"class":39},", 0",[33,302,303],{"class":242},".72",[33,305,306],{"class":39},", 0, 1); ",[33,308,309],{"class":207},"\u002F* фізичний рух *\u002F\n",[10,311,312,313,316,317,320,321,324,325,328,329,332,333,336,337,340,341,344],{},"У ",[14,314,315],{},"theme.css"," типова ",[14,318,319],{},"transition"," без явного ",[14,322,323],{},"duration-*"," бере ",[14,326,327],{},"base"," +\n",[14,330,331],{},"ease-out"," — тобто кожен ",[14,334,335],{},"transition-colors"," у бібліотеці рухається\nоднаково. Явні значення потрібні лише там, де роль інша: ",[14,338,339],{},"ease-emphasized","\nдля індикатора вкладок і панелі drawer, ",[14,342,343],{},"duration-fast"," для повзунка.",[10,346,347,348,351,352,355,356,359],{},"Під ",[14,349,350],{},"prefers-reduced-motion: reduce"," усі тривалості й затримки скидаються\nглобально в ",[14,353,354],{},"main.css",". Затримки — обов'язково: анімація з\n",[14,357,358],{},"animation-fill-mode: both"," тримає елемент невидимим увесь час затримки,\nі без скидання каскад «з'являвся б по частинах з паузами».",[19,361,363],{"id":362},"фокус","Фокус",[10,365,366,119,369,372,373,376,377,380,381,384],{},[14,367,368],{},"--ring",[14,370,371],{},"--ring-offset"," — єдине місце, де задається фокус-кільце. У ваших\nчотирьох проєктах воно написане по-різному майже в кожному компоненті\n(",[14,374,375],{},"focus:ring-primary-500\u002F20",", ",[14,378,379],{},"outline: 2px solid var(--accent)",", подекуди\nпросто ",[14,382,383],{},"focus:outline-none"," без заміни). Без єдиного токена контракт\nдоступності неможливо перевірити автоматично.",[10,386,387,389,390,393],{},[14,388,371],{}," — це колір ",[67,391,392],{},"під"," елементом. Він відриває кільце від\nзаливки, інакше на суцільній кнопці кільце зливається з нею.",[19,395,397],{"id":396},"конфіг-для-tailwind-v3","Конфіг для Tailwind v3",[10,399,400,401,403,404,407,408,411],{},"На v4 реєстрація токенів лежить у ",[14,402,315],{}," (",[14,405,406],{},"@theme inline","). Для v3\nпотрібен еквівалент у ",[14,409,410],{},"tailwind.config.js",":",[24,413,417],{"className":414,"code":415,"language":416,"meta":29,"style":29},"language-js shiki shiki-themes github-light github-dark","const withOpacity = (v) => ({ opacityValue }) =>\n  opacityValue === undefined ? `rgb(var(${v}))` : `rgba(var(${v}), ${opacityValue})`\n\nmodule.exports = {\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: {\n        ink: withOpacity('--ink-rgb'),\n        muted: withOpacity('--ink-muted-rgb'),\n        main: withOpacity('--bg-main-rgb'),\n        card: withOpacity('--bg-card-rgb'),\n        line: withOpacity('--line-rgb'),\n        ring: withOpacity('--ring-rgb'),\n        accent: {\n          DEFAULT: withOpacity('--accent-rgb'),\n          solid: withOpacity('--accent-solid-rgb'),\n        },\n      },\n      borderRadius: {\n        control: 'var(--radius-control)',\n        card: 'var(--radius-card)',\n        overlay: 'var(--radius-overlay)',\n      },\n      boxShadow: {\n        card: 'var(--shadow-card)',\n        raised: 'var(--shadow-raised)',\n        overlay: 'var(--shadow-overlay)',\n      },\n      transitionDuration: {\n        DEFAULT: 'var(--duration-base)',\n      },\n      transitionTimingFunction: {\n        DEFAULT: 'var(--ease-out)',\n        out: 'var(--ease-out)',\n        in: 'var(--ease-in)',\n        'in-out': 'var(--ease-in-out)',\n        emphasized: 'var(--ease-emphasized)',\n      },\n    },\n  },\n}\n","js",[14,418,419,455,495,499,514,525,530,535,540,558,573,588,603,618,633,639,654,669,675,681,687,698,708,719,724,730,740,751,761,766,772,783,788,794,804,814,825,839,850,855,861,867],{"__ignoreMap":29},[33,420,421,425,428,431,433,437,440,443,446,449,452],{"class":35,"line":36},[33,422,424],{"class":423},"szBVR","const",[33,426,427],{"class":242}," withOpacity",[33,429,430],{"class":423}," =",[33,432,403],{"class":39},[33,434,436],{"class":435},"s4XuR","v",[33,438,439],{"class":39},") ",[33,441,442],{"class":423},"=>",[33,444,445],{"class":39}," ({ ",[33,447,448],{"class":435},"opacityValue",[33,450,451],{"class":39}," }) ",[33,453,454],{"class":423},"=>\n",[33,456,457,460,463,467,470,474,476,479,482,485,487,490,492],{"class":35,"line":211},[33,458,459],{"class":39},"  opacityValue ",[33,461,462],{"class":423},"===",[33,464,466],{"class":465},"sj4cs"," undefined",[33,468,469],{"class":423}," ?",[33,471,473],{"class":472},"sZZnC"," `rgb(var(${",[33,475,436],{"class":39},[33,477,478],{"class":472},"}))`",[33,480,481],{"class":423}," :",[33,483,484],{"class":472}," `rgba(var(${",[33,486,436],{"class":39},[33,488,489],{"class":472},"}), ${",[33,491,448],{"class":39},[33,493,494],{"class":472},"})`\n",[33,496,497],{"class":35,"line":220},[33,498,233],{"emptyLinePlaceholder":232},[33,500,501,504,506,509,511],{"class":35,"line":229},[33,502,503],{"class":465},"module",[33,505,62],{"class":39},[33,507,508],{"class":465},"exports",[33,510,430],{"class":423},[33,512,513],{"class":39}," {\n",[33,515,516,519,522],{"class":35,"line":236},[33,517,518],{"class":39},"  darkMode: ",[33,520,521],{"class":472},"'class'",[33,523,524],{"class":39},",\n",[33,526,527],{"class":35,"line":258},[33,528,529],{"class":39},"  theme: {\n",[33,531,532],{"class":35,"line":273},[33,533,534],{"class":39},"    extend: {\n",[33,536,537],{"class":35,"line":291},[33,538,539],{"class":39},"      colors: {\n",[33,541,543,546,549,552,555],{"class":35,"line":542},9,[33,544,545],{"class":39},"        ink: ",[33,547,548],{"class":242},"withOpacity",[33,550,551],{"class":39},"(",[33,553,554],{"class":472},"'--ink-rgb'",[33,556,557],{"class":39},"),\n",[33,559,561,564,566,568,571],{"class":35,"line":560},10,[33,562,563],{"class":39},"        muted: ",[33,565,548],{"class":242},[33,567,551],{"class":39},[33,569,570],{"class":472},"'--ink-muted-rgb'",[33,572,557],{"class":39},[33,574,576,579,581,583,586],{"class":35,"line":575},11,[33,577,578],{"class":39},"        main: ",[33,580,548],{"class":242},[33,582,551],{"class":39},[33,584,585],{"class":472},"'--bg-main-rgb'",[33,587,557],{"class":39},[33,589,591,594,596,598,601],{"class":35,"line":590},12,[33,592,593],{"class":39},"        card: ",[33,595,548],{"class":242},[33,597,551],{"class":39},[33,599,600],{"class":472},"'--bg-card-rgb'",[33,602,557],{"class":39},[33,604,606,609,611,613,616],{"class":35,"line":605},13,[33,607,608],{"class":39},"        line: ",[33,610,548],{"class":242},[33,612,551],{"class":39},[33,614,615],{"class":472},"'--line-rgb'",[33,617,557],{"class":39},[33,619,621,624,626,628,631],{"class":35,"line":620},14,[33,622,623],{"class":39},"        ring: ",[33,625,548],{"class":242},[33,627,551],{"class":39},[33,629,630],{"class":472},"'--ring-rgb'",[33,632,557],{"class":39},[33,634,636],{"class":35,"line":635},15,[33,637,638],{"class":39},"        accent: {\n",[33,640,642,645,647,649,652],{"class":35,"line":641},16,[33,643,644],{"class":39},"          DEFAULT: ",[33,646,548],{"class":242},[33,648,551],{"class":39},[33,650,651],{"class":472},"'--accent-rgb'",[33,653,557],{"class":39},[33,655,657,660,662,664,667],{"class":35,"line":656},17,[33,658,659],{"class":39},"          solid: ",[33,661,548],{"class":242},[33,663,551],{"class":39},[33,665,666],{"class":472},"'--accent-solid-rgb'",[33,668,557],{"class":39},[33,670,672],{"class":35,"line":671},18,[33,673,674],{"class":39},"        },\n",[33,676,678],{"class":35,"line":677},19,[33,679,680],{"class":39},"      },\n",[33,682,684],{"class":35,"line":683},20,[33,685,686],{"class":39},"      borderRadius: {\n",[33,688,690,693,696],{"class":35,"line":689},21,[33,691,692],{"class":39},"        control: ",[33,694,695],{"class":472},"'var(--radius-control)'",[33,697,524],{"class":39},[33,699,701,703,706],{"class":35,"line":700},22,[33,702,593],{"class":39},[33,704,705],{"class":472},"'var(--radius-card)'",[33,707,524],{"class":39},[33,709,711,714,717],{"class":35,"line":710},23,[33,712,713],{"class":39},"        overlay: ",[33,715,716],{"class":472},"'var(--radius-overlay)'",[33,718,524],{"class":39},[33,720,722],{"class":35,"line":721},24,[33,723,680],{"class":39},[33,725,727],{"class":35,"line":726},25,[33,728,729],{"class":39},"      boxShadow: {\n",[33,731,733,735,738],{"class":35,"line":732},26,[33,734,593],{"class":39},[33,736,737],{"class":472},"'var(--shadow-card)'",[33,739,524],{"class":39},[33,741,743,746,749],{"class":35,"line":742},27,[33,744,745],{"class":39},"        raised: ",[33,747,748],{"class":472},"'var(--shadow-raised)'",[33,750,524],{"class":39},[33,752,754,756,759],{"class":35,"line":753},28,[33,755,713],{"class":39},[33,757,758],{"class":472},"'var(--shadow-overlay)'",[33,760,524],{"class":39},[33,762,764],{"class":35,"line":763},29,[33,765,680],{"class":39},[33,767,769],{"class":35,"line":768},30,[33,770,771],{"class":39},"      transitionDuration: {\n",[33,773,775,778,781],{"class":35,"line":774},31,[33,776,777],{"class":39},"        DEFAULT: ",[33,779,780],{"class":472},"'var(--duration-base)'",[33,782,524],{"class":39},[33,784,786],{"class":35,"line":785},32,[33,787,680],{"class":39},[33,789,791],{"class":35,"line":790},33,[33,792,793],{"class":39},"      transitionTimingFunction: {\n",[33,795,797,799,802],{"class":35,"line":796},34,[33,798,777],{"class":39},[33,800,801],{"class":472},"'var(--ease-out)'",[33,803,524],{"class":39},[33,805,807,810,812],{"class":35,"line":806},35,[33,808,809],{"class":39},"        out: ",[33,811,801],{"class":472},[33,813,524],{"class":39},[33,815,817,820,823],{"class":35,"line":816},36,[33,818,819],{"class":39},"        in: ",[33,821,822],{"class":472},"'var(--ease-in)'",[33,824,524],{"class":39},[33,826,828,831,834,837],{"class":35,"line":827},37,[33,829,830],{"class":472},"        'in-out'",[33,832,833],{"class":39},": ",[33,835,836],{"class":472},"'var(--ease-in-out)'",[33,838,524],{"class":39},[33,840,842,845,848],{"class":35,"line":841},38,[33,843,844],{"class":39},"        emphasized: ",[33,846,847],{"class":472},"'var(--ease-emphasized)'",[33,849,524],{"class":39},[33,851,853],{"class":35,"line":852},39,[33,854,680],{"class":39},[33,856,858],{"class":35,"line":857},40,[33,859,860],{"class":39},"    },\n",[33,862,864],{"class":35,"line":863},41,[33,865,866],{"class":39},"  },\n",[33,868,870],{"class":35,"line":869},42,[33,871,872],{"class":39},"}\n",[10,874,875],{},"Назви класів після цього однакові в обох версіях, тому скопійований\nкомпонент компілюється без змін.",[19,877,879],{"id":878},"дві-речі-які-на-v3-не-працюють","Дві речі, які на v3 не працюють",[10,881,882,119,885,888,889,119,892,895],{},[14,883,884],{},"@utility scrollbar-thin",[14,886,887],{},"@custom-variant dark"," — синтаксис Tailwind v4.\nНа v3 перенесіть їх у ",[14,890,891],{},"@layer utilities",[14,893,894],{},"darkMode: 'class'"," відповідно.",[897,898,899],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":29,"searchDepth":211,"depth":211,"links":901},[902,903,904,905,906,907,908,909],{"id":21,"depth":211,"text":22},{"id":82,"depth":211,"text":83},{"id":112,"depth":211,"text":113},{"id":151,"depth":211,"text":152},{"id":190,"depth":211,"text":191},{"id":362,"depth":211,"text":363},{"id":396,"depth":211,"text":397},{"id":878,"depth":211,"text":879},null,[],"Портативний шар кольорів, радіусів і тіней, спільний для Tailwind v3 і v4.",{},"md",{},"\u002Fdocs\u002Ffoundations\u002Ftokens",{"title":5,"description":912},"stable","docs\u002Ffoundations\u002Ftokens","24Ti-L70WZLIi8HLwiUYeT94lYZEYaB0nOrKTQMsDzA",1789660506389]