Design Tokens hukusanya kila kigezo cha CSS, rangi, rundo la fonti, kipenyo na kivuli kinachotumiwa na ukurasa, kuzipanga katika tokens msingi, modi za mandhari na upeo wa vipengele, na kuzipakua kama design-token W3C JSON ya Figma au kama faili CSS.
Mfumo wa kubuni hauandikwi kabisa kama inavyotekelezwa. Baleti halisi, mizani ya nafasi na njia panda ya aina huishi katika laha za mitindo - huenea katika sifa maalum, ubatilifu wa mandhari na thamani zenye msimbo mgumu - na kuzijenga upya kwa mkono kutoka kwa DevTools kunamaanisha kubofya mamia ya sheria na kunakili thamani moja baada ya nyingine.
Chombo hiki kinazisoma zote mara moja. Hutembea kila laha ya mtindo kwenye ukurasa, ikijumuisha zile zenye asili tofauti ambazo ukurasa wenyewe hauruhusiwi kukagua, na hukusanya kila sifa maalum, pamoja na vigeuzo vilivyowekwa wakati wa utekelezaji katika mitindo ya ndani. Vigezo kwenye:root huwa tokens msingi; majina yale yale yaliyofafanuliwa upya chini ya kiteuzi cha mandhari kama vile.dark, [data-theme="dark"] au prefers-color-scheme huwa hali tofauti; Vigezo vinavyofafanuliwa kwenye vipengele vya mtu binafsi vimeorodheshwa kama upeo. Kila thamani inatatuliwa kupitia var() mnyororo wake, kwa hivyo unaona rangi ambayo hutoa, sio tu rejeleo la utaftaji mwingine.
Kila token imeainishwa kutoka kwa thamani na jina lake - rangi, familia ya fonti, saizi ya fonti, uzito, urefu wa mstari, nafasi, kipenyo, kivuli, upinde rangi, muda, kurahisisha au faharasa ya z - na rangi hurekebishwa kuwa hex, ikijumuisha fomati za chaneli pekee Tailwind na matumizi ya shadcn ( 222 47% 11% ya Bootstrap ' -rgb. Kando ya vigeu vilivyotangazwa, sampuli za zana zilitoa vipengee vya kuripoti rangi, safu za fonti, saizi, radii na vivuli ambavyo hutumika haswa, pamoja na hesabu za matumizi - kile unachohitaji kwenye tovuti ambayo haijawahi kutumia vigeuzo hata kidogo.
Hamisha huchukua mbofyo mmoja. Download tokens JSON huhifadhi umbizo la Design Tokens W3C ( $value na $type), ambalo programu-jalizi Tokens Studio huleta kwenye Kamusi Figma na Style Dictionary hubadilika kuwa msimbo wa jukwaa lolote; Njia za mandhari na maadili yanayozingatiwa huwekwa katika vikundi vyao wenyewe, kwa hivyo hakuna kinachochanganyika. Download CSS huandika viambajengo nyuma kama laha ya mtindo, na kila modi chini ya kiteuzi chake asili.
Sifa maalum kutoka kwa kila laha ya mtindo, ikiwa ni pamoja na laha zenye asili tofauti ambazo ukurasa hauwezi kusoma, pamoja na vibadala vilivyowekwa wakati wa utekelezaji katika mitindo ya ndani.
Ubatilishaji chini ya.dark, [data-theme] au prefers-color-scheme huwa hali tofauti, zinazoonyeshwa kando na thamani ya msingi.
Kila msururu wa var() hutatuliwa, na kila token huandikwa kama rangi, fonti, saizi, nafasi, kipenyo, kivuli, muda, kurahisisha au z-index.
Hex, rgb, hsl, oklch, rangi zilizotajwa na thamani za chaneli pekee Tailwind, shadcn na matumizi Bootstrap, zote zikiwa za kawaida hadi hex.
Rangi, safu za fonti, saizi, uzani, radii na vivuli vilivyotolewa sampuli kutoka kwa vipengele vilivyotolewa, na ni mara ngapi kila kimoja kinaonekana.
W3C design-token JSON kwa Tokens Studio na Style Dictionary, au faili CSS yenye kila modi chini ya kiteuzi chake asili.
Ingiza ubao halisi, chapa na nafasi kwenye Tokens Studio badala ya kuchagua rangi kutoka kwa picha za skrini.
Angalia ni rangi ngapi na saizi za fonti ambazo tovuti hutumia kwa kweli, na ni maadili gani yanapita tokens inazofafanua.
Linganisha kila kigezo kinachobatilishwa na hali ya giza na thamani yake nyepesi, kando kando, na uone zile ambazo hazijawahi kubatilishwa.
Hamisha tokens mara moja na uzilishe kwa Style Dictionary au usanidi wa Tailwind badala ya kunakili thamani kwa mkono.
Vuta mfumo wa rangi, aina ya ukubwa na radii ya tovuti unayoipenda kwenye faili unayoweza kufanya kazi.
Bofya ikoni ya Design Tokens kwenye kituo cha DevSuite Pro. Uchimbaji huendeshwa mara moja na muhtasari huhesabu vigeu, modi, rangi na safu za fonti.
Kichupo cha Rangi kinaonyesha kila token ya rangi kama saa, iliyogawanyika ili kuonyesha kila hali ya mandhari, ikifuatiwa na rangi ambazo ukurasa unatoa, pamoja na hesabu za matumizi.
Uchapaji huhakiki kila safu ya fonti na kuorodhesha ukubwa, uzito, urefu wa laini na sheria za @font-face; kichupo cha mwisho kinashughulikia nafasi, radii, vivuli na mwendo.
Kichupo cha Vigezo huorodhesha kila kipengele maalum na thamani yake iliyoidhinishwa na kusuluhishwa. Badili kati ya msingi, kila modi ya mandhari na vipengee vilivyo na upeo wa vipengele.
Download tokens JSON za Figma kupitia Tokens Studio, au Download CSS kwa laha ya mtindo. Weka tiki kwenye kisanduku cha kuteua ili kujumuisha viambajengo vya vijenzi pia.
Sakinisha DevSuite Pro bila malipo na ufungue zana 74+ za wasanidi kwa kivinjari chako.
