@rgrmdesign/rgrm-ds-css

Component styles for the RGRM design system. Ships plain CSS that consumes the CSS custom properties from @rgrmdesign/rgrm-ds-tokens.

Install

pnpm add @rgrmdesign/rgrm-ds-css @rgrmdesign/rgrm-ds-tokens

@rgrmdesign/rgrm-ds-tokens is a peer dependency — load it once in your app so the required custom properties are defined.

Usage

Import tokens, fonts, and component styles:

import '@rgrmdesign/rgrm-ds-tokens'; // design tokens (once, app-wide)
import '@rgrmdesign/rgrm-ds-css/fonts'; // Geist Sans via Fontsource (400, 500, 700)
import '@rgrmdesign/rgrm-ds-css';

The /fonts entry registers @font-face under the same family name as --rgrm-core-font-primary-family in tokens (Geist), using files from @fontsource/geist-sans. It does not override token variables. Skip it if you load Geist yourself — keep the @font-face family name in sync with the token.

Or import a single component's styles via its sub-path export:

import '@rgrmdesign/rgrm-ds-css/heading';
import '@rgrmdesign/rgrm-ds-css/paragraph';

<h1 class="rgrm-heading rgrm-heading--display">Hero title</h1>
<h1 class="rgrm-heading rgrm-heading--h1">Page title</h1>
<h2 class="rgrm-heading rgrm-heading--h2">Section title</h2>

<p class="rgrm-paragraph rgrm-paragraph--large">A larger lead paragraph.</p>
<p class="rgrm-paragraph">Body copy at the default scale.</p>
<p class="rgrm-paragraph rgrm-paragraph--small">Fine print / captions.</p>

React / Web Component

Use @rgrmdesign/rgrm-ds-react or @rgrmdesign/rgrm-ds-elements (<rgrm-paragraph>) for framework wrappers that apply these classes and load the stylesheet automatically.

Components

| Sub-path | Classes | | ------------ | ------------------------------------------------------------------------------------ | | /fonts | @font-face for Geist (optional; load once in app entry) | | /heading | .rgrm-heading, .rgrm-heading--display, .rgrm-heading--h1 … .rgrm-heading--h6 | | /paragraph | .rgrm-paragraph, .rgrm-paragraph--small, .rgrm-paragraph--large |