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

fix(theme): check real colors to support css variables #2857

Merged
merged 3 commits into from
Jul 31, 2023

Conversation

lubber-de
Copy link
Member

@lubber-de lubber-de commented Jul 26, 2023

Description

This change allows to use CSS variables in custom themes for LESS variables which are basically used in color functions.
Although the themes changed variables are imported after the default theme, the LESS logic still tried to apply a css variable to a color function like "darken()" which of course does not work. It makes #737 complete now.

So this simple order results into "error evaluating darken()", although the variables are immediatly overridden:

@linkColor           : #4183C4;
@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);

@linkColor: var(--some-link-color);
@linkHoverColor: var(--some-link-hover-color);
.foo {
  bar: @linkHoverColor;
}

By changing every existing color function call inside the default theme to check for a valid color value it is now possible to completely use CSS variables for a custom theme

@linkColor           : #4183C4;
@linkHoverColor      : if(iscolor(@linkColor), darken(saturate(@linkColor, 20), 15, relative), @linkColor);

@linkColor: var(--some-link-color);
@linkHoverColor: var(--some-link-hover-color);
.foo {
  bar: @linkHoverColor;
}

Succesfully results into

.foo {
  bar: var(--some-link-hover-color);
}

Simply check the above code via https://lesscss.org/less-preview/

The minium LESS Version to support this is 3.12.0, so i had to raise the dependency 3.x version

Closes

#2855
#736

@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug lang/css Anything involving CSS type/build Anything related to the build process state/awaiting-reviews Pull requests which are waiting for reviews labels Jul 26, 2023
@lubber-de lubber-de added this to the 2.9.3 milestone Jul 26, 2023
@lubber-de lubber-de merged commit 4f21527 into fomantic:develop Jul 31, 2023
8 checks passed
@lubber-de lubber-de deleted the checkRealColorsForFunctions branch July 31, 2023 12:25
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jul 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug type/build Anything related to the build process
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant