Color

The Material Design Color System provides the following color tokens:

primary-palette-key-color
secondary-palette-key-color
tertiary-palette-key-color
neutral-palette-key-color
neutral-variant-palette-key-color
background
on-background
surface
surface-dim
surface-bright
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
surface-variant
on-surface-variant
inverse-surface
inverse-on-surface
outline
outline-variant
shadow
scrim
surface-tint
primary
on-primary
primary-container
on-primary-container
inverse-primary
secondary
on-secondary
secondary-container
on-secondary-container
tertiary
on-tertiary
tertiary-container
on-tertiary-container
error
on-error
error-container
on-error-container
primary-fixed
primary-fixed-dim
on-primary-fixed
on-primary-fixed-variant
secondary-fixed
secondary-fixed-dim
on-secondary-fixed
on-secondary-fixed-variant
tertiary-fixed
tertiary-fixed-dim
on-tertiary-fixed
on-tertiary-fixed-variant

The color tokens provided by this project provide a set of default values (two-color mode and dark mode). In order to make the color work properly, this project writes the following styles by default:

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

:root[dark] {
    color-scheme: dark;
}

To enable dark mode, add the dark attribute on the html element:

<html dark>
    <!-- ... -->
</html>

For a detailed description of M3 Color, see Definition of M3 Color.

Import

Via JS/TS

import "@sandlada/material-design-css/color.css"

Via CSS

@import "@sandlada/material-design-css/color.css";

Usage

[Non-Standard] Use bg-*

This is not a recommended practice. Not every color in the MD design specification can be used as a background color.

<div class="flex">
    <div class="box bg-primary"></div>
    <div class="box bg-secondary"></div>
    <div class="box bg-tertiary"></div>
    <div class="box bg-error"></div>
    <div class="box bg-surface-container-lowest"></div>
    <div class="box bg-surface-container-low"></div>
    <div class="box bg-surface-container"></div>
    <div class="box bg-surface-container-high"></div>
    <div class="box bg-surface-container-highest"></div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

[Non-Standard] Use text-*

This is not a recommended practice. Not every color in the MD design specification can be used as a text color.

primary

secondary

tertiary

error

<div class="flex">
    <div class="box text-primary">primary</div>
    <div class="box text-secondary">secondary</div>
    <div class="box text-tertiary">tertiary</div>
    <div class="box text-error">error</div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

Standard usage

primary - on-primary

secondary - on-secondary

tertiary - on-tertiary

error - on-error

<div class="flex">
    <div class="box primary on-primary">primary - on-primary</div>
    <div class="box secondary on-secondary">secondary - on-secondary</div>
    <div class="box tertiary on-tertiary">tertiary - on-tertiary</div>
    <div class="box error on-error">error - on-error</div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>