Chapter 18 — Izchil Design System Qurish

---

18.1 Design Tokens va Best Practices

Simple Explanation

Design tokens — dizaynning "atom" qiymatlari: ranglar, o'lchamlar, shriftlar, soyalar. Tailwind o'zi allaqachon to'liq token tizimi bilan keladi.

Example

script.js
JavaScriptNusxalash
01theme: {
02  extend: {
03    colors: {
04      brand: { 500: '#7c3aed' },
05      success: { 100: '#dcfce7', 700: '#15803d' },
06    },
07  },
08}

18.2 Umumiy Best Practice'lar

⚠️ Common Mistake
Har bir sahifada boshqa-boshqa ko'k tondan foydalanish (blue-500, indigo-500 aralash) — bu vizual bir xillikni yo'qotadi.

Mental Model

🧠 Klasslarni tartibli yozish tartibi: Layout → Spacing → Sizing → Typography → Visual → State. Bu Prettier + prettier-plugin-tailwindcss orqali avtomatlashtiriladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: O'z loyihangiz uchun 3 ta asosiy rang (brand, success, danger) belgilang va config'ga qo'shing.

🟡 Exercise 2 — Medium

Task: Shu ranglar asosida Button va Badge componentlarini yarating.

🔴 Exercise 3 — Hard

Task: To'liq mini design-system hujjatini tuzing: ranglar, spacing, typography, va 5 ta asosiy komponent bir joyda.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<button class="bg-blue-500 hover:bg-indigo-600">Tugma 1</button>
02<button class="bg-indigo-500 hover:bg-blue-600">Tugma 2</button>

Your Task: Bu ikkita tugma nega vizual jihatdan "mos kelmagandek" tuyuladi?

<details> <summary>Solution</summary> Ikkala tugma turli rang oilalaridan (blue va indigo) foydalanadi, natijada loyihada izchil "brand rang" tuyg'usi yo'qoladi. Yechim: bitta rang oilasini (masalan faqat `blue` yoki config'dagi `brand`) tanlab, hamma joyda shuni ishlatish. </details>

---

📌 Chapter Summary

Design system = izchil ranglar + spacing + typography + componentlar. theme.extend orqali Tailwind'ning standart tizimini buzmasdan kengaytirish tavsiya etiladi.

🎯 Key Takeaways

• Best practicelar — qoidalar emas, "nega" savoliga javob beruvchi tamoyillar
• Bitta rang palitrasi butun loyihada izchillikni ta'minlaydi
• Klass tartibi (Layout→Spacing→Typography→Visual→State) o'qishni osonlashtiradi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Design Tokens: theme.extend (colors, spacing, fontFamily, borderRadius)
02Component:     variant pattern (Button, Badge, Card)
03Consistency:   bitta rang palitrasi, bitta spacing shkalasi

---