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

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

Browse Source 
- 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
This commit is contained in:
yonlu
2026-03-04 23:23:25 -05:00
parent 62f41c2491
commit aed90d7b17
7 changed files with 48 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/audio-player/audio-player.ts
+4 -3
View File
@@ -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
+3 -2
View File
@@ -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
+5 -4
View File
@@ -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
+8 -7
View File
@@ -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;
margin-bottom: 0.5em;
padding: 16px 8px;
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-height: 1em;
--thumb-width: 16px;
--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
+7 -6
View File
@@ -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
+6 -5
View File
@@ -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
+15 -10
View File
@@ -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;