Remove theme-dependent SCSS variables: Remove variables within KDS files that rely on theming SCSS variables

[LianaHarris360]

Product

Kolibri-design-system: Internal

Current behavior

In the file lib/keen/styles/variables.scss, defined variables rely other theming variables and should be removed. For example:

 // Secondary text color
$secondary-text-color: #666666!default;

$ui-input-label-color: $secondary-text-color !default;

(Optional) The Value Add

Theme-dependent SCSS variables have the potential to break our theming. Overall, this may only pose a concern within our vendored Keen components that are integrated with KDS.

This could potentially be part of a larger initiative to fully integrate or remove our vendored Keen components altogether.

[LianaHarris360]

Related comment addressing this issue: https://github.com/learningequality/kolibri-design-system/pull/616#discussion_r1562985643

[shruti862]

@nucleogenesis @LianaHarris360 I would like to work on this issue. Could you please assign me this issue? And Can you guide me whats the requirement which needs to be done inorder to resolve this issue.

[LianaHarris360]

Sure, I can assign you @shruti862. To resolve this issue, in lib/keen/styles/variables.scss, find the SCSS variables (like $ui-input-label-color) that depend on theming values and remove them because these variables are only set at build time and are not updated at runtime.

Wherever those SCSS variables are used in KDS components or styles, replace them with the corresponding JS/Vue theme variables.

For example, $ui-input-label-color is set to secondary-text-color which is set to #666666.

In lib/styles/colorsMaterial.js, #666666 corresponds to $themePalette.grey.v_700.

So we'd need to remove the css:

color: $ui-input-label-color;

and use the theme variable directly in the Vue template:

:style="{ color: $themePalette.grey.v_700 }"

or set it with dynamic class binding if necessary.

Because we can’t rely on CSS variables for Vue.js CSS binding across all supported browsers, Vue’s inline style binding or dynamic classes referencing the $themePalette directly must be used.

If you have any other questions, or need more clarification, just let us know!

[shruti862]

@LianaHarris360 Thank you for assigning me the issue. I understood whats needs to be done thank you for explaining so well.

[shruti862]

Hey @LianaHarris360 , I wanted to ask whether i needed to remove $brand-accent-color: $md-purple-a400 !default; and $ui-input-text-color: $primary-text-color !default; because I don't find matching color for them in themePalette

Also Can you please review my PR to see whether i am going in right direction or not .

[LianaHarris360]

@shruti862 It seems that $brand-accent-color is only used for the UI components (keen), but their styles get overridden. Since some of these components are currently used in Kolibri, we won't be changing the styles or checking how those changes affect Kolibri in this PR. And for $ui-input-text-color, it is okay as is, because it is just an opaque black.