yonlu/yellowjacket
1
1
Fork 0
Code Issues 51 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

fix(a11y): give the semantic colours a ramp, and every fill a foreground

Browse Source 
The contrast pass found two things larger than itself, both recorded as
not-fixed. This is them.

The semantic colours were 'fixed across themes', and one fixed colour
cannot clear 4.5:1 against both a near-black and a near-white surface:
--yj-error measured 2.55:1 on dark's elevated, --yj-info 2.31:1, and
success and warning failed on dark and light both. They are split by the
question they answer. A *fill* is 'what colour is a danger button' --
red in every theme, unchanged -- and a *text* colour is 'what colour is
the word failed on this background', which is now per ramp.

Every fill also carries a computed foreground. White on the default
accent is 1.43:1, and the accent is a colour picker, so no fixed answer
survives it: --yj-accent-fg and the four semantic -fg values are derived
(white if white clears, else black), which keeps a red danger button
white and flips a green or amber one to black. Two accent buttons took
their foreground from --yj-bg-base, which inverts with the ramp -- that
is exactly the white-on-yellow 'Apply (A)' the light theme showed.

Accent used as text gets the same treatment through accentTextOn(),
which mixes along the hue until it clears the ramp's surface and stops.
On both dark ramps it returns the accent unchanged, so the dark themes
are visually untouched by that half.

