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

feat(08-04): apply design tokens to cover-grid, track-list, queue-panel, and detail components

Browse Source 
- cover-grid dynamic text tiers use --yj-text-xs/sm/md/lg tokens
- track-list sort toolbar, row text, and fav icon use design tokens
- queue-panel header and track text use type scale tokens
- track-details, track-info, artist-details, genre-details use tokens
- designTokens imported and prepended to static styles in all 8 files
This commit is contained in:
yonlu
2026-03-04 23:30:29 -05:00
parent bc487cd715
commit 1303422e69
8 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/artist-details/artist-details.ts
+7 -6
View File
@@ -8,6 +8,7 @@ import { library } from '@go/models';
import { LibraryController } from '@store/controllers/library-controller';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import '@components/cover-grid/cover-grid.js';
import { designTokens } from '../../styles/tokens.css';
@customElement('artist-details')
export class ArtistDetails extends LitElement {
@@ -28,7 +29,7 @@ export class ArtistDetails extends LitElement {
/** Tracks the store's cached array reference to detect refreshes. */
private lastAlbumsRef: library.Album[] | null = null;
static override styles = css`
static override styles = [designTokens, css`
:host {
display: flex;
flex-direction: column;
@@ -79,7 +80,7 @@ export class ArtistDetails extends LitElement {
}
.back-button wa-icon {
font-size: 16px;
font-size: 16px; /* back button — outside type scale */
}
.artist-avatar {
@@ -103,7 +104,7 @@ export class ArtistDetails extends LitElement {
--yj-text-secondary,
#b3b3b3
);
font-size: 32px;
font-size: 32px; /* large decorative initial */
font-weight: 600;
text-transform: uppercase;
user-select: none;
@@ -118,7 +119,7 @@ export class ArtistDetails extends LitElement {
}
.artist-title {
font-size: 24px;
font-size: 24px; /* page title — outside type scale */
font-weight: 700;
color: var(--yj-text-primary, #fff);
white-space: nowrap;
@@ -129,7 +130,7 @@ export class ArtistDetails extends LitElement {
}
.album-count {
font-size: 13px;
font-size: var(--yj-text-md);
color: var(
--yj-text-secondary,
#b3b3b3
@@ -150,7 +151,7 @@ export class ArtistDetails extends LitElement {
height: 100%;
}
`;
`];
override connectedCallback() {
super.connectedCallback();
frontend/src/components/cover-grid/cover-grid-styles.ts
+6 -4
View File
@@ -1,5 +1,6 @@
import { css } from 'lit';
import { contextMenuStyles } from '@utils/context-menu-controller.js';
import { designTokens } from '../../styles/tokens.css';
/** Component-specific styles for the cover grid. */
const gridStyles = css`
@@ -19,7 +20,7 @@ const gridStyles = css`
align-items: center;
gap: 6px;
padding: 4px 8px;
font-size: 12px;
font-size: var(--yj-text-sm);
color: var(
--yj-text-secondary,
#b3b3b3
@@ -68,7 +69,7 @@ const gridStyles = css`
--yj-text-secondary,
#b3b3b3
);
font-size: 12px;
font-size: var(--yj-text-sm);
padding: 0;
}
@@ -100,7 +101,7 @@ const gridStyles = css`
--yj-text-primary,
#fff
);
font-size: 13px;
font-size: var(--yj-text-md);
}
.sort-dropdown-panel
@@ -251,7 +252,7 @@ const gridStyles = css`
pointer-events: none;
background: var(--yj-bg-overlay, #495057);
color: var(--yj-text-secondary, #b3b3b3);
font-size: 12px;
font-size: var(--yj-text-sm);
padding: 4px 14px;
border-radius: 12px;
border: 1px solid
@@ -277,6 +278,7 @@ const gridStyles = css`
/** Combined styles for the cover grid component. */
export const coverGridStyles = [
designTokens,
gridStyles,
contextMenuStyles,
];
frontend/src/components/cover-grid/cover-grid.ts
+6 -6
View File
@@ -755,12 +755,12 @@ export class CoverGrid
`${placeholderFont}px`,
);
// Text sizing tiers.
// Text sizing tiers mapped to design tokens.
if (w < 160) {
this.classList.add('size-small');
this.style.setProperty(
'--album-name-font',
'11px',
'var(--yj-text-xs)',
);
this.style.setProperty(
'--artist-name-font',
@@ -770,21 +770,21 @@ export class CoverGrid
this.classList.remove('size-small');
this.style.setProperty(
'--album-name-font',
'16px',
'var(--yj-text-lg)',
);
this.style.setProperty(
'--artist-name-font',
'13px',
'var(--yj-text-md)',
);
} else {
this.classList.remove('size-small');
this.style.setProperty(
'--album-name-font',
'14px',
'var(--yj-text-lg)',
);
this.style.setProperty(
'--artist-name-font',
'12px',
'var(--yj-text-sm)',
);
}
}
frontend/src/components/genre-details/genre-details.ts
+7 -6
View File
@@ -10,6 +10,7 @@ import { EventsOn } from '@runtime/runtime';
import { Events } from '../../events';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import '@components/track-list/track-list.js';
import { designTokens } from '../../styles/tokens.css';
@customElement('genre-details')
export class GenreDetails extends LitElement {
@@ -25,7 +26,7 @@ export class GenreDetails extends LitElement {
private scanCompleteCleanup: (() => void) | null =
null;
static override styles = css`
static override styles = [designTokens, css`
:host {
display: flex;
flex-direction: column;
@@ -76,7 +77,7 @@ export class GenreDetails extends LitElement {
}
.back-button wa-icon {
font-size: 16px;
font-size: 16px; /* back button — outside type scale */
}
.genre-avatar {
@@ -100,7 +101,7 @@ export class GenreDetails extends LitElement {
--yj-text-secondary,
#b3b3b3
);
font-size: 32px;
font-size: 32px; /* large decorative initial */
font-weight: 600;
text-transform: uppercase;
user-select: none;
@@ -115,7 +116,7 @@ export class GenreDetails extends LitElement {
}
.genre-title {
font-size: 24px;
font-size: 24px; /* page title — outside type scale */
font-weight: 700;
color: var(--yj-text-primary, #fff);
white-space: nowrap;
@@ -126,7 +127,7 @@ export class GenreDetails extends LitElement {
}
.track-count {
font-size: 13px;
font-size: var(--yj-text-md);
color: var(
--yj-text-secondary,
#b3b3b3
@@ -146,7 +147,7 @@ export class GenreDetails extends LitElement {
width: 100%;
height: 100%;
}
`;
`];
override connectedCallback() {
super.connectedCallback();
frontend/src/components/queue-panel/queue-panel.ts
+7 -6
View File
@@ -1,4 +1,5 @@
import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
import { designTokens } from '../../styles/tokens.css';
import {
customElement,
property,
@@ -171,7 +172,7 @@ export class QueuePanel
return this.playlistSubmenuPopup;
}
static override styles = [contextMenuStyles, css`
static override styles = [designTokens, contextMenuStyles, css`
:host {
flex-shrink: 0;
width: 0;
@@ -225,7 +226,7 @@ export class QueuePanel
.header h3 {
margin: 0;
font-size: 14px;
font-size: var(--yj-text-lg);
font-weight: 600;
}
@@ -301,7 +302,7 @@ export class QueuePanel
}
.track-position {
font-size: 12px;
font-size: var(--yj-text-sm);
color: var(--yj-text-tertiary, #888);
min-width: 20px;
text-align: right;
@@ -320,7 +321,7 @@ export class QueuePanel
}
.track-title {
font-size: 13px;
font-size: var(--yj-text-md);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -331,7 +332,7 @@ export class QueuePanel
}
.track-artist {
font-size: 11px;
font-size: var(--yj-text-xs);
color: var(--yj-text-secondary, #b3b3b3);
white-space: nowrap;
overflow: hidden;
@@ -402,7 +403,7 @@ export class QueuePanel
}
.empty-state wa-icon {
font-size: 32px;
font-size: 32px; /* intentionally large decorative icon */
}
.empty-state p {
frontend/src/components/track-details/track-details.ts
+17 -16
View File
@@ -16,6 +16,7 @@ import { formatMilliseconds } from '@utils/time';
import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import { designTokens } from '../../styles/tokens.css';
/** Cover art URLs resolved from the album cache. */
export interface CoverArtUrls {
@@ -80,7 +81,7 @@ export class TrackDetails extends LitElement {
// STYLES
// =================================================================
static override styles = css`
static override styles = [designTokens, css`
wa-dialog {
--width: 640px;
}
@@ -93,7 +94,7 @@ export class TrackDetails extends LitElement {
}
wa-dialog::part(title) {
font-size: 16px;
font-size: 16px; /* dialog header — outside type scale */
font-weight: 600;
color: var(--yj-text-primary, #fff);
padding: 16px 20px 8px;
@@ -145,7 +146,7 @@ export class TrackDetails extends LitElement {
.cover-placeholder wa-icon {
color: var(--yj-text-tertiary, #888);
font-size: 64px;
font-size: 64px; /* large decorative placeholder */
}
.main-meta {
@@ -158,24 +159,24 @@ export class TrackDetails extends LitElement {
}
.main-meta .title {
font-size: 22px;
font-size: 22px; /* dialog title — outside type scale */
font-weight: 600;
color: var(--yj-text-primary, #fff);
word-break: break-word;
}
.main-meta .artist {
font-size: 15px;
font-size: var(--yj-text-lg);
color: var(--yj-text-secondary, #b3b3b3);
}
.main-meta .album {
font-size: 14px;
font-size: var(--yj-text-lg);
color: var(--yj-text-tertiary, #888);
}
.main-meta .duration {
font-size: 13px;
font-size: var(--yj-text-md);
color: var(--yj-text-tertiary, #888);
font-variant-numeric: tabular-nums;
}
@@ -187,7 +188,7 @@ export class TrackDetails extends LitElement {
}
.section-label {
font-size: 11px;
font-size: var(--yj-text-xs);
font-weight: 600;
color: var(--yj-text-tertiary, #888);
text-transform: uppercase;
@@ -203,7 +204,7 @@ export class TrackDetails extends LitElement {
}
.meta-label {
font-size: 12px;
font-size: var(--yj-text-sm);
font-weight: 500;
color: var(--yj-text-tertiary, #888);
text-transform: uppercase;
@@ -211,7 +212,7 @@ export class TrackDetails extends LitElement {
}
.meta-value {
font-size: 13px;
font-size: var(--yj-text-md);
color: var(--yj-text-secondary, #b3b3b3);
word-break: break-word;
}
@@ -230,7 +231,7 @@ export class TrackDetails extends LitElement {
var(--yj-border-subtle, #333);
border-radius: 4px;
color: var(--yj-text-primary, #fff);
font-size: 13px;
font-size: var(--yj-text-md);
padding: 4px 8px;
font-family: inherit;
}
@@ -258,16 +259,16 @@ export class TrackDetails extends LitElement {
}
.main-input.title-input {
font-size: 20px;
font-size: 20px; /* edit mode title — outside type scale */
font-weight: 600;
}
.main-input.artist-input {
font-size: 14px;
font-size: var(--yj-text-lg);
}
.main-input.album-input {
font-size: 13px;
font-size: var(--yj-text-md);
}
/* Action bar */
@@ -287,7 +288,7 @@ export class TrackDetails extends LitElement {
#343a40
);
color: var(--yj-text-primary, #fff);
font-size: 13px;
font-size: var(--yj-text-md);
cursor: pointer;
font-family: inherit;
transition: background-color 0.15s ease;
@@ -313,7 +314,7 @@ export class TrackDetails extends LitElement {
#ffe066
);
}
`;
`];
// =================================================================
// RENDER
frontend/src/components/track-info/track-info.ts
+7 -6
View File
@@ -2,6 +2,7 @@ import { LitElement, html, css, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@awesome.me/webawesome/dist/components/icon/icon.js';
import { designTokens } from '../../styles/tokens.css';
import { formatMilliseconds } from '@utils/time';
@@ -38,7 +39,7 @@ export class TrackInfo extends LitElement {
@property() duration?: string;
@property() filePath?: string;
static override styles = css`
static override styles = [designTokens, css`
:host {
display: flex;
align-items: center;
@@ -71,7 +72,7 @@ export class TrackInfo extends LitElement {
.cover-placeholder wa-icon {
color: var(--yj-text-tertiary, #666);
font-size: 18px;
font-size: var(--yj-icon-md);
}
.text {
@@ -83,7 +84,7 @@ export class TrackInfo extends LitElement {
}
.title {
font-size: 13px;
font-size: var(--yj-text-md);
font-weight: 500;
color: var(--yj-text-primary, #fff);
white-space: nowrap;
@@ -92,7 +93,7 @@ export class TrackInfo extends LitElement {
}
.secondary {
font-size: 11px;
font-size: var(--yj-text-xs);
color: var(--yj-text-tertiary, #888);
white-space: nowrap;
overflow: hidden;
@@ -100,12 +101,12 @@ export class TrackInfo extends LitElement {
}
.duration {
font-size: 12px;
font-size: var(--yj-text-sm);
color: var(--yj-text-tertiary, #888);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
`;
`];
override render() {
const showCover =
frontend/src/components/track-list/track-list.ts
+10 -9
View File
@@ -1,5 +1,6 @@
import { library } from '@go/models';
import { LitElement, html, css, nothing } from 'lit';
import { designTokens } from '../../styles/tokens.css';
import {
customElement,
property,
@@ -713,7 +714,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
this.requestUpdate();
};
static override styles = [contextMenuStyles, css`
static override styles = [designTokens, contextMenuStyles, css`
:host {
display: flex;
flex-direction: column;
@@ -735,7 +736,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
align-items: center;
gap: 6px;
padding: 4px 8px;
font-size: 12px;
font-size: var(--yj-text-sm);
color: var(--yj-text-secondary, #b3b3b3);
border-bottom: 1px solid
var(--yj-border-subtle, #333);
@@ -779,7 +780,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
border-radius: 4px;
background: transparent;
color: var(--yj-text-secondary, #b3b3b3);
font-size: 12px;
font-size: var(--yj-text-sm);
padding: 0;
}
@@ -809,7 +810,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
--yj-text-primary,
#fff
);
font-size: 13px;
font-size: var(--yj-text-md);
}
.sort-dropdown-panel wa-dropdown-item:hover {
@@ -860,7 +861,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
}
.sort-arrow {
font-size: 10px;
font-size: 10px; /* intentionally sub-token: tiny sort indicator */
flex-shrink: 0;
color: var(--yj-accent, #ffd43b);
}
@@ -906,7 +907,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
pointer-events: none;
background: var(--yj-bg-overlay, #495057);
color: var(--yj-text-secondary, #b3b3b3);
font-size: 12px;
font-size: var(--yj-text-sm);
padding: 4px 14px;
border-radius: 12px;
border: 1px solid var(--yj-border-subtle, #555);
@@ -917,7 +918,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
.no-results {
padding: 24px 16px;
color: var(--yj-text-secondary, #b3b3b3);
font-size: 13px;
font-size: var(--yj-text-md);
}
lit-virtualizer {
@@ -930,7 +931,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
.track-row {
display: grid;
grid-template-columns: var(--grid-cols);
font-size: 12px;
font-size: var(--yj-text-sm);
padding: 8px;
border-bottom: 1px solid var(--yj-border-subtle, #333);
align-items: center;
@@ -993,7 +994,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
flex-shrink: 0;
cursor: pointer;
color: var(--yj-text-tertiary, #666);
font-size: 12px;
font-size: var(--yj-text-sm);
transition: color 0.1s ease;
}