Problem/Motivation
We need to start leveraging css variables, they are well supported and will help us reduce our code base, making our themes faster for the end user and easier to code and maintain
Proposed resolution
We will start implementing css variables for colors and then continue the work on other sass variables we currently use, for spacing of elements for example
Remaining tasks
* Implement css variables for colors
* Break the dependency of the favicon gulp task on the #color-spot-1 variable
* Update the readme for the favicon gulp task
User interface changes
There should be no visual difference for the end user
Note:
Work will be done on an issue fork but will branch of feature/css-vars-dart-sass for latest dart sass implementation
Issue fork rocketship_theme_generator-3274783
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
Jolidog CreditAttribution: Jolidog at Dropsolid commentedComment #4
Jolidog CreditAttribution: Jolidog at Dropsolid commentedImplemented color variables.
TODO
NEXT STEPS
NOTE
Includes the code from https://www.drupal.org/project/rocketship_theme_generator/issues/3274780
Comment #5
rembrandx CreditAttribution: rembrandx at Dropsolid commented@Jolidog: currently testing out the implementation.
Found 1 issue in the new color variables definition file: if a var refers to another var, it needs to be wrapped or it will not work. I will try to fix and commit.
Eg. for style="backround-color: var(--clr-link)"
Defining the link var this way, does not work:
--clr-link: --clr-spot-1;
But this does:
--clr-link: var(--clr-spot-1);
Comment #6
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #7
rembrandx CreditAttribution: rembrandx at Dropsolid commented@Jolidog: I've added corrections to the color vars (mentioned in prev. comment) + picked up the 'storybook colors' TO DO's.
Added it to an issue branch, you can review the merge request:
https://git.drupalcode.org/project/rocketship_theme_generator/-/merge_re...
Comment #9
rubendello CreditAttribution: rubendello commentedIn a recent project, I've used the 3.x version of the theme to make use of the color variables.
Works really nice, but during setup, and especially when doing my first commit, I ran into some issues (mostly caused by lintr on precommit). See below.
STARTER THEME
Find
max-width: math.div(100%, 12 * 9);
, and replace withmax-width: (math.div(100%, 12) * 9);
Spaces need to be corrected
Lintr doesn't like the tabs added between the variables and values. Probably because they are wrapped in the :root element?
{% include "@rocketship-theme-demo-atoms..."
instead of the theme nameMINIMAL THEME
Lots of indentation errors. Indentation is wrong + 1 closing curly brace too much in comment
Comment #13
rembrandx CreditAttribution: rembrandx at Dropsolid commentedAdded the feedback/fixes to the 3.x dev branch.
Will check a couple other tickets as well before creating a new release with this.
Further 'CSS variables' development will be going in different new tickets.
Comment #14
rembrandx CreditAttribution: rembrandx at Dropsolid commentedComment #15
rembrandx CreditAttribution: rembrandx at Dropsolid commentedLast part I added was leveraging the CSS Variables for colors, used with Content Blocks and Layout Sections. So it's easier to change the entire color scheme of those (or make a 'negative' style). That is in 3.7.1
Rest of color variable changes are in 3.7.0