From dd9f2c387427cfa7f6e2dc6d928b9c151c838cd8 Mon Sep 17 00:00:00 2001 From: BrandonML Date: Fri, 18 Sep 2026 10:45:19 -0400 Subject: [PATCH 01/10] added temp project file. will be deleted when the project is complete --- design_handoff_tabby_polish/README.md | 400 ++++ .../Tabby Mockups.dc.html | 879 ++++++++ .../extension/fonts/fraunces.woff2 | Bin 0 -> 67304 bytes design_handoff_tabby_polish/support.js | 1911 +++++++++++++++++ 4 files changed, 3190 insertions(+) create mode 100644 design_handoff_tabby_polish/README.md create mode 100644 design_handoff_tabby_polish/Tabby Mockups.dc.html create mode 100644 design_handoff_tabby_polish/extension/fonts/fraunces.woff2 create mode 100644 design_handoff_tabby_polish/support.js diff --git a/design_handoff_tabby_polish/README.md b/design_handoff_tabby_polish/README.md new file mode 100644 index 0000000..122b03b --- /dev/null +++ b/design_handoff_tabby_polish/README.md @@ -0,0 +1,400 @@ +# Tabby — design handoff: tagline placement + settings polish + interaction pass + +**Repo:** BrandonML/tabby · **branch:** main · **all changes live in `extension/`** + +These are **approved design decisions**, specified as deltas against the real files in this +repo. This is not a "recreate the mockup in your framework" handoff — the mockups were made by +editing the actual `newtab.html` / `newtab.css` / `options.html`, so every value below is meant +to be applied directly to those files. Vanilla JS/HTML/CSS, no framework, no build step, no new +dependencies. + +`Tabby Mockups.dc.html` in this folder is the visual reference. Open it in a browser to see each +change rendered. It uses sample card data in place of a live RescueGroups response; ignore the +grey outer chrome, badges, and annotation panels — those are presentation scaffolding, not part +of the extension. + +**Fidelity: high.** Colors, sizes, spacing, and easing below are final. Use them as written. + +## What was decided + +| # | Item | Issue | Files | +|---|---|---|---| +| 1 | Settings view spacing + floating label + input group (option 30b) | #30 | `options.html`, `newtab.css` | +| 2 | Focus-visible rings + hover transitions (option 2d) | — | `newtab.css` | +| 3 | Drop the un-loaded Inter from the font stack (option 2c/1) | #42 | `newtab.css` | +| 4 | Tagline inline beside the wordmark (option 2a) | #25 | `newtab.html`, `newtab.css` | + +**Explicitly out of scope — do not implement:** +- Dark mode / `prefers-color-scheme` (discussed, deferred) +- Self-hosting Public Sans or any new webfont (rejected in favor of item 3) +- Any change to the card layout, and the adoption-fee chip question (being decided separately) +- The `.shell { margin: 8vh auto }` responsive-clamp change — that is being filed as its own + issue (#45) with its own testing plan. Leave `.shell` alone here. + +Existing CSS custom properties (`--paper`, `--wall`, `--ink`, `--ink-soft`, `--moss`, +`--moss-dark`, `--stamp`, `--card-edge`, `--font-display`, `--font-mono`) are unchanged — use the +tokens, not raw hex, anywhere a token already exists. + +**Global instructions for these changes:** +- If the specific instructions, implementation, methodology of an item aren't optimal, or incorrect, or don't accomplish the desired resolution, inform the user and discuss how best to approach the desired outcome. +- Where necessary, add or update tests. +- Use the Chrome extension, or similar connectors/MCP's to test the changes in the browser. If a new MCP or connector is required to accomplish this, inform the user. +- Once completed, delete the project directory entirely from the repo, before merging to main. +- Ensure the 3 GH issues associated with this project are properly linked to a specific commit, or to the branch, and that they are marked closed when merging to main. +- As always, if you disagree with anything in this project or have suggested modifications, speak up before proceeding. + +--- + +## 1 · Settings view — issue #30, option 30b + +Closes all four points in issue #30, plus a subhead and a hint line that do the spacing work with +content instead of pure margin. `options.html` reuses `newtab.css`; there is still no +`options.css` and this change does not add one. + +### 1a · `options.html` + +The location panel's heading gains a subhead, and the zip field is restructured into a floating +label + input group. Target structure: + +```html +
+

Your Location

+

Tabby uses this to find adoptable cats nearest to you.

+ +
+
+ +
+ +

or

+ +
+
+
+ + +
+ +
+

Optional — skip this if you use your location.

+
+
+
+``` + +Four things matter structurally, and the floating label silently breaks if any are missed: + +1. **`placeholder=" "`** — a single space, not empty, not removed. The whole pattern keys off + `:not(:placeholder-shown)`. An empty or absent placeholder means the label never floats. +2. **The `