improved theming #204
improved theming #204
Conversation
|
@rwwagner90 Don't know why the old "classPrefix-Stories" were mentioned above. There is nothing about that inside this PR. Feel free to review. |
|
Hi @bm2u, thanks for the PR! How would someone not using SCSS do themes here? The idea is you can just include theme files and get the themes automatically. We could perhaps use CSS variables, instead of SCSS, but I'm not sure on how to best handle that. We're in the middle of a big refactor right now, to use Webpack and further simplify the code, so we may want to revisit this after we get all that merged in. |
|
Hi @rwwagner90 , you're welcome. I agree with you when you say we put the PR aside for now. However, nothing will change for CSS users. Default theme-files are still included. Only the creation of the themes will be easier (for you and actually SASS users). Feel free to adapt the default themes to your needs and deliver the dist-folder as before. CSS users need to work with custom CSS classes, or overwrite the values (as before). BTW: If your are in need of any support about gulp oder webpack, do not hesitate to contact me. |
|
Hi @bm2u we just merged in the webpack changes. I'd like to get some tests written as the next step now, since we have karma and mocha up and running. If you'd like to help write some tests, we'd love the help! Once we have good tests in place, we can definitely make sweeping changes like this and be confident everything still functions mostly the same. |
…ing themeing vars - clean up git history
bm2u
force-pushed
the
feature/sass-theming
branch
from
a142e44 to
d0cadac
Compare
# Conflicts: # src/css/_rounded.scss # src/css/_square.scss # src/js/shepherd.js
# Conflicts: # src/js/step.js
# Conflicts: # src/js/step.js
- manual adjustments
- resolve conflicts
|
@bm2u could you give me a quick TL;DR of what is going on in this PR? The main questions I have are:
|
document the process of how scss users would import and override variables
|
The process itself does not change anything for CSS users. I made some color adjustments to the themes, but we could certainly reduce them to the original look. Finally, with the advanced theming option, we have many adjustment screws to turn on. The process for SCSS users is documented (see README). |
| @@ -3,7 +3,11 @@ | |||
|
|
|||
| background: $shepherd-theme-primary; | |||
| border: 0; | |||
| border-radius: 3px; | |||
|
|
|||
| @if ($shepherd-element-border-radius > 0) { | |||
There was a problem hiding this comment.
What is someone wants a higher border radius?
|
@bm2u thanks for writing those docs! Can we put them in Also, could we limit the scope of this PR to just allowing theming more easily, and not changing the default styles? I'd like to make sure this generates the same styles as before, then we can think about changing the default styles later. |
links are displayed in the current text color and are decorated with dots
- add new variable to adjust button border-radius
|
@rwwagner90 my pleasure. Previous appearance of delivered themes should be restored. Some small but helpful additions in step.js (add css classes to prevent the styling of a particular html element). It seems to me that some of the themes seem to be visualy identical. Nevertheless, I have tried to get identical results at all. Index.md contains helpful details about using themes, and button border-radius is adjustable. |
# Conflicts: # docs/welcome/css/welcome.css
| ``` | ||
|
|
||
| ### Custom Themeing | ||
| We use [SASS](https://sass-lang.com/) as pre-processor for CSS. In connection with SASS there are extensive possibilities to generate CSS. For example, SASS can calculate or increase the saturation of color values. In addition, variables can be defined (similar to a scripting language), which ultimately end up as values in the CSS result. We make use of these extended possibilities by extracting themeing-relevant values as variables (__variables.scss_). This makes it easy to individualise colors and shapes. |
There was a problem hiding this comment.
(__variables.scss_) should be (__variables.scss__) so that all following content isn't bold
improved abilities to create your own themes by changing corresponding themeing vars