Dizayn tokenlari: rang, shrift va masofani nomli qarorlarga aylantirish

Qisqacha: Dizayn tokeni — dizayndagi bitta qarorning nomi: "asosiy rang", "o'rta masofa", "sarlavha shrifti". CSS'da tokenlar o'zgaruvchi bo'lib yashaydi va uch darajada quriladi: primitiv (--yashil-600 — palitradagi xom rang), semantik (--rang-asosiy: var(--yashil-600) — vazifa) va komponent (--tugma-fon: var(--rang-asosiy)). Komponentlar faqat semantik va komponent tokenlarini o'qiydi. Shunda brend rangi yoki qorong'i rejim bir necha qatorni almashtirish bilan o'zgaradi. Tokenlar W3C DTCG JSON formatida ham saqlanadi va Style Dictionary kabi vositalar bilan CSS'ga aylantiriladi.

Bu darsda

• Dizayn tokeni nima ekanini va u oddiy CSS o'zgaruvchisidan nimasi bilan farq qilishini tushuntirasiz.
• «Bahor» palitrasini primitiv → semantik → komponent zanjiriga aylantirasiz.
• Shrift, o'lcham (--step-*), masofa, burchak va soya shkalalarini tokenlar bilan yozasiz.
• Tokenlarni nomlash qoidalarini qo'llaysiz va tipik xatolarni topasiz.
• W3C DTCG formati, Style Dictionary, Figma Variables va Open Props nima ekanini bilasiz.

Oldin bilishingiz kerak: CSS o'zgaruvchilari 1, CSS o'zgaruvchilari 2, Ranglar 3: light-dark(), Fluid tipografiya va Utopia, Kaskadni boshqarish.

1. Nega bu kerak?

Jasur akaning jiyani «Bahor» uchun yangi maket chizdi — bu safar Figma'da (Figma dasturchi uchun 1 darsida o'rganamiz). Maketning chetida jadval bor: "Asosiy — #2f6b3a. Urg'u — #b4461a. Kichik masofa — 8 px, o'rta — 16 px, katta — 24 px. Burchak — 8 px."

Dasturchi maketni ochadi. Kartada padding 17 piksel ko'rinadi. Jadvalda esa 17 yo'q. Bu xato chizilganmi yoki ataylabmi? Xabar yozadi, javob kutadi. Keyingi hafta dizayner yashilni biroz to'qroq qiladi — endi CSS'da uni qidirish kerak. Bir joyda #2f6b3a, boshqasida oklch(47.5% 0.1 147.7), uchinchisida var(--rang-asosiy).

Muammo — dizayner va dasturchi har xil tilda gaplashyapti. Dizayner "o'rta masofa" deydi, dasturchi 16px yozadi. Ikkalasi bir narsani nazarda tutadi, lekin bu bog'liqlik hech qayerda yozilmagan.

Dizayn tokeni (design token) — shu bog'liqlikning nomi. "O'rta masofa" degan qaror bitta nom oladi — --masofa-m — va dizayn faylida ham, kodda ham shu nom bilan yuradi. Dizayner qiymatni o'zgartirsa, nom o'zgarmaydi. Kod o'z-o'zidan yangilanadi.

05-qismda bu so'z bir necha marta va'da qilingan edi:

• CSS o'zgaruvchilari 1: "dizayn tizimlari o'zgaruvchilarni qatlam-qatlam quradi";
• Chegara va soyalar: "soyalarni 3–5 ta nomli darajada saqlang";
• z-index: "bu raqamlar token deb ataladi";
• Fluid tipografiya: "--shrift-* kabi nomlar tizim sifatida keladi".

Bugun shu va'dalarning hammasi bitta faylda — tokenlar.css da — yig'iladi.

Tokenlarni ro'zg'ordagi retsept daftariga o'xshatish mumkin. Rustam aka "bir choy qoshiq tuz" deydi, "5 gramm" demaydi. Qoshiq — kelishilgan o'lchov. Oshxonada hamma uni biladi va hamma bir xil pishiradi.

2. Token va o'zgaruvchi

Har token — o'zgaruvchi, lekin har o'zgaruvchi token emas. Farqi — ma'noda:

