Standard CSS

CombricDocumentation version

Standard CSS is a first-class Combric path.

@import "@combric/tokens/css";

.panel {
  color: var(--combric-color-text);
  background: var(--combric-color-surface);
  padding: var(--combric-space-4);
  border-radius: var(--combric-radius);
}

For layout classes, import @combric/layout/css. For React components, a single @combric/react/css import includes layout and tokens.

Foundation surface

The preview and copyable source below use only canonical token variables. The general structural --combric-radius remains zero in Metriq; published components use their role-specific radius tokens.

Foundation surface — Native CSS

Canonical token surface

@import "@combric/tokens/css";

.surface {
  color: var(--combric-color-text);
  background: var(--combric-color-surface);
  border: var(--combric-border-width) solid var(--combric-color-border);
  padding: var(--combric-space-4);
  border-radius: var(--combric-radius);
}

<article class="surface">Canonical token surface</article>

Foundation surface — Tailwind adapter

Canonical token surface

@import "tailwindcss/theme.css" layer(theme);
@import "@combric/tailwind";
@import "tailwindcss/utilities.css" layer(utilities);

<article class="border-combric border-combric-border bg-combric-surface p-combric-4 text-combric-foreground rounded-combric">
  Canonical token surface
</article>