Measured across three ramps and twelve views: 2237 nodes, 0 failing,
against 110 on dark and 50 on light before. Borders, outlines and
shadows were explicitly kept on the fill token -- a border is not text,
and the first pass of the rewrite moved 30 of them by accident.
This commit is contained in:
logan
2026-08-13 01:05:37 -04:00
parent fd32ce71d2
commit 49b1194333
30 changed files with 263 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/audio-player/controls/player-controls.ts
+2 -2
View File
@@ -59,11 +59,11 @@ export class PlayerControls extends LitElement {
}
button:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.active {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.repeat-one {
frontend/src/components/autotag-view/autotag-view.ts
+11 -11
View File
@@ -168,7 +168,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
button {
background: var(--yj-accent, #ffd43b);
color: var(--yj-bg-base, #000);
color: var(--yj-accent-fg, #000);
border: 1px solid transparent;
padding: 0.35rem 0.7rem;
border-radius: 4px;
@@ -397,7 +397,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
.folder-row .match-pill.high {
background: var(--yj-accent, #ffd43b);
color: var(--yj-bg-base, #000);
color: var(--yj-accent-fg, #000);
}
.folder-row .match-pill.pending {
@@ -515,7 +515,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
.banner {
background: rgba(255, 200, 90, 0.12);
border: 1px solid rgba(255, 200, 90, 0.4);
color: #ffd089;
color: var(--yj-warning-text, #ffa94d);
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.85rem;
@@ -583,19 +583,19 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
text-align: center;
}
.md-mark-ok::before { content: '✓'; color: #9be09b; }
.md-mark-warn::before { content: '⚠'; color: #ffd089; }
.md-mark-ok::before { content: '✓'; color: var(--yj-success-text, #51cf66); }
.md-mark-warn::before { content: '⚠'; color: var(--yj-warning-text, #ffa94d); }
.md-mark-info::before { content: '○'; color: var(--yj-text-tertiary, #888); }
.md-text { flex: 1; min-width: 0; }
.md-count {
font-variant-numeric: tabular-nums;
color: #9be09b;
color: var(--yj-success-text, #51cf66);
font-weight: 500;
}
.md-count.bad { color: #ffd089; }
.md-count.bad { color: var(--yj-warning-text, #ffa94d); }
.md-item.ok { color: var(--yj-text-secondary, #b3b3b3); }
.md-item.warn { color: var(--yj-text-primary, #fff); }
@@ -752,17 +752,17 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
* followed by one green char. */
.diff-old {
color: #f08080;
color: var(--yj-error-text, #ff8787);
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.diff-new {
color: #9be09b;
color: var(--yj-success-text, #51cf66);
}
.diff-changed {
color: #ffd089;
color: var(--yj-warning-text, #ffa94d);
}
/* Cosmetic-only difference (case / punctuation): the
@@ -1000,7 +1000,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
.score-badge.high {
background: var(--yj-accent, #ffd43b);
color: var(--yj-bg-base, #000);
color: var(--yj-accent-fg, #000);
}
/* ── Generic states ── */
frontend/src/components/config-page/config-field.ts
+1 -1
View File
@@ -112,7 +112,7 @@ export class ConfigField extends LitElement {
button {
background: var(--yj-info, #4263eb);
color: #fff;
color: var(--yj-info-fg, #fff);
border: none;
border-radius: 4px;
padding: 0.4em 0.8em;
frontend/src/components/config-page/config-page.ts
+13 -13
View File
@@ -135,7 +135,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.btn-warning {
background: var(--yj-warning, #e8590c);
color: #fff;
color: var(--yj-warning-fg, #fff);
}
.btn-warning:hover:not(:disabled) {
@@ -144,7 +144,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.btn-danger {
background: var(--yj-error, #e03131);
color: #fff;
color: var(--yj-error-fg, #fff);
}
.btn-danger:hover:not(:disabled) {
@@ -153,7 +153,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.btn-success {
background: var(--yj-success, #2f9e44);
color: #fff;
color: var(--yj-success-fg, #fff);
}
.btn-success:hover:not(:disabled) {
@@ -175,7 +175,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.btn-ghost.copied {
border-color: var(--yj-success, #2f9e44);
color: var(--yj-success, #2f9e44);
color: var(--yj-success-text, #51cf66);
}
/* Scan actions */
@@ -203,7 +203,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
}
.status-bar.active {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
/* Progress bar */
@@ -269,7 +269,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.error-title {
font-size: 0.8em;
font-weight: 600;
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
}
.error-body {
@@ -361,7 +361,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
}
.metric-value.highlight {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.metric-note {
@@ -490,7 +490,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
--yj-accent,
#ffd43b
);
color: var(--yj-bg-base, #1a1b1e);
color: var(--yj-accent-fg, #000);
font-weight: 600;
}
@@ -499,7 +499,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
}
.status-bar.paused {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
/* Library management */
@@ -558,7 +558,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.library-scan-status {
font-size: 0.75em;
font-weight: 400;
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
white-space: nowrap;
}
@@ -574,7 +574,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
}
.library-name:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.library-path {
@@ -651,7 +651,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
}
.overflow-item--danger {
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
}
.overflow-item--danger:hover {
@@ -821,7 +821,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
.index-status-failed .link {
background: none;
border: none;
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
cursor: pointer;
font: inherit;
padding: 0;
frontend/src/components/config-page/shortcut-capture.ts
+1 -1
View File
@@ -66,7 +66,7 @@ export class ShortcutCapture extends LitElement {
opacity: 1;
}
.reset-btn:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
`;
frontend/src/components/cover-grid/album-dropdown.ts
+3 -3
View File
@@ -142,7 +142,7 @@ export class AlbumDropdown extends LitElement {
--yj-accent-bg,
rgba(255, 212, 59, 0.1)
);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-row.selected.active {
@@ -191,10 +191,10 @@ export class AlbumDropdown extends LitElement {
color: var(--yj-text-primary, #fff);
}
.fav-icon.favorited {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.fav-icon.favorited:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
opacity: 0.8;
}
`;
frontend/src/components/duplicate-tracks-dialog/duplicate-tracks-dialog.ts
+1 -1
View File
@@ -175,7 +175,7 @@ export class DuplicateTracksDialog extends LitElement {
.btn-primary {
background: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
border-color: var(--yj-accent, #ffd43b);
}
frontend/src/components/explore-view/explore-view.ts
+2 -2
View File
@@ -211,7 +211,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) {
}
.search-mode-tab.active {
color: var(--yj-bg-base, #1a1a1a);
color: var(--yj-accent-fg, #000);
background: var(--yj-accent, #ffd43b);
}
@@ -265,7 +265,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) {
}
.lyrics-hit:hover .lyrics-hit-play {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.lyrics-hit-main {
frontend/src/components/first-run-wizard/first-run-wizard.ts
+3 -3
View File
@@ -84,7 +84,7 @@ export class FirstRunWizard extends LitElement {
.welcome wa-icon {
font-size: 40px;
color: var(--yj-accent, #f5c518);
color: var(--yj-accent-text, #f5c518);
margin-bottom: 8px;
}
@@ -114,7 +114,7 @@ export class FirstRunWizard extends LitElement {
}
.chosen wa-icon {
color: var(--yj-accent, #f5c518);
color: var(--yj-accent-text, #f5c518);
flex-shrink: 0;
}
@@ -152,7 +152,7 @@ export class FirstRunWizard extends LitElement {
.btn-primary {
background: var(--yj-accent, #f5c518);
border-color: var(--yj-accent, #f5c518);
color: #000;
color: var(--yj-accent-fg, #000);
}
.btn-primary:hover:not(:disabled) {
frontend/src/components/home-view/home-view.ts
+1 -1
View File
@@ -168,7 +168,7 @@ export class HomeView extends ViewLifecycleMixin(LitElement) {
border: none;
border-radius: 50%;
background: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
display: flex;
align-items: center;
justify-content: center;
frontend/src/components/jobs/job-details-drawer.ts
+4 -4
View File
@@ -124,15 +124,15 @@ export class JobDetailsDrawer extends LitElement {
}
.stage.running .stage-icon {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.stage.complete .stage-icon {
color: #1db954;
color: var(--yj-success-text, #51cf66);
}
.stage.error {
color: #ff8787;
color: var(--yj-error-text, #ff8787);
}
.stage-count {
@@ -144,7 +144,7 @@ export class JobDetailsDrawer extends LitElement {
.stage-error {
grid-column: 2 / -1;
font-size: var(--yj-text-sm);
color: #ff8787;
color: var(--yj-error-text, #ff8787);
overflow-wrap: anywhere;
}
frontend/src/components/jobs/job-format.ts
+2 -2
View File
@@ -154,11 +154,11 @@ export const jobStateStyles = css`
}
.tone-danger {
--job-tone: #ff8787;
--job-tone: var(--yj-error-text, #ff8787);
}
.tone-success {
--job-tone: #1db954;
--job-tone: var(--yj-success-text, #51cf66);
}
.tone-muted {
frontend/src/components/jobs/job-indicator.ts
+1 -1
View File
@@ -211,7 +211,7 @@ export class JobIndicator extends LitElement {
text-align: left;
border: none;
background: transparent;
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
font-size: var(--yj-text-sm);
cursor: pointer;
padding: 0 0.75em 0.6em 3.2em;
frontend/src/components/jobs/job-log-view.ts
+1 -1
View File
@@ -132,7 +132,7 @@ export class JobLogView extends LitElement {
}
.entry.error .message {
color: #ff8787;
color: var(--yj-error-text, #ff8787);
}
.detail {
frontend/src/components/jobs/job-row.ts
+2 -2
View File
@@ -180,7 +180,7 @@ export class JobRow extends LitElement {
.error {
margin-top: 0.45em;
font-size: var(--yj-text-sm);
color: #ff8787;
color: var(--yj-error-text, #ff8787);
overflow-wrap: anywhere;
}
@@ -214,7 +214,7 @@ export class JobRow extends LitElement {
}
button.danger:hover:not(:disabled) {
color: #ff8787;
color: var(--yj-error-text, #ff8787);
}
button:disabled {
frontend/src/components/jobs/jobs-view.ts
+2 -2
View File
@@ -201,7 +201,7 @@ export class JobsView extends ViewLifecycleMixin(LitElement) {
}
button.action.danger {
color: #ff8787;
color: var(--yj-error-text, #ff8787);
border-color: rgba(255, 107, 107, 0.35);
}
@@ -212,7 +212,7 @@ export class JobsView extends ViewLifecycleMixin(LitElement) {
button.link {
border: none;
background: transparent;
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
font-size: var(--yj-text-sm);
cursor: pointer;
padding: 0.2em 0.4em;
frontend/src/components/notifications/notice.ts
+2 -2
View File
@@ -43,13 +43,13 @@ export const noticeStyles = css`
}
.notice[data-tone='success'] {
border-left-color: var(--yj-success, #37b24d);
border-left-color: var(--yj-success, #2f9e44);
}
.notice > wa-icon {
flex-shrink: 0;
margin-top: 1px;
color: var(--yj-warning, #e0a800);
color: var(--yj-warning-text, #ffa94d);
}
.notice[data-tone='error'] > wa-icon {
frontend/src/components/notifications/notification-host.ts
+1 -1
View File
@@ -78,7 +78,7 @@ export class NotificationHost extends LitElement {
.blocking-actions .primary {
background: var(--yj-accent, #ffd43b);
border-color: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
}
.blocking-detail {
frontend/src/components/now-playing/now-playing.ts
+2 -2
View File
@@ -188,11 +188,11 @@ export class NowPlaying extends LitElement {
}
.fav-btn.favorited {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.fav-btn.favorited:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
opacity: 0.8;
}
frontend/src/components/phantom-resolver/phantom-resolver.ts
+2 -2
View File
@@ -749,7 +749,7 @@ export class PhantomResolver extends LitElement {
59,
0.15
);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.candidate-duration {
@@ -862,7 +862,7 @@ export class PhantomResolver extends LitElement {
--yj-accent,
#ffd43b
);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.btn-danger {
frontend/src/components/playlist-details/playlist-details.ts
+4 -4
View File
@@ -1093,7 +1093,7 @@ export class PlaylistDetails
.play-all-button:hover {
border-color: var(--yj-accent, #ffd43b);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
/* Column grid layout */
@@ -1189,7 +1189,7 @@ export class PlaylistDetails
.track-item.active {
background-color: var(--yj-accent-bg, rgba(255, 212, 59, 0.1));
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-item.selected.active {
@@ -1226,7 +1226,7 @@ export class PlaylistDetails
.phantom-caution {
flex-shrink: 0;
font-size: 14px;
color: var(--yj-warning, #e67700);
color: var(--yj-warning-text, #ffa94d);
}
.phantom-path {
@@ -1273,7 +1273,7 @@ export class PlaylistDetails
}
.phantom-icon-btn.phantom-icon-remove:hover {
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
background: rgba(224, 49, 49, 0.12);
}
frontend/src/components/playlist-picker/playlist-picker.ts
+1 -1
View File
@@ -120,7 +120,7 @@ export class PlaylistPicker extends LitElement {
.button-row button.primary {
background: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
}
.button-row button.primary:hover {
frontend/src/components/playlist-view/playlist-view.ts
+5 -5
View File
@@ -222,7 +222,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
.new-playlist-button:hover,
.new-playlist-button.drag-over {
border-color: var(--yj-accent, #ffd43b);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.new-playlist-button.drag-over {
@@ -278,7 +278,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
.create-form button.primary {
background: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
}
.create-form button.primary:hover {
@@ -389,7 +389,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
--yj-accent-bg-strong,
rgba(255, 212, 59, 0.18)
);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
font-size: 28px;
pointer-events: none;
}
@@ -467,14 +467,14 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
.import-button:hover {
border-color: var(--yj-accent, #ffd43b);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.import-error {
padding: 0.5em 0.75em;
margin: 0.5em 16px 0;
font-size: 0.8em;
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
background: color-mix(
in srgb,
var(--yj-error, #e03131) 10%,
frontend/src/components/queue-panel/queue-panel.ts
+5 -5
View File
@@ -308,7 +308,7 @@ export class QueuePanel
}
.header-action-button:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.header-action-button:disabled {
@@ -375,7 +375,7 @@ export class QueuePanel
}
.track-item.active .track-position {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-art {
@@ -411,7 +411,7 @@ export class QueuePanel
}
.track-item.active .track-title {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-artist {
@@ -438,7 +438,7 @@ export class QueuePanel
}
.remove-button:hover {
color: var(--yj-error, #ff6b6b);
color: var(--yj-error-text, #ff8787);
}
.list-area.drag-over {
@@ -503,7 +503,7 @@ export class QueuePanel
--yj-accent-bg-strong,
rgba(255, 212, 59, 0.18)
);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
font-size: 28px;
pointer-events: none;
}
frontend/src/components/smart-playlist-details/smart-playlist-details.ts
+3 -3
View File
@@ -365,7 +365,7 @@ export class SmartPlaylistDetails
.action-button:hover {
border-color: var(--yj-accent, #ffd43b);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.action-button:disabled {
@@ -513,7 +513,7 @@ export class SmartPlaylistDetails
.track-item.active {
background-color: var(--yj-accent-bg, rgba(255, 212, 59, 0.1));
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-item.selected.active {
@@ -539,7 +539,7 @@ export class SmartPlaylistDetails
.phantom-caution {
flex-shrink: 0;
font-size: 14px;
color: var(--yj-warning, #e67700);
color: var(--yj-warning-text, #ffa94d);
}
.phantom-path {
frontend/src/components/smart-playlist-editor/smart-playlist-editor.ts
+3 -3
View File
@@ -287,7 +287,7 @@ export class SmartPlaylistEditor extends LitElement {
}
.remove-btn:hover {
color: #ff8787;
color: var(--yj-error-text, #ff8787);
background: rgba(255, 107, 107, 0.1);
}
@@ -313,7 +313,7 @@ export class SmartPlaylistEditor extends LitElement {
.add-rule-btn:hover {
border-color: var(--yj-accent, #ffd43b);
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
/* ── Options row (limit, sort) ────────── */
@@ -411,7 +411,7 @@ export class SmartPlaylistEditor extends LitElement {
.preview-error {
font-size: var(--yj-text-sm);
color: #ff8787;
color: var(--yj-error-text, #ff8787);
padding: 6px 0;
}
frontend/src/components/track-details/track-details.ts
+11 -11
View File
@@ -326,7 +326,7 @@ export class TrackDetails extends LitElement {
/* MusicBrainz badge + links */
.mb-verified-badge {
color: #1db954;
color: var(--yj-success-text, #51cf66);
font-size: 14px;
margin-left: 6px;
vertical-align: middle;
@@ -340,7 +340,7 @@ export class TrackDetails extends LitElement {
}
.mb-icon {
color: #1db954;
color: var(--yj-success-text, #51cf66);
font-size: 14px;
}
@@ -353,7 +353,7 @@ export class TrackDetails extends LitElement {
}
.mb-link:hover {
color: #1db954;
color: var(--yj-success-text, #51cf66);
text-decoration: underline;
}
@@ -445,7 +445,7 @@ export class TrackDetails extends LitElement {
.btn-primary {
background: var(--yj-accent, #ffd43b);
color: #000;
color: var(--yj-accent-fg, #000);
border-color: var(--yj-accent, #ffd43b);
}
@@ -466,13 +466,13 @@ export class TrackDetails extends LitElement {
}
.btn-danger {
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
border-color: var(--yj-error, #e03131);
}
.btn-danger:hover {
background: var(--yj-error, #e03131);
color: #fff;
color: var(--yj-error-fg, #fff);
}
/* Cover art edit mode */
@@ -532,7 +532,7 @@ export class TrackDetails extends LitElement {
/* Error message */
.error-message {
flex: 1;
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
font-size: var(--yj-text-sm);
padding: 4px 0;
word-break: break-word;
@@ -683,11 +683,11 @@ export class TrackDetails extends LitElement {
}
.batch-result .result-success {
color: var(--yj-success, #40c057);
color: var(--yj-success-text, #51cf66);
}
.batch-result .result-partial {
color: var(--yj-warning, #fab005);
color: var(--yj-warning-text, #ffa94d);
}
.batch-result .result-cancelled {
@@ -701,7 +701,7 @@ export class TrackDetails extends LitElement {
.failure-list summary {
cursor: pointer;
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
font-weight: 500;
margin-bottom: 8px;
}
@@ -718,7 +718,7 @@ export class TrackDetails extends LitElement {
}
.failure-item .failure-error {
color: var(--yj-error, #e03131);
color: var(--yj-error-text, #ff8787);
font-style: italic;
}
`];
frontend/src/components/track-list/track-list.ts
+5 -5
View File
@@ -939,13 +939,13 @@ export class TrackList
}
.header-cell:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.sort-arrow {
font-size: 10px; /* intentionally sub-token: tiny sort indicator */
flex-shrink: 0;
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.resize-overlay {
@@ -1033,7 +1033,7 @@ export class TrackList
}
.track-row.active {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.track-row.selected.active {
@@ -1072,11 +1072,11 @@ export class TrackList
}
.fav-icon.favorited {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
}
.fav-icon.favorited:hover {
color: var(--yj-accent, #ffd43b);
color: var(--yj-accent-text, #ffd43b);
opacity: 0.8;
}