• --_fon (CSS o'zgaruvchilari 2 darsidagi ichki o'zgaruvchi) — komponent ichidagi hisob-kitob uchun vaqtinchalik quti. Token emas.
• --x, --y — misol uchun. Token emas.
• --rang-asosiy — "brendning asosiy rangi" degan dizayn qarori. Dizayner uni biladi va nomlaydi. Bu — token.

Tokenlar odatda shu turlarga bo'linadi:

Harakat — davomiylik va egri chiziq (easing) — ham token bo'lishi mumkin. Breakpointlar esa CSS o'zgaruvchisi bo'la olmaydi: Media queries darsidan eslang, @media (width >= var(--x)) ishlamaydi. Ularni izohda qayd qilamiz va qo'lda yozamiz.

3. Uch daraja

3.1 Primitiv, semantik, komponent

Tokenlar zanjir bo'lib quriladi:

flowchart LR
  P["Primitiv<br/>--yashil-600"] --> S["Semantik<br/>--rang-asosiy"]
  S --> K["Komponent<br/>--tugma-fon"]
  K --> C[".bron-havola<br/>background-color"]

Nimaga qarang: har daraja faqat o'zidan oldingisiga murojaat qiladi. Komponent --yashil-600 ni bilmaydi — u faqat "tugma foni" ni biladi.

• Primitiv (primitive) tokenlar — palitraning xom qiymatlari. Ular nima ekani bilan nomlanadi: --yashil-600, --gisht-300. Ularda ma'no yo'q: --yashil-600 hech narsaga "tegishli" emas, u shunchaki palitradagi bitta rang.
• Semantik (semantic) tokenlar — vazifa. Ular nima uchun ekani bilan nomlanadi: --rang-asosiy, --rang-fon, --rang-urgu. Qiymati — primitivga havola.
• Komponent (component) tokenlar — bitta komponentning sozlamasi: --tugma-fon, --karta-rang. Qiymati — semantik tokenga havola.

Xaritalarda buni ko'pincha inglizcha misol bilan ko'rsatishadi: --blue-600 → --color-primary → --btn-bg. «Bahor»da aynan shu tuzilma, faqat o'zbekcha.

3.2 Nega uch daraja?

Birinchi savol: "--rang-asosiy: oklch(47.5% 0.1 147.7) deb to'g'ridan-to'g'ri yozsak bo'lmaydimi?" Bo'ladi — 05-qism shunday qildi. Primitiv daraja ikki holatda foyda beradi:

1. Bir rang, bir necha vazifa. --kul-900 ham yorug' rejimdagi matn, ham chop etishdagi matn. --qaymoq-50 — yorug' fon va qorong'i rejimdagi matn. Qiymat bir joyda yashaydi.
2. Qorong'i rejim. Semantik token rejimga qarab boshqa primitivga ulanadi: --rang-fon yorug'da --qaymoq-50, qorong'ida --yashil-900. Komponentlar buni bilmaydi ham. Buni keyingi darsda yakunlaymiz.

Komponent darajasi esa CSS o'zgaruvchilari 2 darsidagi "API": .bron-havola tashqaridan faqat --tugma-fon va --tugma-matn ni qabul qiladi. Footer tugmani to'q yashil qilmoqchi bo'lsa, footer { --tugma-fon: var(--rang-asosiy-toq); } deydi — tugmaning ichiga kirmaydi.

Tekshirib ko'ring: Dizayner "urg'u rangini biroz yorqinroq qilamiz" dedi. Qaysi darajadagi tokenni o'zgartirasiz — va nechta joyda?

4. «Bahor» tokenlari

4.1 Ranglar

«Bahor» palitrasi Ranglar 2 darsida oklch() ga o'tkazilgan, qorong'i qiymatlari Ranglar 3 darsida qo'shilgan. Endi ularni primitivlarga ajratamiz. Nom — rang oilasi va daraja: kattaroq son — to'qroq rang. «Bahor»ning g'ishtdek qizg'ish urg'u rangi — gisht.

