Stareezy UI

Token Objects

Every design value in Stareezy UI is a typed token object. Tokens carry their identity and value in a single, frozen object:

type Token<T> = {
  readonly __token: true  // discriminant for compiler detection
  readonly id: string     // stable unique identifier
  readonly value: T       // resolved design value
}

✦

The __token: true discriminant is what lets the compiler detect token props at build time and replace them with atomic CSS class names.

Using Tokens in Components

Pass token objects directly as props — TypeScript will autocomplete and validate every value:

import { colors, spacing, radius, typography } from '@stareezy-ui/tokens'
import { Box, Text } from '@stareezy-ui/components'

function Card() {
  return (
    <Box
      bg={colors.celurenBlue[500]}
      p={spacing[4]}
      rounded={radius.md}
    >
      <Text
        type="M-heading-bold"
        color={colors.neutral[10].value}
        text="Hello, Stareezy UI"
      />
    </Box>
  )
}

Token Categories

colors

Full color palette (celurenBlue, raisinBlack, etc.)

semanticColors

Role-based colors (bg.primary, text.secondary…)

spacing

Spacing scale (0–480px)

radius

Border radius scale

typography

Font sizes, weights, families

shadow

Box shadow presets

timing

Animation timing values

Fallback Values

All style props also accept plain strings or numbers for backward compatibility:

// Token prop (type-safe, compiler-optimized)
<Box bg={colors.celurenBlue[500]} p={spacing[4]} rounded={radius.md} />

// Plain fallback (still works, no compiler optimization)
<Box bg="#024CCE" p={16} rounded={8} />

Accessing Token Values

Every token exposes its raw value via .value:

import { colors } from '@stareezy-ui/tokens'

const token = colors.celurenBlue[500]
console.log(token.id)    // "celurenBlue-500"
console.log(token.value) // "#024CCE"

// Use in non-token contexts (e.g. inline styles, RN StyleSheet)
const style = { backgroundColor: colors.celurenBlue[500].value }

Custom Configuration with createUi

Use createUi() to register custom tokens and breakpoints at app startup:

import { createUi } from '@stareezy-ui/tokens'
import { token } from '@stareezy-ui/tokens'

const ui = createUi({
  tokens: {
    brand: {
      primary: token('#FF6B35', 'brand-primary'),
      secondary: token('#004E89', 'brand-secondary'),
    },
  },
  breakpoints: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
  },
})

// Access your custom tokens with full type safety
ui.tokens.brand.primary.value // "#FF6B35"

ℹ