feat: redesign shortcut cards and group headers with zinc palette#799
Closed
crittermike wants to merge 2 commits intomasterfrom
Closed
feat: redesign shortcut cards and group headers with zinc palette#799crittermike wants to merge 2 commits intomasterfrom
crittermike wants to merge 2 commits intomasterfrom
Conversation
- Install tailwindcss v4, @tailwindcss/postcss, configure PostCSS - Create style.css with Tailwind theme, CSS custom properties (light/dark), shared component classes, toggle switch, density overrides, Vue transitions - Migrate App.vue template to Tailwind utilities (2,324 → 482 lines) - Migrate all 12 components: SearchSelect, ShortcutRecorder, CodeEditor, ShortcutDetails, PacksTab, PackPreviewModal, CommunityPackModal, JsWarningDialog, ImportTab, ExportTab, AnalyticsTab, OnboardingWizard - Remove container div from index.html (conflicts with Tailwind's .container) - All 730 tests passing, production build clean Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Redesign the options page shortcut cards and group headers with a developer-tool aesthetic using a zinc color palette. Cards use a 3-section layout (header/body/footer) with CSS variable theming for light and dark modes. Group headers are minimal rows with chevron toggles and uppercase names. Key changes: - ShortcutRecorder: key badge display with kbd elements - ShortcutDetails: timeline macro builder with action-specific fields - SearchSelect: card-themed dropdown with zinc colors - App.vue: new group header design, card footer with site rules - style.css: card-* CSS variable system for light/dark theming - url-matching.ts: MacroStep extended with openurl/bookmark fields - action-handlers.ts: macro handler merges step-level fields - e2e tests: updated selectors for new DOM structure Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the options page shortcut cards and group headers with a polished "developer-tool" aesthetic. This builds on top of PR #797 (Tailwind CSS migration) and focuses on the visual design of the two most prominent UI elements: shortcut cards and group headers.
What changed
Shortcut Cards — 3-section layout
Cards now use a header / body / footer structure:
When a card is expanded, it gets a blue border highlight with a deep shadow (
border-2 border-blue-600/50 shadow-[0_20px_50px_rgba(0,0,0,0.4)]).Group Headers — minimal row design
Replaced card-style group headers with a clean horizontal row:
ShortcutRecorder — key badges
The shortcut input now renders typed keys as styled
<kbd>badge elements (e.g.Ctrl + Shift + K). Clicking the badges switches to manual text editing mode. Empty state and recording state still show the raw text input.Key implementation:
keyBadgescomputed property parses the model value string (e.g."ctrl+shift+k") by splitting on space (sequences) then+(combos).ShortcutDetails — timeline macro builder
Macro steps render as a vertical timeline with numbered circles and a blue gradient connecting line. Each step shows:
DELAY 0 ms)openurl, bookmark selector forbookmarkCard theming — CSS variable system
All card colors use CSS custom properties (
--card-bg,--card-border,--card-text,--card-deepest, etc.) registered as Tailwind theme colors (bg-card,border-card-border, etc.). This enables proper light/dark mode support:Light mode: white/gray card surfaces (
#ffffff,#f3f4f6,#e5e7eb)Dark mode: zinc card surfaces (
#18181b,#27272a,#3f3f46,#09090b)Variables are defined in
:rootand[data-theme="dark"]blocks instyle.css.Files changed (11 files, +392/-275)
src/entrypoints/options/App.vuesrc/entrypoints/options/style.css@themecolor registration, density overridessrc/components/ShortcutDetails.vuesrc/components/ShortcutRecorder.vuesrc/components/SearchSelect.vuesrc/components/OnboardingWizard.vuesrc/utils/url-matching.tsMacroStepinterface extended withopenurl?andbookmark?fieldssrc/actions/action-handlers.ts{ ...request, ...step })e2e/options.spec.tse2e/content.spec.tse2e/popup.spec.tsArchitecture notes for future agents
Card color system
Never use hardcoded
zinc-*orgray-*classes on card elements. Always use thecard-*Tailwind classes which map to CSS variables:bg-card/bg-card-dim/bg-card-deepest— surface layerstext-card-text/text-card-text-muted/text-card-text-placeholder— text hierarchyborder-card-border/border-card-border-muted— bordersKey CSS classes preserved for e2e tests
These classes are used as selectors in e2e tests and must not be removed:
shortcut-card,shortcut-label-title,shortcut-input,shortcut-actions,shortcut-details,search-select,btn-primary,btn-secondary,btn-delete,btn-icon,btn-sm,toggle,group-header,tab-btn,stats-bar,search-clear,theme-toggle,toast,empty-stateOverflow-hidden gotcha
Do NOT add
overflow-hiddento shortcut cards — it clips the SearchSelect dropdown which portals within the card. Therounded-2xlworks without it.Density overrides
The
[data-density="condensed"]CSS targets named classes (shortcut-header,shortcut-row, etc.). These class names must be preserved alongside Tailwind utilities.Test results
Dependencies
feat/tailwind-migration