:root {
  /* 1. Primitivlar: palitraning xom ranglari */
  --yashil-300: oklch(80.3% 0.098 150.8); /* #8fd19e */
  --yashil-600: oklch(47.5% 0.1 147.7); /* #2f6b3a */
  --yashil-700: oklch(42.1% 0.12 143.1); /* #1a5d1a */
  --yashil-900: oklch(28.2% 0.05 148.6); /* #16301b */
  --qaymoq-50: oklch(98.6% 0.014 84.6); /* #fffaf0 */
  --gisht-300: oklch(75% 0.13 39.8);
  --gisht-600: oklch(53.7% 0.153 39.8); /* #b4461a */
  --kul-300: oklch(80% 0.016 162);
  --kul-600: oklch(49.9% 0.016 162); /* #5b6660 */
  --kul-900: oklch(27.2% 0.019 161); /* #1f2a24 */

  /* 2. Semantik ranglar: vazifa bo'yicha (yorug' rejim) */
  --rang-fon: var(--qaymoq-50);
  --rang-matn: var(--kul-900);
  --rang-asosiy: var(--yashil-600);
  --rang-asosiy-toq: var(--yashil-700);
  --rang-urgu: var(--gisht-600);
  --rang-ikkinchi: var(--kul-600);
}

/* Qorong'i qiymatlar (Ranglar 3 darsi) */
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
    --rang-fon: light-dark(var(--qaymoq-50), var(--yashil-900));
    --rang-matn: light-dark(var(--kul-900), var(--qaymoq-50));
    --rang-asosiy: light-dark(var(--yashil-600), var(--yashil-300));
    --rang-urgu: light-dark(var(--gisht-600), var(--gisht-300));
    --rang-ikkinchi: light-dark(var(--kul-600), var(--kul-300));
  }
}

Primitiv qiymatlar 05-qismdagi bilan aynan bir xil — ko'rinish bir piksel ham o'zgarmaydi. Faqat tuzilma o'zgardi. Hex izohlari — dizayner bilan gaplashish uchun: Figma'da ko'pincha shu ko'rinishda.

light-dark() — yangi Baseline (2024-yil may), eski brauzerlarda ishlamaydi. Shuning uchun u Ranglar 3 darsidagidek @supports ichida: eski brauzer yuqoridagi yorug' qiymatlarni oladi.

--rang-asosiy-toq ning qorong'i qiymati hali yo'q — Foydalanuvchi afzalliklari darsida aytganimizdek, uni keyingi darsda qo'shamiz. Shuning uchun u @supports blokida ham yo'q.

Diqqat qiling: palitradagi hamma rang ham primitiv bo'lishi shart emas. Portfolio'dagi --rang-chegara va --rang-fon-och — color-mix() bilan hisoblanadigan semantik tokenlar (Ranglar 3). Ularning primitivi yo'q: ular boshqa tokenlardan "tug'iladi".

4.2 Shrift tokenlari

Fluid tipografiya darsida va'da qilingan --shrift-* va --step-* nomlari:

:root {
  /* Shrift oilalari (Shrift asoslari, Web shriftlar) */
  --shrift-matn: system-ui, sans-serif;
  --shrift-sarlavha: "Bahor", "Bahor zaxira", serif;
  --shrift-kod:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;

  /* O'lcham shkalasi: 360 px da 16 × 1.2, 1280 px da 18 × 1.25
     (Fluid tipografiya darsidagi jadval) */
  --step--1: clamp(0.8333rem, 0.8072rem + 0.1159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1193rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5444rem + 0.8161vw, 2.1973rem);

  /* Qator balandligi (Qator balandligi darsi) */
  --qator-matn: 1.5;
  --qator-sarlavha: 1.2;
}

--step-* qatorlari Fluid tipografiya darsidagi jadvaldan: kichik ekranda asosiy matn 16 piksel va nisbat 1.2, katta ekranda 18 piksel va 1.25. Har qatorni o'sha darsdagi besh qadam bilan hisobladik. --step-2 o'sha darsdagi misol bilan aynan bir xil chiqdi: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem).

Nega --shrift-olcham-1 emas, --step-1? Bu — Utopia vositasining nomi, u chiqargan kodni ko'p loyihada uchratasiz. Kalkulyatordan nusxa olganda nom o'zgartirilmaydi, qayta tekshirish oson. Manfiy qadam — ikki chiziqcha bilan: --step--1 (bu to'g'ri, xato emas).

Endi asos.css dagi sarlavhalar raqam emas, qaror yozadi:

h1 {
  font-family: var(--shrift-sarlavha);
  font-size: var(--step-3);
  line-height: var(--qator-sarlavha);
}

4.3 Masofa shkalasi

Masofa ham shu shkaladan chiqadi: asos — 16 → 18 piksel (--step-0), qolganlari uning ko'paytmalari:

