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:
		
					parent
					
						
							
								699ff9fa7b
							
						
					
				
			
			
				commit
				
					
						982a16d86e
					
				
			
		
					 6 changed files with 285 additions and 26 deletions
				
			
		| 
						 | 
				
			
			@ -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.
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue