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:
1 parent
32d3cac828
commit
03efca5bda
3 files changed
+5
-4
No files matched your search
@@ -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",
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user