Neumorfisme

neumorphism adalah soft UI: setiap permukaan adalah halaman itu sendiri, dan sebuah kontrol menonjol hanya lewat cahaya dan bayangan — terangkat dari halaman, atau tertekan ke dalamnya. Preset ini mempertahankan dua hal yang biasanya dikorbankan gaya ini, teks yang lolos WCAG AA dan garis fokus, dan mengikuti mode gelap seperti bagian lainnya. Namun ia membutuhkan latar halaman itu sendiri berupa var(--su-bg), karena efeknya bergantung pada keduanya yang berwarna sama.

Sebuah kartu

Markup yang sama, ditata ulang oleh satu lembar gaya.

  1. Akun

  2. Profil

  3. Konfirmasi

Kemajuan50%
50
Tersimpan
Perubahan Anda sudah tayang.
Disalin ke papan klip
Apa itu preset?
Lembar kedua yang menata ulang setiap komponen sekaligus.
Apakah ia mengikuti mode gelap?
Ya — coba sakelar di bagian atas halaman.
Masih bisakah saya memakai theme()?
Bisa, dan ia menang atas preset.

  1. Hari ini

    Preset dirilis

    Seluruh tampilan, dalam satu panggilan.

  2. Kemarin

    Dokumentasi ditulis

  3. Senin

    Sketsa pertama

Seluruh tampilan, dalam satu panggilan.
Tautkan setelah lembar inti.
Satu opsi: preset.
DrafTayangDiarsipkan
AL312GH

Cara memakai

import { styles } from 'sitelo/ui'

head(
  title('Situs saya'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

Warna sendiri

theme() tetap bekerja di atasnya, jadi preset adalah titik awal, bukan fork. Preset ini menambahkan slot kesepuluh ke setiap palet, glow — warna yang dituju ujung bilah kemajuan atau sakelar saat memudar — supaya warna primer yang baru bisa membawa miliknya sendiri.

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