Konfigurasi Gaya

Stylesheet MYDS terdiri daripada pelbagai komponen untuk memenuhi pelbagai kegunaan. Tetapi anda mungkin tidak memerlukan semuanya dalam projek anda! Berikut adalah cara kita boleh lebih selektif dengan import kita!

Asas

Fon

MYDS menyokong 2 jenis fon: Poppins & Inter. Kami mengesyorkan anda untuk mengimport melalui CDN yang bereputasi seperti GoogleFonts. Berikut adalah satu baris import CSS!

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

Warna

Kami mentakrifkan setiap warna dalam Bahasa Reka Bentuk MYDS sebagai pembolehubah CSS, yang kemudiannya menjadi blok binaan untuk membina tema!

@import "@govtechmy/myds-style/color.css";

Tema

MYDS menyokong kedua-dua mod terang dan gelap. Walau bagaimanapun, kami memahami bahawa tidak semua projek memerlukan ciri ini. Oleh itu, anda boleh mengabaikan import tema yang tidak diingini dari projek anda!

/* Import tema terang */
@import "@govtechmy/myds-style/light.css";
 
/* Import tema gelap */
@import "@govtechmy/myds-style/dark.css";

TailwindCSS

TailwindCSS adalah rangka kerja CSS berasaskan utiliti yang menjadi asas kepada cara MYDS digayakan secara dalaman. Walau bagaimanapun, menggunakan TailwindCSS adalah pilihan di peringkat projek.

Jika anda menggunakan TailwindCSS, MYDS menyediakan pilihan untuk pembangun memanfaatkan kelas CSS yang ditakrifkan atau memperluaskan variasi anda sendiri kepada MYDS.

Pemasangan

Sebelum kita mula, pastikan anda telah memasang pakej TailwindCSS dalam projek anda. Rujuk dokumentasi rasmi untuk maklumat lanjut.

Konfigurasi Preset

Setelah TailwindCSS dipasang, anda boleh mengimport preset MYDS ke dalam projek anda sendiri! Kita juga perlu memastikan TailwindCSS 'sedar' tentang pustaka komponen dari MYDS.

import { preset } from "@govtechmy/myds-style";
 
export default {
  content: [
    "src/**/*.{js,jsx,ts,tsx}", // Fail sumber projek anda sendiri
    "node_modules/@govtechmy/myds-react/dist/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [preset],
};

Token Warna

MYDS mempunyai 2 jenis token warna yang perlu diketahui oleh pembangun, iaitu:

• Token primitif - Nilai token primitif adalah statik & tidak sensitif kepada perubahan tema.

• Token tema - Nilai token tema berubah berdasarkan tema yang digunakan.

Untuk mempelajari senarai penuh token primitif & tema yang tersedia, baca konfigurasi penuh