diff --git a/docs/DataModel.md b/docs/DataModel.md index b3fc636..ff031b9 100644 --- a/docs/DataModel.md +++ b/docs/DataModel.md @@ -13,6 +13,7 @@ Fields: - id: string - name: string - builtIn: boolean +- displayOrderMode: string, either `alphabetical` or `custom` for custom lists; omitted for built-in lists - items: array of Item objects Example: @@ -35,6 +36,7 @@ Notes: - Built-in lists are seeded from `web/data/builtins.json`. - Custom lists are stored alongside built-ins in `localStorage` under the `ot_lists_v1` key. - A custom list is created by duplicating a built-in list and marking the new item as `builtIn: false`. +- Custom lists default to `displayOrderMode: "alphabetical"`, where item names are shown and inserted alphabetically case-insensitively. In `custom` mode, manual item ordering is preserved and new items are appended. ### Item diff --git a/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/Contents.json b/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/Contents.json index 1ec1685..da148fe 100644 --- a/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/Contents.json +++ b/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/Contents.json @@ -1,7 +1,7 @@ { "images" : [ { - "filename" : "loglist_logo.png", + "filename" : "loglist_logo_square.png", "idiom" : "universal", "platform" : "ios", "size" : "1024x1024" diff --git a/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo.png b/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo.png deleted file mode 100644 index d360ecb..0000000 Binary files a/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo.png and /dev/null differ diff --git a/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo_square.png b/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo_square.png new file mode 100644 index 0000000..f4299a7 Binary files /dev/null and b/ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo_square.png differ diff --git a/web/design-system.html b/web/design-system.html index dd385b9..4e0e3e5 100644 --- a/web/design-system.html +++ b/web/design-system.html @@ -193,7 +193,7 @@ background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); - box-shadow: var(--shadow-soft); + box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 20px; } @@ -672,15 +672,15 @@

