tuhfa-design-system

Shared design tokens and presentational Vue components for Tuhfa.

What's here

• tokens.css — Tailwind v4 @theme block (fonts, type scale, colors). Import it from your own style.css alongside @import 'tailwindcss'; your project's own Tailwind build generates the utilities (font-sans, text-section-title, bg-bg-page, etc.) from it.
• Vue components with no app-specific dependencies (no store/router/API imports): Avatar, Button, Checkbox, Input, NavTab, StatusPill, StripePlaceholder, Textarea.

Components that depend on app state, routing, or domain models (nav bars, dashboards, banners tied to auth) stay in the consuming app; this package only holds framework-agnostic, purely presentational pieces.

Usage

npm install tuhfa-design-system

/* style.css */
@import 'tailwindcss';
@import 'tuhfa-design-system/tokens.css';

<script setup lang="ts">
import { StripePlaceholder } from 'tuhfa-design-system';
</script>

Development

npm install
npm run build

Storybook

Live catalog of every token and component, one .stories.ts file per component in src/components/.

npm run storybook          # dev server at http://localhost:6006
npm run build-storybook    # static build -> storybook-static/

Deployed at https://design.mytuhfa.com. Any component/token change should come with its story file updated in the same commit.