@sofya-ds/tokens

Official theme tokens and presets for Sofya.

Install

pnpm add @sofya-ds/tokens

Usage

import {
  gradientToCss,
  sofyaColorPalette,
  sofyaSemanticColorHex,
  sofyaTypographyPresets,
  themePresets
} from "@sofya-ds/tokens";

const primary = sofyaSemanticColorHex.primary;
const gradient = gradientToCss(sofyaColorPalette.gradients.brand);
const preset = themePresets.sofya;
const body = sofyaTypographyPresets.body;

Canonical typography scale

sofyaTypographyPresets is the physical typography scale synchronized with the Sofya Figma library. New text styles must use one of these eight presets for font size and line height:

| Preset | Size / line height | Weight | | --- | --- | --- | | extra-tiny | 12px / 18px | 400 | | tiny | 14px / 18px | 400 | | body | 15px / 26px | 400 | | h5 | 18px / 23px | 500 | | h4 | 22px / 28px | 500 | | h3 | 28px / 34px | 600 | | h2 | 36px / 41px | 600 | | h1 | 48px / 53px | 700 |

Use sofyaTypographyPresetNames to build a selector and sofyaTextStylePresetMap to resolve a compatible semantic text style back to its canonical preset. Semantic roles remain available, but must not introduce font sizes or line heights outside this scale.

Use SofyaThemeOverrides for whitelabel contracts. Text-style overrides accept family, weight, and tracking only; fontSize and lineHeight are intentionally not part of the override type.

Includes

• Official palette groups
• Semantic color map
• Eight canonical typography presets plus compatible semantic roles for product screens, sidebars, legal/prose content and encounter views
• Semantic surface roles for app chrome, dialogs, document cards, panels and focused states
• Shared spacing, rhythm, measure, control and layout scales
• Theme presets
• Gradient helpers