Icons

  • In standard buttons, the icon should use the same color as the text in the control and should be relatively small - sized to fit - the control's height. These buttons always include a label to the - right of the icon. + the control's height (--icon-size-sm). These buttons generally include a label to the + right of the icon, with the exception of the small delete option on selected list items.
  • Header action buttons are icon-only controls without labels, and - therefore use somewhat larger icons. + therefore use somewhat larger icons (--icon-size-lg).
  • - Bottom navigation items pair a somewhat larger icon with a small + Bottom navigation items pair a somewhat larger icon (--icon-size-md) with a small text label below.
    • @@ -829,21 +829,20 @@

    Fonts

    @@ -857,19 +856,23 @@

    Screen Header


    -

    Main Page

    +

    Example Header

    -
    +
    -
    @@ -885,13 +888,17 @@

    Main Page

    - Main Page + Example Header > Detail Page

    -
    @@ -983,7 +990,7 @@

    Secondary

    >
    - @@ -1147,7 +1158,7 @@

    Progress Tracker

    - Observed: 4 + Example Observed: 4 (40%) @@ -1267,23 +1278,23 @@

    Item Grid

    @@ -1320,15 +1331,15 @@

    Rename Affordance

    - Lists + Example > - Trip Ideas + Renamable Text

    -
    Weekend list
    +
    Renamable Item
    4 items
    diff --git a/web/screens/history.js b/web/screens/history.js index 66f08ff..177a956 100644 --- a/web/screens/history.js +++ b/web/screens/history.js @@ -597,8 +597,8 @@

    History

    -
    - - -
    ` @@ -630,7 +630,7 @@
    `; - const sortToggle = container.querySelector('.history-sort-toggle'); + const sortToggle = container.querySelector('[data-header-action="sort"]'); if (sortToggle) { sortToggle.addEventListener('click', async (e) => { e.stopPropagation(); @@ -639,7 +639,7 @@ }); } - container.querySelectorAll('.sort-option').forEach((option) => { + container.querySelectorAll('.menu-option').forEach((option) => { option.addEventListener('click', async (e) => { e.stopPropagation(); sortMode = option.getAttribute('data-sort') || 'recent'; @@ -838,13 +838,13 @@ ${detailNameMarkup}
    - - -
    @@ -931,14 +931,14 @@ }); } - const shareButton = container.querySelector('.history-detail-share'); + const shareButton = container.querySelector('[data-header-action="share"]'); if (shareButton) { shareButton.addEventListener('click', () => { shareSessionCsv(session); }); } - const deleteButton = container.querySelector('.history-detail-delete'); + const deleteButton = container.querySelector('[data-header-action="delete"]'); if (deleteButton) { deleteButton.addEventListener('click', async () => { const label = getSessionName(session, 'session'); diff --git a/web/screens/lists.js b/web/screens/lists.js index 7d63781..4ff4c4e 100644 --- a/web/screens/lists.js +++ b/web/screens/lists.js @@ -12,6 +12,7 @@ let viewMode = 'lists'; let sortMode = 'default'; let sortMenuOpen = false; + let displayOrderMenuOpen = false; function normalizeRenameValue(rawValue) { if (typeof nameHelpers.normalizeRenameValue === 'function') { @@ -30,6 +31,63 @@ .toLocaleLowerCase(); } + function getListDisplayOrderMode(list) { + if (!list || list.builtIn) return 'alphabetical'; + return list.displayOrderMode === 'custom' ? 'custom' : 'alphabetical'; + } + + function areSameListItem(a, b) { + if (a === b) return true; + if (typeof a === 'string' && typeof b === 'string') return a === b; + if (typeof a === 'object' && a && typeof b === 'object' && b) { + const aId = a.id ?? a.name ?? ''; + const bId = b.id ?? b.name ?? ''; + if (aId && bId) return String(aId) === String(bId); + return String(a.name ?? '') === String(b.name ?? ''); + } + return String(a ?? '') === String(b ?? ''); + } + + function getItemName(item) { + return String(typeof item === 'string' ? item : item?.name || '').trim(); + } + + function compareItemNames(a, b) { + return getItemName(a).localeCompare(getItemName(b), undefined, { + sensitivity: 'base', + }); + } + + function sortListItemsForDisplay(list) { + if (!Array.isArray(list?.items)) return []; + const items = [...list.items]; + if (getListDisplayOrderMode(list) !== 'alphabetical') return items; + return items.sort(compareItemNames); + } + + function insertItemInDisplayOrder(list, item) { + if (!list || list.builtIn) return item; + const nextItems = Array.isArray(list.items) ? [...list.items] : []; + const nextItem = + item && typeof item === 'object' && !Array.isArray(item) + ? { ...item } + : item; + if (getListDisplayOrderMode(list) !== 'alphabetical') { + nextItems.push(nextItem); + list.items = nextItems; + return nextItem; + } + + const insertionIndex = nextItems.findIndex( + (current) => compareItemNames(current, nextItem) > 0 + ); + if (insertionIndex === -1) nextItems.push(nextItem); + else nextItems.splice(insertionIndex, 0, nextItem); + + list.items = nextItems; + return nextItem; + } + function hasDuplicateListName(lists, candidateName, excludeId) { const targetKey = normalizeNameKey(candidateName); return (Array.isArray(lists) ? lists : []).some( @@ -168,10 +226,10 @@ controls.className = 'header-controls'; const sortWrap = document.createElement('div'); - sortWrap.className = 'sort-menu-wrap'; + sortWrap.className = 'header-menu-wrap'; const sortToggle = document.createElement('button'); - sortToggle.className = 'sort-toggle'; + sortToggle.className = 'header-button-secondary'; sortToggle.setAttribute('type', 'button'); sortToggle.setAttribute( 'aria-label', @@ -183,15 +241,15 @@ if (sortMenuOpen) { const menu = document.createElement('div'); - menu.className = 'sort-menu'; + menu.className = 'header-menu'; menu.innerHTML = ` - - - `; @@ -200,7 +258,7 @@ // create add button and place it inside the header so it aligns vertically with the title const add = document.createElement('button'); - add.className = 'add-button'; + add.className = 'header-button-primary'; add.setAttribute('aria-label', 'Add list'); add.innerHTML = ''; @@ -229,7 +287,7 @@ await rerenderFromRepository(); }); - document.querySelectorAll('.sort-option').forEach((option) => { + document.querySelectorAll('.menu-option').forEach((option) => { option.addEventListener('click', async (e) => { e.stopPropagation(); sortMode = option.getAttribute('data-sort') || 'default'; @@ -258,6 +316,7 @@ id: 'custom-' + Date.now(), name, builtIn: false, + displayOrderMode: 'alphabetical', items: [], }; window.repository.saveList(newList); @@ -294,22 +353,94 @@ `; + const headerControls = document.createElement('div'); + headerControls.className = 'header-controls detail-header-controls'; + if (canEditItems) { + const displayOrderWrap = document.createElement('div'); + displayOrderWrap.className = 'header-menu-wrap'; + + const displayOrderToggle = document.createElement('button'); + displayOrderToggle.className = + 'header-button-secondary detail-display-order-toggle'; + displayOrderToggle.type = 'button'; + displayOrderToggle.setAttribute( + 'aria-label', + `Display order mode (${getListDisplayOrderMode(list)})` + ); + displayOrderToggle.setAttribute( + 'aria-expanded', + displayOrderMenuOpen ? 'true' : 'false' + ); + displayOrderToggle.innerHTML = ''; + displayOrderWrap.appendChild(displayOrderToggle); + + if (displayOrderMenuOpen) { + const menu = document.createElement('div'); + menu.className = 'header-menu'; + const currentMode = getListDisplayOrderMode(list); + menu.innerHTML = ` + + + `; + displayOrderWrap.appendChild(menu); + } + + displayOrderToggle.addEventListener('click', (e) => { + e.stopPropagation(); + displayOrderMenuOpen = !displayOrderMenuOpen; + renderDetailView(container, list); + }); + + const menuLinks = displayOrderWrap.querySelectorAll('.menu-option'); + menuLinks.forEach((option) => { + option.addEventListener('click', async (e) => { + e.stopPropagation(); + const nextMode = + option.getAttribute('data-display-order') || 'alphabetical'; + const refreshed = await window.repository.loadLists(); + const nextList = refreshed.find((x) => x.id === detailListId); + if (!nextList || nextList.builtIn) return; + nextList.displayOrderMode = nextMode; + if (nextMode === 'alphabetical') { + nextList.items = sortListItemsForDisplay(nextList); + } + await window.repository.saveList(nextList); + displayOrderMenuOpen = false; + render(await window.repository.loadLists()); + }); + }); + + headerControls.appendChild(displayOrderWrap); + const add = document.createElement('button'); - add.className = 'add-button'; + add.className = 'header-button-secondary detail-add-item'; + add.type = 'button'; add.setAttribute('aria-label', 'Add list item'); add.innerHTML = ''; - header.appendChild(add); + headerControls.appendChild(add); } + const count = Array.isArray(list.items) ? list.items.length : 0; + const startButton = document.createElement('button'); + startButton.className = 'header-button-primary detail-start-session'; + startButton.type = 'button'; + startButton.setAttribute('aria-label', 'Start session for this list'); + startButton.disabled = count === 0; + startButton.innerHTML = ''; + headerControls.appendChild(startButton); + header.appendChild(headerControls); + const card = document.createElement('div'); card.className = 'list-detail-card lists-container'; - const count = Array.isArray(list.items) ? list.items.length : 0; - const itemsContainer = document.createElement('div'); itemsContainer.className = 'list-detail-items'; - const items = Array.isArray(list.items) ? list.items : []; + const items = sortListItemsForDisplay(list); if (!items.length) { const empty = document.createElement('div'); @@ -322,34 +453,44 @@ itemsContainer.appendChild(empty); } else { items.forEach((item, index) => { - const selected = selectedDetailItemIndex === index; - const editing = editingDetailItemIndex === index && canEditItems; + const itemIndex = Array.isArray(list.items) + ? list.items.findIndex((candidate) => + areSameListItem(candidate, item) + ) + : index; + const resolvedIndex = itemIndex >= 0 ? itemIndex : index; + const selected = selectedDetailItemIndex === resolvedIndex; + const editing = + editingDetailItemIndex === resolvedIndex && canEditItems; const label = typeof item === 'string' ? item : item.name || ''; + const isCustomOrder = getListDisplayOrderMode(list) === 'custom'; const row = document.createElement('div'); row.className = `list-detail-item${selected ? ' selected' : ''}`; - row.setAttribute('data-item-index', String(index)); + row.setAttribute('data-item-index', String(resolvedIndex)); row.setAttribute('draggable', 'false'); row.innerHTML = ` ${ - canEditItems - ? `` + canEditItems && isCustomOrder + ? `` : '' }
    ${ editing - ? `` : `${escapeHtml(label)}` + }" data-item-index="${resolvedIndex}">${escapeHtml( + label + )}` }
    ${ canEditItems && selected - ? `` + ? `` : '' } `; @@ -361,16 +502,9 @@ const footer = document.createElement('div'); footer.className = 'list-detail-footer'; - footer.innerHTML = ` -
    ${count} item${ + footer.innerHTML = `
    ${count} item${ count === 1 ? '' : 's' - }
    - - `; + }
    `; container.appendChild(header); container.appendChild(card); @@ -436,7 +570,7 @@ }); } - const detailAdd = container.querySelector('.screen-header .add-button'); + const detailAdd = container.querySelector('.detail-add-item'); if (detailAdd) { detailAdd.addEventListener('click', async () => { const nextList = list; @@ -461,10 +595,15 @@ name, }; - nextList.items = existingItems.concat(newItem); + insertItemInDisplayOrder(nextList, newItem); + if (getListDisplayOrderMode(nextList) === 'alphabetical') { + nextList.items = sortListItemsForDisplay(nextList); + } window.repository.saveList(nextList); - selectedDetailItemIndex = nextList.items.length - 1; - editingDetailItemIndex = nextList.items.length - 1; + selectedDetailItemIndex = nextList.items.findIndex((item) => + areSameListItem(item, newItem) + ); + editingDetailItemIndex = selectedDetailItemIndex; renderDetailView(container, nextList); }); } @@ -500,6 +639,9 @@ id: 'item-' + Date.now() + '-' + index, name, })); + if (getListDisplayOrderMode(nextList) === 'alphabetical') { + nextList.items = sortListItemsForDisplay(nextList); + } await window.repository.saveList(nextList); selectedDetailItemIndex = null; editingDetailItemIndex = null; @@ -584,6 +726,7 @@ function initializeDetailSorting(container, list, canEditItems) { if (!canEditItems) return; + if (getListDisplayOrderMode(list) !== 'custom') return; if (!Array.isArray(list.items) || list.items.length < 2) return; const itemsContainer = container.querySelector('.list-detail-items'); @@ -688,7 +831,10 @@ if (!normalized.ok) return normalized; const lists = await window.repository.loadLists(); const nextList = lists.find((x) => x.id === detailListId); - if (nextList && hasDuplicateItemName(nextList.items, normalized.value, index)) { + if ( + nextList && + hasDuplicateItemName(nextList.items, normalized.value, index) + ) { return { ok: false, message: 'Item name must be unique within this list.', @@ -699,14 +845,19 @@ save: async (nextName) => { const lists = await window.repository.loadLists(); const nextList = lists.find((x) => x.id === detailListId); - if (!nextList || nextList.builtIn || !Array.isArray(nextList.items)) return; + if (!nextList || nextList.builtIn || !Array.isArray(nextList.items)) + return; const nextItems = [...nextList.items]; const existing = nextItems[index]; - if (typeof existing === 'string') nextItems[index] = nextName; - else if (existing && typeof existing === 'object') { - nextItems[index] = { ...existing, name: nextName }; - } - nextList.items = nextItems; + const renamed = + typeof existing === 'string' + ? nextName + : { ...existing, name: nextName }; + nextItems[index] = renamed; + nextList.items = + getListDisplayOrderMode(nextList) === 'alphabetical' + ? sortListItemsForDisplay({ ...nextList, items: nextItems }) + : nextItems; await window.repository.saveList(nextList); }, rerender: async () => { diff --git a/web/screens/track.js b/web/screens/track.js index c316e06..d15666b 100644 --- a/web/screens/track.js +++ b/web/screens/track.js @@ -418,13 +418,13 @@ ${breadcrumbSessionNameMarkup}
    - - -
    diff --git a/web/styles.css b/web/styles.css index c458467..fbb374b 100644 --- a/web/styles.css +++ b/web/styles.css @@ -10,10 +10,17 @@ --on-accent: #ffffff; /* Typography sizes (semantic) */ - --fs-base: 15px; /* slightly smaller than browser default */ - --fs-md: 14px; - --fs-sm: 12px; - --fs-xs: 11px; + --fs-base: 17px; /* mobile-first reading size */ + --fs-md: 16px; + --fs-sm: 14px; + --fs-xs: 12px; + + /* Shared sizing tokens for touch targets and icons */ + --hit-target-sm: 36px; + --hit-target-md: 40px; + --icon-size-sm: 18px; + --icon-size-md: 20px; + --icon-size-lg: 32px; /* Semantic surface tokens (single source of truth for components) */ --surface-bg: var(--surface); @@ -23,6 +30,11 @@ --border-color: rgba(0, 0, 0, 0.08); --border: 1px solid var(--border-color); + /* Shadow and overlay tokens */ + --shadow-sm: 0 8px 18px rgba(17, 24, 39, 0.08); + --shadow-md: 0 10px 24px rgba(38, 42, 52, 0.35); + --overlay-backdrop: rgba(0, 0, 0, 0.28); + /* Bottom nav layer treatment */ --nav-bg: color-mix(in srgb, var(--surface) 85%, var(--accent) 15%); --nav-border-top: rgba(0, 0, 0, 0.12); @@ -47,6 +59,11 @@ html[data-theme='dark'] { --border-color: hsla(0, 0%, 100%, 0.06); --border: 1px solid var(--border-color); + /* Shadow and overlay tokens for dark */ + --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.35); + --shadow-md: 0 12px 26px rgba(0, 0, 0, 0.42); + --overlay-backdrop: rgba(0, 0, 0, 0.42); + /* Bottom nav layer treatment for dark */ --nav-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); --nav-border-top: hsla(0, 0%, 100%, 0.12); @@ -123,15 +140,15 @@ body { gap: 8px; } -.screen-header .sort-menu-wrap { +.screen-header .header-menu-wrap { position: relative; display: inline-flex; } -.screen-header .sort-toggle { - width: 32px; - min-width: 32px; - height: 32px; +.screen-header .header-button-secondary { + width: var(--hit-target-sm); + min-width: var(--hit-target-sm); + height: var(--hit-target-sm); border: none; background: transparent; color: var(--accent); @@ -142,37 +159,39 @@ body { transition: background-color 140ms ease; } -.screen-header .sort-toggle:hover { +.screen-header .header-button-secondary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } -.screen-header .sort-toggle[aria-expanded='true'] { +.screen-header .header-button-secondary[aria-expanded='true'] { background: color-mix(in srgb, var(--accent) 10%, transparent); } -.screen-header .sort-toggle[aria-expanded='true']:hover { +.screen-header .header-button-secondary[aria-expanded='true']:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } -html[data-theme='dark'] .screen-header .sort-toggle:hover { +html[data-theme='dark'] .screen-header .header-button-secondary:hover { background: color-mix(in srgb, var(--accent) 24%, var(--surface) 76%); } -html[data-theme='dark'] .screen-header .sort-toggle[aria-expanded='true'], html[data-theme='dark'] .screen-header - .sort-toggle[aria-expanded='true']:hover { + .header-button-secondary[aria-expanded='true'], +html[data-theme='dark'] + .screen-header + .header-button-secondary[aria-expanded='true']:hover { background: color-mix(in srgb, var(--accent) 30%, var(--surface) 70%); } -.screen-header .sort-toggle svg.feather { - width: 30px; - height: 30px; +.screen-header .header-button-secondary svg.feather { + width: var(--icon-size-lg); + height: var(--icon-size-lg); stroke: currentColor; stroke-width: 1.5; } -.screen-header .sort-menu { +.screen-header .header-menu { position: absolute; top: calc(100% + 2px); right: 0; @@ -181,19 +200,19 @@ html[data-theme='dark'] border-radius: 0; border: none; background: color-mix(in srgb, var(--accent) 10%, var(--bg) 90%); - box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px; z-index: 80; } -html[data-theme='dark'] .screen-header .sort-menu { +html[data-theme='dark'] .screen-header .header-menu { background: color-mix(in srgb, var(--accent) 24%, var(--surface) 76%); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); + box-shadow: var(--shadow-md); } -.screen-header .sort-option { +.screen-header .menu-option { border: none; background: transparent; color: var(--text); @@ -204,21 +223,21 @@ html[data-theme='dark'] .screen-header .sort-menu { cursor: pointer; } -.screen-header .sort-option:hover { +.screen-header .menu-option:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } -.screen-header .sort-option.active { +.screen-header .menu-option.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } /* Position add button inside the header and make it round and match header height */ -.screen-header .add-button { - flex: 0 0 36px; - width: 36px; - min-width: 36px; - height: 36px; +.screen-header .header-button-primary { + flex: 0 0 var(--hit-target-md); + width: var(--hit-target-md); + min-width: var(--hit-target-md); + height: var(--hit-target-md); box-sizing: border-box; padding: 0; border-radius: 50%; /* make it round */ @@ -232,9 +251,9 @@ html[data-theme='dark'] .screen-header .sort-menu { z-index: 60; align-self: flex-end; } -.screen-header .add-button svg.feather { - width: 18px; - height: 18px; +.screen-header .header-button-primary svg.feather { + width: var(--icon-size-sm); + height: var(--icon-size-sm); display: block; stroke: currentColor; stroke-width: 1.8; @@ -278,8 +297,8 @@ html[data-theme='dark'] .screen-header .sort-menu { } .bottom-nav .nav-button svg.feather { - width: 20px; - height: 20px; + width: var(--icon-size-md); + height: var(--icon-size-md); flex-shrink: 0; } @@ -454,12 +473,6 @@ html[data-theme='dark'] .screen-header .sort-menu { justify-content: space-between; } -@media (max-width: 560px) { - .history-session-actions-row .drawer-action { - flex: 1 1 0; - } -} - .list-item:last-child .list-drawer { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; @@ -479,8 +492,8 @@ html[data-theme='dark'] .screen-header .sort-menu { } .drawer-action svg.feather { - width: var(--fs-md); - height: var(--fs-md); + width: var(--icon-size-sm); + height: var(--icon-size-sm); flex: 0 0 auto; stroke: currentColor; stroke-width: 2; @@ -575,8 +588,8 @@ html[data-theme='dark'] .list-drawer { .row-delete svg.feather, .detail-item-grip svg.feather, .detail-item-delete svg.feather { - width: var(--fs-md); - height: var(--fs-md); + width: var(--icon-size-sm); + height: var(--icon-size-sm); stroke: currentColor; stroke-width: 2; } @@ -795,8 +808,8 @@ html[data-theme='dark'] .list-drawer { } .track-picker-selected-right svg.feather { - width: 16px; - height: 16px; + width: var(--icon-size-sm); + height: var(--icon-size-sm); stroke: var(--accent); stroke-width: 2.2; } @@ -810,7 +823,7 @@ html[data-theme='dark'] .list-drawer { border: var(--border); border-radius: var(--radius); background: var(--surface-bg); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); padding: 6px; display: flex; flex-direction: column; @@ -821,7 +834,7 @@ html[data-theme='dark'] .list-drawer { } html[data-theme='dark'] .track-picker-menu { - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); + box-shadow: var(--shadow-md); } .track-picker-option { @@ -1041,7 +1054,7 @@ html[data-theme='dark'] .track-picker-menu { .session-exit-backdrop { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.28); + background: var(--overlay-backdrop); display: flex; align-items: center; justify-content: center;