e74c285b70
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>
132 lines
4.4 KiB
Markdown
132 lines
4.4 KiB
Markdown
# DT Design System
|
|
|
|
Shared design tokens, web CSS, and React Native components for the Dangerous Things product family.
|
|
|
|
## Packages
|
|
|
|
| Package | Description |
|
|
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
| [`@dangerousthings/tokens`](packages/tokens) | Canonical design tokens (colors, typography, shape) defined in TypeScript and exported as CSS custom properties |
|
|
| [`@dangerousthings/web`](packages/web) | Web CSS themes — bevels, glows, animations, forms, and filter styles |
|
|
| [`@dangerousthings/react-native`](packages/react-native) | React Native components built on React Native Paper |
|
|
| [`@dangerousthings/hex-background`](packages/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
|
|
|
|
```bash
|
|
npm install
|
|
npm run build # builds all packages via Turbo
|
|
```
|
|
|
|
### Per-Package Builds
|
|
|
|
```bash
|
|
npm run build:tokens
|
|
npm run build:web
|
|
npm run build:react-native
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Web (CSS)
|
|
|
|
```css
|
|
@import "@dangerousthings/web"; /* base index */
|
|
@import "@dangerousthings/web/tokens/dt.css"; /* DT brand tokens */
|
|
@import "@dangerousthings/web/components/bevels.css";
|
|
```
|
|
|
|
### React Native
|
|
|
|
```tsx
|
|
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)
|
|
|
|
```ts
|
|
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](https://github.com/changesets/changesets) for versioning.
|
|
|
|
```bash
|
|
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](LICENSE)
|