Skip to content
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.

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

Enhancement: Improve component theme functions #15443

Open
simeonoff opened this issue Mar 4, 2025 · 0 comments
Open

Enhancement: Improve component theme functions #15443

simeonoff opened this issue Mar 4, 2025 · 0 comments

Comments

@simeonoff
Copy link
Collaborator

simeonoff commented Mar 4, 2025

Improve the internal logic for component themes so that we can get better computed colors for the various states (hover, active, focus, etc.) based off of the base colors passed.

For instance, given a specific background for the contained button, scale all of its other state colors internally, if not explicitly provided by the creator of the theme, so that we can achieve better end-result consistent with the base color.

The colors should attempt to scale the base color in a similar fashion to the original theme colors.

Example:

$my-button-theme: button-theme(
    $background: red
);

This will result in a Sass map that contains all related values generated from the base color. For example the $focus-background can be calculated using an approach similar to this:

@if not($focus-background) and $background {
    $focus-background: oklch(from $background calc(l * 1.5)h s );
}

Since the $focus-background will now be available, the $focus-foreground can automatically be derived from it.

@if not($focus-foreground) and $focus-background {
    $focus-foreground: adaptive-contrast($focus-background);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants