sundo-styles

Shared design tokens, Tailwind CSS preset, and base styles for all S und O apps (Beacon, Reach, Hoster, Pitch).

What's included

| File | Purpose | |---|---| | tailwind-preset.js | Tailwind preset with shared colors and font config | | base.css | Base styles, animations, scrollbar, skeleton shimmer | | components.css | Reusable component classes (buttons, cards, modals, etc.) | | colors.js | Color palette as a standalone JS object |

Installation

npm install github:beratbby/sundo-styles

Setup

1. Tailwind config

Replace your app's tailwind.config.js with:

const preset = require('sundo-styles/tailwind-preset')

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [preset],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  // app-specific overrides go here
}

2. CSS entry point

Replace your app's index.css with:

@import 'sundo-styles/base.css';
@import 'sundo-styles/components.css';

/* app-specific styles below */

Design tokens

Colors

| Token | Hex | Usage | |---|---|---| | bg | #0a0a0a | Page background | | surface | #111111 | Card / panel background | | surface-2 | #161616 | Elevated surface | | border | #1e1e1e | Default border | | border-2 | #2a2a2a | Stronger border |

Font

Geist with system-ui and sans-serif fallbacks.

Utility classes

| Class | Effect | |---|---| | .animate-in | Slide up fade in (180ms) | | .page-enter | Page fade in (220ms) | | .modal-enter | Modal scale + slide in (200ms) | | .floatbar-enter | Float bar slide up (260ms) | | .highlight-new | Green highlight fade out (1.6s) | | .shake | Horizontal shake (280ms) | | .row-exit | Fade out for row removal | | .skeleton | Shimmer loading placeholder | | @keyframes scoreRing | SVG score ring animation |

Component classes

Import components.css to get ready-made classes for all shared UI patterns. Use these instead of repeating long Tailwind strings across apps.

Buttons

| Class | Description | |---|---| | .btn-primary | Indigo filled button with shadow | | .btn-secondary | Subtle bordered button | | .btn-danger | Red filled button | | .btn-danger-soft | Red outlined/soft button | | .btn-icon | Minimal icon-only button | | .btn-ghost | Text-only button |

Cards

| Class | Description | |---|---| | .card | Base card with border and surface background | | .stat-card | Stat card with hover lift effect | | .stat-card-label | Uppercase small label | | .stat-card-value | Large bold value | | .stat-card-sub | Small subtext |

Form inputs

| Class | Description | |---|---| | .input | Standard text input | | .input-compact | Smaller padding input | | .textarea | Textarea with no resize | | .select | Styled select dropdown | | .input-label | Label above input | | .input-help | Help text below input |

Modals

| Class | Description | |---|---| | .modal-backdrop | Fixed dark overlay | | .modal-container | Centering wrapper | | .modal-content | Modal panel with animation | | .modal-header | Header with bottom border | | .modal-title | Bold white title | | .modal-body | Scrollable content area | | .modal-footer | Footer with top border |

Tables

| Class | Description | |---|---| | .table-container | Rounded bordered wrapper | | .table-th | Header cell (uppercase, small) | | .table-row | Row with hover and bottom border | | .table-cell | Standard cell padding |

Badges

| Class | Color | |---|---| | .badge | Base (no color) | | .badge-green | Success / active | | .badge-red | Error / danger | | .badge-amber | Warning / pending | | .badge-indigo | Info / primary | | .badge-purple | Closing / special | | .badge-orange | Submitted | | .badge-sky | Contacted | | .badge-zinc | Neutral / inactive |

Toasts

| Class | Description | |---|---| | .toast-container | Fixed bottom-right wrapper | | .toast-success | Green toast | | .toast-error | Red toast | | .toast-info | Indigo toast |

Navigation

| Class | Description | |---|---| | .sidebar | Desktop sidebar container | | .sidebar-header | Logo area with bottom border | | .sidebar-footer | Bottom section with top border | | .nav-active | Active nav link | | .nav-inactive | Inactive nav link with hover | | .bottom-nav | Mobile bottom navigation bar | | .bottom-nav-item | Individual bottom nav tab |

Alerts

| Class | Description | |---|---| | .alert-error | Red error message | | .alert-success | Green success message | | .alert-info | Indigo info message |

Other

| Class | Description | |---|---| | .logo-icon | Indigo logo square with shadow | | .avatar | User avatar circle | | .spinner | Loading spinner (20px) | | .spinner-lg | Loading spinner (32px) | | .page-title | Page heading | | .section-label | Uppercase section label | | .dropdown | Dropdown menu container | | .dropdown-item | Dropdown menu item | | .dropdown-divider | Dropdown separator line | | .upload-zone | Dashed file upload area | | .progress-track | Progress bar background | | .progress-fill | Progress bar fill |

Using colors in JS

const colors = require('sundo-styles/colors')

console.log(colors.bg) // '#0a0a0a'

Adding app-specific overrides

The preset is additive. Add any app-specific tokens in your tailwind config:

const preset = require('sundo-styles/tailwind-preset')

module.exports = {
  presets: [preset],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        accent: '#22c55e', // app-specific color
      },
    },
  },
}

Publishing a new version

# bump version
npm version patch   # or minor / major

# publish
npm publish --access public

Then update in each app:

npm update sundo-styles