Mozhi

Configuration

Configure Mozhi by copying the stylesheet token setup and choosing the grayscale scale, accent scale, and radius directly in CSS.

Copy the token setup

Start from the stylesheet structure in globals.css, keep the Radix imports in colors.css, and keep the radius tokens in radius.css.

What to change

  • Pick one grayscale family and map --color-grayscale-1 through --color-grayscale-12 to that scale.
  • Pick one accent family and map --color-accent-1 through --color-accent-12 to that scale.
  • Set --radius-radius in radius.css to the radius token you want as the default.

Why CSS only

Mozhi components already read from the semantic grayscale-*, accent-*, and rounded-radius tokens. Once the stylesheet is set up, the components inherit those choices without extra runtime helper code.

Recommendation

Keep the palette imports in colors.css, the radius scale in radius.css, and the grayscale or accent mapping in globals.css so the whole system stays consistent.