[SF-25] Adopt Leopard brand in Safari extension (web + macOS App) - #24
Conversation
Shared web extension: - Add brand.css (copy of brand/generated/tokens.css) - Link brand.css before Style.css in Main.html; wrap content in .leopard-bg + .panel - Rewrite Style.css to use CSS variables only - Procedural leopard radial-gradient; mode glow via box-shadow macOS (App) target (covers SF-27 menu-bar work — shared Xcode project): - Add BrandTokens.swift (copy of brand/generated/BrandTokens.swift) - Add LeopardBackgroundView (deterministic Canvas, SplitMix64 seed) - Rewire FlowMode+UI / ModeCard / FlowTonesPopoverView to BrandTokens.* - Layered mode-glow shadows (24/64) - Register new files in FlowTones.xcodeproj/project.pbxproj
SF-25 Apply Leopard brand to Safari extension (iOS + macOS web-extension shell)
ScopeApply the Leopard brand tokens to the Safari Web Extension shell used by both iOS and macOS. Deliverables
Acceptance
Branch
Depends on |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5c83894277
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | ||
|
|
||
| <link rel="stylesheet" href="../brand.css"> |
There was a problem hiding this comment.
This HTML now depends on ../brand.css, but the Xcode project never adds brand.css to either app target’s Copy Bundle Resources (the project file still only lists Main.html, Style.css, Script.js, and Icon.png). In the built app the stylesheet request will fail, so the new var(--...)-based rules in Style.css resolve invalid and the branded layout/colors won’t apply on the extension onboarding page.
Useful? React with 👍 / 👎.
| lines.push(` public static let ${camel(key)} = Color(hex: "${v.hex}")`); | ||
| } | ||
| } | ||
| lines.push(" public static let panel = Color.black.opacity(0.78)"); |
There was a problem hiding this comment.
The generator hardcodes panel as pure black (Color.black.opacity(0.78)) instead of reading palette.neutral.panel from brand/tokens.json (rgba(18, 18, 22, 0.78)). That makes Swift/Kotlin outputs diverge from the declared source of truth and means any future change to the panel token will be silently ignored on native platforms.
Useful? React with 👍 / 👎.
1 participant
https://linear.app/captain-leopard-ai-engineering/issue/SF-25/apply-leopard-brand-to-safari-extension-ios-macos-web-extension-shell
Verification: