@sandlada/material-design-css

@sandlada/material-design-css is a CSS npm package for Material Design Tokens, styles include:

• Color
• Palette
• Motion
• Shape
• Typography

It also supports TailwindCSS v4.

Installation

npm i @sandlada/material-design-css

Import

For CSS

// TypeScript File
// If you are using Vite or Webpack.

// Load preset, if using color
import '@sandlada/material-design-css/preset.css'

// text-on-surface
import '@sandlada/material-design-css/color/text-utilities.css'

// bg-surface
import '@sandlada/material-design-css/color/bg-utilities.css'

// text-primary-0 (black)
import '@sandlada/material-design-css/palette/text-utilities.css'

// bg-primary-100 (white)
import '@sandlada/material-design-css/palette/bg-utilities.css'

// display-large
import '@sandlada/material-design-css/typography/typography.css'

// shape-medium
import '@sandlada/material-design-css/shape/shape.css'

// animation-easing-expressive-fast-spatial
import '@sandlada/material-design-css/motion/animation-utilities.css'

// transition-easing-expressive-fast-spatial
import '@sandlada/material-design-css/motion/transition-utilities.css'

For TailwindCSS v4

@layer theme, base, components, utilities;

@import "tailwindcss";

/** 
 * bg-primary
 * text-on-primary
 */ 
@import "@sandlada/material-design-css/color/tailwind-theme.css";

/**
 * bg-primary-90
 * text-primary-10
 */
@import "@sandlada/material-design-css/palette/tailwind-theme.css";

/* shape-medium */
@import "@sandlada/material-design-css/shape/tailwind-theme.css";

/* 
 * font-display-large
 * text-display-large
 * tracking-display-large
 * leading-display-large
 * font-weight-display-large
 */
@import "@sandlada/material-design-css/typography/tailwind-theme.css";

/* display-large */
@import "@sandlada/material-design-css/typography/tailwind-utilities.css";

/**
 * ease-emphasized
 * duration-[var(--duration-medium1)]
 */
@import "@sandlada/material-design-css/motion/tailwind-theme.css";

@layer base {
    :root:not([dark]) {
        color-scheme: light;
    }
    :root[dark] {
        color-scheme: dark;
    }
}

Usage

Copy this code into your configured project and you will see a button with color and rounded corners.

<button class="rounded-medium bg-primary text-on-primary px-4 py-2">
    A rounded button
</button>

Documentation

For more information on how to use, please visit the project's official website