diff --git a/apps/web/src/assets/styles/global.scss b/apps/web/src/assets/styles/global.scss index e1bcf37..ac3e424 100644 --- a/apps/web/src/assets/styles/global.scss +++ b/apps/web/src/assets/styles/global.scss @@ -24,7 +24,7 @@ h1 { max-width: 760px; margin: var(--space-3) 0 var(--space-4); font-size: var(- .results-heading span { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); } .detail-page { width: min(920px, calc(100% - var(--space-8))); margin: 0 auto; padding: var(--space-12) 0 var(--space-24); } -.detail-back { color: var(--color-interactive); font-weight: var(--weight-bold); text-decoration: none; } +.detail-back { color: var(--color-interactive-text); font-weight: var(--weight-bold); text-decoration: none; } .detail-content { max-width: 680px; padding-top: var(--space-16); } .detail-content h1 { font-size: clamp(3rem, 8vw, 6rem); } .detail-price { color: var(--color-text); font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } @@ -36,7 +36,7 @@ h1 { max-width: 760px; margin: var(--space-3) 0 var(--space-4); font-size: var(- .catalog-state { padding: var(--space-12) 0; color: var(--color-text-muted); } .catalog-state--error { color: var(--color-danger-text); } .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); } -.pagination button { min-width: 44px; min-height: 44px; border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-interactive); } +.pagination button { min-width: 44px; min-height: 44px; border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-interactive-text); } .pagination button:disabled { cursor: not-allowed; opacity: 0.45; } .showcase-page { padding: var(--space-12) max(var(--space-4), calc((100vw - 1200px) / 2)); } diff --git a/apps/web/src/components/molecules/ImageGallery.scss b/apps/web/src/components/molecules/ImageGallery.scss index e44b591..1edc76a 100644 --- a/apps/web/src/components/molecules/ImageGallery.scss +++ b/apps/web/src/components/molecules/ImageGallery.scss @@ -4,4 +4,4 @@ .image-gallery__placeholder { color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); } .image-gallery__controls { display: flex; gap: var(--space-2); } .image-gallery__controls button { min-width: 44px; min-height: 44px; border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); } -.image-gallery__controls button.image-gallery__thumb--selected { border-color: var(--color-interactive); box-shadow: var(--glow-selection); color: var(--color-interactive); } \ No newline at end of file +.image-gallery__controls button.image-gallery__thumb--selected { border-color: var(--color-interactive); box-shadow: var(--glow-selection); color: var(--color-interactive-text); } \ No newline at end of file diff --git a/apps/web/src/pages/AdminImagePage.stories.js b/apps/web/src/pages/AdminImagePage.stories.js new file mode 100644 index 0000000..f402d73 --- /dev/null +++ b/apps/web/src/pages/AdminImagePage.stories.js @@ -0,0 +1,5 @@ +import AdminImagePage from './AdminImagePage.vue'; + +export default { title: 'Pages/AdminImagePage', component: AdminImagePage }; + +export const Overview = {}; diff --git a/apps/web/src/pages/ListingDetailPage.stories.js b/apps/web/src/pages/ListingDetailPage.stories.js new file mode 100644 index 0000000..63b8c45 --- /dev/null +++ b/apps/web/src/pages/ListingDetailPage.stories.js @@ -0,0 +1,5 @@ +import ListingDetailPage from './ListingDetailPage.vue'; + +export default { title: 'Pages/ListingDetailPage', component: ListingDetailPage }; + +export const Overview = {}; diff --git a/apps/web/src/pages/ProductDetailPage.stories.js b/apps/web/src/pages/ProductDetailPage.stories.js new file mode 100644 index 0000000..37dfab2 --- /dev/null +++ b/apps/web/src/pages/ProductDetailPage.stories.js @@ -0,0 +1,5 @@ +import ProductDetailPage from './ProductDetailPage.vue'; + +export default { title: 'Pages/ProductDetailPage', component: ProductDetailPage }; + +export const Overview = {}; diff --git a/docs/IMPLEMENTATION-STATUS.md b/docs/IMPLEMENTATION-STATUS.md index 7476321..06e0fb6 100644 --- a/docs/IMPLEMENTATION-STATUS.md +++ b/docs/IMPLEMENTATION-STATUS.md @@ -186,6 +186,7 @@ Remaining roadmap areas are approved external provider credentials/adapters, bro - Physical inventory management (bulk archive, bulk pricing refresh, bulk tag updates, market valuations, and pricing job retry) is now a dedicated `/admin/inventory` screen with its own navigation entry; the guided workflow overview links to it and only tracks a lightweight inventory count for wizard completion. - Storybook now installs a lightweight router mirroring the app's named routes plus a mobile-viewport-forcing test-runner hook, enabling isolated page stories (including the public catalog) that use `useRoute`/`useRouter` or narrow-viewport CSS breakpoints. - The public catalog now has its own Storybook coverage, including an interaction test proving the mobile filter disclosure is keyboard-operable and correctly hides/reveals filter controls via `aria-expanded`. This review also found and fixed a real color-contrast failure in the catalog error-state text. +- `ListingDetailPage`, `ProductDetailPage`, and `AdminImagePage` now have Storybook coverage. Adding it surfaced and fixed a color-contrast bug shared by all three: the "Back to catalog" link, pagination controls, and the selected image-gallery thumbnail were using the non-text-safe `--color-interactive` token instead of `--color-interactive-text`. ## Local Commands