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 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5 committed 2026-09-18 16:32:20 +05:30
1 parent 32d3cac828
commit 03efca5bda
3 files changed
+5 -4

No files matched your search

+2 -2
View File
@@ -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",
+1 -1
View File
@@ -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; }
+2 -1
View File
@@ -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);
}