bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

SASS Variables can not be overriden using Custom Theme #9441

Open taauntik opened 4 months ago

taauntik commented 4 months ago

Forum post

Hey, we are trying to implement a custome theme for the calendar following the documentation found here: Calendar/Customization/Styling#creating a custom theme via npm. The documentation says to override the variable and import one of the included themes. However almost all variables in the custom themes do not specify !default and can therfore not be overriden by us.

Example:

$fa-font-path: "@bryntum/calendar/fonts";
$roboto-font-path: "@bryntum/calendar/fonts";

$button-default-color: red; <!-- has no effect -->

@import "node_modules/@bryntum/calendar/source/resources/sass/themes/material";

The documentation says that all variable can be found inside "node_modules/@bryntum/calendar/source/resources/core-sass/themes/vars/material-vars.scss"

$button-default-color                    : $primary;

Is this intended behavior? If so, how can we create a full custom theme?

ghulamghousdev commented 3 months ago

Also check for the issue mentioned here: https://forum.bryntum.com/viewtopic.php?p=150033#p150033

geop-bbm commented 1 month ago

My temporary workaround was to modify the file "resources\core-sass\themes\vars\classic-vars.scss". The option ‘!default’ to make $button-default-color overwritable is missing here.

$button-default-color : scale-color($gray, $lightness : 20%) !default;

After that my custom SCSS build worked for the Buttons.