@baystream/ui-theme

Design tokens used across Baystream UI components.

Install

npm install @baystream/ui-theme

Most apps that render @baystream/ui-core components also depend on this package for layout and spacing tokens. In this monorepo, the library-testing app uses @baystream/ui-theme from the workspace by default; see the repository root README to test published installs instead.

Exports

• flexColors
• flexLayout
• flexSpacing
• flexTypography

Why this package exists

This package centralizes visual tokens so apps and shared components use the same semantic color, spacing, layout, and typography values.

Token overview

flexColors

Semantic colors for:

• background
• border
• text
• action

Use these instead of raw hex values inside shared UI code.

flexLayout

Shared layout dimensions such as:

• gridDefaultHeight
• dataGridBorderRadius, dataGridResizeMinWidth, dataGridHeaderHeight (often passed into FlexDataGrid as borderRadius, merged resizeSettings, and headerHeight)
• dataGridColumnId
• dataGridColumnSku
• dataGridColumnUnits
• navbarHeight

flexSpacing

Spacing scale in pixels:

• none
• xs
• sm
• md
• lg
• xl
• 2xl

flexTypography

Font families, font sizes, weights, and line heights.

Example: build a card with shared tokens

import {
  flexColors,
  flexSpacing,
  flexTypography,
} from '@baystream/ui-theme'

export function StatsCard() {
  return (
    <section
      style={{
        backgroundColor: flexColors.background.surface,
        color: flexColors.text.primary,
        border: `1px solid ${flexColors.border.subtle}`,
        borderRadius: 12,
        padding: flexSpacing.lg,
      }}
    >
      <h2
        style={{
          margin: 0,
          fontFamily: flexTypography.fontFamily.sans,
          fontSize: flexTypography.fontSize.lg,
          fontWeight: flexTypography.fontWeight.semibold,
          lineHeight: flexTypography.lineHeight.tight,
        }}
      >
        Active customers
      </h2>
      <p
        style={{
          marginTop: flexSpacing.sm,
          marginBottom: 0,
          color: flexColors.text.secondary,
          fontSize: flexTypography.fontSize.md,
          lineHeight: flexTypography.lineHeight.normal,
        }}
      >
        1,284 accounts are active this week.
      </p>
    </section>
  )
}

Example: reuse layout and spacing in app chrome

import { flexColors, flexLayout, flexSpacing } from '@baystream/ui-theme'

const headerStyle = {
  height: flexLayout.navbarHeight,
  backgroundColor: flexColors.background.navbar,
  color: flexColors.text.onInverse,
  paddingInline: flexSpacing.lg,
  display: 'flex',
  alignItems: 'center',
}

Notes

• These are plain token objects, so they work in inline styles, CSS-in-JS, and custom style generators.