:root {
  /* Masofa: asos 16 → 18 px, Utopia masofa kalkulyatori usuli */
  --masofa-2xs: clamp(0.25rem, 0.2378rem + 0.0543vw, 0.2813rem);
  --masofa-xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.5625rem);
  --masofa-s: clamp(0.75rem, 0.7133rem + 0.163vw, 0.8438rem);
  --masofa-m: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --masofa-l: clamp(1.5rem, 1.4266rem + 0.3261vw, 1.6875rem);
  --masofa-xl: clamp(2rem, 1.9022rem + 0.4348vw, 2.25rem);
  --masofa-2xl: clamp(3rem, 2.8533rem + 0.6522vw, 3.375rem);

  /* Juftlik: telefonda s (12 px), kompyuterda l (27 px) */
  --masofa-s-l: clamp(0.75rem, 0.3832rem + 1.6304vw, 1.6875rem);
}

Nomlar — kiyim o'lchamlari kabi: s (small — kichik), m (medium — o'rta), l (large — katta), xl, 2xl. Bu nomlash usuli (T-shirt sizing) dizaynerlar orasida keng tarqalgan. Juftlik — Fluid tipografiya darsida aytilgan Utopia g'oyasi: bo'lim oraliqlari kabi joylar ekran bilan kuchliroq o'sadi.

Nega shkala kerak? Cheklov yordam beradi. 13px yoki 17px kabi tasodifiy son o'rniga yettita tanlov qoladi — interfeys o'z-o'zidan tekis ko'rinadi. Bu g'oyani Spacing tizimi darsida chuqurroq o'rganamiz: 4/8 piksellik to'r, "ichki masofa tashqisidan kichik" qoidasi.

4.4 Burchak, soya va qatlam

:root {
  /* Burchak */
  --burchak-s: 0.25rem;
  --burchak-m: 0.5rem;
  --burchak-toliq: 999px; /* "tabletka" shakli */

  /* Soya: balandlik darajalari (Chegara va soyalar darsi) */
  --soya-1: 0 1px 2px oklch(0% 0 0 / 12%);
  --soya-2:
    0 1px 2px oklch(0% 0 0 / 12%),
    0 4px 12px oklch(0% 0 0 / 12%);
  --soya-3:
    0 2px 4px oklch(0% 0 0 / 12%),
    0 12px 32px oklch(0% 0 0 / 18%);

  /* Qatlamlar (z-index darsi) */
  --qatlam-yopishqoq: 10;
  --qatlam-menyu: 20;
  --qatlam-ustki: 30;
  --qatlam-otish: 40;
}

Soya nomi — o'lcham emas, balandlik darajasi (elevation): --soya-1 — stolga yaqin menyu kartasi, --soya-3 — ochilgan oyna. Chegara va soyalar darsidagi maslahat shu: bitta sahifada 2–3 ta balandlik. Qorong'i rejimda soyalar boshqacha ishlaydi — buni keyingi darsda hal qilamiz.

--qatlam-* lar z-index darsidan o'zgarishsiz keldi — ular allaqachon token edi, faqat endi shunday nomlanadi.

4.5 Hammasi birga

«Bahor»ning tokenlar.css fayli endi to'rt qism: ranglar, shriftlar (@font-face ham shu yerda, CSS metodologiyalari darsidagi ITCSS "Settings"), masofa, burchak-soya-qatlam. Fayl tokenlar qatlamida — Kaskadni boshqarish darsidagi tartibda birinchi.

Tokenlar ishlayotganini ko'raylik. Karta va tugma faqat tokenlar bilan yozilgan — bironta ham xom son yoki rang yo'q:

