Skip to content

[Feat] Refactor CSS Theming in UI Framework #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jlukic merged 174 commits into from
May 30, 2025
Merged

[Feat] Refactor CSS Theming in UI Framework #65

jlukic merged 174 commits into from
May 30, 2025

Conversation

@jlukic
Copy link
Member

@jlukic jlukic commented Apr 5, 2025 •
edited
Loading

Theming has been reworked inside the UI framework. CSS variables are now attached to :host inside the shadow dom instead of globally to :root. This means you can no longer access globally component css variables.

Positive Trade Offs

  • You no longer need to include a separate css theme file in your page for each component you use. You can just import the component and all css will be defined. Note: You still need to include the global theme in the page to define global variables.
  • dark and light can now be added to ANY component to trigger that specific component to be rendered as light or dark mode

For instance this example:

<html class="dark">
  <nav-menu light>
    <ui-input dark></ui-input>
  </nav-menu>
</html>

Will render the page as dark mode, the nav-menu as light mode and the ui-input as dark mode. This can be used for complex layouts that might use light or dark sections.

Trade Offs

  • You can no longer reference variables like button-primary-text-color in your css. These will only be defined inside the component. This is because the theme is now scoped to the component.
  • Component variables need to be scoped to the component and will not inherit
/* works - value is defined in same scope as component
*/
ui-button {
  --button-primary-text-color: red;
}

/* works - value is computed for each component from primary-color in shadow dom root and the underlying variable is inherited
*/
.parent {
  --primary-color: red;
}

/*
  doesnt work - value inherits but will be refined in shadow dom root
*/
.parent {
  --button-primary-text-color: red;
}

@vercel
Copy link

vercel bot commented Apr 5, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
semantic-next ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 30, 2025 2:43am

@github-actions github-actions bot added Examples Examples usage UI Components Modifies UI components Utils Modifies utilities package Docs Modifies documentation Tooling labels Apr 5, 2025
@github-actions github-actions bot added Templating Modifies templating package Query Modifies query package Reactivity Modifies reactivity package labels May 29, 2025
@jlukic jlukic merged commit 49fa0ec into main May 30, 2025
9 checks passed
@jlukic jlukic deleted the dist-improve-theme branch June 23, 2025 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

Component Component Rendering Docs Modifies documentation Examples Examples usage Query Modifies query package Reactivity Modifies reactivity package Templating Modifies templating package Tests Modifies tests Tooling UI Components Modifies UI components Utils Modifies utilities package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jlukic