Color — palet desain NexaJS

Objek Colors dari NexaJS menyediakan token warna (string hex/rgba/nama) yang konsisten di seluruh aplikasi. Layar demo menampilkan palet sebagai kotak swatch berlabel, dikelompokkan per kategori, termasuk grup yang bersarang (mis. Colors.background, Colors.text, Colors.border).

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar Color diekspor sebagai default dan didaftarkan pada array MenuComponents dengan nama route "Color" (judul header: "Color").
Navigasi — Panggil navigation.navigate("Color") agar string route sama dengan name di menu. Gambaran umum route ada di Konfigurasi dan flow route dan menu.js & MenuComponents.
Render — Konten utama dibungkus <ScrollView>. Peta data kategori → kumpulan entri warna di-map menjadi section; setiap section merender kotak warna atau, bila nilai masih berupa objek, subsection bersarang.

Import dan pemakaian token

Selain Colors, layar memakai View, StyleSheet, Text, dan ScrollView dari NexaJS. Di gaya, token dipakai langsung, misalnya backgroundColor: Colors.background.light dan color: Colors.text.primary, sehingga tema berubah mengikuti definisi pusat Colors.

Contoh pemakaian token

import { View, StyleSheet, Text, Colors } from "NexaJS";

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.background.light,
  },
  heading: {
    color: Colors.text.primary,
  },
});

Struktur tampilan demo

Kotak swatch — Satu warna: persegi panjang dengan borderRadius, border tipis, di bawahnya nama kunci dan nilai string warna (berguna untuk menyalin hex ke desain).
Section grup — Judul kategori + baris/kolom swatch. Grid memakai flexDirection: "row", flexWrap: "wrap", dan gap antar item.
Rekursi — Jika entri pada objek kategori masih berupa objek (bukan string warna langsung), dan belum berada di mode “nested”, section anak dibuat dengan judul gabungan induk–anak; isi nested dirender dengan indentasi gaya (marginLeft) agar hierarki terbaca.

Kategori pada palet demo

Susunan berikut mencerminkan objek konfigurasi di layar referensi; nama kunci di Colors dapat berbeda per versi framework.

Grup	Isi (intisari)
Base	`white`, `black`, `transparent`.
Primary	Semua kunci `Colors` yang diawali `primary`.
Secondary	Antara lain `blue`, `darkBlue`, `accent500`.
Gray scale	Entri yang diawali `grey`, kecuali kunci tunggal `grey` (yang dipisah ke grup UI tambahan).
Status	Kunci diawali `success`, `warning`, `error`, `info`.
UI tambahan	`light`, `grey`, `red`, `green`, `yellow`, `orange`, `purple`, `teal`.
Background / Text / Border	Masing-masing memetakan `Colors.background`, `Colors.text`, `Colors.border` — objek bersarang yang diuraikan lewat section rekursif.

Gaya layar

Kontainer scroll memakai padding dan latar Colors.background.light. Judul halaman memakai Colors.text.primary dan tebal. Kartu swatch lebar tetap (sekitar 150pt logis), tinggi kotak warna 80, border dari Colors.border.light. Teks nama dan nilai memakai hierarki text.primary vs text.secondary untuk kontras informasi sekunder.

Praktik yang disarankan

Utamakan Colors.* daripada literal hex tersebar agar tema dan mode gelap (jika didukung) tetap konsisten.
Untuk komponen baru, petakan dulu ke token yang sudah ada sebelum menambah kunci baru di palet global.
Layar palet ini berguna sebagai referensi internal; di produksi biasanya tidak perlu di-route ke pengguna akhir kecuali untuk mode pengembang atau dokumentasi in-app.
Jika Anda menambah kategori di objek data, ingat: nilai bertipe objek memicu subsection; nilai string langsung menjadi satu swatch.

Nxdom Framework