Memulai

Preset UnoCSS

Panduan integrasi UnoCSS dengan @majalengka/tokens/preset untuk Vite, Nuxt, dan Astro.

Preset UnoCSS resmi (presetMajalengka) memungkinkan Anda menggunakan seluruh token warna, tipografi, grid spacing, dan shortcut komponen Majalengka secara instan lewat class atomic tanpa membebani CSS runtime.

Pemasangan

Pasang @majalengka/tokens dan UnoCSS di proyek Anda:

pnpm add -D unocss @majalengka/tokens

yarn add -D unocss @majalengka/tokens

npm install -D unocss @majalengka/tokens

bun add -d unocss @majalengka/tokens

Konfigurasi

1. File Konfigurasi Standar (`uno.config.ts`)

Buat berkas uno.config.ts di root proyek:

uno.config.ts

import { defineConfig, presetUno } from 'unocss';
import { presetMajalengka } from '@majalengka/tokens/preset';

export default defineConfig({
  presets: [
    presetUno(),
    presetMajalengka()
  ]
});

2. Integrasi Nuxt (`nuxt.config.ts`)

Jika menggunakan Nuxt, pasang modul @unocss/nuxt dan import preset:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  unocss: {
    // UnoCSS otomatis membaca uno.config.ts
  }
});

3. Integrasi Vite (`vite.config.ts`)

Untuk proyek Vue 3, React, atau Svelte berbasis Vite:

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS()
  ]
});

Daftar Fitur & Utility Class

Preset Majalengka menyuntikkan token langsung ke sistem theme UnoCSS:

1. Palet Warna (`mjl-primary` & `mjl-neutral`)

Semua tangga warna tersedia dari tingkat 50 sampai 950:

<!-- Background & Text Primer (Biru Majalengka) -->
<div class="bg-mjl-primary-700 text-white">
  Biru Utama #0014A8
</div>
<span class="text-mjl-primary-600 hover:text-mjl-primary-800">
  Tautan Berwarna Primer
</span>

<!-- Netral & Abu-abu -->
<div class="bg-mjl-neutral-100 dark:bg-mjl-neutral-900 text-mjl-neutral-800 dark:text-mjl-neutral-100">
  Permukaan Netral
</div>

2. Warna Status Layanan Warga

Untuk notifikasi atau penanda status verifikasi dokumen:

Nama Class	Fungsi
`bg-mjl-status-success-bg text-mjl-status-success-fg border-mjl-status-success-border`	Sukses / Disetujui
`bg-mjl-status-warning-bg text-mjl-status-warning-fg border-mjl-status-warning-border`	Peringatan / Menunggu
`bg-mjl-status-danger-bg text-mjl-status-danger-fg border-mjl-status-danger-border`	Gagal / Ditolak
`bg-mjl-status-info-bg text-mjl-status-info-fg border-mjl-status-info-border`	Informasi Layanan
`text-mjl-mango`	Aksen Mangga Gedong Gincu

3. Spacing Grid (Kelipatan 4px)

Gunakan token spacing untuk padding, margin, lebar, tinggi, dan gap:

<div class="p-mjl-4 m-mjl-2 gap-mjl-3">
  <!-- p-mjl-4 = 16px, m-mjl-2 = 8px, gap-mjl-3 = 12px -->
</div>

Untuk target sentuh ramah disabilitas dan lansia (WCAG 2.1 AA):

min-h-mjl-touch atau h-mjl-touch: 44px (target sentuh minimum)
min-h-mjl-touch-lg atau h-mjl-touch-lg: 52px (target sentuh besar)

4. Skala Tipografi & Font

<!-- Font Family -->
<h1 class="font-mjl-title text-mjl-3xl">Plus Jakarta Sans</h1>
<p class="font-mjl-body text-mjl-base">Inter (16px, line-height 1.7)</p>
<code class="font-mjl-mono text-mjl-sm">JetBrains Mono</code>

5. Radius Sudut (Border Radius)

rounded-mjl-sm: 6px (Badge, Tag, Checkbox)
rounded-mjl-md: 10px (Tombol, Input, Dropdown)
rounded-mjl-lg: 16px (Kartu, Panel Modal)
rounded-mjl-full: 9999px (Avatar, Pil Status)

6. Bayangan (Box Shadow)

shadow-mjl-sm: Bayangan tipis kartu
shadow-mjl-md: Bayangan tombol saat hover / dropdown
shadow-mjl-lg: Bayangan modal / dialog melayang

Shortcuts Komponen Bawaan

Preset ini sudah dibekali shortcut CSS siap pakai untuk komponen esensial:

<!-- Kontainer Halaman -->
<div class="mjl-container">
  
  <!-- Tombol Primer -->
  <button type="button" class="mjl-btn-base mjl-btn-md mjl-btn-primary">
    Ajukan Sekarang
  </button>

  <!-- Tombol Sekunder -->
  <button type="button" class="mjl-btn-base mjl-btn-md mjl-btn-secondary">
    Kembali
  </button>

  <!-- Tombol Garis Tepi (Outline) -->
  <button type="button" class="mjl-btn-base mjl-btn-md mjl-btn-outline">
    Unduh Bukti
  </button>

  <!-- Input Form -->
  <label class="mjl-label">Nomor Induk Kependudukan</label>
  <input type="text" class="mjl-input" placeholder="Masukkan 16 digit NIK" />

  <!-- Badge Status -->
  <span class="mjl-badge mjl-badge-success">
    Terverifikasi
  </span>
  <span class="mjl-badge mjl-badge-warning">
    Sedang Diproses
  </span>

  <!-- Kartu Layanan -->
  <div class="mjl-card-base mt-mjl-4">
    <h3 class="text-mjl-xl font-bold font-mjl-title">Layanan Kependudukan</h3>
    <p class="text-mjl-sm text-mjl-neutral-600 dark:text-mjl-neutral-400 mt-mjl-2">
      Pengurusan KTP-el dan Kartu Keluarga secara daring.
    </p>
  </div>
</div>

Ubah halaman iniatauLaporkan masalah

Arsitektur & Struktur

Struktur monorepo, tiga tingkatan token, dan anggaran performa.

Next.js & React

Panduan integrasi Majalengka Design System di Next.js (App Router dan Pages Router) serta React.