From 03efca5bda9109b4d9cefd8e79cfd08148c19af3 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 18 Sep 2026 16:32:20 +0530 Subject: [PATCH] Lift the selected tab and clipboard label above 4.5:1 Both drew small text in the raw accent, which misses the contrast floor on a dark surface. They now blend the accent toward the text colour, as the unselected tab already does. Co-Authored-By: Claude Opus 5 --- docs/ui-visual-contract-0.8.json | 4 ++-- packages/ui/components/Clipboard.wrn | 2 +- packages/ui/components/Tabs.wrn | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index ea0659a3..51d40dd0 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -17,7 +17,7 @@ "packages/ui/components/Carousel.wrn": "e7d921f802aa19210f3f415b59b70750a2c8d78e30684ad334809741c70a6bf9", "packages/ui/components/Chart.wrn": "07bc01247b5a1c2b82c2ba8386b7fcdbf480efead75d52b7da04d471072c7ee4", "packages/ui/components/ChatBubble.wrn": "d71f7d6567d76ac0eb3ecc8e2e567fec12bb3236ea05f4d0a72286abc0b7cbb1", - "packages/ui/components/Clipboard.wrn": "5a93f2bae337d7ce364229b796bac673f60dde6dc135f0969f4e106e04854d30", + "packages/ui/components/Clipboard.wrn": "76bf670f985e6b92a1b9cda746039cff407e6137e27f68fd1d43c5ff16134f22", "packages/ui/components/Collapse.wrn": "26df087a61c82f1aa1749785f4c9be654c4f934859c1a47acfcb8cc67eecc75d", "packages/ui/components/ColorPicker.wrn": "ccac7eb49c0f443b404004f1298fa905fde45c52b51466194920939c920348c9", "packages/ui/components/Columns.wrn": "8ccd9e53f6799b09f8b996740d12e4e73ee782f6fd3e57595c6c16f788b9b812", @@ -80,7 +80,7 @@ "packages/ui/components/Stepper.wrn": "7ec0902acd7cb74b44d490215b6421dae9a41731735ad1e9aec17e8bfc3fa142", "packages/ui/components/StrongPassword.wrn": "82fa3ea0711476e28e349faa35f21567b798c8bccdb4a8d5bbb5610081deab8d", "packages/ui/components/StyledIcon.wrn": "0874f9a234b053a7c8b9c6983be5d664453a64c4576dff1a049101e249a2866d", - "packages/ui/components/Tabs.wrn": "00cb6b6447c0effb8fe3aeffb6889d3465aa21764ac5c89a85767407c92d6b41", + "packages/ui/components/Tabs.wrn": "2ca14d0a87cff3066334f1295fd066a787b84b5667962c1d22fb879b4a68cea6", "packages/ui/components/TextLink.wrn": "9d561631c5f65a2bcdc59f5c0b166a5dd794a396f42093f2cd26388386f6f954", "packages/ui/components/TimePicker.wrn": "33bd7a7069b7abe858cf1617b5b950733b37a8d522469ed673cff00b4dfcad0e", "packages/ui/components/Timeline.wrn": "7a58a77b1addf2ebbb0eb5dad008bcb49696c4265456d388d1cea71492c76ca6", diff --git a/packages/ui/components/Clipboard.wrn b/packages/ui/components/Clipboard.wrn index 89eec61d..8ddd6bb3 100644 --- a/packages/ui/components/Clipboard.wrn +++ b/packages/ui/components/Clipboard.wrn @@ -86,7 +86,7 @@ component Clipboard { .wrn-clipboard__description { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; } .wrn-clipboard__control { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); } .wrn-clipboard__value { min-width: 0; flex: 1; overflow: auto; padding: 0.7rem 0.85rem; color: var(--wrn-color-text); background: var(--wrn-color-surface-2); font: inherit; font-family: var(--wrn-font-mono, ui-monospace, monospace); white-space: nowrap; } - .wrn-clipboard__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: var(--wrn-color-primary); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; } + .wrn-clipboard__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: color-mix(in srgb, var(--wrn-color-primary) 72%, var(--wrn-color-text)); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .wrn-clipboard__button:hover { background: var(--wrn-color-primary-soft); } .wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -3px; } .wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.55; } diff --git a/packages/ui/components/Tabs.wrn b/packages/ui/components/Tabs.wrn index 8524b514..c600192f 100644 --- a/packages/ui/components/Tabs.wrn +++ b/packages/ui/components/Tabs.wrn @@ -277,7 +277,8 @@ component Tabs { .wrn-tabs__tab[aria-selected="true"] { background: var(--wrn-color-surface); - color: var(--tabs-accent); + /* Small text on the accent alone misses 4.5:1, so it blends toward the text colour. */ + color: color-mix(in srgb, var(--tabs-accent) 72%, var(--wrn-color-text)); box-shadow: var(--wrn-shadow-1); }