Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR restores the feature we used to have to read out CSS variables from TypeScript. With the upgrade to Angular 8 we had to hardcode those values (so they would no longer update automatically if they changed in CSS). This PR bases them on CSS again. Because by now all our variables are CSS variables, it also gives us a lot more info than we used to have.
Its implementation is based on this article.
The variables are saved in the store when the page is loaded.
Any references to existing variables used were updated to use the correct CSS variables.
Instructions for Reviewers
After the application has started, all our custom and bootstrap CSS variables should be visible in the store under "cssVariables". (Using Redux DevTools).
The easiest way to test this PR would be to:
private
topublic
for the service in the constructor ofAppComponent
. That'll allow us to access it from the html template<h1>{{ cssService.getVariable('--bs-sm-min') | async }}</h1>
to the app component html templateWhen you run the app now, you should see
990px
in app component; the version from the theme.You can do the same thing on the current main branch, only there that same variable is named slighty different, so add
<h1>{{ cssService.getVariable('smMin') | async }}</h1>
to the app component html file instead. On main you'll see that the value doesn't change when you change the css file. Instead you'll see the hardcoded versionChecklist
yarn run lint
package.json
), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.