/* ═══════════════════════════════════════════════════════════════════════════ STEPS — TOKENLAR Yo'nalish: iOS uslubidagi minimalizm. Bitta brend rangi (yashil — "rejada"), uchta makro rangi, suv, qolgan hammasi neytral. Neytrallar brend tomon ozgina yashil og'ishga ega — sof kulrang emas. HAR BIR RANG O'LCHANGAN: `node tools/contrast.mjs` — WCAG kontrasti (matn ≥ 4.5, grafika ≥ 3) va rang ko'rish nuqsoni (protan/deutan/tritan) simulyatsiyasida ΔE00 farqi. Qiymatni o'zgartirsangiz — skriptni qayta ishga tushiring. ── Tema qanday ishlaydi ────────────────────────────────────────────────── Har token BIR joyda, ikki qiymat bilan yoziladi: --bg: var(--L, #EEF1ED) var(--D, #070907); └ kunduzgi └ tungi --L va --D — "kalit" (CSS space toggle). Pastdagi uch blok faqat shu ikki kalitni almashtiradi, shuning uchun tungi qiymatlar takrorlanmaydi: :root → kunduzgi (standart) @media dark :root:not([data-theme=light]) → tizim tungi bo'lsa :root[data-theme=dark] → foydalanuvchi "Tungi" tanlasa JS'da o'qiganda: getComputedStyle(...).getPropertyValue('--bg').trim() (qiymat atrofida bo'sh joy qoladi). ── Yangi tokenlar qisqacha ──────────────────────────────────────────────── Brend: --brand-lo --brand-fill (tayyor gradient) Sirt: --page --surface-raised --faint --inverse --on-inverse --field-edge Suv: --water --water-ink --water-soft Semantik: --ok(-ink,-soft) --near(-ink,-soft) --off(-ink,-soft) --on-off --warn(-ink,-soft) --info(-ink,-soft) Qatlam: --scrim --scrim-strong --on-scrim (--dim = --scrim) Yuklanish: --skeleton --skeleton-hi Fokus: --focus --focus-ring Grafik: --chart-grid --chart-label --chart-line --chart-area --chart-goal --chart-empty 3D ikonka: --art-{brand,protein,carb,fat,water,warm,neutral}[-light|-shade] --art-spec --art-ground --art-rim --art-ink ═══════════════════════════════════════════════════════════════════════════ */ /* ───── Tema kalitlari — uch blok, faqat shu yerda ───── */ :root{--L:initial;--D: ;color-scheme:light} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--L: ;--D:initial;color-scheme:dark} } :root[data-theme="dark"]{--L: ;--D:initial;color-scheme:dark} :root{ /* ═══ NEYTRALLAR ═══ Tungi tema shunchaki teskari emas: fon deyarli qora (OLED), sirt yuqoriga ko'tarilgan sari OCHROQ bo'ladi (soya qorong'ida ko'rinmaydi), matn sof oq emas (ko'zni qamashtirmaydi). */ --page: var(--L,#E6EAE5) var(--D,#050605); /* kompyuterda telefon ramkasi atrofi */ --bg: var(--L,#EEF1ED) var(--D,#070907); /* ekran foni */ --surface: var(--L,#FFFFFF) var(--D,#161B17); /* karta, ro'yxat */ --surface-2: var(--L,#E9EDE8) var(--D,#212722); /* karta ichidagi maydon, segment, iz */ --surface-raised:var(--L,#FFFFFF) var(--D,#1C221D); /* sheet, menyu, popover — tungida bir pog'ona ochroq */ --fg: var(--L,#0E1410) var(--D,#EEF3EE); /* asosiy matn */ --muted: var(--L,#636B63) var(--D,#979F97); /* ikkilamchi matn — hamma sirtda ≥ 4.5 */ --faint: var(--L,#858D85) var(--D,#737B73); /* o'chiq ikonka, placeholder chizig'i — grafika ≥ 3 */ --sep: var(--L,rgba(14,20,16,.08)) var(--D,rgba(255,255,255,.08)); --glass: var(--L,rgba(255,255,255,.86)) var(--D,rgba(22,27,23,.84)); /* tab bar: ostidagi matn "arvoh" bo'lib ko'rinmasin */ --inverse: var(--L,#16201A) var(--D,#EEF3EE); /* toast, tooltip — teskari sirt */ --on-inverse: var(--L,#F3F6F2) var(--D,#0E1410); --field-edge: var(--L,rgba(14,20,16,.14)) var(--D,rgba(255,255,255,.14)); /* ═══ BREND — "Steps yashili". Bitta rang, uch vazifa: tugma/kamera (harakat), kaloriya halqasi (asosiy ko'rsatkich), "rejada" holati. Uchala ma'no ham "to'g'ri yo'ldasiz" degani. */ --brand: var(--L,#0A8550) var(--D,#34D17F); /* oq matn ustida 4.68 · tungi: to'q matn 8.4 */ --brand-ink: var(--L,#077345) var(--D,#34D17F); /* fondagi brend MATNI */ --brand-hi: var(--L,#0E9A5B) var(--D,#52DE96); /* hajmli gradient: tepa */ --brand-lo: var(--L,#077444) var(--D,#27BE70); /* hajmli gradient: pastki qirra */ --on-brand: var(--L,#FFFFFF) var(--D,#04200F); --brand-soft: var(--L,rgba(10,133,80,.12)) var(--D,rgba(52,209,127,.16)); --brand-glow: var(--L,rgba(10,133,80,.34)) var(--D,rgba(52,209,127,.28)); /* Tayyor hajmli to'ldirish (kamera tugmasi, asosiy tugma). O'rta qism (40–60% — matn turadigan joy) sof --brand: oq matn kontrasti 4.68 qoladi, tepa ochroq, pasti to'qroq — tugma "hajmli" ko'rinadi. */ --brand-fill: linear-gradient(180deg,var(--brand-hi) 0%,var(--brand) 40%,var(--brand) 60%,var(--brand-lo) 100%); --aura: var(--L,rgba(10,133,80,.08)) var(--D,rgba(52,209,127,.07)); /* ekran tepasidagi yumshoq nur */ /* ═══ MAKROLAR — grafika rangi + matn siyohi + och tint. Oqsil marjon-qizildan biroz PUSHTI tomonga surilgan: deuteranopiyada sof qizil oltin uglevod bilan qo'shilib ketardi (ΔE 8 → 12). Yog' ko'ki biroz indigo tomonga — suvning moviy rangidan ajralishi uchun. */ --protein: var(--L,#E0425C) var(--D,#FF6B7A); --protein-ink: var(--L,#B52D46) var(--D,#FF8591); --protein-soft: var(--L,rgba(224,66,92,.12)) var(--D,rgba(255,107,122,.16)); --carb: var(--L,#BD8400) var(--D,#FFBE47); --carb-ink: var(--L,#8F5C00) var(--D,#FFBE47); --carb-soft: var(--L,rgba(189,132,0,.14)) var(--D,rgba(255,190,71,.15)); --fat: var(--L,#3E5CF6) var(--D,#7A88FA); --fat-ink: var(--L,#2F4BD8) var(--D,#97A3FF); --fat-soft: var(--L,rgba(62,92,246,.12)) var(--D,rgba(122,136,250,.18)); /* ═══ SUV — moviy (cyan). Yog' ko'kidan ham, brend yashilidan ham farqli: suv maqsadiga yetganda tomchilar yashilga o'tadi — bu o'tish tritanopiyada ham ko'rinishi kerak, shuning uchun tungi suv ochroq. */ --water: var(--L,#0A9FBD) var(--D,#9AEAF7); --water-ink: var(--L,#067690) var(--D,#9AEAF7); --water-soft: var(--L,rgba(10,159,189,.12)) var(--D,rgba(154,234,247,.14)); /* ═══ HOLAT — "kam/ko'p" emas, "tanlangan maqsadga mos/mos emas". Yashil · sariq · qizil uchligi qizil-yashil ko'rlikda ham ajralishi uchun YORUG'LIK bo'yicha ham farq qiladi: sariq eng och, qizil eng to'q. */ --ok: var(--brand); --ok-ink: var(--brand-ink); --ok-soft: var(--brand-soft); --warn: var(--L,#C98000) var(--D,#FFCB45); /* sariq: ishonch < 85%, "yaqin", tekshirib chiqing */ --warn-ink: var(--L,#8F5700) var(--D,#FFCB45); --warn-soft: var(--L,rgba(201,128,0,.14)) var(--D,rgba(255,203,69,.14)); --near: var(--warn); --near-ink: var(--warn-ink); --near-soft: var(--warn-soft); --off: var(--L,#C2261C) var(--D,#F0514A); /* maqsaddan chetlandi, o'chirish — matnda ham 4.5+ */ --off-ink: var(--L,#A91F16) var(--D,#FF7A70); --off-soft: var(--L,rgba(194,38,28,.10)) var(--D,rgba(240,81,74,.16)); --on-off: var(--L,#FFFFFF) var(--D,#1E0503); /* qizil tugma ustidagi matn */ --info: var(--L,#3D6A9E) var(--D,#8FB4E3); /* sokin po'lat-ko'k: demo rejim, maslahat — yog'ga raqib emas */ --info-ink: var(--L,#2F5A8E) var(--D,#A9C6EC); --info-soft: var(--L,rgba(61,106,158,.12)) var(--D,rgba(143,180,227,.14)); /* ═══ QATLAMLAR (overlay) va YUKLANISH ═══ */ --scrim: var(--L,rgba(8,12,9,.32)) var(--D,rgba(0,0,0,.56)); /* sheet/menyu ostidagi qoraytirish */ --scrim-strong: var(--L,rgba(6,9,7,.62)) var(--D,rgba(0,0,0,.72)); /* AI tahlil, kamera ustidagi matn foni */ --on-scrim: #FFFFFF; --dim: var(--scrim); /* eski nom — saqlangan */ --skeleton: var(--L,#E7EBE6) var(--D,#212722); --skeleton-hi: var(--L,#F4F6F3) var(--D,#2B322C); /* shimmer yorug' chizig'i */ /* ═══ FOKUS — klaviatura/pult fokusi: 2px fon oralig'i + 2px halqa. Oraliq tufayli halqa yashil tugma ustida ham ko'rinadi. */ --focus: var(--brand-ink); --focus-ring: 0 0 0 2px var(--bg),0 0 0 4px var(--focus); /* ═══ GRAFIKLAR ═══ */ --chart-grid: var(--sep); --chart-label: var(--muted); --chart-line: var(--brand); --chart-area: var(--L,rgba(10,133,80,.16)) var(--D,rgba(52,209,127,.20)); /* maydon gradientining tepasi (pastga → 0) */ --chart-goal: var(--muted); /* maqsad chizig'i (shtrix) */ --chart-empty: var(--surface-2); /* ma'lumotsiz kun ustuni */ /* ═══ 3D IKONKALAR — har oila uchun uch nuqta: -light (yorug' tomoni), asosiy, -shade (soya tomoni). UI ranglaridan biroz yorqinroq va "loy" materialga o'xshash. Tungida yorug' tomonlar biroz so'ndirilgan (qorong'ida ko'zni qamashtirmasin), yerdagi soya quyuqroq, qirra nuri bor. */ --art-brand-light: var(--L,#6FE3A5) var(--D,#63DDA0); --art-brand: var(--L,#1FAE69) var(--D,#27B26D); --art-brand-shade: var(--L,#0A6E42) var(--D,#0B6A40); --art-protein-light: var(--L,#FF9DAA) var(--D,#FF96A3); --art-protein: var(--L,#EC4C66) var(--D,#EE5770); --art-protein-shade: var(--L,#A82640) var(--D,#A42A42); --art-carb-light: var(--L,#FFE28F) var(--D,#FFDC85); --art-carb: var(--L,#F4B42C) var(--D,#F2B435); --art-carb-shade: var(--L,#B87408) var(--D,#AE700C); --art-fat-light: var(--L,#A9B7FF) var(--D,#A3B1FF); --art-fat: var(--L,#5870F7) var(--D,#6078F5); --art-fat-shade: var(--L,#2D3FBF) var(--D,#2F40B8); --art-water-light: var(--L,#B0F0FF) var(--D,#A6ECFA); --art-water: var(--L,#35BFE3) var(--D,#3CBFE0); --art-water-shade: var(--L,#0F7FA6) var(--D,#127C9F); --art-warm-light: var(--L,#FFCB94) var(--D,#FFC58C); /* non, osh, olov — iliq to'q sariq */ --art-warm: var(--L,#EE8A3A) var(--D,#EC8A3E); --art-warm-shade: var(--L,#B0521A) var(--D,#A6501C); --art-neutral-light: var(--L,#FFFFFF) var(--D,#F1F4F0); /* likopcha, tarozi — chinni */ --art-neutral: var(--L,#E6ECE5) var(--D,#C8D0C7); --art-neutral-shade: var(--L,#AEB8AD) var(--D,#7C867B); --art-spec: var(--L,rgba(255,255,255,.9)) var(--D,rgba(255,255,255,.85)); /* yaltiroq nuqta */ --art-ground: var(--L,rgba(14,20,16,.16)) var(--D,rgba(0,0,0,.5)); /* yerdagi soya */ --art-rim: var(--L,rgba(255,255,255,0)) var(--D,rgba(255,255,255,.16)); /* qirra nuri (tungida) */ --art-ink: var(--L,#0E1410) var(--D,#0B100C); /* ko'z, chiziq detallari */ /* ═══ KO'TARILISH (elevation) — sirt fondan uch narsa bilan ajraladi: 1) QIRRA: 1px ingichka chiziq (--edge) — shaklni aniq chizadi; 2) YORUG'LIK: tepada 1px ichki yorug' chiziq (--hi) — tungi temada soya ko'rinmaydi, shuning uchun qirrani aynan shu beradi; 3) SOYA: qatlamli, ostga surilgan, manfiy spread — "yoyilib ketgan" tuman emas, sirt ostidagi aniq soya. e1 — karta va ro'yxat, e2 — suzuvchi (tab bar, tugma, toast), e3 — pastdan chiqadigan oyna. */ --edge: var(--L,rgba(14,20,16,.07)) var(--D,rgba(255,255,255,.07)); --edge-strong: var(--L,rgba(14,20,16,.12)) var(--D,rgba(255,255,255,.12)); --hi: var(--L,rgba(255,255,255,0)) var(--D,rgba(255,255,255,.07)); --hi-strong: var(--L,rgba(255,255,255,0)) var(--D,rgba(255,255,255,.10)); --shade-1: var(--L,rgba(14,20,16,.04)) var(--D,rgba(0,0,0,0)); --shade-2: var(--L,rgba(14,20,16,.14)) var(--D,rgba(0,0,0,.7)); --shade-3: var(--L,rgba(14,20,16,.24)) var(--D,rgba(0,0,0,.8)); --shade-4: var(--L,rgba(14,20,16,.28)) var(--D,rgba(0,0,0,.8)); --e1:inset 0 1px 0 var(--hi),0 0 0 1px var(--edge),0 1px 2px var(--shade-1),0 12px 28px -12px var(--shade-2); --e2:inset 0 1px 0 var(--hi-strong),0 0 0 1px var(--edge-strong),0 2px 6px var(--shade-1),0 18px 44px -12px var(--shade-3); --e3:inset 0 1px 0 var(--hi-strong),0 -1px 0 var(--edge),0 -24px 60px -16px var(--shade-4); --shadow:var(--e1); --shadow-lg:var(--e2); /* ═══ SHRIFT: Manrope — matn, Sora — raqamlar ═══ */ --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-num:'Sora','Manrope',-apple-system,system-ui,sans-serif; /* ═══ O'LCHAM — radiuslar KONSENTRIK: ichki element radiusi = tashqi − oraliq. Masalan karta 22px, ichidagi 12px padding → ichki plitka 10–12px. */ --r-lg:28px; --r-md:22px; --r-sm:12px; --r-xs:9px; --r-pill:999px; --gutter:20px; --tab-h:84px; /* ═══ HARAKAT — iOS'ga yaqin egri chiziqlar ═══ */ --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); } /* iOS'dagi "uzluksiz" burchaklar (squircle). Qo'llab-quvvatlamaydigan brauzer oddiy radiusda qoladi. Squircle burchagi vizual jihatdan kichikroq ko'rinadi, shuning uchun radius ~1.45 barobar kattalashtiriladi. */ @supports (corner-shape:squircle){ :root{--r-lg:40px; --r-md:32px; --r-sm:18px; --r-xs:13px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }