Project Configuration

MYDS stylesheet is composed of various CSS 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-tailwindcss/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-tailwindcss/light.css";
 
/* Import Dark theme */
@import "@govtechmy/myds-tailwindcss/dark.css";

Please note, it is required to support the light mode by default.

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 extend its powerful features.

Component

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