Theming efforts #911

Simon-Laux · 2019-07-25T23:39:42Z

The goal of this pr/sprint is to

1. Centralize all component color vars (no general non-telling var anymore)
2. Create an abstraction layer with vars that have meaningfull names and convert from them to the component colors.
3. Create some sample themes to test if we did it right
If Move LoginScreen in own file, fix importing backups #863 is getting merged we need to change the deltaFocusBlue variable name

Simon-Laux · 2019-07-26T22:27:44Z

at this commit rate we should squash merge them in the end..

Simon-Laux · 2019-07-29T21:44:11Z

~~@MIntrovrt~~
~~we still need vars for~~

~~vars for Bp3 Buttons (text and bg + hover )~~
~~.bp3 input fields~~
~~.bp3 toggle button~~
~~emoji picker~~

Edit: pls. refer to the new todo section in src/renderer/ThemeSystem.md

evlli · 2019-07-30T07:04:07Z

I found a bunch more places where there are missing vars, namely: the text input field and names in the contact list

Simon-Laux · 2019-08-02T03:57:53Z

scss/_variables.scss

@@ -38,36 +38,151 @@ $roboto-light: Roboto-Light, $emojifonts, 'Helvetica Neue', Arial, Helvetica, No
 // New colors

 html {


These here act as fallback, but I think about removing them to save a few lines and reduce duplication..

Simon-Laux · 2019-08-02T03:59:43Z

src/renderer/ThemeSystem.md

+```
+
+
+### TODO


the todo is here now

@Jikstra have you read this file?

Jikstra · 2019-08-02T10:34:54Z

src/renderer/ThemeBackend.js

+    console.log('dark')
+    return color.lighten(factor).rgb().string()
+  } else if (color.isLight()) {
+    console.log('light')


console.log, maybe a log.debug if it's not too spammy?

the plan is to remove it after we fixed a problem with this function

src/renderer/ThemeBackend.js

Jikstra · 2019-08-02T10:45:41Z

scss/_variables.scss

+$color-message-author: var(--clr-message-author);
+$color-message-attachment-container-bg: var(clr-message-attachment-container-bg);
+$color-message-attachment-filename-incomming: var(--clr-message-attachment-filename-incomming);
+$color-message-attachment-filesize-incomming: var(--clr-message-attachment-filesize-incomming);


incoming only needs one m

Maybe you want to have different color shades for filename and filesize... but for this one we might get away with setting opacity for this effect, then we only need one var and if message-text-collor == filename-color == filesize-color we don't need any extra var for it.

Jikstra · 2019-08-02T10:48:51Z

scss/_variables.scss

+  --clr-message-generic-attachment-filesize: #070c14;
+  --clr-message-attachment-container-bg: #ffffff;
+  --clr-message-attachment-filename-incomming: #ffffff;
+  --clr-message-attachment-filesize-incomming: #ffffff;


For me it looks like --clr variables are the real base and they just get pulled in into the --color variables which allow a more specific adjustment. If this is the case, i would prefer to have only one --clr variable for every value and give it a proper name. For example there should be no need to have message-text and message-text-underline variable, that's way to verbose for base colors.

$colors you mean? we used this to resolve and group them centraly, we might resolve them again (put the var(--clr-component-name) directly in the components).

For example there should be no need to have message-text and message-text-underline variable
I think one might want to change the link color independently from the message text color (telegram has a different color for links)

Jikstra · 2019-08-02T10:51:27Z

src/renderer/ThemeBackend.js

+    ),
+    scrollBarThumbHover: undefinedGuard(
+      theme.scrollbarTransparency, c => Color('black').alpha(c + 0.14).rgb().string()
+    )


I don't know how much work this adds that if we want to define a new variable, we need to hardcode it at several places. Also it seems to me that we can't override those variables here from a theme?

we need to hardcode it once for styled components and 3-4 times for scss

Also for scss: we could just transfer the ("highlevel") theme vars and resolve them in scss, but some of them need additional transformation that must be done in js, because at runtime we don't have the fancy scss functions.

@Simon-Laux what kind of additional transformation do they need?

The actual theme gets generated here from the "highlevel" theme the user specified, after that when the "raw" object is set, its values replace the the generated values, so you still can have whole controll of it.

Jikstra · 2019-08-02T10:53:13Z

src/renderer/ThemeBackend.js

+--clr-bp3-button-bg: ${theme.bp3ButtonBg}
+--clr-bp3-dialog-header-bg: ${theme.bp3DialogHeaderBg}
+--clr-broken-media-bg: ${theme.brokenMediaText};
+--clr-broken-media-bg-text: ${theme.brokenMediaBg};


Even more hardcodes with different naming conventions and names, that's confusing. Can we streamline this? For example start using camelCase everywhere?

This is setting the css variables and as far as i know the naming for those is --[name in lowercase + '-']
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

I would propose following ideas:

use snake case name everywhere

use snake case for css custom properties, automatically (with help of a method) translate it into a camelCase name

use camelCase everywhere as it seems to work: https://codepen.io/anon/pen/xvXPWN?&editable=true (what i prefer, less problems with standard)

Another thing that i really would like to have is, having an automated way to inject the theming variables into the various parts, so that you don't need to hardcode the names everywhere

you only need to "hardcode"/define it in one place and thats ThemeBackend.js, I don't see it as big deal. Also then you have the advantage that you basicaly have a directory of every themeable var which you can use as reference for creating a theme.
If you have an scss var you define it twice sometime additionally in _variables.scss we could probably resolve the ones in _variables.scss so we only have the ones left in ThemeBackend.js.
You're right we could generate the var overwrite to save even more space. I'll try some things.

Simon-Laux · 2019-08-02T23:02:14Z

We merge this now, but keep in mind that there are still somethings left to do for good theming.

components anyway

in preparation to add them to theming

to work better with different backgrounds

Co-authored-by: Simon Laux <[email protected]>

Jikstra · 2019-08-03T10:25:57Z

src/renderer/ThemeSystem.md

+```
+Quirks:
+- You're theme gets only updated and loaded on change of the specified theme file
+- Doesn't work with `npm run dev` because this argument gets lost


We should fix this to make npm run dev allow arguments. We probably need to use a dev.js script to make this work.

Simon-Laux assigned Simon-Laux and evlli Jul 25, 2019

Simon-Laux force-pushed the theming_efforts branch from 1e95ba7 to 35be9a4 Compare July 26, 2019 19:18

Simon-Laux mentioned this pull request Jul 29, 2019

Move LoginScreen in own file, fix importing backups #863

Merged

Simon-Laux force-pushed the theming_efforts branch from bc67f70 to 75d83d0 Compare July 29, 2019 21:32

Simon-Laux commented Aug 2, 2019

View reviewed changes

Jikstra reviewed Aug 2, 2019

View reviewed changes

Simon-Laux changed the title ~~[WIP] Theming efforts~~ Theming efforts Aug 2, 2019

MIntrovrt and others added 17 commits August 3, 2019 01:05

Centeralize scss vars pt1

34b5b80

@Simon-Laux rename some styled components

993972b

more renaming vars on js side of things

69905f4

theming manger development +minmal documentation

3d21c45

bp3 dialogs background

1d3ba3e

Centralize scss vars pt2

3ded62c

Centralize scss vars pt3 of 3

e10579a

thinking about naming

0682526

replace css vars with scss ones

2dd6a88

remove unused css

f0bd9e0

grouping very close vars

501679e

some of those color vars

33abc2e

remove a scss style that is overwritten by styled

dd74f58

components anyway

continue sorting

426bf77

add todo

b94580f

renaming stuff, remove unused scss

a3ee0b2

deduplicate message status and sorting

be06b8a

Simon-Laux and others added 26 commits August 3, 2019 01:05

rename bp3 file

3ddea0e

login button color

1fe3037

add bp3 header and button vars

c2b1a3e

fix it

13b075b

"accent color"

36bdaa8

composer colors

4bda2e1

extract emojimart styles to new file

9dc91ae

in preparation to add them to theming

chatlist name theming fix

adcf76e

chatlist group icon color

ec0dc63

fix standard

fb65a30

remove 3 unused images

81da399

prepare bp3 input & a few todo points

9aa8354

clarify some todo things

5c87e48

make input background on login screen transparent

7b71d43

to work better with different backgrounds

simplify code, remove debug statements

e1bbb1f

remove 2 unused css vars

4b46c09

remove css var fallback

33c06df

remove a var that gets overwritten anyways

fd41872

one more var

0ef33d9

include emojimart in ThemeBackend

a49fbb3

Co-authored-by: Simon Laux <[email protected]>

moar bp3 overwrites

3ace56b

dirty quick reload for themes

a3addd6

somw progress and playin' around with theming

4703bdd

fix standard

cc1e643

emoji picker search icon color

8924cc6

make available chat bubble color in "highlevel"

c99aa8e

Simon-Laux force-pushed the theming_efforts branch from 5855bcf to c99aa8e Compare August 2, 2019 23:06

Simon-Laux merged commit 5d1043f into master Aug 2, 2019

Jikstra reviewed Aug 3, 2019

View reviewed changes

Jikstra deleted the theming_efforts branch August 24, 2019 14:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theming efforts #911

Theming efforts #911

Simon-Laux commented Jul 25, 2019 •

edited

Loading

Simon-Laux commented Jul 26, 2019

Simon-Laux commented Jul 29, 2019 •

edited

Loading

evlli commented Jul 30, 2019

Simon-Laux Aug 2, 2019

Simon-Laux Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 2, 2019

Simon-Laux Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 3, 2019

Simon-Laux Aug 3, 2019

Jikstra Aug 2, 2019

Simon-Laux Aug 2, 2019

Jikstra Aug 3, 2019 •

edited

Loading

Simon-Laux Aug 3, 2019

Simon-Laux commented Aug 2, 2019

Jikstra Aug 3, 2019 •

edited

Loading

		@@ -38,36 +38,151 @@ $roboto-light: Roboto-Light, $emojifonts, 'Helvetica Neue', Arial, Helvetica, No
		// New colors

		html {

		```


		### TODO

Theming efforts #911

Theming efforts #911

Conversation

Simon-Laux commented Jul 25, 2019 • edited Loading

Simon-Laux commented Jul 26, 2019

Simon-Laux commented Jul 29, 2019 • edited Loading

evlli commented Jul 30, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jikstra Aug 3, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Simon-Laux commented Aug 2, 2019

Jikstra Aug 3, 2019 • edited Loading

Choose a reason for hiding this comment

Simon-Laux commented Jul 25, 2019 •

edited

Loading

Simon-Laux commented Jul 29, 2019 •

edited

Loading

Jikstra Aug 3, 2019 •

edited

Loading

Jikstra Aug 3, 2019 •

edited

Loading