feat(08-04): convert sidebar em-based spacing to px and apply icon/type tokens

- Sidebar: convert all em-based padding/gap to px values, icon sizes to --yj-icon-md
- Now-playing: cover placeholder icon to --yj-icon-lg, text sizes to type tokens
- Search-bar: search icon to --yj-icon-sm, input font to --yj-text-md
- Audio-player: convert em-based gap/padding/margin to px values
- Seek-bar: tooltip font to --yj-text-lg, margin from em to px
- Volume-control: padding/margin from em to px, thumb sizes from em to px
- All components import designTokens and include in static styles

frontend/src/components/audio-player/audio-player.ts

@@ -3,20 +3,21 @@ import { customElement } from 'lit/decorators.js';
 import './controls/player-controls';
 import './seekbar/seek-bar';
 import './volume-control/volume-control';
+import { designTokens } from '../../styles/tokens.css';
 
 @customElement('audio-player')
 export class AudioPlayer extends LitElement {
-  static override styles = css`
+  static override styles = [designTokens, css`
     .audio-player-container {
       display: flex;
       align-items: center;
-      gap: 0.5em;
+      gap: 8px;
     }
 
     .player-main {
       flex: 1;
     }
-  `;
+  `];
 
   override render() {
     return html`

frontend/src/components/audio-player/controls/player-controls.ts

@@ -4,6 +4,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { queueStore } from '@store/queue-store';
 import type { RepeatMode } from '@store/queue-store';
+import { designTokens } from '../../../styles/tokens.css';
 
 @customElement('player-controls')
 export class PlayerControls extends LitElement {
@@ -38,7 +39,7 @@ export class PlayerControls extends LitElement {
     this.unsubscribeQueue?.();
   }
 
-  static override styles = css`
+  static override styles = [designTokens, css`
     #player-control-buttons {
       display: flex;
       justify-content: center;
@@ -77,7 +78,7 @@ export class PlayerControls extends LitElement {
       bottom: 2px;
       right: 2px;
     }
-  `;
+  `];
 
   private handlePlayClick = () => {
     queueStore.play();

frontend/src/components/audio-player/seekbar/seek-bar.ts

@@ -4,6 +4,7 @@ import { ref, createRef } from 'lit/directives/ref.js';
 import WaSlider from '@awesome.me/webawesome/dist/components/slider/slider.js';
 import { formatSeconds } from '@utils/time';
 import { PlayerController } from '@store/controllers/player-controller';
+import { designTokens } from '../../../styles/tokens.css';
 
 const ProgressIntervalMillis = 1000;
 
@@ -17,16 +18,16 @@ export class SeekBar extends LitElement {
   @state()
   private seekValue: number = 0;
 
-  static override styles = css`
+  static override styles = [designTokens, css`
     wa-slider {
       --track-size: 6px;
       flex: 1;
-      margin: 0 1em;
+      margin: 0 16px;
       --wa-tooltip-background-color: var(--yj-bg-elevated, #343a40);
       --wa-tooltip-content-color: var(--yj-text-primary, white);
       --wa-tooltip-border-color: var(--yj-bg-elevated, #343a40);
       --wa-tooltip-border-radius: 4px;
-      --wa-tooltip-font-size: 0.875em;
+      --wa-tooltip-font-size: var(--yj-text-lg);
     }
 
     wa-slider::part(track) {
@@ -46,7 +47,7 @@ export class SeekBar extends LitElement {
       justify-content: space-between;
       align-items: center;
     }
-  `;
+  `];
 
   // ===================================================================
   // DERIVED STATE

frontend/src/components/audio-player/volume-control/volume-control.ts

@@ -4,6 +4,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/slider/slider.js';
 import type WaSlider from '@awesome.me/webawesome/dist/components/slider/slider.js';
 import { PlayerController } from '@store/controllers/player-controller';
+import { designTokens } from '../../../styles/tokens.css';
 
 @customElement('volume-control')
 export class VolumeControl extends LitElement {
@@ -13,7 +14,7 @@ export class VolumeControl extends LitElement {
   @state()
   private showSlider = false;
 
-  static override styles = css`
+  static override styles = [designTokens, css`
     :host {
       position: relative;
       display: inline-flex;
@@ -25,7 +26,7 @@ export class VolumeControl extends LitElement {
       border: none;
       cursor: pointer;
       color: inherit;
-      padding: 0.25em;
+      padding: 4px;
       display: flex;
       align-items: center;
     }
@@ -38,8 +39,8 @@ export class VolumeControl extends LitElement {
       background: var(--yj-bg-surface, #1a1a1a);
       border: 1px solid var(--yj-border-subtle, #333);
       border-radius: 8px;
-      padding: 1em 0.5em;
+      padding: 16px 8px;
-      margin-bottom: 0.5em;
+      margin-bottom: 8px;
       display: flex;
       justify-content: center;
       z-index: 100;
@@ -47,8 +48,8 @@ export class VolumeControl extends LitElement {
 
     wa-slider {
       --track-size: 6px;
-      --thumb-width: 1em;
+      --thumb-width: 16px;
-      --thumb-height: 1em;
+      --thumb-height: 16px;
     }
 
     wa-slider::part(track) {
@@ -63,7 +64,7 @@ export class VolumeControl extends LitElement {
     wa-slider::part(thumb) {
       background: var(--yj-bg-base, black);
     }
-  `;
+  `];
 
   // ===================================================================
   // DERIVED STATE

frontend/src/components/now-playing/now-playing.ts

@@ -5,6 +5,7 @@ import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { FavoritesController } from '@store/controllers/favorites-controller';
+import { designTokens } from '../../styles/tokens.css';
 
 const MIN_WIDTH = 120;
 const MAX_WIDTH = 350;
@@ -21,7 +22,7 @@ export class NowPlaying extends LitElement {
     @state()
     private showCoverPreview = false;
 
-    static override styles = css`
+    static override styles = [designTokens, css`
     :host {
       display: block;
       position: relative;
@@ -63,7 +64,7 @@ export class NowPlaying extends LitElement {
 
     .cover-placeholder wa-icon {
       color: var(--yj-text-primary, #fff);
-      font-size: 24px;
+      font-size: var(--yj-icon-lg);
     }
 
     .cover-art-wrapper {
@@ -107,7 +108,7 @@ export class NowPlaying extends LitElement {
       flex-shrink: 0;
       cursor: pointer;
       color: var(--yj-text-tertiary, #666);
-      font-size: 14px;
+      font-size: var(--yj-icon-sm);
       transition: color 0.1s ease;
       background: none;
       border: none;
@@ -128,7 +129,7 @@ export class NowPlaying extends LitElement {
     }
 
     .track-title {
-      font-size: 14px;
+      font-size: var(--yj-text-lg);
       font-weight: 500;
       white-space: nowrap;
       overflow: hidden;
@@ -136,7 +137,7 @@ export class NowPlaying extends LitElement {
     }
 
     .track-artist {
-      font-size: 12px;
+      font-size: var(--yj-text-sm);
       color: var(--yj-text-tertiary, #666);
       white-space: nowrap;
       overflow: hidden;
@@ -159,7 +160,7 @@ export class NowPlaying extends LitElement {
     .resize-handle.dragging {
       background-color: var(--yj-text-tertiary, #6c757d);
     }
-  `;
+  `];
 
     override connectedCallback() {
         super.connectedCallback();

frontend/src/components/search-bar/search-bar.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { SearchController } from '@store/controllers/search-controller';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import { designTokens } from '../../styles/tokens.css';
 
 /**
  * Global search bar displayed in the top bar.
@@ -15,7 +16,7 @@ export class SearchBar extends LitElement {
     @query('input')
     private inputEl!: HTMLInputElement;
 
-    static override styles = css`
+    static override styles = [designTokens, css`
         :host {
             display: flex;
             align-items: center;
@@ -46,7 +47,7 @@ export class SearchBar extends LitElement {
 
         .search-icon {
             color: var(--yj-text-tertiary, #888);
-            font-size: 14px;
+            font-size: var(--yj-icon-sm);
             flex-shrink: 0;
         }
 
@@ -56,7 +57,7 @@ export class SearchBar extends LitElement {
             border: none;
             outline: none;
             color: var(--yj-text-primary, #fff);
-            font-size: 13px;
+            font-size: var(--yj-text-md);
             font-family: inherit;
             min-width: 0;
         }
@@ -74,14 +75,14 @@ export class SearchBar extends LitElement {
             color: var(--yj-text-tertiary, #888);
             cursor: pointer;
             padding: 0;
-            font-size: 12px;
+            font-size: var(--yj-text-sm);
             flex-shrink: 0;
         }
 
         .clear-button:hover {
             color: var(--yj-text-primary, #fff);
         }
-    `;
+    `];
 
     override updated() {
         // Toggle the hidden attribute based on whether the

frontend/src/components/sidebar/app-sidebar.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import { designTokens } from '../../styles/tokens.css';
 
 import type { DragActiveDetail } from '@utils/drag-controller';
 
@@ -19,7 +20,7 @@ const COLLAPSE_WIDTH = 142;
 
 @customElement('app-sidebar')
 export class AppSidebar extends LitElement {
-    static override styles = css`
+    static override styles = [designTokens, css`
         :host {
             display: block;
             position: relative;
@@ -49,23 +50,23 @@ export class AppSidebar extends LitElement {
         ul {
             list-style-type: none;
             margin: 0;
-            padding: 1em;
+            padding: 16px;
         }
 
         li {
             display: flex;
             align-items: center;
-            gap: 0.6em;
+            gap: 10px;
             border-radius: 5px;
-            padding: 0.5em;
+            padding: 8px;
             cursor: pointer;
             transition: background-color 0.15s ease;
         }
 
         li wa-icon {
-            font-size: 0.9em;
+            font-size: var(--yj-icon-md);
             flex-shrink: 0;
-            width: 1.2em;
+            width: 20px;
             text-align: center;
         }
 
@@ -93,14 +94,18 @@ export class AppSidebar extends LitElement {
             outline-offset: -1px;
         }
 
+        li p {
+            font-size: var(--yj-text-md);
+        }
+
         /* Icon-only collapsed mode */
         :host(.collapsed) ul {
-            padding: 0.5em;
+            padding: 8px;
         }
 
         :host(.collapsed) li {
             justify-content: center;
-            padding: 0.6em;
+            padding: 10px;
         }
 
         :host(.collapsed) li p {
@@ -108,9 +113,9 @@ export class AppSidebar extends LitElement {
         }
 
         :host(.collapsed) li wa-icon {
-            font-size: 1.1em;
+            font-size: var(--yj-icon-md);
         }
-    `;
+    `];
 
     /** Delay in ms before a drag-hover triggers navigation. */
     private static readonly HOVER_NAV_DELAY = 600;