Temalar

Her bileşen aynı özel özellikleri okur, bu yüzden bir tema :root üzerindeki bir dizi geçersiz kılmadır — derleme adımı yok, yapılandırma dosyası yok ve kendisine bundan söz edilmesi gereken bir bileşen yok.

Stilleri içeri almak

styles(), tarayıcının sitenin her sayfasında önbelleğe aldığı tek bir dosyaya bir <link> döndürür. Yapılandırılacak ve kopyalanacak bir şey yoktur: sitelo’nun eklentisi onu geliştirmede sunar ve bileşen çalışma zamanıyla aynı temelde derlemeye yazar.

import { styles } from 'sitelo/ui'

head(
  title('Sitem'),
  styles(),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">

Ad, içeriğin bir özetini taşır, bu yüzden onu immutable olarak sunup yine de bir değişiklik yayımlayabilirsiniz. Düz bir /su/ui.css için { hash: false } geçirin ya da bağlantıyı kendi barındırdığınız bir kopyaya yöneltmek için base kullanın.

{ inline: true } bunun yerine bütün sayfayı bir <style> içine koyar — her sayfada gzip ile yaklaşık 11 kB, ama fazladan istek yok ve dist/ içinden kaybolabilecek hiçbir şey yok. Tek bir sayfa için daha iyi takas budur; bağlantı ise isteğini, ziyaretçinin okuduğu ikinci sayfada geri kazanır.

head(
  title('Sitem'),
  styles({ inline: true }),
)

Ailenin geri kalanı size parçaları verir. stylesheet() ham CSS’i bir dize olarak döndürür — sayfayı sitelo’nun ulaşamadığı bir yerde barındırmak ya da onu kendiniz bir yere yazmak için — stylesUrl() ise kendinize ait bir link öğesi için yalnızca href değerini.

Hazır ayarlar

Bir hazır ayar, bütün görünümü tek seferde değiştirir. styles({ preset: 'neumorphism' }) çekirdek stil sayfasının hemen ardından ikinci bir stil sayfası bağlar — aynı koşullarla sunulur, hash’lenir ve önbelleğe alınır — ve sayfadaki her bileşen, işaretlemede hiçbir şey değiştirmeden onu izler.

import { styles } from 'sitelo/ui'

head(
  title('Sitem'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">

Her hazır ayarın, tüm bileşenlerin canlı olarak yeniden biçimlendiği kendi sayfası vardır: Neumorfizm, Neobrütalizm, Superneon.

inline iki stil sayfasını da satır içine gömer, stylesheet({ preset }) ikisini tek bir dize olarak döndürür, hazır ayar olmayan bir ad ise var olanları listeleyen bir hata fırlatır.

Belirteçleri geçersiz kılmak

theme() geçersiz kılmaları yazar. Anahtarlar camelCase belirteç adları, palet nesneleri ya da düz özel özelliklerdir — ve styles() işlevinden sonra gelir, böylece kazanır.

import { styles, theme } from 'sitelo/ui'

head(
  styles(),
  theme({
    primary: { base: '#5b5bd6', hover: '#4a4ac4', active: '#3f3fb0', fg: '#ffffff' },
    radiusMd: '2px',
    fontSans: '"Inter", system-ui, sans-serif',
  }),
)

Kapsamlı temalar

Bir selector, geçersiz kılmaları bütün sayfa yerine bir alt ağaçla sınırlar. Aşağıdaki üç panelin yaptığı budur — aynı bileşenler, üç farklı palet, tek bir sayfa.

fragment(
  theme({ primary: { base: '#5b5bd6', hover: '#4a4ac4', fg: '#ffffff', soft: '#e6e6fa', softFg: '#33338f', border: '#b9b9ee' } }, { selector: '.theme-indigo' }),
  theme({ primary: { base: '#b0357a', hover: '#962e68', fg: '#ffffff', soft: '#fbe4f0', softFg: '#7d1f53', border: '#f0a9ce' } }, { selector: '.theme-pink' }),
  theme({ radiusMd: '999px', radiusLg: '1.5rem' }, { selector: '.theme-round' }),
  grid({ min: '11rem' },
    div({ class: 'theme-indigo' },
      card(cardBody(stack({ gap: 'sm' },
        text({ variant: 'caption', tone: 'muted' }, 'çivit'),
        button({ block: true }, 'Primary'),
        button({ variant: 'soft', block: true }, 'Soft'),
      ))),
    ),
    div({ class: 'theme-pink' },
      card(cardBody(stack({ gap: 'sm' },
        text({ variant: 'caption', tone: 'muted' }, 'pembe'),
        button({ block: true }, 'Primary'),
        button({ variant: 'soft', block: true }, 'Soft'),
      ))),
    ),
    div({ class: 'theme-round' },
      card(cardBody(stack({ gap: 'sm' },
        text({ variant: 'caption', tone: 'muted' }, 'yuvarlak'),
        button({ block: true }, 'Primary'),
        button({ variant: 'soft', block: true }, 'Soft'),
      ))),
    ),
  ),
)

Koyu kip

Koyu, kendi başına prefers-color-scheme değerinden çözülür. Herhangi bir atada açıkça verilmiş bir light ya da dark değerli data-theme veya data-su-theme bunu geçersiz kılar — bu sitedeki tanıtımların üst çubuktaki değiştiriciyi izlemesinin yolu budur.

Yalnızca orada geçerli olması gereken geçersiz kılmalar için dark geçirin. Özniteliği ve medya sorgusunu bir çırpıda kapsar.

theme({
  primary: { base: '#5b5bd6' },
}, {
  dark: { primary: { base: '#8f8ff0' } },
})

Geçersiz kılınabilecekler

Her biri dokuz yuvalı beş palet, bir boşluk ölçeği, yazı, yarıçaplar, gölgeler ve yüzey renkleri. Her biri bir özel özelliktir — stil sayfasını ya da tarayıcınızın denetleyicisini açın, hepsi :root üzerindedir.

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm', wrap: true },
    ...['primary', 'neutral', 'success', 'warning', 'danger'].map((color) =>
      stack({ gap: 'xs', align: 'center' },
        div({ style: 'width: 3.5rem; height: 2rem; border-radius: 0.4rem; background: var(--su-' + color + ')' }),
        text({ variant: 'caption', tone: 'muted' }, color),
      ),
    ),
  ),
  stack({ direction: 'row', gap: 'sm', wrap: true, align: 'flex-end' },
    ...['xs', 'sm', 'md', 'lg', 'xl'].map((step) =>
      stack({ gap: 'xs', align: 'center' },
        div({ style: 'width: var(--su-space-' + step + '); height: 2rem; border-radius: 0.2rem; background: var(--su-neutral)' }),
        text({ variant: 'caption', tone: 'muted' }, step),
      ),
    ),
  ),
)

Adlandırma

camelCase bir anahtar, kebab-case bir özellik olur: radiusMd şudur: --su-radius-md, fontSans şudur: --su-font-sans. İç içe bir nesne de aynı biçimde açılır — { primary: { softFg: … } } şunu ayarlar: --su-primary-soft-fg — ve zaten -- ile başlayan bir anahtar tam olarak yazıldığı gibi kullanılır; bu, eşlemenin kapsamadığı her şey için kaçış kapısıdır.

Bir paletin dokuz yuvası vardır: base, hover, active, fg, soft, softHover, softFg, border ve ring. Yalnızca değiştirdiklerinizi ayarlayın.

Karşıtlık

Paketle gelen paletler, her iki temada da üzerinde durdukları yüzeylere karşı WCAG AA’yı geçer ve depoda, bu doğru olmaktan çıkarsa derlemeyi düşüren bir test vardır. Kendi temanız bunun kapsamında değildir — yayımlamadan önce fg değerinizi base değerinize karşı denetleyin.

Proplar

styles():

stylesUrl() şunları alır: base ve hash; stylesheet() ise minify ve preset.

theme(tokens, options):