521dac96adef
second-pass brighter palette and four-layer bloom shadow on accent buttons (v1.8.7)
- time
- 2026-04-24 22:47 UTC · 6 months ago
- machine
- koh2
- parent
- 25b1cdf118d8
↓ peach-browser-521dac96.tar.gzatlas at this save
files changed7 files
manifest.firefox.json+1 −1manifest.json+1 −1package.json+1 −1src/popup/App.tsx+3 −3src/popup/styles/popup.css+22 −4src/popup/styles/vars.css+3 −3src/shared/types.ts+12 −12manifest.firefox.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "1.8.6",4+ "version": "1.8.7",55 "description": "Zero-knowledge password manager",66 "browser_specific_settings": {77 "gecko": {manifest.json+1 −1
@@ -1,7 +1,7 @@11 {22 "manifest_version": 3,33 "name": "Peach",4- "version": "1.8.6",4+ "version": "1.8.7",55 "description": "Zero-knowledge password manager",66 "action": {77 "default_popup": "src/popup/index.html",package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "peach",3- "version": "1.8.6",3+ "version": "1.8.7",44 "description": "Zero-knowledge password manager",55 "type": "module",66 "scripts": {src/popup/App.tsx+3 −3
@@ -181,9 +181,9 @@181181 document.documentElement.style.setProperty("--peach-accent", hex);182182 // Ambient surface variables — derived from the accent so surfaces shift183183 // subtly toward the accent hue rather than staying fixed warm-brown.184- document.documentElement.style.setProperty("--peach-glow", hex + "55");185- document.documentElement.style.setProperty("--peach-surface-tint", hex + "14");186- document.documentElement.style.setProperty("--peach-border-accent", hex + "55");184+ document.documentElement.style.setProperty("--peach-glow", hex + "77");185+ document.documentElement.style.setProperty("--peach-surface-tint", hex + "1A");186+ document.documentElement.style.setProperty("--peach-border-accent", hex + "66");187187 }188188 189189 createEffect(() => {src/popup/styles/popup.css+22 −4
@@ -783,8 +783,24 @@783783 }784784 .peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 11px; }785785 .peach-btn--md { min-height: 38px; }786-.peach-btn--accent { background: var(--peach-accent); color: rgba(0,0,0,0.75); box-shadow: 0 2px 16px var(--peach-glow); }787-.peach-btn--accent:hover:not(:disabled) { background: var(--peach-accent); filter: brightness(1.12); }786+.peach-btn--accent {787+ background: var(--peach-accent);788+ color: rgba(0,0,0,0.78);789+ box-shadow:790+ 0 1px 0 rgba(255,255,255,0.22) inset,791+ 0 0 0 1px color-mix(in srgb, var(--peach-accent) 60%, transparent),792+ 0 4px 22px var(--peach-glow),793+ 0 0 32px color-mix(in srgb, var(--peach-accent) 28%, transparent);794+}795+.peach-btn--accent:hover:not(:disabled) {796+ background: var(--peach-accent);797+ filter: brightness(1.15) saturate(1.1);798+ box-shadow:799+ 0 1px 0 rgba(255,255,255,0.3) inset,800+ 0 0 0 1px color-mix(in srgb, var(--peach-accent) 70%, transparent),801+ 0 6px 28px color-mix(in srgb, var(--peach-accent) 60%, transparent),802+ 0 0 40px color-mix(in srgb, var(--peach-accent) 38%, transparent);803+}788804 .peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }789805 .peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }790806 .peach-icon-btn {@@ -3189,8 +3205,10 @@31893205 .peach-lock-submit {31903206 width: 100%;31913207 box-shadow:3192- 0 14px 36px color-mix(in srgb, var(--peach-accent) 38%, transparent),3193- 0 0 0 1px color-mix(in srgb, var(--peach-accent) 35%, transparent);3208+ 0 1px 0 rgba(255,255,255,0.28) inset,3209+ 0 0 0 1px color-mix(in srgb, var(--peach-accent) 55%, transparent),3210+ 0 16px 44px color-mix(in srgb, var(--peach-accent) 55%, transparent),3211+ 0 0 60px color-mix(in srgb, var(--peach-accent) 28%, transparent);31943212 }31953213 31963214 .peach-lock-secondary {src/popup/styles/vars.css+3 −3
@@ -113,9 +113,9 @@113113 --peach-t3: var(--t3);114114 --peach-accent: var(--ac);115115 --peach-accent-dim: color-mix(in srgb, var(--peach-accent) 25%, transparent);116- --peach-glow: #E8956D55; /* accent bloom behind buttons/illustrations — set by applyAccent() */117- --peach-surface-tint: #E8956D14; /* accent tint on card surfaces — set by applyAccent() */118- --peach-border-accent: #E8956D55; /* accent-tinted border for active states — set by applyAccent() */116+ --peach-glow: #F49C7077; /* accent bloom behind buttons/illustrations — set by applyAccent() */117+ --peach-surface-tint: #F49C701A; /* accent tint on card surfaces — set by applyAccent() */118+ --peach-border-accent: #F49C7066; /* accent-tinted border for active states — set by applyAccent() */119119 --peach-breach: var(--breach);120120 --peach-health-ok: var(--health);121121 --peach-totp-tag: var(--totp-tag);src/shared/types.ts+12 −12
@@ -200,18 +200,18 @@200200 | "VAULT_UNLOCKED"; // background → content/popup: vault just unlocked201201 202202 export const ACCENT_COLORS = [203- { name: "peach", hex: "#E8956D" }, // brand204- { name: "rose", hex: "#F08296" },205- { name: "plum", hex: "#C58BE6" },206- { name: "lavender", hex: "#9C9EF0" },207- { name: "sky", hex: "#6EBCDE" },208- { name: "mint", hex: "#6FD4AC" },209- { name: "sage", hex: "#A8C870" },210- { name: "butter", hex: "#F0CC60" },211- { name: "sand", hex: "#DCB280" },212- { name: "clay", hex: "#E0825E" },213- { name: "slate", hex: "#88AEC8" },214- { name: "stone", hex: "#B8A89C" },203+ { name: "peach", hex: "#F49C70" },204+ { name: "rose", hex: "#FF8AA6" },205+ { name: "plum", hex: "#D597F2" },206+ { name: "lavender", hex: "#A6A8FF" },207+ { name: "sky", hex: "#5BC8EE" },208+ { name: "mint", hex: "#5EE0B0" },209+ { name: "sage", hex: "#B5D870" },210+ { name: "butter", hex: "#FFD45A" },211+ { name: "sand", hex: "#EDBC85" },212+ { name: "clay", hex: "#F08660" },213+ { name: "slate", hex: "#80BEDE" },214+ { name: "stone", hex: "#C8B8A8" },215215 ] as const;216216 217217 export type AccentColorName = typeof ACCENT_COLORS[number]["name"];