Buat sistem desain Anda, bagian 3: Warna

Dalam artikel ini, kita akan melihat cara mengatur sistem warna dalam CSS, dan apa praktik terbaik untuk memastikan sistem mudah digunakan dan dipelihara.

Artikel ini adalah bagian dari seri sistem desain yang terinspirasi oleh pustaka komponen web kami. Perpustakaan bergantung pada sistem solid global CSS. Jadi ini adalah kami membagikan hal-hal yang telah kami pelajari tentang pengaturan gaya global perpustakaan kami!

Seri artikel:
- Bagian 1: Tipografi
- Bagian 2: Kotak & Tata Letak
- Bagian 3: Warna
- Bagian 4: Spasi
- Bagian 5: Ikon
- Bagian 6: Tombol

Kami telah meluncurkan Editor Warna! Alat desain web yang menghasilkan palet warna dan tema yang kompatibel dengan CodyHouse Framework.

Variabel Warna 101

Tidak seperti global CSS lainnya, membuat sistem warna adalah 10% tentang pengkodean dan 90% tentang semantik. Saat mengerjakan file _colors.scss Anda, Anda ingin mengingat tujuan-tujuan berikut:

  1. Variabel warna harus mudah diingat → Anda tidak ingin memeriksa file global kapan pun Anda harus memilih warna.
  2. Sistem harus mudah diperbarui → Anda akan menambah, menghapus, dan mengganti nama warna. Pastikan melakukannya tidak rumit.
  3. Sistem seharusnya hanya menyertakan warna-warna penting → kita sudah sering mendengar warna ini ... namun kita selalu berakhir dengan lebih banyak warna daripada yang kita butuhkan! Kunci sukses sesungguhnya dari sistem desain adalah menghilangkan semua yang tidak perlu (termasuk warna).

Warna semantik vs Deklaratif

Ketika datang untuk mengatur variabel warna, ada dua pendekatan utama: warna semantik dan deklaratif.

Pendekatan semantik terlihat seperti:

Sementara di sini adalah contoh pendekatan deklaratif:

Tak satu pun dari mereka yang salah. Memilih satu yang memenuhi kebutuhan Anda tergantung pada begitu banyak faktor (mis., Ukuran proyek, relevansi warna branding, dll.).

Saat mengerjakan file _colors.scss dari framework kami, saya harus memperhitungkan pengguna yang akan mengeditnya (100%). Itu berarti bahwa meskipun pendekatan deklaratif adalah yang paling mudah digunakan, saya harus mencampurnya dengan pendekatan semantik untuk mendapatkan sistem yang juga mudah dipelihara.

Palet warna esensial

Langkah nomor satu adalah mendeklarasikan jumlah minimum warna yang dibutuhkan untuk membuat komponen web. Secara umum, palet warna esensial terdiri dari:

  1. Warna utama / primer → digunakan untuk tautan, warna latar tombol, dll. Secara umum, ini adalah warna ajakan bertindak yang utama.
  2. Warna aksen → digunakan untuk menyorot sesuatu yang penting pada halaman. Seharusnya bukan variasi warna primer, tetapi warna pelengkap.
  3. Skala warna netral → Ini umumnya skala nada abu-abu, untuk digunakan untuk elemen teks, elemen halus, batas, dll.
  4. Warna umpan balik → kesuksesan, kesalahan, peringatan.

Beberapa warna ini memerlukan variasi (versi lebih gelap / lebih terang), sering digunakan untuk menyoroti interaktivitas (mis.,: Hover /: status aktif).

Dalam CSS, ini diterjemahkan menjadi:

* catatan: kami menggunakan plugin postcss-color-mod-function untuk menerjemahkan fungsi warna menjadi kode RGBA yang kompatibel dengan semua browser.

Cuplikan di atas mewakili palet warna: semua warna yang digunakan di seluruh proyek.

Variasi warna primer dan aksen dihasilkan menggunakan fungsi warna. Pendekatan ini sangat berguna jika Anda memiliki file demo.html (dan kami lakukan dalam kerangka kerja kami) sehingga Anda dapat mengubah nilai fungsi hingga Anda puas dengan warna yang diperoleh. Warna-warna (atau netral) dihasilkan menggunakan chroma.js. Dalam hal ini, menggunakan fungsi-fungsi itu tidak ideal, karena Anda umumnya memiliki dua warna yang berlawanan (hitam dan putih), dan Anda perlu menghasilkan skala nilai berdasarkan pada dua warna ini.

Menambahkan warna semantik ke dalam campuran

Setelah palet warna siap, kita dapat menambahkan warna semantik. Membuat warna semantik tidak berarti menambah jumlah warna, tetapi mendistribusikan warna menggunakan referensi semantik.

Mengapa saya pikir ini adalah pendekatan yang baik

Pertama-tama, sistem ini bergantung pada dua warna penting: warna primer dan aksen. Itu berarti bahwa ketika Anda perlu menggunakan variabel warna, itu tidak akan sulit bagi Anda untuk mengingat apa yang mewakili variabel-variabel tersebut (bahkan jika Anda tidak menggunakan nama deklaratif seperti "biru" dan "merah").

Sistem Anda mungkin perlu menyertakan lebih banyak warna (mis., Warna sekunder). Anda masih berurusan dengan hanya tiga warna. Mengelola sistem berdasarkan 10+ warna utama akan sulit terlepas dari pendekatan yang Anda gunakan, jadi Anda mungkin ingin mempertimbangkan untuk menyederhanakannya.

Warna abu-abu menggunakan konvensi penamaan yang berbeda: semakin tinggi angka di akhir variabel, semakin gelap warnanya.
Pendekatan ini menjadi berguna ketika Anda tidak yakin warna netral mana yang ingin Anda terapkan. Jika grey-2 terlihat terlalu halus, Anda dapat mencoba grey-3. Anda mungkin telah memperhatikan beberapa nuansa hilang (mis., Abu-5). Mereka tidak penting dalam kasus kami (kami tidak pernah menggunakannya saat membuat komponen web), jadi kami menghapusnya dari palet warna.

Warna semantik ditambahkan ke dalam campuran karena tiga alasan utama:

  1. File _colors.scss menjadi sumber kebenaran kapan pun Anda perlu mengubah warna. Apakah Anda merasa elemen heading teks lebih gelap? Buka file _colors.scss dan edit variabel heading teks-warna.
  2. Jika Anda menentukan batas warna, misalnya, maka Anda tidak perlu mencari warna abu-abu yang Anda gunakan di komponen lain saat berikutnya Anda membuat elemen perbatasan. Konsep yang sama berlaku untuk banyak elemen, bukan hanya perbatasan.
  3. Itu membuatnya menjadi sepotong kue untuk membuat dan memelihara tema yang berbeda.

Mereka

Segera setelah kami dapat menggunakan variabel CSS tanpa harus bergantung pada plugin atau polyfill, membuat tema warna akan menjadi sangat sederhana *! Apakah itu berarti kita tidak dapat membuat tema hari ini? Tidak, kita bisa. Kami memiliki dua opsi.

* dalam kerangka kerja kami, kami menggunakan plugin postcss-css-variable untuk mengkompilasi variabel CSS. Saat ini tidak mendukung memperbarui variabel dalam kelas CSS.

Opsi 1 tetap memperbarui variabel CSS. Browser yang tidak mendukung variabel akan menampilkan tema warna "default". Ini bukan masalah, asalkan konten dapat diakses.

Misalnya, Anda memiliki tema warna default → latar belakang putih dan warna teks hitam, dan. Tema-gelap → latar belakang hitam dan warna teks putih. Kemudian Anda membuat dua komponen, satu dengan tema default, yang lain dengan tema .dark. Jika memiliki kedua komponen dengan tema default tidak memengaruhi pengalaman pengguna, maka Anda dapat mempertimbangkan .dark-theme sebagai perangkat tambahan (opsional). Dalam hal ini, masuk akal untuk memperbarui variabel untuk membuat tema yang berbeda walaupun mereka tidak didukung di mana-mana.

Ini adalah bagaimana Anda membuat tema baru yang memperbarui beberapa variabel CSS kunci:

Saya suka solusi ini karena abstrak koreksi warna, dan memungkinkan Anda untuk menyimpan tema warna Anda dalam satu file. Dengan melakukan itu, kita dapat berpotensi mengubah keadaan setiap komponen (dari theme-a ke theme-b) hanya dengan menerapkan kelas CSS.

Opsi 2 akan menargetkan semua elemen yang penampilannya dipengaruhi oleh tema. Keuntungan dari metode ini adalah didukung oleh semua browser. Namun, tidak mudah untuk mempertahankan dibandingkan dengan yang sepenuhnya didasarkan pada variabel CSS.

Berikut ini contoh opsi 2 yang sedang beraksi:

Sekarang Anda tahu bagaimana kami berencana menangani warna dalam kerangka kerja kami! Jika Anda memiliki umpan balik / saran, beri tahu kami di komentar!

Saya harap Anda menikmati artikel ini! Untuk nugget desain web lainnya, ikuti kami di sini di Medium atau Twitter.