Skip to content

Bast Shared Styles

The @bast/shared-styles package provides design tokens, CSS utilities, and React components for building consistent UIs across Bast applications.

Installation

The package is available as a workspace package:

# In your package.json dependencies
"@bast/shared-styles": "workspace:*"

Quick Start

1. Import Styles

In your main CSS file (e.g., index.css or globals.css):

/* Import fonts first */
@import url('https://fonts.googleapis.com/css2?family=Estedad:wght@100..900&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap');

/* Import shared styles */
@import '@bast/shared-styles';

/* Import Tailwind */
@import "tailwindcss";

2. Use CSS Classes

<div class="neu-card p-4 rounded-2xl">
  <h2 class="text-[var(--primary-text)]">Card Title</h2>
  <p class="text-[var(--text-secondary)]">Card content</p>
</div>

3. Use React Components

import { NeuCard, NeuButton, NeuAlert } from '@bast/shared-styles/components';

function MyComponent() {
  return (
    <NeuCard variant="raised" interactive>
      <h2>Welcome</h2>
      <NeuButton variant="success">Get Started</NeuButton>
    </NeuCard>
  );
}

Documentation

Package Structure

@bast/shared-styles/
├── src/
│   ├── index.css           # Main entry point
│   ├── tokens/             # Design tokens
│   │   ├── colors.css
│   │   ├── typography.css
│   │   ├── spacing.css
│   │   ├── borders.css
│   │   ├── shadows.css
│   │   └── transitions.css
│   ├── themes/             # Theme definitions
│   │   ├── light.css
│   │   └── dark.css
│   ├── base/               # Base/reset styles
│   │   └── reset.css
│   ├── utilities/          # CSS utility classes
│   │   ├── index.css         # Barrel import for all utility CSS
│   │   ├── neumorphic.css    # Card, tab bar, padding modifiers
│   │   ├── inputs.css        # Form controls, input fields, labels
│   │   ├── alerts.css        # Alert component styles
│   │   ├── billing.css       # Billing cards, plan cards, status pills
│   │   ├── button.css        # Button variants and sizes (shadcn-compatible)
│   │   ├── detail-header.css # DetailScreenHeader (sticky, back btn, dropdown)
│   │   ├── dropdowns.css     # Select trigger, content, items
│   │   ├── effects.css       # Visual effects
│   │   ├── icons.css         # Icon sizing
│   │   ├── infra-card.css    # InfraCard layout (grid, cells, tags, fractions)
│   │   ├── kb-job.css        # KB job progress, status pills, recovery bar
│   │   ├── provisioning.css  # Provisioning badges, progress cards
│   │   ├── radius.css        # Border radius tokens
│   │   ├── security.css      # API key rows, allowlist editor, reveal-once
│   │   ├── shadows.css       # Shadow definitions
│   │   ├── status-tones.css  # Status tone colors, icon action buttons, graph view
│   │   └── typography.css    # Type ramp classes
│   ├── lib/                # Utility functions
│   │   ├── statusTone.ts     # Status tone class mappings
│   │   ├── semanticColor.ts  # Semantic environment color helpers
│   │   └── colorValue.ts     # Color normalization utilities
│   └── components/         # React components (CSS-only, no Tailwind)
│       ├── NeuCard.tsx       ├── NeuButton.tsx
│       ├── NeuInput.tsx      ├── NeuSelect.tsx
│       ├── NeuCheckbox.tsx   ├── NeuRadio.tsx
│       ├── NeuToggle.tsx     ├── NeuTabNav.tsx
│       ├── NeuAlert.tsx      ├── Button.tsx
│       ├── Pill.tsx          ├── StatusPill.tsx
│       ├── StatusDot.tsx     ├── IconActionButton.tsx
│       ├── InfraCard.tsx     ├── DetailScreenHeader.tsx
│       ├── GraphViewLayout.tsx
│       ├── CodeEntry.tsx     ├── SessionRow.tsx
│       ├── AuditEventRow.tsx
│       ├── ProvisioningStatusBadge.tsx
│       ├── ProvisioningProgressCard.tsx
│       ├── BillingStatusPill.tsx  ├── BillingDetailCard.tsx
│       ├── PlanCard.tsx
│       ├── DeploymentStatusPill.tsx
│       ├── KBJobStatusPill.tsx    ├── KBJobProgress.tsx
│       ├── KBRecoveryBar.tsx
│       ├── ThrottleAlert.tsx      ├── CooldownCountdown.tsx
│       ├── ThemeLifecyclePill.tsx  ├── ThemeVersionPill.tsx
│       ├── RetirementStatusPill.tsx ├── PurgeCountdown.tsx
│       ├── ApiKeyRow.tsx          ├── AllowlistEditor.tsx
│       ├── RevealOnceSecret.tsx   ├── SnippetDisplay.tsx
│       ├── MissingRequirementsChecklist.tsx
│       ├── PrerequisitesPanel.tsx
│       └── DestructiveConfirmation.tsx
└── tailwind.preset.js      # Tailwind preset