<style>
  :root {
    --yashil-600: oklch(47.5% 0.1 147.7);
    --yashil-700: oklch(42.1% 0.12 143.1);
    --qaymoq-50: oklch(98.6% 0.014 84.6);
    --gisht-600: oklch(53.7% 0.153 39.8);
    --kul-900: oklch(27.2% 0.019 161);

    --rang-fon: var(--qaymoq-50);
    --rang-matn: var(--kul-900);
    --rang-asosiy: var(--yashil-600);
    --rang-asosiy-toq: var(--yashil-700);
    --rang-urgu: var(--gisht-600);

    --masofa-xs: 0.5rem;
    --masofa-m: 1rem;
    --burchak-m: 0.5rem;
    --soya-2: 0 1px 2px oklch(0% 0 0 / 12%),
      0 4px 12px oklch(0% 0 0 / 12%);
  }
  body {
    background: var(--rang-fon);
    color: var(--rang-matn);
    font-family: system-ui, sans-serif;
  }
  .taom-karta {
    max-width: 18rem;
    margin-block-end: var(--masofa-m);
    padding: var(--masofa-m);
    border-radius: var(--burchak-m);
    background: white;
    box-shadow: var(--soya-2);
  }
  .taom-karta h3 { margin: 0; color: var(--rang-asosiy); }
  .narx { color: var(--rang-urgu); font-weight: bold; }
  .bron-havola {
    --_fon: var(--tugma-fon, var(--rang-asosiy));
    display: inline-block;
    padding: var(--masofa-xs) var(--masofa-m);
    border-radius: var(--burchak-m);
    background: var(--_fon);
    color: var(--rang-fon);
  }
  .aksiya { --tugma-fon: var(--rang-urgu); }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p><span class="narx">35 000 so'm</span></p>
  <a class="bron-havola" href="bron/">Stolni band qilish</a>
</article>
<p class="aksiya">
  <a class="bron-havola" href="bron/">Aksiyada band qilish</a>
</p>

Nimaga qarang: karta oq, ostida yumshoq ikki qatlamli soya, burchaklari yumaloq. Birinchi tugma yashil, ikkinchisi — .aksiya ichida — qizg'ish. Tugma qoidasi bitta: aksiya faqat komponent tokenini (--tugma-fon) berdi. "Tahrirlab ko'rish" bilan --yashil-600 ni boshqa rangga almashtiring: sarlavha ham, birinchi tugma ham birga o'zgaradi.

Tekshirib ko'ring: Natijadagi .taom-karta da background: white bor. Bu tokenlar tizimida nega xato? Qanday tuzatasiz?

5. Tokenlarni nomlash

5.1 Tuzilma

«Bahor» tokenlari bitta tartibda nomlanadi: guruh — vazifa — aniqlashtirish.

• --rang-asosiy-toq: guruh rang, vazifa asosiy, aniqlashtirish toq.
• --masofa-s-l: guruh masofa, qiymat s, juftlik l.
• --tugma-fon: komponent tugma, vazifa fon.

Qoidalar:

• Semantik nom — vazifa, ko'rinish emas. --rang-yashil emas, --rang-asosiy. Ertaga brend ko'k bo'lsa, --rang-yashil: blue degan kulgili qator paydo bo'ladi.
• Primitiv nom — ko'rinish, vazifa emas. --yashil-600 hech qanday vazifani va'da qilmaydi. Uni istalgan semantik token ishlatishi mumkin.
• Bir til. Bir faylda --rang-fon va --color-text aralashmasin.
• Ichki o'zgaruvchi — pastki chiziq bilan (--_fon), token emasligini ko'rsatish uchun (CSS o'zgaruvchilari 2).

5.2 Nomning o'zi ham qaror

Birinchi qoidaga «Bahor»ning o'zi to'liq javob bermaydi: --rang-asosiy-toq da "toq" (to'q) — ko'rinish so'zi. Yorug' rejimda bu to'g'ri: u asosiy rangdan to'qroq. Qorong'i rejimda esa uning vazifasi — fonga nisbatan kuchliroq ko'rinish — yorqinroq rang bilan bajariladi. Nom "to'q", qiymat esa och bo'lib qoladi. Buni keyingi darsda ko'ramiz.

Real loyihalarda bunday "tarixiy" nomlar ko'p. Nomni o'zgartirish — hamma fayllarda qidirib-almashtirish, ba'zan boshqa jamoalarning kodini ham buzish. Shuning uchun token nomini birinchi kundan vazifa bilan qo'yish muhim. «Bahor»da esa nom qoladi: 05-qismning o'nlab misoli unga tayanadi.

Tekshirib ko'ring: Stajyor ikki token taklif qildi: --rang-qizil (narxlar uchun) va --qizil-600 (palitradagi rang). Qaysi biri noto'g'ri nomlangan?

6. Tokenlar koddan tashqarida

6.1 W3C DTCG formati

Dizayn tizimi faqat veb uchun emas. Xuddi shu ranglar iPhone ilovasida, Android ilovasida, Figma'da ham kerak. Har platforma o'z formatini tushunadi. Umumiy manba kerak.

W3C Design Tokens Community Group (DTCG) — tokenlar uchun umumiy JSON formatini yozgan guruh. Rasmiy saytiga ko'ra, formatning birinchi barqaror versiyasi — 2025.10 — 2025-yil 28-oktabrda chiqdi. Fayl kengaytmasi — .tokens yoki .tokens.json:

{
  "yashil": {
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.1843, 0.4196, 0.2275],
        "hex": "#2f6b3a"
      }
    }
  },
  "rang": {
    "asosiy": {
      "$type": "color",
      "$value": "{yashil.600}"
    }
  },
  "masofa": {
    "m": {
      "$type": "dimension",
      "$value": { "value": 16, "unit": "px" }
    }
  }
}

