@phila/phila-ui-core

@phila/phila-ui-core

Core utilities and styles for the Phila UI library. This package provides shared TypeScript utilities and design tokens for testing purposes.

Features

• Design Tokens: Essential colors, spacing, typography, and border radius
• TypeScript Utilities: Class name utilities and type definitions
• Type Safety: Full TypeScript support with comprehensive type definitions
• Vanilla CSS: Pure CSS approach without external dependencies

Installation

pnpm add @phila/phila-ui-core

Usage

Design Tokens

import { colors, spacing, typography, borderRadius } from "@phila/phila-ui-core";

// Use design tokens in your styles
const buttonStyles = {
  backgroundColor: colors.primary[500],
  padding: spacing[4],
  fontSize: typography.fontSizes.base,
  borderRadius: borderRadius.md,
};

Class Name Utilities

import { cn } from "@phila/phila-ui-core";

// Combine class names efficiently
const buttonClass = cn("base-button", "active", className);

Type Definitions

import type { Size, Color, Variant, StyledProps } from "@phila/phila-ui-core";

interface ButtonProps extends StyledProps {
  children: React.ReactNode;
  onClick?: () => void;
}

Design Tokens

Colors

• Primary: Blue shades for main actions
• Secondary: Gray shades for secondary actions

Spacing

Essential spacing scale: 2, 4, 6 (0.5rem, 1rem, 1.5rem)

Typography

• Font Sizes: sm, base, lg

Border Radius

• Sizes: base, md

TypeScript Support

The package includes TypeScript definitions for all utilities and design tokens.

License

MIT