# Color

Color tokens from the Actian foundations.

import TokenScale from "../../../components/TokenScale.astro";
import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import backgrounds from "../../../../vendor/foundations/dist/tokens/backgrounds.json";
import textColors from "../../../../vendor/foundations/dist/tokens/typography/text-color-tokens.json";
import iconColors from "../../../../vendor/foundations/dist/tokens/icons/icon-colors.json";
import dtcg from "../../../../vendor/tokens/tokens.json";

<PageMetadata
  slug="foundations.color"
  source="foundations/dist/tokens/global-color.json"
  schema={1}
/>

The Actian DS color tokens — three theme rails (Actian, FM, DS Kit).

## Brand & status scales

Full primary / neutral / error / success / warning color ramps. Each row is a CSS variable consumable directly.

### Primary

<TokenScale data={dtcg.color.primary} prefix="color-primary" />

### Neutral

<TokenScale data={dtcg.color.neutral} prefix="color-neutral" />

### Error

<TokenScale data={dtcg.color.error} prefix="color-error" />

### Success

<TokenScale data={dtcg.color.success} prefix="color-success" />

### Warning

<TokenScale data={dtcg.color.warning} prefix="color-warning" />

## Semantic surfaces

Per-surface tokens for backgrounds, text, icons, and annotation.

### Backgrounds

{(backgrounds.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Text

{(textColors.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Icons

{(iconColors.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} showSwatch={true} />
))}

### Annotation

<TokenScale data={dtcg.color.annotation} prefix="color-annotation" />