Files

michael e74c285b70 Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-06 10:18:39 -08:00

4.4 KiB

Raw Blame History

DT Design System

Shared design tokens, web CSS, and React Native components for the Dangerous Things product family.

Packages

Package	Description
`@dangerousthings/tokens`	Canonical design tokens (colors, typography, shape) defined in TypeScript and exported as CSS custom properties
`@dangerousthings/web`	Web CSS themes — bevels, glows, animations, forms, and filter styles
`@dangerousthings/react-native`	React Native components built on React Native Paper
`@dangerousthings/hex-background`	3D hexagon grid background using Three.js + React Three Fiber (web and React Native)

Brand Themes

Two brand themes ship out of the box:

DT — neon cyberpunk aesthetic with beveled corners and glow effects (Tektur font)
Classic — dark navy palette with magenta accents and standard border radius

Getting Started

Prerequisites

Node.js >= 18
npm >= 10

Install & Build

npm install
npm run build        # builds all packages via Turbo

Per-Package Builds

npm run build:tokens
npm run build:web
npm run build:react-native

Usage

Web (CSS)

@import "@dangerousthings/web";                     /* base index */
@import "@dangerousthings/web/tokens/dt.css";       /* DT brand tokens */
@import "@dangerousthings/web/components/bevels.css";

React Native

import { DTThemeProvider } from "@dangerousthings/react-native";
import { DTButton, DTCard } from "@dangerousthings/react-native";

export default function App() {
  return (
    <DTThemeProvider brand="dt">
      <DTCard>
        <DTButton mode="contained" onPress={() => {}}>
          Press Me
        </DTButton>
      </DTCard>
    </DTThemeProvider>
  );
}

Tokens (JavaScript/TypeScript)

import { dt } from "@dangerousthings/tokens/brands/dt";
console.log(dt.color.brand.primary); // "#00ffff"

Development

Scripts

Command	Description
`npm run build`	Build all packages (Turbo)
`npm run clean`	Remove all `dist/` directories
`npm run typecheck`	Run TypeScript type checking
`npm run lint`	Lint all packages

Release

This project uses Changesets for versioning.

npx changeset              # create a new changeset
npm run version-packages   # bump versions from pending changesets
npm run release            # build + publish to npm

React Native Components

DTAccordion, DTBadgeOverlay, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTFeatureLegend, DTGallery, DTHexagon, DTLabel, DTMediaFrame, DTMenu, DTMobileFilterOverlay, DTModal, DTProgressBar, DTQuantityStepper, DTRadioGroup, DTSearchInput, DTStaggerContainer, DTSwitch, DTTextInput

Animation hooks: useScaleIn, usePulse

Web CSS Modules

bevels.css — angular clip-path bevels, card modes, selected states, progress bars, badge overlays, interactive bevel buttons
glows.css — neon drop-shadow and text-shadow effects (mode-aware)
forms-dt.css — text inputs, checkboxes, radio buttons, switches, menu items, filter headers
animations.css — entrance animations, stagger containers, transition utilities
scrollbar.css — thin neon scrollbar styling
feature-legend.css — product feature grid with rotated labels

Project Structure

dt-design-system/
├── packages/
│   ├── tokens/          # Design token definitions + CSS generation
│   ├── web/             # CSS themes and components
│   ├── react-native/    # React Native Paper components
│   ├── hex-background/  # 3D hexagon grid (Three.js)
│   └── showcase/        # Demo apps (desktop + mobile)
├── turbo.json           # Turbo pipeline config
└── package.json         # Workspace root

License

MIT

4.4 KiB Raw Blame History