Styling

Closed styling

No Mizen component or part accepts className or style. Prop types wrap the shared Closed<T>, so TypeScript rejects them, and the components strip them at runtime.

Use the props each component documents instead: variant, size, tone, and similar. A missing variant is a request for the library, not something to patch locally.

Lay out with primitives

Arrange components with Stack for vertical rhythm, Inline for rows, and Grid for columns. Group, Section, Frame, and Card group related content. Spacer adds space between items.

These primitives use the spacing scale, so layouts keep one rhythm without custom margins.

• Stack
• Inline
• Grid

Style app-owned elements

Components have closed styling contracts. Use their supported props and composition. Do not pass className, style, sx, or xstyle to reopen their internals.

When an app-owned host needs StyleX styling, configure the StyleX Babel and PostCSS plugins for that app first, then use the exported tokens. Keep static values in defineConsts, themed values in defineVars, and finite themes in createTheme. Avoid generated class selectors and descendant overrides.

import { colors } from "@mizen-labs/ui/colors.stylex";
import { space } from "@mizen-labs/ui/spacing.stylex";
import { create, props } from "@stylexjs/stylex";

const styles = create({
  workarea: {
    backgroundColor: colors.workarea,
    color: colors.content,
    padding: space["4"],
  },
});

export function Workarea() {
  return <section {...props(styles.workarea)}>Project overview</section>;
}

• Composition rules

Token subpaths

Tokens are StyleX variables, imported from subpaths: colors, spacing, shape, typography, motion, interaction, shadows, dimensions, fonts, palette, and conditions, each as @mizen-labs/ui/<name>.stylex. Type roles live in @mizen-labs/ui/typography.styles.

Themes swap the variables, so styles written with tokens follow light and dark mode automatically.

• Theming
• Foundations