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