F0 Core

Core tokens and utilities for the F0 Design System.

Installation

npm install @factorialco/f0-core
# or
yarn add @factorialco/f0-core
# or
pnpm add @factorialco/f0-core

Usage

import { semanticColors, spacing, fontSizes } from "@factorialco/f0-core"

// Use tokens in your styles
const styles = {
  container: {
    padding: spacing[4],
    backgroundColor: semanticColors.background.default.light,
  },
  text: {
    fontSize: fontSizes.base,
    color: semanticColors.foreground.default.light,
  },
}

Available Tokens

• semanticColors: Semantic color tokens for light and dark themes
• baseColors: Raw color values
• spacing: Spacing scale
• fontSizes: Font size scale
• fontWeights: Font weight values
• lineHeights: Line height values
• letterSpacings: Letter spacing values
• borderRadius: Border radius values

Tailwind preset

@factorialco/f0-core/tailwind provides the F0 theme and plugins. Tailwind generates a class only when it finds the full class name in your source files. Write f1 colour classes out in full (for example bg-f1-background-secondary), not built from variables such as `bg-f1-background-${tone}`. If you must build a class name at runtime, add the exact classes to your own safelist.

Development

Building

pnpm build

Testing

pnpm test

License

MIT