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>
This commit is contained in:
5
.changeset/hex-background-package.md
Normal file
5
.changeset/hex-background-package.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@dangerousthings/hex-background": minor
|
||||
---
|
||||
|
||||
New package: 3D hexagon grid background using Three.js + React Three Fiber. Includes HexGridBackground (full-viewport web component), HexGrid (instanced mesh with animated heights), and HexCamera (orbiting camera). Supports both web and React Native via separate entry points.
|
||||
6
.changeset/react-web-package.md
Normal file
6
.changeset/react-web-package.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@dangerousthings/react": minor
|
||||
"@dangerousthings/tokens": patch
|
||||
---
|
||||
|
||||
New package: @dangerousthings/react — React web components wrapping @dangerousthings/web CSS. 22 components matching the React Native package API (DTCard, DTButton, DTLabel, DTChip, DTModal, DTDrawer, DTAccordion, DTMenu, DTStaggerContainer, DTFeatureLegend, DTMobileFilterOverlay, DTGallery, DTHexagon, form primitives). Includes DTWebThemeProvider, animation hooks (useScaleIn, usePulse), and variant utility functions. DTVariant type moved to @dangerousthings/tokens as shared canonical source.
|
||||
5
.changeset/storefront-mode-tokens.md
Normal file
5
.changeset/storefront-mode-tokens.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@dangerousthings/tokens": minor
|
||||
---
|
||||
|
||||
Add mode CSS custom properties (--mode-normal, --mode-emphasis, --mode-warning, --mode-success, --mode-other) with RGB and selected variants for per-component color overrides
|
||||
5
.changeset/storefront-rn-features.md
Normal file
5
.changeset/storefront-rn-features.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@dangerousthings/react-native": minor
|
||||
---
|
||||
|
||||
Add storefront component features: DTCard selected state and progress bar, DTBadgeOverlay positioning wrapper, DTStaggerContainer with staggered scale-in animation, DTFeatureLegend product feature grid, DTMobileFilterOverlay slide-up filter panel, useScaleIn and usePulse animation hooks. Rewrite DTButton with interactive bevel pattern (outlined rectangle, bevels on hover/select).
|
||||
5
.changeset/storefront-web-features.md
Normal file
5
.changeset/storefront-web-features.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@dangerousthings/web": minor
|
||||
---
|
||||
|
||||
Add storefront component features: animations library (entrance, interactive, stagger container), scrollbar styling, card color modes with selected/hover states, card progress bar, badge positioning, interactive bevel buttons, menu items, filter headers/overlays, feature legend grid. Fix link hover glow to respect per-element --dt-glow-color.
|
||||
Reference in New Issue
Block a user