Neumorfizm

neumorphism bir soft UI’dır: her yüzey sayfanın kendisidir ve bir denetim yalnızca ışık ve gölgeyle öne çıkar — sayfadan kabarık ya da içine bastırılmış olarak. Bu tarzın genellikle vazgeçtiği iki şeyi korur, WCAG AA’yı geçen metni ve odak çerçevesini; koyu kipi de her şey gibi izler. Ancak sayfanın kendi arka planının var(--su-bg) olmasını gerektirir, çünkü etki ikisinin aynı renk olmasına dayanır.

Bir kart

Aynı işaretleme, tek bir stil sayfasıyla yeniden biçimlenmiş.

  1. Hesap

  2. Profil

  3. Onay

İlerleme50%
50
Kaydedildi
Değişiklikleriniz yayında.
Panoya kopyalandı
Hazır ayar nedir?
Her bileşeni tek seferde yeniden biçimlendiren ikinci bir stil sayfası.
Koyu kipi izler mi?
Evet — sayfanın üstündeki düğmeyi deneyin.
theme() kullanmaya devam edebilir miyim?
Evet, ve hazır ayarın önüne geçer.

  1. Bugün

    Hazır ayar yayımlandı

    Bütün görünüm, tek çağrıyla.

  2. Dün

    Belgeler yazıldı

  3. Pazartesi

    İlk taslak

Bütün görünüm, tek çağrıyla.
Çekirdek stil sayfasından sonra bağlayın.
Tek seçenek: preset.
TaslakYayındaArşivlendi
AL312GH

Kullanım

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">
body {
  background: var(--su-bg);
}

Kendi renkleriniz

theme() üstünde çalışmayı sürdürür, yani bir hazır ayar bir çatal değil, bir başlangıç noktasıdır. Bu hazır ayar her palete onuncu bir yuva ekler, glow — bir ilerleme çubuğunun ya da anahtarın ucunda eridiği renk — böylece yeni bir birincil renk kendi rengini getirebilir.

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)