Theme generator

Tiga warna brand masuk, sebelas langkah per skala keluar — siap ditempel sebagai @theme di project lain.

Tiga warna brand

Seluruh palet W4C diturunkan dari tiga warna ini di ruang OKLCH (#007), dan kurvanya diukur dari palet yang sudah ada di theme.css. Ganti ketiganya untuk melihat bagaimana skalanya ikut berubah — berguna kalau sebuah produk W4C perlu warna sendiri, atau saat menyiapkan tema untuk klien.

Warna antarmuka: tombol utama, tautan, penanda aktif.

Warna paling gelap. Sekaligus jadi skala abu-abu untuk teks, garis, dan permukaan.

Aksen yang dipakai untuk arti success.

Langkah brand ditandai; sepuluh langkah lainnya dihitung.

Skala yang dihasilkan

Primary · langkah brand 500

50#effbff
100#daf6ff
200#b7ecfd
300#8cdcf5
400#4fbcdb
500#1c9dbd
600#007d98
700#006379
800#004c5d
900#003745
950#00232d

Navy · langkah brand 900

50#f7f8fb
100#eceff3
200#d9dfe6
300#c0c8d3
400#96a1b1
500#727f92
600#525f71
700#3a4658
800#253040
900#121d2c
950#0d1726

Green · langkah brand 400

50#f2fced
100#e4f7da
200#cceeb9
300#aee092
400#84c15d
500#63a137
600#49801e
700#37670e
800#284f05
900#1b3a00
950#0e2500

Memakainya

Tempel blok ini di CSS project, setelah@import '@waste4change/ui/assets/css/style.css'. Yang ditimpa hanya ketiga skala itu; seluruh token semantik (surface, content, primary-soft, utilitas tone-*, dan mode gelapnya) ditulis dalam bentuk langkah-langkah ini, jadi tidak ada yang perlu dihitung ulang.

app/assets/css/main.css
@theme static {
  /* primary: langkah 500 adalah warna brand-nya. */
  --color-primary-50: #effbff;
  --color-primary-100: #daf6ff;
  --color-primary-200: #b7ecfd;
  --color-primary-300: #8cdcf5;
  --color-primary-400: #4fbcdb;
  --color-primary-500: #1c9dbd;
  --color-primary-600: #007d98;
  --color-primary-700: #006379;
  --color-primary-800: #004c5d;
  --color-primary-900: #003745;
  --color-primary-950: #00232d;

  /* navy: langkah 900 adalah warna brand-nya. */
  --color-navy-50: #f7f8fb;
  --color-navy-100: #eceff3;
  --color-navy-200: #d9dfe6;
  --color-navy-300: #c0c8d3;
  --color-navy-400: #96a1b1;
  --color-navy-500: #727f92;
  --color-navy-600: #525f71;
  --color-navy-700: #3a4658;
  --color-navy-800: #253040;
  --color-navy-900: #121d2c;
  --color-navy-950: #0d1726;

  /* green: langkah 400 adalah warna brand-nya. */
  --color-green-50: #f2fced;
  --color-green-100: #e4f7da;
  --color-green-200: #cceeb9;
  --color-green-300: #aee092;
  --color-green-400: #84c15d;
  --color-green-500: #63a137;
  --color-green-600: #49801e;
  --color-green-700: #37670e;
  --color-green-800: #284f05;
  --color-green-900: #1b3a00;
  --color-green-950: #0e2500;
}

Dua hal yang perlu diperiksa manusia sebelum sebuah tema dipakai:

  • Kontras. Generator menjaga lightness dan hue, bukan keterbacaan. Periksa teks di atas primary — palet W4C sendiri punya satu pengecualian yang tercatat di Aksesibilitas.
  • Mode gelap. Token gelap memakai langkah yang lebih terang dari skala yang sama (mis. primary-400). Buka beberapa halaman di kedua mode sebelum memutuskan.

Langkah brand keluar apa adanya; sepuluh langkah lainnya dihitung, dan untuk warna W4C hasilnya mendekati palet yang sudah ditata tangan — dijaga oleh packages/ui/test/color-scale.test.ts.