PrimeOne Theme Upgrade Issue Component scss, theme variable support

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
admin@waterstreet
Posts: 3
Joined: 26 Jul 2018, 19:03

19 Nov 2020, 20:04

Under the older theming engine, we used to be able to pull in theme-v4 _variables and _common scss files directly into our angular component scss and have access to static global theme variables. This would give us access to variables such as $fontSize, $lightGray, $iconFontSize, $contentPadding, $inputTextColor, etc etc.

test.component.scss
@import '/sass/theme-v4/_variables.scss';

We were able to pull in these scss files directly before because they are all static values that didn't rely on any variables.

With the redesign of themes introduced with the PrimeOne design, we are unable to gain access to this nice common set of static variables as the _variables.scss file now contains a bunch of dynamic/non-static variable definitions which breaks the scss compiling of our component for missing variable values.

Is there an ability to pull in static common scss variables in the new PrimeOne design engine like we used to be able to under the previous theming design? If not, is there a list of known variables that have to be set to pull in the _variables.scss file directly without loading a specific theme? Is there a recommend direction to go regarding access to common theme variable values within custom angular components?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

23 Nov 2020, 11:28

Hi,

@merve could you please check this issue?

Best Regards,

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

23 Nov 2020, 16:14

Hi,
We upgrade to PrimeOne all templates because of more flexible with 500+ variables and easily customizable with only six variables (like $primarycolor in theme/theme-blue.scss). Also, you can review all variables with sass api (https://www.primefaces.org/designer/api/primeng/10.0.0/).

If you want to create your own theme, create a file and select your variables($primaryColor, $primaryLightColor, $primaryDarkColor, $primaryDarkerColor, $primaryTextColor, $highlightBg, $highlightTextColor) and import theme/_theme.scss.
Also, you can reach common variables by importing theme/_variables.scss files. If you want to change some variables, you can use overrides/_theme_variables.scss file.

admin@waterstreet
Posts: 3
Joined: 26 Jul 2018, 19:03

23 Nov 2020, 20:50

merve7 wrote:
23 Nov 2020, 16:14
Hi,
We upgrade to PrimeOne all templates because of more flexible with 500+ variables and easily customizable with only six variables (like $primarycolor in theme/theme-blue.scss). Also, you can review all variables with sass api (https://www.primefaces.org/designer/api/primeng/10.0.0/).

If you want to create your own theme, create a file and select your variables($primaryColor, $primaryLightColor, $primaryDarkColor, $primaryDarkerColor, $primaryTextColor, $highlightBg, $highlightTextColor) and import theme/_theme.scss.
Also, you can reach common variables by importing theme/_variables.scss files. If you want to change some variables, you can use overrides/_theme_variables.scss file.
Hello merve, thanks for the reply.

In our angular component scss file, we used to be able to import the theme/_variables.scss file you mention above as it only had the theme common static variables defined in it. However, now we cannot import that file to gain access to the static common variables within our angular component because the theme/_variables.scss file now has dependent variables that are required to be defined prior to including it. That _variables file now has a dependency on the theme specific scss files and has grown from just a hundred lines of common static variables to be significantly more. Therefore, in order to gain access to those static theme common variables, we are having to import 1 specific theme (amber for instance) into our angular component. This of course messes up the theme colors if the imported theme color does not match the theme that users have selected/loaded. Is there a way to access the static theme variables within a angular component scss without pulling in a specific theme like before?

admin@waterstreet
Posts: 3
Joined: 26 Jul 2018, 19:03

01 Dec 2020, 23:46

Any questions or follow up here? Thank You! :)

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

14 Dec 2020, 09:29

Hi,

Which features can users override? I think you can create a theme-own.scss file and then you can use it in angular app;

Code: Select all

// theme-own.scss
$primaryColor: #F8BD0C !default;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff !default;

$highlightBg: $primaryColor;
$highlightTextColor: $primaryTextColor;

@import '../sass/theme/_theme';
This variables is !default feature and you can override them as you want.

Also, you can add other variables into theme-own.scss file but firstly, you need to add !default to the variable.
Exp;

Code: Select all

//_variables.scss
...
$fontSize:1rem !default;    /* instead of $fontSize:1rem; */

...

Code: Select all

// theme-own.scss
$primaryColor: #F8BD0C !default;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff !default;

$highlightBg: $primaryColor;
$highlightTextColor: $primaryTextColor;

$fontSize:5rem; // Please add it into your custom theme file

@import '../sass/theme/_theme';
Best Regards,

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests