Style Configuration

MYDS stylesheet is composed of various components to cater to a wide range of use cases. But you might not need everything in your project! Here's how we can be more selective with our imports!

Foundation

Fonts

MYDS supports 2 typefaces: Poppins & Inter. We recommend you to import via a reputable CDN like GoogleFonts. Here's a one-liner CSS import!

@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");

Color

We define each color in the MYDS Design Language as a CSS variable, which later becomes the building block to build themes!

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

Theme

MYDS supports both light and dark mode. However, we understand that not all projects require this feature. So, you can omit importing the unwanted theme from your project!

/* Import Light theme */
@import "@govtechmy/myds-style/light.css";
 
/* Import Dark theme */
@import "@govtechmy/myds-style/dark.css";

TailwindCSS

TailwindCSS is a utility-first CSS framework that serves as the bedrock for how MYDS is styled internally. However, using TailwindCSS is optional at the project level.

If you do use TailwindCSS, MYDS provides the option for developers to leverage on the defined CSS classes or extend your own variation to MYDS.

Installation

Before we start, make sure you have installed Tailwind CSS in your project. Refer to the official documentation for more information.

Preset Configuration

Once TailwindCSS is installed, you can import the MYDS presets to your own project! Also we need to make sure the TailwindCSS is 'aware' of the components from the library.

import { preset } from "@govtechmy/myds-style";
 
export default {
  content: [
    "src/**/*.{js,jsx,ts,tsx}", // Your own project source files
    "node_modules/@govtechmy/myds-react/dist/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [preset],
};

Color Token

MYDS has 2 types of color token that developers need to be aware of, which are:

• Primitive token - The value of the primitive token is static & insensitive to theme changes.

• Theme token - The value of the theme token changes based on the theme applied.

To learn the entire list of primitive & theme tokens available, read the full configuration