Skip to content

feat: add Compound Design System token overrides#20

Merged
spookyintheam merged 1 commit into
catppuccin:mainfrom
YourSandwich:feat/compound-design-tokens
Apr 13, 2026
Merged

feat: add Compound Design System token overrides#20
spookyintheam merged 1 commit into
catppuccin:mainfrom
YourSandwich:feat/compound-design-tokens

Conversation

@YourSandwich
Copy link
Copy Markdown
Contributor

Summary

  • Adds a compound key to theme JSON with overrides for Element's Compound Design System (CPD) tokens
  • Element has migrated many UI components from legacy CSS variables to CPD tokens, causing themes to not apply to sidebars, panels, dialogs, emoji pickers, context menus, and other newer UI elements
  • All 56 themes (4 flavors x 14 accents) regenerated with the new compound section

Token coverage

  • Gray scale: 14 steps mapped to the full Catppuccin palette progression (crust → mantle → base → surface → overlay → subtext → text)
  • Color scales (red, orange, yellow, green, blue, purple, cyan, pink, lime, fuchsia): 14-step scales generated via mix filter, blending each palette color with crust (dark end) and text (light end)
  • Semantic tokens: text, background, icon, and border tokens mapped to appropriate palette colors with per-accent awareness
  • Dark and light theme variants handled separately with inverted scale directions

Tested with

  • Element Desktop Nightly (latest) on Linux
  • Catppuccin Macchiato (Lavender) flavor
  • Verified: sidebars, room list, timeline, dialogs, emoji picker, context menus, right panel, pinned messages, Element Call widget

Fixes #19

Test plan

  • Select any Catppuccin theme in Element Desktop/Web
  • Verify sidebar, room list panel, and space panel use Catppuccin palette colors
  • Verify dialogs, emoji picker, and context menus are themed
  • Verify right panel (room info, user info) is themed
  • Test with both dark (Macchiato/Mocha/Frappe) and light (Latte) flavors
  • Verify accent color appears in accent-colored UI elements

🤖 Generated with Claude Code

Element Web/Desktop has migrated many UI components from legacy CSS
variables to Compound Design System (CPD) tokens. This causes the
theme to not apply to sidebars, panels, dialogs, emoji pickers,
context menus, and other newer UI elements.

Add a `compound` key to the theme JSON with overrides for all CPD
color tokens, mapping them to the Catppuccin palette:

- Gray scale: maps to crust -> mantle -> base -> surface -> overlay ->
  subtext -> text progression
- Color scales (red, orange, yellow, green, blue, purple, cyan, pink,
  lime, fuchsia): 14-step scales generated by mixing each palette
  color with crust (dark end) and text (light end)
- Semantic tokens: text, background, icon, and border tokens mapped
  to appropriate palette colors with accent-awareness

Fixes catppuccin#19

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@YourSandwich
Copy link
Copy Markdown
Contributor Author

Unfortunately I did not found a method to skin element-call accordingly beside patching the webapp.asar directly

@bartkor12
Copy link
Copy Markdown

Tested on develop.element.io with the Macchiato (Lavender) theme by copy-pasting its json link into the custom theme section. The sidebar is not correctly themed.

@spookyintheam spookyintheam merged commit 7b6b98c into catppuccin:main Apr 13, 2026
1 check passed
@spookyintheam
Copy link
Copy Markdown
Member

Thanks for the PR @YourSandwich!

I am pretty low in bandwidth for Catppuccin, so In case you're open to taking over this port, we can discuss on the Catppuccin discord server.

@YourSandwich YourSandwich deleted the feat/compound-design-tokens branch April 13, 2026 16:04
@YourSandwich
Copy link
Copy Markdown
Contributor Author

Hi @spookyintheam thank you for the offer, I am only available here and on matrix (@sandwich:archworks.co)
I wouldn't mind taking this over if I find a better way to generate the CSS.

But for CSS specifically I do not feel confident that I could provide code in the best practice manner.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theme doesnt apply to side-bars ++ Is this repo abandoned?

3 participants