From c2265ff1923927f453338a0db5ea5fbc1c5609d0 Mon Sep 17 00:00:00 2001 From: wheval Date: Sun, 26 Apr 2026 13:39:37 +0100 Subject: [PATCH 1/2] fix: add high-contrast token overrides for key screens Add scoped marketplace high-contrast token overrides for card surfaces and labels while preserving default theme values. Closes accesslayerorg/accesslayer-client#139 Made-with: Cursor --- PR_DESCRIPTION_139.md | 22 ++++++++++++++++ src/components/common/CreatorCard.tsx | 6 ++--- src/index.css | 38 +++++++++++++++++++++++++++ src/pages/LandingPage.tsx | 6 ++--- 4 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 PR_DESCRIPTION_139.md diff --git a/PR_DESCRIPTION_139.md b/PR_DESCRIPTION_139.md new file mode 100644 index 0000000..ad5a74a --- /dev/null +++ b/PR_DESCRIPTION_139.md @@ -0,0 +1,22 @@ +## Summary + +- #139: Add high-contrast token overrides for key screens + +## Changes + +- Added scoped marketplace semantic tokens in `src/index.css` for card surfaces and label contrast. +- Added high-contrast overrides inside `@media (prefers-contrast: more)` so stronger contrast is applied only when users request it. +- Updated key landing screen UI to consume these tokens (`LandingPage` profile panel, filter label, pagination label, and `CreatorCard` surface/labels) instead of hardcoded low-contrast alpha colors. +- Kept the default theme visuals unchanged by preserving existing default token values and only swapping token usage where readability matters most. + +## Testing + +- [x] `pnpm lint` +- [x] `pnpm build` +- [x] Manual: load `/` with normal contrast and verify marketplace card/background/labels still match existing visual baseline. +- [x] Manual: enable OS/browser high-contrast preference (`prefers-contrast: more`) and verify improved readability for creator cards, filter sort label, profile panel labels, and pagination label text. +- [x] Manual edge case: verify hover/focus states remain visible on creator cards and action buttons in both default and high-contrast modes. + +## Closing + +Closes accesslayerorg/accesslayer-client#139 diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx index 1bf4740..0d13078 100644 --- a/src/components/common/CreatorCard.tsx +++ b/src/components/common/CreatorCard.tsx @@ -112,7 +112,7 @@ const CreatorCard: React.FC = ({ creator, className }) => { return (
@@ -148,14 +148,14 @@ const CreatorCard: React.FC = ({ creator, className }) => {
-

+

@{creator.instructorId || 'creator'}

{creator.socialHandle ? ( -
+
@{creator.socialHandle}
diff --git a/src/index.css b/src/index.css index 80b9c4d..6b79ca9 100644 --- a/src/index.css +++ b/src/index.css @@ -88,6 +88,11 @@ --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.705 0.015 286.067); + --marketplace-card-bg: rgba(255, 255, 255, 0.05); + --marketplace-card-bg-hover: rgba(255, 255, 255, 0.08); + --marketplace-card-border: rgba(255, 255, 255, 0.1); + --marketplace-label-muted: rgba(255, 255, 255, 0.6); + --marketplace-label-strong: rgba(255, 255, 255, 0.85); } .dark { @@ -122,6 +127,22 @@ --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.552 0.016 285.938); + --marketplace-card-bg: rgba(255, 255, 255, 0.05); + --marketplace-card-bg-hover: rgba(255, 255, 255, 0.08); + --marketplace-card-border: rgba(255, 255, 255, 0.1); + --marketplace-label-muted: rgba(255, 255, 255, 0.6); + --marketplace-label-strong: rgba(255, 255, 255, 0.85); +} + +@media (prefers-contrast: more) { + :root, + .dark { + --marketplace-card-bg: rgba(4, 12, 24, 0.88); + --marketplace-card-bg-hover: rgba(7, 20, 40, 0.94); + --marketplace-card-border: rgba(255, 255, 255, 0.4); + --marketplace-label-muted: rgba(255, 255, 255, 0.88); + --marketplace-label-strong: rgba(255, 255, 255, 0.97); + } } @layer base { @@ -167,6 +188,23 @@ animation: skeleton-shimmer 1.6s linear infinite; } + .marketplace-card-surface { + background-color: var(--marketplace-card-bg); + border-color: var(--marketplace-card-border); + } + + .marketplace-card-surface-hover:hover { + background-color: var(--marketplace-card-bg-hover); + } + + .marketplace-label-muted { + color: var(--marketplace-label-muted); + } + + .marketplace-label-strong { + color: var(--marketplace-label-strong); + } + @media (prefers-reduced-motion: reduce) { .skeleton-shimmer { animation: none; diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 51cf16c..c86b638 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -378,7 +378,7 @@ function LandingPage() {
@@ -441,7 +441,7 @@ function LandingPage() { > Previous - + Page {safePage + 1} of {totalPages}