@fastwork/xosmoz-css

CSS utility classes for the Xosmoz design system.

Installation

npm install @fastwork/xosmoz-css @fastwork/xosmoz-theme

Usage

Import the utilities along with the theme:

// Import theme tokens first
import '@fastwork/xosmoz-theme/base.css';
import '@fastwork/xosmoz-theme/themes.css';

// Import utility classes
import '@fastwork/xosmoz-css';

Or import specific utility categories:

import '@fastwork/xosmoz-css/typography.css';
import '@fastwork/xosmoz-css/radius.css';

Typography Classes

Use complete typography styles with a single class:

<h1 class="font-h1">Main Heading</h1>
<h2 class="font-h2">Section Heading</h2>
<p class="font-body-1">Body text</p>
<span class="font-subtitle-1-bold">Subtitle</span>

Available classes:

• Headings: .font-h1 to .font-h6
• Titles: .font-title-1 to .font-title-4
• Subtitles: .font-subtitle-1-bold, .font-subtitle-1-regular, etc.
• Body: .font-body-1 to .font-body-4

Responsive: All typography classes automatically adapt between desktop and mobile sizes.

Border Radius Classes

<div class="rounded-md">Medium rounded corners</div>
<button class="rounded-full">Pill button</button>

Available classes: .rounded-none, .rounded-sm, .rounded-base, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-full

Development

# Build the package
yarn build

# Watch mode
yarn dev

# Lint
yarn lint

License

MIT