Komponent qalereyası

Bütün variantlar canlı tokenlərlə. Skin dəyişdirdikdə hər element yeni brendə keçir.

Rəng rolları — 38 semantik token

--bg

--surface

--surface-2

--surface-3

--border

--text

--text-muted

--primary

--primary-subtle

--accent

--success

--warning

--danger

--info

Məhsul kodunda hex/rgb yazmaq qadağandır. Yeni rəng ehtiyacı = yeni rol deyil, mövcud rolun başqa addımı və ya --*-subtle variantı.

Tipoqrafiya şkalası

--size-4xlDisplay

--size-2xlBölmə başlığı

--size-xlSəhifə başlığı

--size-mdLede paraqrafı — bir cümlə izah

--size-baseƏsas mətn: sıx biznes məlumatı burada oxunur.

--size-smUI mətni — düymə, cədvəl xanası, forma

--size-2xsSütun başlığı / nişan

--font-monoSN-004812 · 18 420,00 ₼ · 23.08.2026

Düymələr

Variantlar
Bir ekranda yalnız bir primary

Ölçülər
sm cədvəl sətrində, lg yalnız hero-da

İkonlu / yüklənir

Status nişanları

Neytral Aktiv Keçirilib Gözləyir Ləğv edilib İşlənir

Hər nişan mətn daşıyır. Yalnız rəngli nöqtə ilə status göstərmək qadağandır (WCAG 1.4.1).

Forma elementləri

Normal

Doldurulmuş

Xətalı Minimum 3 simvol olmalıdır.

İzahlıBoş buraxılsa avtomatik doldurulur.

Seçim

Deaktiv

Çoxsətirli

Aktiv Arxivə göndər Aylıq İllik

Boş

Qeyd yoxdur

İlk qeydi əlavə edin.

Xəta

Yüklənmədi

Şəbəkə bağlantısı kəsildi.

Yüklənir

Radius, kölgə və hərəkət

Radius

--radius-sm

--radius-md

--radius-lg

--radius-full

Kölgə
Qat ayrımı üçün əvvəl sərhəd, sonra kölgə

Müddət

--duration-fast 120ms hover/focus · --duration-base 180ms panel, dropdown · --duration-slow 240ms səhifə keçidi · easing həmişə --ease-out-quart