• $type — token turi, standartdagi aniq ro'yxatdan: color (rang), dimension (o'lcham), fontFamily (shrift oilasi), duration (davomiylik), shadow (soya) va boshqalar.
• $value — qiymat. Rang — rang fazosi va uchta son (0 dan 1 gacha), hex — qo'shimcha.
• "{yashil.600}" — havola (alias): semantik token primitivga ulanadi. Bu CSS'dagi var(--yashil-600) ning JSON'dagi egizagi.

6.2 Style Dictionary

JSON'ni CSS'ga kim aylantiradi? Buning uchun vositalar bor, eng mashhuri — Style Dictionary. U tokenlar faylini o'qiydi va har platforma uchun kod chiqaradi: veb uchun CSS o'zgaruvchilari, iOS va Android uchun o'z formatlari. Vosita npm orqali o'rnatiladi — npm'ni keyingi qismlarda to'liq o'rganamiz, hozir bilish shart emas.

flowchart LR
  F["Figma Variables"] --> J["tokens.json<br/>DTCG"]
  J --> S["Style Dictionary"]
  S --> C["tokenlar.css"]
  S --> I["iOS"]
  S --> A["Android"]

Nimaga qarang: manba bitta — JSON. Dizayner Figma'da rangni o'zgartiradi, eksport qiladi, vosita uchala platformaga yangi kod chiqaradi. Hech kim qo'lda hex ko'chirmaydi.

Figma Variables — Figma'ning o'z token tizimi: ranglar, sonlar va rejimlar (masalan yorug'/qorong'i). Ularni kodga o'tkazishni Figma dasturchi uchun 2 darsida amalda qilamiz.

«Bahor» uchun bu zanjir hozircha ortiqcha: platforma bitta, tokenlar oz. tokenlar.css ning o'zi manba. Zanjir bir nechta ilova va jamoa bo'lganda o'zini oqlaydi.

6.3 Open Props

Tokenlarni o'zingiz yozmasangiz-chi? Open Props — tayyor tokenlar to'plami, Adam Argyle loyihasi (Argyle Ink). U yuzlab CSS o'zgaruvchisi beradi: --size-3 (masofa), --gray-9, --indigo-5 (ranglar), --radius-2, --shadow-3, --font-size-2. Ulasangiz — komponentlaringizni shu tokenlar bilan yozasiz.

Bu tez prototip uchun qulay. Lekin «Bahor» kabi o'z brendi bor loyihada o'z tokenlaringiz yaxshiroq: palitra, shrift va shkala — choyxonaning o'z qarorlari. Open Props'ni misol sifatida o'qish esa foydali: yaxshi nomlangan token tizimi qanday ko'rinishini ko'rasiz.

Tekshirib ko'ring: DTCG faylida "$value": "{rang.asosiy}" yozilgan tugma.fon tokeni bor. CSS'da u qanday ko'rinishga aylanadi?

7. Ko'p uchraydigan xatolar

7.1 Komponentda primitiv

.narx { color: var(--gisht-600); } — ishlaydi, lekin qorong'i rejimda narx to'q qizg'ish qoladi va to'q fonda zo'rg'a o'qiladi. Semantik darajani chetlab o'tdingiz. Tuzatish: komponentlar faqat semantik yoki komponent tokenini o'qiydi: var(--rang-urgu).

7.2 Har qiymatga token

