From 1303422e69c27d528363900b3ca5287a48cc9f8e Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Wed, 4 Mar 2026 23:30:29 -0500
Subject: [PATCH] feat(08-04): apply design tokens to cover-grid, track-list,
 queue-panel, and detail components

- 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
---
 .../artist-details/artist-details.ts          | 13 ++++----
 .../cover-grid/cover-grid-styles.ts           | 10 +++---
 .../src/components/cover-grid/cover-grid.ts   | 12 +++----
 .../components/genre-details/genre-details.ts | 13 ++++----
 .../src/components/queue-panel/queue-panel.ts | 13 ++++----
 .../components/track-details/track-details.ts | 33 ++++++++++---------
 .../src/components/track-info/track-info.ts   | 13 ++++----
 .../src/components/track-list/track-list.ts   | 19 ++++++-----
 8 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/artist-details/artist-details.ts b/frontend/src/components/artist-details/artist-details.ts
index 29e745e..4aca04e 100644
--- a/frontend/src/components/artist-details/artist-details.ts
+++ b/frontend/src/components/artist-details/artist-details.ts
@@ -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();
diff --git a/frontend/src/components/cover-grid/cover-grid-styles.ts b/frontend/src/components/cover-grid/cover-grid-styles.ts
index 4d11314..95dcd19 100644
--- a/frontend/src/components/cover-grid/cover-grid-styles.ts
+++ b/frontend/src/components/cover-grid/cover-grid-styles.ts
@@ -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,
 ];
diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts
index 5a38346..efbcb71 100644
--- a/frontend/src/components/cover-grid/cover-grid.ts
+++ b/frontend/src/components/cover-grid/cover-grid.ts
@@ -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)',
             );
         }
     }
diff --git a/frontend/src/components/genre-details/genre-details.ts b/frontend/src/components/genre-details/genre-details.ts
index e7bab86..dac441d 100644
--- a/frontend/src/components/genre-details/genre-details.ts
+++ b/frontend/src/components/genre-details/genre-details.ts
@@ -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();
diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts
index 36b8703..791acfd 100644
--- a/frontend/src/components/queue-panel/queue-panel.ts
+++ b/frontend/src/components/queue-panel/queue-panel.ts
@@ -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 {
diff --git a/frontend/src/components/track-details/track-details.ts b/frontend/src/components/track-details/track-details.ts
index 85cb705..3ce1984 100644
--- a/frontend/src/components/track-details/track-details.ts
+++ b/frontend/src/components/track-details/track-details.ts
@@ -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
diff --git a/frontend/src/components/track-info/track-info.ts b/frontend/src/components/track-info/track-info.ts
index 5f382e3..f617f23 100644
--- a/frontend/src/components/track-info/track-info.ts
+++ b/frontend/src/components/track-info/track-info.ts
@@ -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 =
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index eff2768..c3f9692 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -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;
     }