pantoken / components

components ​

Beta

@pantoken/components — InstUI görünümünde bir CSS bileşen kütüphanesi, --instui-* tokenlarından oluşturulmuştur.

Paketlenen stil sayfaları:

  • Base (baseCss) — tokenlardan gelen isteğe bağlı global belge varsayılanları (box-sizing, body sıfırlaması, sayfa yüzeyi, temel metin rengi/yazı tipi, color-scheme). Ayrıca odak-çizgisi halkasını taşır; böylece her odaklanabilir öğe kutudan çıkan erişilebilir bir :focus-visible konturuna sahip olur. pantoken sayfanın sahibi olduğunda yükleyin.
  • Prose (proseCss) — işlenmiş markdown/prose HTML'ini (tablolar, başlıklar, linkler, listeler, kod) bir içerik köküne özel stiller; böylece bir doküman sayfası veya içerik bölgesi DOM'u bileşenlerle değiştirmeden InstUI gibi görünür. Site renderlayıcılarının dağıttığı components.css budur.
  • Components (buttonCss, alertCss, badgeCss, bunları birleştiren componentsCss) — kendi işaretlemenize uyguladığınız sınıf tabanlı bileşen stilleri (<button class="instui-button">), bileşen çerçevesi dışında InstUI görünümü için. Bu sayfanın öncüsü olan --instui-elevation-* gölge ölçeği (elevationCss); yeterince çok bileşen yüzer olduğundan gölgeler ek bir özellikten ziyade yerleşik bir tasarım niteliğidir.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, artı seçkin bir semantik-renk/token seti) — kesişen sorumlulukları kapsayan isteğe bağlı bir sınıf katmanı. Genel token→sınıf yayıcıları (colorUtilitiesCss, tokenUtilitiesCss) @pantoken/utils içinde bulunur; bu paket onlara seçilmiş semantik adları sağlar, @pantoken/plugin-primitives ise ham paleti besler.
  • Fonts (isteğe bağlı fonts.css) — Instructure marka yazı tipleri için @font-face kuralları. Base yazı tipini uygular; fonts.css woff2 dosyalarını yükler, böylece yazı tipi olmadan metin kademeli olarak bozulur.

Her şey token IR'den türetilmiş saf CSS olduğundan, InstUI paketlerine bağımlı olmadan tokenlar aracılığıyla InstUI'yi takip eder. Gerçek, etkileşimli bileşenler için @pantoken/react-markdown (içerik) veya @instructure/ui-* (uygulamalar) kullanın.

Bu modül bir barrel'dir: her belgelenmiş kayıt kendi dosyasında yer alır (components//utilities//rules//declarations/) ve lib/ compose API ile yazılır. Kayıt defterleri (COMPONENTS/UTILITIES/RULES/DECLARATIONS) toplama ve paralellik testini yönlendirir.

Arayüzler ​

Değişkenler ​

Fonksiyonlar ​