Teknik çizim

blueprint bir teknik çizimdir: neredeyse siyah bir pafta üzerinde ince çizgiler, keskin köşeler ve bir kartın, bir iletişim kutusunun ve bir istatistik satırının her köşesinde bir hizalama işareti — küçük bir artı. Bir şeyi adlandıran ya da çalıştıran her şey — bir düğme, bir alanın etiketi, bir sekme, bir etiket, bir sütun başlığı, çubuktaki bir bağlantı — eş aralıklı bir yazı tipiyle, aralıklı büyük harflerle dizilir; başlıklar ve akan metin ise sıkı dizilmiş bir grotesk yazı tipinde kalır. Düz çizgi bir kenardır, kesikli çizgi ise içindekini böler, tıpkı bir çizimin görünmeyen bir kenarı işaretlemesi gibi: bir tablonun satırları, bir ayırıcı, henüz gelmemiş bir adıma giden yol. Az renkle yetinir. Dolu düğme, işaretli bir kutu, dolu bir çubuk ve seçilen her şey mürekkeptir, ters basılır; tek bir ozalit mavisi odağı ve bir başlığın üstündeki etiketi işaretler; başarı, uyarı ve tehlike söyledikleri şey için kendi renklerini korur. Hiçbir şey gölge düşürmez. Koyu kip özgün görünümdür; açık kip her çizgiyi ve her işareti korur ve onları beyaz kâğıda mürekkeple basar.

Kullanım

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

iconSet('square')

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

iconSet('square') simgeleri de buna uygun çizer — yukarıdaki önizlemedeki gibi kare uçlu, keskin köşeli, düz ince çizgilerle — bileşenlerin kendi çizdikleri dahil. Sayfalarınızın içe aktardığı bir modülden bir kez çağırın.

Sayfayı var(--su-bp-backdrop) ile boyayın; hazır ayarın zeminini, üzerine çekilmiş soluk bir ızgarayla birlikte elde edersiniz. Ya da yalnızca var(--su-bg) kullanın. Hazır ayar, sayfa yüklüyorsa Geist ya da Inter ile Geist Mono, JetBrains Mono ya da IBM Plex Mono’yu, yüklemiyorsa sistemin kendi yazı tiplerini kullanır; kendisi hiçbir şey indirmez.

body {
  background: var(--su-bp-backdrop);
  color: var(--su-text);
  font-family: var(--su-font-sans);
}

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. Birincil palet mürekkeptir — dolu düğme, işaretli bir kutu, dolu bir çubuk, seçilen her şey — bu yüzden primary hepsini bir kerede yeniden renklendirir. Gerisi hazır ayarın kendi belirteçleridir: --su-bp-accent, odağı çizen ve bir başlığı işaretleyen mavi; --su-bp-mark, transparent ile kaldırılabilen hizalama işaretleri; --su-bp-field, bir alanın çevresindeki çizgi; --su-bp-track, bir ilerleme çubuğunun içinde ilerlediği oluk; --su-bp-grid ve --su-bp-cell, zeminin çizgileri ve karelerinin boyutu; ve --su-bp-tracking, bir etiketin büyük harfleri arasındaki aralık. Burada mavi bir sinyal turuncusuna döner, işaretler de onunla birlikte.

head(
  styles({ preset: 'blueprint' }),
  theme(
    { bpAccent: '#c2410c', bpMark: '#c2410c' },
    { dark: { bpAccent: '#ff7a3d', bpMark: '#ff7a3d' } },
  ),
)