Terminal

terminal adalah sebuah konsol sistem: satu fon monospace di atas latar hitam, panel bergaris tipis yang kepalanya dipisahkan garis, dan setiap label — tombol, label bidang, tab, kepala kolom — berhuruf kapital, kebanyakan tebal. Sian adalah aksennya: judul besar, judul panel, tombol padat, dan fokus. Sebuah pilihan — baris tabel di bawah penunjuk, segmen yang ditekan, tab pil yang dipilih, nomor halaman saat ini, butir menu di bawah penunjuk — dicetak terbalik, gelap di atas sian, seperti terminal menyorot satu baris. Palet sukses, peringatan, dan bahaya adalah warna statusnya, hijau, kuning, dan merah, dan tombol bergaris tepi atau tag digambar dengan warnanya, garis maupun tulisannya. Tidak ada yang membulat selain radio, dan tidak ada yang berbayang. Mode gelap adalah tampilan aslinya; mode terang mempertahankan setiap garis, setiap huruf kapital, dan setiap sudut tegak, lalu mencetaknya hitam di atas hampir putih.

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 { iconSet, styles } from 'sitelo/ui'

iconSet('square')

head(
  title('Situs saya'),
  styles({ preset: 'terminal' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/terminal-06767808.css">

iconSet('square') menggambar ikon agar serasi — garis tipis lurus dengan ujung persegi dan sudut tajam, seperti pada pratinjau di atas — termasuk ikon yang digambar komponen sendiri. Panggil sekali, dari modul yang diimpor halaman Anda.

Susun juga halamannya dengan ini — latarnya, warna teksnya, dan fonnya — dan komponen akan duduk di atasnya seperti di atas. Preset memakai JetBrains Mono, IBM Plex Mono, atau Source Code Pro bila halaman memuat salah satunya, dan fon monospace sistem bila tidak; preset tidak mengunduh apa pun.

body {
  background: var(--su-bg);
  color: var(--su-text);
  font-family: var(--su-font-mono);
}

Warna sendiri

theme() tetap bekerja di atasnya, jadi preset adalah titik awal, bukan fork — di sini aksennya menjadi kuning ambar fosfor, termasuk garis-garis yang menggambarnya. Preset ini menambahkan tiga token miliknya sendiri: --su-tm-tracking, jarak antarhuruf kapital pada label; --su-tm-track, alur tempat bilah kemajuan atau penggeser berjalan; dan --su-tm-field, garis di sekeliling bidang, yang di mode gelap sama abu-abu samarnya dengan panel — naikkan bila ingin tepi bidang lebih menonjol.

head(
  styles({ preset: 'terminal' }),
  theme(
    {
      primary: {
        base: '#8a5200', hover: '#734400', active: '#5c3600',
        soft: '#f6e6cc', softHover: '#efd9b3', softFg: '#4d2e00',
        border: '#c9a066', ring: 'rgba(138, 82, 0, 0.3)',
      },
    },
    {
      dark: {
        primary: {
          base: '#ffb000', hover: '#ffd480', active: '#e69e00',
          soft: '#33260d', softHover: '#45330f', softFg: '#ffd480',
          border: '#d99600', ring: 'rgba(255, 176, 0, 0.4)',
        },
      },
    },
  ),
)