--karta-padding-yuqori-mobil: 13px. Bitta joyda ishlatiladigan token — token emas, faqat uzun nom. Tuzatish: token — takrorlanadigan qaror. Bitta joydagi o'lcham — shkaladan: var(--masofa-s).

7.3 Semantik nomda ko'rinish

--rang-yashil, --masofa-16. Qiymat o'zgarganda nom yolg'on gapiradi. Tuzatish: vazifa bilan — --rang-asosiy, --masofa-m.

7.4 Media query'da token

@media (width >= var(--breakpoint-orta)) — butun blok ishlamaydi. Tuzatish: breakpointlarni tokenlar faylida izoh sifatida saqlang va qo'lda yozing. Yig'uvchi vositalar (PostCSS) buni avtomatlashtira oladi — PostCSS va Lightning CSS darsida.

7.5 Aylana havola

--rang-asosiy: var(--tugma-fon) va --tugma-fon: var(--rang-asosiy). CSS o'zgaruvchilari 2 darsidan eslang: ikkalasi ham yaroqsiz bo'ladi. Tuzatish: havolalar doim bir yo'nalishda — primitiv → semantik → komponent.

8. Mashqlar

1-mashq (oson): qaysi daraja?

Har tokenning darajasini ayting: primitiv, semantik yoki komponent.

1. --kul-600
2. --rang-ikkinchi
3. --karta-rang
4. --masofa-m
5. --gisht-300

Ishora: "Primitiv, semantik, komponent" bo'limi — nom "nima" yoki "nima uchun" deyapti?

