Add CSS Properties

[earlman]

• Fixes issue Proposal: CSS Custom Properties to make styling more accessible #2513
• Note: While I've been using git for a while, I'm pretty new to using it to collaborate. I was having a hard time removing my changes to README.md, package-lock.json, yarn-lock.json, .gitignore, and main-grid.css. Those are unrelated to the changes I'd like to make in this pull request. I tried to create another fork to put only the relevant changes, but Github said I already had a fork. Let me know if there's a better way to do this..

Summary

Renaming custom.css.config to custom.css makes the MagicMirror look like:

Added CSS Properties

• color-text
• color-background
• base
• font-primary
• font-secondary

Additional Info

• .dimmed, .normal, and .bright are the same color, now based on opacity
  • allows more simple modification of text colors
  • Minor visual changes:
    • before:
    • after:
• font sizes use rem instead of px
  • html font-size is set to var(--base)
  • allows modification of all font sizes by changing --base
  • Scale: every font size from .xsmall to .xlarge scales up in increments of 1.5, with .small being the equivalent to --base
  • Minor visual changes: (forgot to take a screenshot of this)

[rejas]

I see your branches are not 100% aligned to the originals.... I would recommend creating a new branch (not fork) from MichMich originals develop branch and then: either cherrypick your commits from the contribute branch OR rebase the contribute branch unto the newly crated branch.
Or are your changes not only in the contribute branch?

[earlman]

I would recommend creating a new branch (not fork) from MichMich originals develop branch...

How do you do this? I cloned the repository and created a new branch called css-properties, but I'm not sure how to get the local branch onto Github so that I can create a pull request.

[rejas]

Are you using a graphical GIT client like Sourctree or Gitkraken?

[earlman]

I'm using VSCode. Would you recommend one of the others?

[MichMich]

Thanks! I'm not sure if I'm a fan of the new way of dimming. This means if someone does a background image, it will be see trough. It's also a bit heavier for electron to render, so it might slow things down.

For me, it seems it's easier to explain what a text color is, in stead of explaining why opacity changes the brightness. I also think we shouldn't over-simplify things. Changing the colors of text is a great way to get comfortable with hex colors.

[rejas]

If one is a git beginner I always recommend a graphical GIT client where one can see the branches and how they depend on each other. Gitkraken looks on my PC like this right now:

That makes cherrypicking and rebasing easier IMHO since you visually grasp where each branch / commits starts / end /intersects

[rejas]

base for what? should be font-size-nromal or something like that

[earlman]

I put “base” because it sets the “font-size” property on the html. So that means anything that uses the “rem” unit changes based on what “base” is.

So if one wanted to set the margins in a way that scales, they could set it to “2rem”, and it would increase if “base” were to increase

[rejas]

I'd keep it simple on the first PR and just make it font-size-normal and only use it for that. All other stuff we can add later :-)

[rejas]

Thanks! I'm not sure if I'm a fan of the new way of dimming. This means if someone does a background image, it will be see trough. It's also a bit heavier for electron to render, so it might slow things down.

For me, it seems it's easier to explain what a text color is, in stead of explaining why opacity changes the brightness. I also think we shouldn't over-simplify things. Changing the colors of text is a great way to get comfortable with hex colors.

I agree, configuration should kept simple.
Also, if someone REALLY wants to use opacity they could define the color in rgba notation which includes an alpha channel.

[earlman]

Okay, good points on the opacity stuff.

I’ll try out git kraken sometime this week

[earlman]

How are things looking now? I tried out GitKraken (which helped a ton, thanks @rejas ), but I might have messed some stuff up while I was doing some cleaning up of the branches. Lmk

[rejas]

Branch looks cleaner. The README.md is still changed as well as the lock files. Could you revert those?

[rejas]

As well as the changes to package.json.

[MichMich]

I was looking at this PR, and although it looks super nice, I think it might be a good idea to change the custom.css.sample to use the defaults. This way if someone chooses to use the sample, they don't have to jump trough hoops to get it to match their initial install.

[rejas]

I could move that PR forward if @earlman doesnt have the time for it

[earlman]

@rejas Yes, please. I’d appreciate it

[earlman]

I was looking at this PR, and although it looks super nice, I think it might be a good idea to change the custom.css.sample to use the defaults. This way if someone chooses to use the sample, they don't have to jump trough hoops to get it to match their initial install.

On the other hand, it could also be a good idea to show people what’s possible with the css. Since they’re already sort of jumping through hoops by trying out the custom.css.sample. If I was to through the effort of trying out a new style sheet (as a newbie), I’d like the positive feedback of having some interesting visual changes

[rejas]

On the other hand, it could also be a good idea to show people what’s possible with the css.

There might be better places for that to show, maybe the wiki or the official MM documentation site. And in the custom css there is only a link to that documentation then.

[rejas]

@rejas Yes, please. I’d appreciate it

Done, thx for your PR. Lets hope mine doesnt introduce any new bugs :-D