@brkz-inc/foundations

Foundational layer of the BRKZ design system. Provides the Tailwind preset, ThemeProvider, global styles, and utilities.

Contents

• brkzPreset — Tailwind CSS preset that maps @brkz-inc/tokens CSS variables to Tailwind utility classes
• ThemeProvider — React context provider for light/dark/system theme switching
• useTheme — Hook to read and set the current theme
• cn() — Utility for merging Tailwind classes without conflicts (clsx + tailwind-merge)
• global.css — Base CSS: imports tokens, Tailwind layers, resets, and :lang(ar) font selection (auto-switches to Noto Sans Arabic for Arabic content when fonts.css is imported)
• fonts.css — Optional self-hosted variable fonts (Inter + Noto Sans Arabic). Import alongside global.css when you are NOT using next/font or a similar bundler-managed font loader

Notable utilities surfaced by the preset

The preset extends Tailwind with semantic utilities derived from @brkz-inc/tokens. Highlights:

• Surfaces: bg-background, bg-card, bg-popover, bg-muted, bg-secondary, bg-primary
• Feedback: bg-success, bg-warning, bg-error, bg-info (light tints, for alerts/banners)
• Feedback (strong fill): bg-success-strong + text-success-strong-foreground — strong-fill success surface for action buttons (e.g., WhatsApp-style CTAs). Use this pair instead of inlining var(--brkz-color-success-600).
• Sidebar: bg-sidebar, text-sidebar-foreground, bg-sidebar-accent, text-sidebar-accent-foreground, bg-sidebar-primary, text-sidebar-primary-foreground, border-sidebar-border, ring-sidebar-ring. Intentionally always-dark (matches Vercel/Linear/shadcn pattern); does not invert with the theme.
• Borders & rings: border-border, ring-ring
• Radii: rounded-{sm,md,lg,xl,2xl,3xl,full} mapped to --brkz-radius-*
• Motion: duration-{instant,fast,base,moderate,slow}, ease-{standard,decelerate,accelerate,spring}

Setup in consuming apps

1. Configure Tailwind

// tailwind.config.ts
import { brkzPreset } from '@brkz-inc/foundations/tailwind'

export default {
  presets: [brkzPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@brkz-inc/ui/dist/**/*.js',
  ],
}

2. Import global styles

// app/layout.tsx or _app.tsx
import '@brkz-inc/foundations/global.css'

3. Wrap with ThemeProvider

import { ThemeProvider } from '@brkz-inc/foundations'

export default function Layout({ children }) {
  return (
    <ThemeProvider defaultTheme="light">
      {children}
    </ThemeProvider>
  )
}

4. Use the cn utility in components

import { cn } from '@brkz-inc/foundations'

// Merges Tailwind classes without conflicts
cn('px-4 py-2 bg-primary', isActive && 'ring-2', className)