[{"data":1,"prerenderedAt":670},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ffoundations\u002Ftokens":3},{"id":4,"title":5,"body":6,"component":659,"dependsOn":660,"description":661,"emitDescriptions":662,"extension":663,"meta":664,"navigation":331,"order":36,"path":665,"seo":666,"status":667,"stem":668,"__hash__":669},"docs\u002Fdocs\u002Ffoundations\u002Ftokens.md","Токени",{"type":7,"value":8,"toc":650},"minimark",[9,18,23,48,63,74,80,84,99,110,114,124,146,149,153,162,188,192,213,222,226,241,623,626,630,646],[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,119,197,200,201,204,205,208,209,212],{},[14,195,196],{},"--ring",[14,198,199],{},"--ring-offset"," — єдине місце, де задається фокус-кільце. У ваших\nчотирьох проєктах воно написане по-різному майже в кожному компоненті\n(",[14,202,203],{},"focus:ring-primary-500\u002F20",", ",[14,206,207],{},"outline: 2px solid var(--accent)",", подекуди\nпросто ",[14,210,211],{},"focus:outline-none"," без заміни). Без єдиного токена контракт\nдоступності неможливо перевірити автоматично.",[10,214,215,217,218,221],{},[14,216,199],{}," — це колір ",[67,219,220],{},"під"," елементом. Він відриває кільце від\nзаливки, інакше на суцільній кнопці кільце зливається з нею.",[19,223,225],{"id":224},"конфіг-для-tailwind-v3","Конфіг для Tailwind v3",[10,227,228,229,232,233,236,237,240],{},"На v4 реєстрація токенів лежить у ",[14,230,231],{},"theme.css"," (",[14,234,235],{},"@theme inline","). Для v3\nпотрібен еквівалент у ",[14,238,239],{},"tailwind.config.js",":",[24,242,246],{"className":243,"code":244,"language":245,"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    },\n  },\n}\n","js",[14,247,248,285,326,333,349,361,367,373,379,397,412,427,442,457,472,478,493,508,514,520,526,537,547,558,563,569,579,590,600,605,611,617],{"__ignoreMap":29},[33,249,250,254,258,261,263,267,270,273,276,279,282],{"class":35,"line":36},[33,251,253],{"class":252},"szBVR","const",[33,255,257],{"class":256},"sScJk"," withOpacity",[33,259,260],{"class":252}," =",[33,262,232],{"class":39},[33,264,266],{"class":265},"s4XuR","v",[33,268,269],{"class":39},") ",[33,271,272],{"class":252},"=>",[33,274,275],{"class":39}," ({ ",[33,277,278],{"class":265},"opacityValue",[33,280,281],{"class":39}," }) ",[33,283,284],{"class":252},"=>\n",[33,286,288,291,294,298,301,305,307,310,313,316,318,321,323],{"class":35,"line":287},2,[33,289,290],{"class":39},"  opacityValue ",[33,292,293],{"class":252},"===",[33,295,297],{"class":296},"sj4cs"," undefined",[33,299,300],{"class":252}," ?",[33,302,304],{"class":303},"sZZnC"," `rgb(var(${",[33,306,266],{"class":39},[33,308,309],{"class":303},"}))`",[33,311,312],{"class":252}," :",[33,314,315],{"class":303}," `rgba(var(${",[33,317,266],{"class":39},[33,319,320],{"class":303},"}), ${",[33,322,278],{"class":39},[33,324,325],{"class":303},"})`\n",[33,327,329],{"class":35,"line":328},3,[33,330,332],{"emptyLinePlaceholder":331},true,"\n",[33,334,336,339,341,344,346],{"class":35,"line":335},4,[33,337,338],{"class":296},"module",[33,340,62],{"class":39},[33,342,343],{"class":296},"exports",[33,345,260],{"class":252},[33,347,348],{"class":39}," {\n",[33,350,352,355,358],{"class":35,"line":351},5,[33,353,354],{"class":39},"  darkMode: ",[33,356,357],{"class":303},"'class'",[33,359,360],{"class":39},",\n",[33,362,364],{"class":35,"line":363},6,[33,365,366],{"class":39},"  theme: {\n",[33,368,370],{"class":35,"line":369},7,[33,371,372],{"class":39},"    extend: {\n",[33,374,376],{"class":35,"line":375},8,[33,377,378],{"class":39},"      colors: {\n",[33,380,382,385,388,391,394],{"class":35,"line":381},9,[33,383,384],{"class":39},"        ink: ",[33,386,387],{"class":256},"withOpacity",[33,389,390],{"class":39},"(",[33,392,393],{"class":303},"'--ink-rgb'",[33,395,396],{"class":39},"),\n",[33,398,400,403,405,407,410],{"class":35,"line":399},10,[33,401,402],{"class":39},"        muted: ",[33,404,387],{"class":256},[33,406,390],{"class":39},[33,408,409],{"class":303},"'--ink-muted-rgb'",[33,411,396],{"class":39},[33,413,415,418,420,422,425],{"class":35,"line":414},11,[33,416,417],{"class":39},"        main: ",[33,419,387],{"class":256},[33,421,390],{"class":39},[33,423,424],{"class":303},"'--bg-main-rgb'",[33,426,396],{"class":39},[33,428,430,433,435,437,440],{"class":35,"line":429},12,[33,431,432],{"class":39},"        card: ",[33,434,387],{"class":256},[33,436,390],{"class":39},[33,438,439],{"class":303},"'--bg-card-rgb'",[33,441,396],{"class":39},[33,443,445,448,450,452,455],{"class":35,"line":444},13,[33,446,447],{"class":39},"        line: ",[33,449,387],{"class":256},[33,451,390],{"class":39},[33,453,454],{"class":303},"'--line-rgb'",[33,456,396],{"class":39},[33,458,460,463,465,467,470],{"class":35,"line":459},14,[33,461,462],{"class":39},"        ring: ",[33,464,387],{"class":256},[33,466,390],{"class":39},[33,468,469],{"class":303},"'--ring-rgb'",[33,471,396],{"class":39},[33,473,475],{"class":35,"line":474},15,[33,476,477],{"class":39},"        accent: {\n",[33,479,481,484,486,488,491],{"class":35,"line":480},16,[33,482,483],{"class":39},"          DEFAULT: ",[33,485,387],{"class":256},[33,487,390],{"class":39},[33,489,490],{"class":303},"'--accent-rgb'",[33,492,396],{"class":39},[33,494,496,499,501,503,506],{"class":35,"line":495},17,[33,497,498],{"class":39},"          solid: ",[33,500,387],{"class":256},[33,502,390],{"class":39},[33,504,505],{"class":303},"'--accent-solid-rgb'",[33,507,396],{"class":39},[33,509,511],{"class":35,"line":510},18,[33,512,513],{"class":39},"        },\n",[33,515,517],{"class":35,"line":516},19,[33,518,519],{"class":39},"      },\n",[33,521,523],{"class":35,"line":522},20,[33,524,525],{"class":39},"      borderRadius: {\n",[33,527,529,532,535],{"class":35,"line":528},21,[33,530,531],{"class":39},"        control: ",[33,533,534],{"class":303},"'var(--radius-control)'",[33,536,360],{"class":39},[33,538,540,542,545],{"class":35,"line":539},22,[33,541,432],{"class":39},[33,543,544],{"class":303},"'var(--radius-card)'",[33,546,360],{"class":39},[33,548,550,553,556],{"class":35,"line":549},23,[33,551,552],{"class":39},"        overlay: ",[33,554,555],{"class":303},"'var(--radius-overlay)'",[33,557,360],{"class":39},[33,559,561],{"class":35,"line":560},24,[33,562,519],{"class":39},[33,564,566],{"class":35,"line":565},25,[33,567,568],{"class":39},"      boxShadow: {\n",[33,570,572,574,577],{"class":35,"line":571},26,[33,573,432],{"class":39},[33,575,576],{"class":303},"'var(--shadow-card)'",[33,578,360],{"class":39},[33,580,582,585,588],{"class":35,"line":581},27,[33,583,584],{"class":39},"        raised: ",[33,586,587],{"class":303},"'var(--shadow-raised)'",[33,589,360],{"class":39},[33,591,593,595,598],{"class":35,"line":592},28,[33,594,552],{"class":39},[33,596,597],{"class":303},"'var(--shadow-overlay)'",[33,599,360],{"class":39},[33,601,603],{"class":35,"line":602},29,[33,604,519],{"class":39},[33,606,608],{"class":35,"line":607},30,[33,609,610],{"class":39},"    },\n",[33,612,614],{"class":35,"line":613},31,[33,615,616],{"class":39},"  },\n",[33,618,620],{"class":35,"line":619},32,[33,621,622],{"class":39},"}\n",[10,624,625],{},"Назви класів після цього однакові в обох версіях, тому скопійований\nкомпонент компілюється без змін.",[19,627,629],{"id":628},"дві-речі-які-на-v3-не-працюють","Дві речі, які на v3 не працюють",[10,631,632,119,635,638,639,119,642,645],{},[14,633,634],{},"@utility scrollbar-thin",[14,636,637],{},"@custom-variant dark"," — синтаксис Tailwind v4.\nНа v3 перенесіть їх у ",[14,640,641],{},"@layer utilities",[14,643,644],{},"darkMode: 'class'"," відповідно.",[647,648,649],"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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":287,"depth":287,"links":651},[652,653,654,655,656,657,658],{"id":21,"depth":287,"text":22},{"id":82,"depth":287,"text":83},{"id":112,"depth":287,"text":113},{"id":151,"depth":287,"text":152},{"id":190,"depth":287,"text":191},{"id":224,"depth":287,"text":225},{"id":628,"depth":287,"text":629},null,[],"Портативний шар кольорів, радіусів і тіней, спільний для Tailwind v3 і v4.",{},"md",{},"\u002Fdocs\u002Ffoundations\u002Ftokens",{"title":5,"description":661},"stable","docs\u002Ffoundations\u002Ftokens","nfxA9bvUWUxfVVkvD6LdLze_DlwebmzidRD__R1id0M",1788072641399]