@sandlada/material-design-css 2.3.0-20250927.c → 2.5.0-20260607.a

package/README.md

@@ -1,123 +1,240 @@
-# @sandlada/material-design-css
-
-![Preview Image](https://raw.githubusercontent.com/sandlada/material-design-css/refs/heads/main/images/cover.png)
-
-![NPM Downloads](https://img.shields.io/npm/d18m/@sandlada/material-design-css?label=NPM%20Downloads&labelColor=%2300531f&color=%23a3f5aa)
-![NPM Version](https://img.shields.io/npm/v/%40sandlada%2Fmaterial-design-css?label=NPM%20Version&labelColor=%2300531f&color=%23a3f5aa)
-![GitHub License](https://img.shields.io/github/license/sandlada/material-design-css?label=License&labelColor=%2300531f&color=%23a3f5aa)
-
-`@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
-
-```plaintext
-npm i @sandlada/material-design-css
-```
-
-## Import
-
-### For CSS
-
-```typescript
-// 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-utilities.css'
-
-// rounded-medium
-import '@sandlada/material-design-css/shape/shape-utilities.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
-
-```css
-@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.
-
-```html
-<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](https://material-design-css.sandlada.com)
+# @sandlada/material-design-css
+
+![Preview Image](https://raw.githubusercontent.com/sandlada/material-design-css/refs/heads/main/images/cover.png)
+
+![NPM Downloads](https://img.shields.io/npm/d18m/@sandlada/material-design-css?label=NPM%20Downloads&labelColor=%2300531f&color=%23a3f5aa)
+![NPM Version](https://img.shields.io/npm/v/%40sandlada%2Fmaterial-design-css?label=NPM%20Version&labelColor=%2300531f&color=%23a3f5aa)
+![GitHub License](https://img.shields.io/github/license/sandlada/material-design-css?label=License&labelColor=%2300531f&color=%23a3f5aa)
+
+`@sandlada/material-design-css` is a CSS npm package for Material Design Tokens, styles include:
+
+- Color
+- Palette
+- Prebuilt Colors
+- Motion
+- Shape
+- Typography
+
+It also **supports TailwindCSS v4**.
+
+## Installation
+
+```plaintext
+npm i @sandlada/material-design-css
+```
+
+## Import
+
+### For CSS
+
+```typescript
+// TypeScript File
+// If you are using Vite or Webpack.
+// In CSS file, use @import instead. (You may need to adjust the path depending on your setup, e.g., `@import "../node_modules/@sandlada/material-design-css/preset.css";`)
+
+// Load preset before color or prebuilt-color utilities.
+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
+import '@sandlada/material-design-css/palette/text-utilities.css'
+
+// bg-primary-100
+import '@sandlada/material-design-css/palette/bg-utilities.css'
+
+// display-large
+import '@sandlada/material-design-css/typography/typography-utilities.css'
+
+// rounded-medium
+import '@sandlada/material-design-css/shape/shape-utilities.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'
+```
+
+#### Prebuilt Colors
+
+Prebuilt colors are ready-made color palettes generated by Material Design's color system. Each CSS file contains light/dark schemes and three contrast levels (default, low-contrast, high-contrast) built in.
+
+To use a prebuilt color, import `preset.css` first, then import the desired prebuilt color file, followed by the color utilities.
+
+```typescript
+import '@sandlada/material-design-css/preset.css'
+
+import '@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css'
+import '@sandlada/material-design-css/color/text-utilities.css'
+import '@sandlada/material-design-css/color/bg-utilities.css'
+```
+
+Toggle the `dark` attribute on `:root` to switch between light and dark themes, or use `low-contrast` / `high-contrast` attributes to adjust contrast.
+
+##### Naming Conventions for Prebuilt Colors
+
+Prebuilt colors are organized into **9 variants** under `prebuilt-colors/`:
+
+| Variant     | Directory      | Description                       |
+| ----------- | -------------- | --------------------------------- |
+| Monochrome  | `monochrome/`  | Single-tone grayscale palette     |
+| Neutral     | `neutral/`     | Neutral palette with a subtle hue |
+| Tonal Spot  | `tonal-spot/`  | Balanced tonal palette            |
+| Vibrant     | `vibrant/`     | Highly saturated palette          |
+| Expressive  | `expressive/`  | Expressive and dynamic palette    |
+| Rainbow     | `rainbow/`     | Rainbow-inspired palette          |
+| Fruit Salad | `fruit-salad/` | Diverse multi-hue palette         |
+| Content     | `content/`     | Content-color aligned palette     |
+| Fidelity    | `fidelity/`    | Fidelity-optimized palette        |
+
+There are **two filename patterns** depending on the variant:
+
+**Pattern A — Hue + Year (`monochrome` is a special case)**
+
+Used by: `neutral`, `tonal-spot`, `vibrant`, `expressive`, `rainbow`, `fruit-salad`
+
+```
+h{hue}-{year}.css
+```
+
+- `{hue}`: Hue angle in degrees. Available values: `0`, `30`, `60`, `90`, `120`, `150`, `180`, `210`, `240`, `270`, `300`, `330`, `360`
+- `{year}`: Material Design spec version. Values: `2021` or `2025`
+
+Example filenames:
+- `prebuilt-colors/tonal-spot/h0-2025.css`
+- `prebuilt-colors/vibrant/h180-2021.css`
+
+> **Note:** Each file internally contains **three contrast modes**: default (`:root`), `low-contrast` (`:root[low-contrast]`), and `high-contrast` (`:root[high-contrast]`).
+
+**Special case — `monochrome`**
+
+```
+prebuilt-colors/monochrome/black.css
+```
+
+Only one file exists for monochrome.
+
+**Pattern B — Hue + Chroma + Tone + Year**
+
+Used by: `content`, `fidelity`
+
+```
+h{hue}c{chroma}t{tone}-{year}.css
+```
+
+- `{hue}`: Hue angle (`0`, `30`, `60`, `90`, `120`, `150`, `180`, `210`, `240`, `270`, `300`, `330`, `360`)
+- `{chroma}`: Chroma value in HCT color space. Values: `30`, `60`, `90`
+- `{tone}`: Tone value in HCT color space. Values: `20`, `50`, `80`
+- `{year}`: Material Design spec version. Values: `2021` or `2025`
+
+Example filenames:
+- `prebuilt-colors/content/h0c30t20-2025.css`
+- `prebuilt-colors/fidelity/h180c60t50-2021.css`
+
+Each file also contains three built-in contrast levels.
+
+##### Examples by Variant
+
+**Monochrome**
+```typescript
+import '@sandlada/material-design-css/preset.css'
+import '@sandlada/material-design-css/prebuilt-colors/monochrome/black.css'
+```
+
+**Neutral / Tonal Spot / Vibrant / Expressive / Rainbow / Fruit Salad**
+```typescript
+import '@sandlada/material-design-css/preset.css'
+import '@sandlada/material-design-css/prebuilt-colors/neutral/h120-2025.css'
+import '@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css'
+import '@sandlada/material-design-css/prebuilt-colors/vibrant/h240-2025.css'
+```
+
+**Content / Fidelity**
+```typescript
+import '@sandlada/material-design-css/preset.css'
+import '@sandlada/material-design-css/prebuilt-colors/content/h0c30t20-2025.css'
+import '@sandlada/material-design-css/prebuilt-colors/fidelity/h180c60t50-2025.css'
+```
+
+`preset.css` also defines the light and dark color-scheme contract used by the color utilities. Toggle the `dark` attribute on `:root` to switch themes.
+
+### For TailwindCSS v4
+
+```css
+@import "tailwindcss";
+
+/**
+ * Optional ready-made palette.
+ * Replace the path with any file under prebuilt-colors/.
+ */
+@import "@sandlada/material-design-css/prebuilt-colors/tonal-spot/h0-2025.css";
+
+/**
+ * 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";
+
+/* rounded-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;
+    }
+}
+```
+
+## Naming Conventions
+
+- Color utilities use `bg-*` and `text-*`.
+- Prebuilt color files use the filenames from `prebuilt-colors/` as described above.
+- Shape utilities use `rounded-*` plus directional suffixes like `-t`, `-r`, `-b`, and `-l`.
+- Motion utilities use `animation-*` and `transition-*` with `duration-*` and `easing-*` tokens.
+- Typography utilities use `emphasized-*` for emphasized variants and the base type scale names for standard variants.
+
+## Usage
+
+Copy this code into your configured project and you will see a button with color and rounded corners.
+
+```html
+<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](https://material-design-css.sandlada.com)

package/color/bg-utilities.css

@@ -1,63 +1,63 @@
-@layer material-design-system.variable.bg-color {
+@layer material-design-system.bg-color {
     :root {
-        --_bg-color-primary-palette-key-color        : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
-        --_bg-color-secondary-palette-key-color      : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
-        --_bg-color-tertiary-palette-key-color       : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
-        --_bg-color-neutral-palette-key-color        : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
+        --_bg-color-primary-palette-key-color: var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
+        --_bg-color-secondary-palette-key-color: var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
+        --_bg-color-tertiary-palette-key-color: var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
+        --_bg-color-neutral-palette-key-color: var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
         --_bg-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
-        --_bg-color-background                       : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
-        --_bg-color-on-background                    : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
-        --_bg-color-surface                          : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
-        --_bg-color-surface-dim                      : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
-        --_bg-color-surface-bright                   : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
-        --_bg-color-surface-container-lowest         : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
-        --_bg-color-surface-container-low            : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
-        --_bg-color-surface-container                : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
-        --_bg-color-surface-container-high           : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
-        --_bg-color-surface-container-highest        : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
-        --_bg-color-on-surface                       : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
-        --_bg-color-surface-variant                  : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
-        --_bg-color-on-surface-variant               : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
-        --_bg-color-inverse-surface                  : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
-        --_bg-color-inverse-on-surface               : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
-        --_bg-color-outline                          : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
-        --_bg-color-outline-variant                  : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
-        --_bg-color-shadow                           : var(--md-sys-color-shadow, light-dark(#000000, #000000));
-        --_bg-color-scrim                            : var(--md-sys-color-scrim, light-dark(#000000, #000000));
-        --_bg-color-surface-tint                     : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
-        --_bg-color-primary                          : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
-        --_bg-color-on-primary                       : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
-        --_bg-color-primary-container                : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
-        --_bg-color-on-primary-container             : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
-        --_bg-color-inverse-primary                  : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
-        --_bg-color-secondary                        : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
-        --_bg-color-on-secondary                     : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
-        --_bg-color-secondary-container              : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
-        --_bg-color-on-secondary-container           : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
-        --_bg-color-tertiary                         : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
-        --_bg-color-on-tertiary                      : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
-        --_bg-color-tertiary-container               : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
-        --_bg-color-on-tertiary-container            : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
-        --_bg-color-error                            : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
-        --_bg-color-on-error                         : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
-        --_bg-color-error-container                  : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
-        --_bg-color-on-error-container               : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
-        --_bg-color-primary-fixed                    : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
-        --_bg-color-primary-fixed-dim                : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
-        --_bg-color-on-primary-fixed                 : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
-        --_bg-color-on-primary-fixed-variant         : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
-        --_bg-color-secondary-fixed                  : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
-        --_bg-color-secondary-fixed-dim              : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
-        --_bg-color-on-secondary-fixed               : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
-        --_bg-color-on-secondary-fixed-variant       : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
-        --_bg-color-tertiary-fixed                   : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
-        --_bg-color-tertiary-fixed-dim               : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
-        --_bg-color-on-tertiary-fixed                : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
-        --_bg-color-on-tertiary-fixed-variant        : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
+        --_bg-color-background: var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
+        --_bg-color-on-background: var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
+        --_bg-color-surface: var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
+        --_bg-color-surface-dim: var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
+        --_bg-color-surface-bright: var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
+        --_bg-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
+        --_bg-color-surface-container-low: var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
+        --_bg-color-surface-container: var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
+        --_bg-color-surface-container-high: var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
+        --_bg-color-surface-container-highest: var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
+        --_bg-color-on-surface: var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
+        --_bg-color-surface-variant: var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
+        --_bg-color-on-surface-variant: var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
+        --_bg-color-inverse-surface: var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
+        --_bg-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
+        --_bg-color-outline: var(--md-sys-color-outline, light-dark(#737967, #8d937f));
+        --_bg-color-outline-variant: var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
+        --_bg-color-shadow: var(--md-sys-color-shadow, light-dark(#000000, #000000));
+        --_bg-color-scrim: var(--md-sys-color-scrim, light-dark(#000000, #000000));
+        --_bg-color-surface-tint: var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
+        --_bg-color-primary: var(--md-sys-color-primary, light-dark(#000000, #ffffff));
+        --_bg-color-on-primary: var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
+        --_bg-color-primary-container: var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
+        --_bg-color-on-primary-container: var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
+        --_bg-color-inverse-primary: var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
+        --_bg-color-secondary: var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
+        --_bg-color-on-secondary: var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
+        --_bg-color-secondary-container: var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
+        --_bg-color-on-secondary-container: var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
+        --_bg-color-tertiary: var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
+        --_bg-color-on-tertiary: var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
+        --_bg-color-tertiary-container: var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
+        --_bg-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
+        --_bg-color-error: var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
+        --_bg-color-on-error: var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
+        --_bg-color-error-container: var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
+        --_bg-color-on-error-container: var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
+        --_bg-color-primary-fixed: var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
+        --_bg-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
+        --_bg-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
+        --_bg-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
+        --_bg-color-secondary-fixed: var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
+        --_bg-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
+        --_bg-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
+        --_bg-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
+        --_bg-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
+        --_bg-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
+        --_bg-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
+        --_bg-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
     }
 }
 
-@layer material-design-system.utilities.background {
+@layer material-design-system.bg-color {
     .bg-primary-palette-key-color {
         background: var(--_bg-color-primary-palette-key-color);
     }
@@ -273,4 +273,4 @@
     .bg-on-tertiary-fixed-variant {
         background: var(--_bg-color-on-tertiary-fixed-variant);
     }
-}
+}

package/color/text-utilities.css

@@ -1,63 +1,63 @@
-@layer material-design-system.variable.text-color {
+@layer material-design-system.text-color {
     :root {
-        --_text-color-primary-palette-key-color        : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
-        --_text-color-secondary-palette-key-color      : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
-        --_text-color-tertiary-palette-key-color       : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
-        --_text-color-neutral-palette-key-color        : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
+        --_text-color-primary-palette-key-color: var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
+        --_text-color-secondary-palette-key-color: var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
+        --_text-color-tertiary-palette-key-color: var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
+        --_text-color-neutral-palette-key-color: var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
         --_text-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
-        --_text-color-background                       : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
-        --_text-color-on-background                    : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
-        --_text-color-surface                          : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
-        --_text-color-surface-dim                      : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
-        --_text-color-surface-bright                   : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
-        --_text-color-surface-container-lowest         : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
-        --_text-color-surface-container-low            : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
-        --_text-color-surface-container                : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
-        --_text-color-surface-container-high           : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
-        --_text-color-surface-container-highest        : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
-        --_text-color-on-surface                       : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
-        --_text-color-surface-variant                  : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
-        --_text-color-on-surface-variant               : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
-        --_text-color-inverse-surface                  : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
-        --_text-color-inverse-on-surface               : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
-        --_text-color-outline                          : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
-        --_text-color-outline-variant                  : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
-        --_text-color-shadow                           : var(--md-sys-color-shadow, light-dark(#000000, #000000));
-        --_text-color-scrim                            : var(--md-sys-color-scrim, light-dark(#000000, #000000));
-        --_text-color-surface-tint                     : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
-        --_text-color-primary                          : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
-        --_text-color-on-primary                       : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
-        --_text-color-primary-container                : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
-        --_text-color-on-primary-container             : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
-        --_text-color-inverse-primary                  : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
-        --_text-color-secondary                        : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
-        --_text-color-on-secondary                     : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
-        --_text-color-secondary-container              : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
-        --_text-color-on-secondary-container           : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
-        --_text-color-tertiary                         : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
-        --_text-color-on-tertiary                      : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
-        --_text-color-tertiary-container               : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
-        --_text-color-on-tertiary-container            : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
-        --_text-color-error                            : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
-        --_text-color-on-error                         : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
-        --_text-color-error-container                  : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
-        --_text-color-on-error-container               : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
-        --_text-color-primary-fixed                    : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
-        --_text-color-primary-fixed-dim                : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
-        --_text-color-on-primary-fixed                 : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
-        --_text-color-on-primary-fixed-variant         : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
-        --_text-color-secondary-fixed                  : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
-        --_text-color-secondary-fixed-dim              : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
-        --_text-color-on-secondary-fixed               : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
-        --_text-color-on-secondary-fixed-variant       : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
-        --_text-color-tertiary-fixed                   : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
-        --_text-color-tertiary-fixed-dim               : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
-        --_text-color-on-tertiary-fixed                : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
-        --_text-color-on-tertiary-fixed-variant        : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
+        --_text-color-background: var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
+        --_text-color-on-background: var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
+        --_text-color-surface: var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
+        --_text-color-surface-dim: var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
+        --_text-color-surface-bright: var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
+        --_text-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
+        --_text-color-surface-container-low: var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
+        --_text-color-surface-container: var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
+        --_text-color-surface-container-high: var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
+        --_text-color-surface-container-highest: var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
+        --_text-color-on-surface: var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
+        --_text-color-surface-variant: var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
+        --_text-color-on-surface-variant: var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
+        --_text-color-inverse-surface: var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
+        --_text-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
+        --_text-color-outline: var(--md-sys-color-outline, light-dark(#737967, #8d937f));
+        --_text-color-outline-variant: var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
+        --_text-color-shadow: var(--md-sys-color-shadow, light-dark(#000000, #000000));
+        --_text-color-scrim: var(--md-sys-color-scrim, light-dark(#000000, #000000));
+        --_text-color-surface-tint: var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
+        --_text-color-primary: var(--md-sys-color-primary, light-dark(#000000, #ffffff));
+        --_text-color-on-primary: var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
+        --_text-color-primary-container: var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
+        --_text-color-on-primary-container: var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
+        --_text-color-inverse-primary: var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
+        --_text-color-secondary: var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
+        --_text-color-on-secondary: var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
+        --_text-color-secondary-container: var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
+        --_text-color-on-secondary-container: var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
+        --_text-color-tertiary: var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
+        --_text-color-on-tertiary: var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
+        --_text-color-tertiary-container: var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
+        --_text-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
+        --_text-color-error: var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
+        --_text-color-on-error: var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
+        --_text-color-error-container: var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
+        --_text-color-on-error-container: var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
+        --_text-color-primary-fixed: var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
+        --_text-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
+        --_text-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
+        --_text-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
+        --_text-color-secondary-fixed: var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
+        --_text-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
+        --_text-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
+        --_text-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
+        --_text-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
+        --_text-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
+        --_text-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
+        --_text-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
     }
 }
 
-@layer material-design-system.utilities.text {
+@layer material-design-system.text-color {
     .text-primary-palette-key-color {
         color: var(--_text-color-primary-palette-key-color);
     }
@@ -273,4 +273,4 @@
     .text-on-tertiary-fixed-variant {
         color: var(--_text-color-on-tertiary-fixed-variant);
     }
-}
+}