2-mashq (o'rta): xom qiymatlarni tokenlarga

«Bahor» aksiya bloki uchun stajyor shunday yozdi:

.aksiya {
  padding: 16px 24px;
  border-radius: 8px;
  background: #fffaf0;
  color: #b4461a;
  font-size: 22px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

Uni «Bahor» tokenlari bilan qayta yozing. Qaysi qiymat shkalaga to'g'ri kelmaydi va nima qilasiz?

Ishora: "«Bahor» tokenlari" bo'limidagi to'rt faylcha; 22 piksel --step-* jadvalida bormi — kichik ekranda 19.2, katta ekranda 22.5.

.aksiya {
  padding: var(--masofa-m) var(--masofa-l);
  border-radius: var(--burchak-m);
  background: var(--rang-fon);
  color: var(--rang-urgu);
  font-size: var(--step-1);
  box-shadow: var(--soya-1);
}

3-mashq (qiyin): ikkinchi brend

Jasur aka yonida ikkinchi choyxona ochmoqchi — «Navro'z». Sayt xuddi shu, faqat ranglar boshqa: asosiy — to'q ko'k oklch(45% 0.12 255), urg'u — to'q sariq oklch(62% 0.15 65). Fon, matn, masofa va shrift — o'sha.

1. Qaysi tokenlarni qayerda o'zgartirasiz? Komponentlarga (komponentlar.css) tegish kerakmi?
2. Yangi ranglarning qaymoq fonga kontrastini DevTools rang tanlagichida tekshiring — 4.5:1 dan yuqorimi?

Ishora: uch darajali zanjirning qaysi halqasi brendga tegishli? @layer tartibida tokenlar birinchi — ikkinchi brend fayli qayerga ulanadi?

/* navroz-tokenlar.css — «Navro'z» uchun qo'shimcha */
:root {
  --kok-300: oklch(80% 0.08 255);
  --kok-600: oklch(45% 0.12 255);
  --sariq-600: oklch(62% 0.15 65);

  --rang-asosiy: var(--kok-600);
  --rang-urgu: var(--sariq-600);
}

4-mashq: Portfolio qadami — portfolio tokenlari

Portfolio'ning tokenlar.css ida hozir ranglar va qatlamlar bor. Uni to'liq token fayliga aylantiring va boshqa fayllardagi xom qiymatlarni tokenlarga almashtiring:

1. :root ga qo'shing: --shrift-matn, --shrift-sarlavha, --shrift-kod; --step--1 … --step-2; --qator-matn, --qator-sarlavha; --masofa-2xs … --masofa-2xl va --masofa-m-xl; --burchak-m; --soya-1.
2. asos.css, layout.css, komponentlar.css, yordamchi.css da: shrift oilalari, font-size lar (clamp() va 0.875rem), line-height, border-radius, kartaning box-shadow i va padding/margin/gap dagi rem qiymatlarni tokenlarga almashtiring.
3. min(100% - 2rem, 70ch) kabi formulalarga va minmax() ichiga tegmang — ular masofa emas, layout hisobi.
4. Sahifalarni 360 va 1280 pikselda, yorug' va qorong'i rejimda solishtiring — hech narsa o'zgarmasin.

Ishora: portfolio qiymatlari «Bahor»nikidan farq qiladi — portfolio shkalasi Fluid tipografiya darsidagi body 16 → 18, h2 22 → 24, h1 28 → 40 formulalaridan. Masofalar esa portfolio'da o'zgarmas rem.

:root {
  /* Shriftlar */
  --shrift-matn: system-ui, sans-serif;
  --shrift-sarlavha: "Sarlavha", system-ui, sans-serif;
  --shrift-kod:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;

  /* O'lcham shkalasi (Fluid tipografiya darsi) */
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.375rem, 1.3261rem + 0.2174vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  --qator-matn: 1.5;
  --qator-sarlavha: 1.2;

  /* Masofa */
  --masofa-2xs: 0.25rem;
  --masofa-xs: 0.5rem;
  --masofa-s: 0.75rem;
  --masofa-m: 1rem;
  --masofa-l: 1.5rem;
  --masofa-xl: 2rem;
  --masofa-2xl: 3rem;
  --masofa-m-xl: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);

  /* Burchak va soya */
  --burchak-m: 0.5rem;
  --soya-1:
    0 1px 2px color-mix(in oklch, var(--rang-matn) 8%, transparent),
    0 4px 12px color-mix(in oklch, var(--rang-matn) 10%, transparent);
}

body {
  font-family: var(--shrift-matn);
  font-size: var(--step-0);
  line-height: var(--qator-matn);
}

h1 {
  font-size: var(--step-2);
}

.loyihalar {
  gap: var(--masofa-m-xl);
}

.loyihalar > article {
  padding: var(--masofa-m);
  box-shadow: var(--soya-1);
}

nav[aria-label="Asosiy menyu"] ul {
  gap: var(--masofa-2xs);
  margin-inline: calc(-1 * var(--masofa-xs));
}

9. Real ishda

• Dizayn tizimlari — Material Design, Apple Human Interface, Atlassian, GitHub Primer — hammasi tokenlarga qurilgan. Ularning hujjatida birinchi bo'lim — ranglar, masofa va shrift tokenlari.
• Dizayner bilan ish. Figma'dagi o'zgaruvchi nomi va CSS'dagi token nomi bir xil bo'lsa, "17 piksel ataylabmi?" degan savol yo'qoladi: maketda raqam emas, token nomi ko'rinadi.
• Brendlash. Bitta kod bazasi bir nechta mijoz uchun — faqat token fayli almashadi (3-mashqdagi «Navro'z»).
• Intervyuda so'raladi: "Dizayn tokeni nima?", "Primitiv va semantik token farqi?", "Qorong'i rejimni tokenlar bilan qanday qilasiz?"

Xulosa

• Dizayn tokeni — dizayn qarorining nomi; CSS'da o'zgaruvchi bo'lib yashaydi.
• Uch daraja: primitiv (--yashil-600) → semantik (--rang-asosiy) → komponent (--tugma-fon); komponentlar primitivni o'qimaydi.
• «Bahor» tokenlari: ranglar, --shrift-*, --step--1 … --step-3, --masofa-*, --burchak-*, --soya-1 … --soya-3, --qatlam-* — hammasi tokenlar.css da.
• Semantik nom — vazifa, primitiv nom — ko'rinish; breakpoint token bo'la olmaydi.
• DTCG — tokenlarning umumiy JSON formati; Style Dictionary uni CSS va mobil kodga aylantiradi.

Keyingi dars: Qorong'i rejim va temalash: to'liq yechim — semantik tokenlarni rejimga qarab almashtiramiz, foydalanuvchi o'zi tanlaydigan tugma va sahifa "yonib-o'chmasligi"ni hal qilamiz.

Manbalar

• W3C Design Tokens Community Group: "Design Tokens Format Module 2025.10" — designtokens.org
• Style Dictionary — styledictionary.com
• Open Props — open-props.style
• Utopia: "Fluid type scale", "Fluid space" kalkulyatorlari — utopia.fyi
• MDN: "Using CSS custom properties" — developer.mozilla.org