feat(theme): apply new color palette and polish UI

- Add theme variables and restyle popup/options using Primary 3 as background and Primary 2 as surfaces; accents use Primary 1.\n- Move Save to a footer section on the options page; add responsive layout and button variants.\n- Update icon build defaults to use Primary 2 for add-on and Primary 1 for toolbar icons.\n- Add build-and-commit helper to run build, stage generated assets, commit, and optionally push.\n- Add npm scripts: build:commit and build:commit:push.
This commit is contained in:
Jordan Wages 2025-08-24 00:39:20 -05:00
commit 982a16d86e
6 changed files with 285 additions and 26 deletions

View file

@ -3,9 +3,13 @@
Generates extension and toolbar PNG icons from the base SVG with transparent
background and configurable stroke colors. Requires ImageMagick (`magick`).
Config via environment variables (optional):
ICON_COLOR_ADDON hex color for add-on icons (48/96/128). Default: #111827
ICON_COLOR_TOOLBAR hex color for toolbar icons (16/32). Default: #111827
Theme defaults (aligned with project palette):
Primary 2 (deep): #223544 add-on icon strokes (default)
Primary 1 (light): #5AC3D6 toolbar icon strokes (default)
Override via environment variables (optional):
ICON_COLOR_ADDON hex color for add-on icons (48/96/128). Default: #223544
ICON_COLOR_TOOLBAR hex color for toolbar icons (16/32). Default: #5AC3D6
Usage:
node scripts/build-icons.js
@ -21,8 +25,8 @@ const SRC_SVG = path.join(ICONS_DIR, 'file-search.svg');
const ADDON_SIZES = [48, 96, 128];
const TOOLBAR_SIZES = [16, 32];
const COLOR_ADDON = process.env.ICON_COLOR_ADDON || '#111827';
const COLOR_TOOLBAR = process.env.ICON_COLOR_TOOLBAR || '#111827';
const COLOR_ADDON = process.env.ICON_COLOR_ADDON || '#223544';
const COLOR_TOOLBAR = process.env.ICON_COLOR_TOOLBAR || '#5AC3D6';
function ensureMagick() {
// Prefer calling binaries directly to avoid shell init output polluting stdout.