GitLab Frontend group, 2 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Fix Dark Mode SCSS color bugs

Description

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/241970 – MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41122

A

So in case you're watching this recording, uh we are currently looking into and I'm just going to stop the screen share for a second in order to close all the things that are not relevant for this call in order to not have something that we don't need on the recording and now we're fine. Now, I think I can share my screen.

A

Yeah so we're currently looking into more of the extraction of our site-specific javascripts, we originally planned to look into how we deal with ee specific styles, but this will actually be about looking into this one to do spark that we have- and I think the the reasoning why this happens is pretty easy right now how our application dart mode works.

A

It basically imports uh certain variables that, for example, basically flip all the colors around you know define some colors in a different way and then import all of the import all of the application css, but because we moved the to do css out here and to do css just imports the normal variables this actually means. Obviously we will end up with the wrong colors.

A

So you already can see this that these are the wrong colors, like the hovering is off, and I think the link colors are also off, because basically, every color we use in here um will is off um okay.

A

This means we have basically two choices in my opinion: either we go the same route and we import.

A

uh We basically create like mixins and variables and functions dark mode uh css, and then we import that um I'm not a particular big fan of that, because it will lead to duplicate um duplicate uh styles everywhere right and basically, we probably need to write a helper. That says you know if this mode is on import, that if that mode is on import that and the other solution which I would prefer is using css variables.

A

This means that basically, instead of doing using the colors directly, we would make use of css variables or custom properties, which basically would mean we could define certain colors and then in dark mode. This color would then be defined as the one and in in light mode it would be defined as the other right.

A

um The only downside of that is, it means when you're touching like one of those files, you basically would need to migrate to this, but eventually this will be the easier way and probably the way um we should deal with the dark mode um because then or we should deal with themes and these kind of things, because then you just define the styles once and here, for example, it would say I don't know last child override border style, so this is like the uh so this is.

A

These are like the border styles are the blue in between here right, so this would probably be like.

B

So, instead of instead of naming it based on the the color palette, we would give it a a functional name that abstracts the color away from from it, and so you reference that functional name and and then with the variables. The the theme assigns the right color value to that uh very functional name. Variable, correct.

A

It it would have you know, the problem is like: how would we deal with these blue ones, so functional name completely makes sense. Sometimes you know if you're like, I don't know if you are like have repeating where you see it. So probably it makes sense to define like a to do color, for example right. um I I just wonder, I think, a quick way to to check how it should look like would just be to import the uh application. Is it application dark? No.

B

A

Just themes and then dark.

A

Yeah exactly you're right. uh The question is like: how would we want to deal with this on uh on a high level yeah here you can see now how it is supposed to look right um and yeah. I don't know I I basically basically the way I would probably go about it is the problem is we would need to define all of these variables in c e, uh in the normal mode and in the dark mode, so this would especially initially it would be quite a large.

A

Quite a lot of mr right.

B

That feel yeah and it feels like uh you know it's it's almost like a it's a pattern change, and would you probably need to go through our front-end rfc process? If you want to introduce this new pattern? Yes,.

A

The other, the other thing is, I think the other pattern is hurtful in the sense as, um as you know, right now, I think if you are like in our layout head layout, html harmony, there must be one somewhere, app views, layouts, uh there's probably like here this, like we already have like this conditional in here. I assume yeah. We have like this conditional. You know if user application theme equals gl doc, uh then use application.

A

Dark else use this one, and this would mean that we basically in the to do html hammer like we would basically would otherwise need to do like if uh you know basically the same same thing it would it. It would also mean that you know.

A

uh It would also mean that you know uh that we probably end up with, like uh I don't know, to do stock right, um so it would mean that we basically need to recompile every uh that we need to compile everything twice um and it to be honest, like the pattern with the variables is actually already does exist, for, as you can see, does exist for.

A

Does exist for the ide, so here we already using this pattern. You can see ide theme, doc right and so that we already have that pattern. um Yes, so.

B

We've got prior art. We're essentially just gonna, be copying in a way.

A

I mean the good thing is we could also define a fallback, so we wouldn't need to touch the normal theme, so we could go like like they did here. So the way we could go about this is we, um I think, is uh wait. Where was it theme overwrites yeah? So we basically what we could do is we could go and say: hey. We have the to-do's we are using, uh for example, uh we are using, for example, here blue 50 right and we are using.

A

I don't know uh we can use blue50 and then we would just need to define the variables for application dark. Okay, for the themes, dock we would just need to define like hey. uh uh Where is it we? Just? Wouldn't you know blue 50, and this would be.

A

Blue 50 and it would be the root, for example, or we could define it on the body, for example, um and and that way.

A

I I probably can also go with probably was complaining about this yeah, um and that way we would not need to override it in uh so we that way, we don't need to create a dark theme and the light theme, but we could just go about. You know basically replacing every one of these with something like that. Yeah.

C

B

We would we would we would, and that also means we wouldn't have to have a conditional in the hamiltonians at all.

B

Yes, I'm not a fan of adding conditionals everywhere uh that that's kind of like something that I'm not not a fan of, because eight makes the code just more messy and you know more maintenance prone and if we can keep keep the changes and limited to to the styling, the style, rules and stuff. It feels like it's a an easier migration path uh than something else.

A

Yeah, I I completely agree um because the the migration path is actually how you can see here that the background, for example, we actually you know- and this is like really bad- like we actually defined the color white right like semantics. Here we defined white as a gray, all right, it's like all right, so the semantics here start to become like really.

B

A

Really weird right and um uh yeah.

B

Yeah, I I definitely think your your proposal of moving to to more of a functional naming convention is is, uh is definitely the way forward uh specifically because of this, and and even and it's not just a dark and and light it's it's also. If you want to have an accessible style sheet for people with uh color blindness, you know you might want to have some different themes and stuff so yeah.

B

However, it feels like the the the in between option is the one with providing the fullback variable um so you're defining the dark, the dark values, and that could be an interim kind of like solution that uh and then we should probably open the discussion about moving the the kind of like naming convention going forward.

A

Yes and to be honest, like moving this naming convention, then should be rather easy right, because you already, I mean depends because you know if you have a blue 200 here, but it's actually the border color uh and you have a blue 200 somewhere else.

A

Where it's the background, color or the color of the of the link right, um then you might end up in a weird spot, because, because you know you you're using the same color for semantically different things by the way, when I start looking in into this, I also found out like hey, sometimes so, for example, in our actual themes. You know the the only theme that we really have is the header bar top.

C

A

And if you look at that, it's like you have like defined variables with colors, but those are smashed together. You even can see it in the variable names where it's like. You know, header border color and background color of this thing in the drop down or something like that right. um So where things are in order to not find two variables, someone was like: hey, let's mesh these two together because you know and then you end up, you know overwriting them, and I don't know um I don't know I.

A

I think this would be the the nicest approach for now by basically just defining those css variables again right, um but I don't know if yeah.

B

I don't know this is awesome. This would also need to be an additional step in our migration guide. Then, because every page, that kind of like moves over, we need to adopt this approach.

A

A

B

A

Mean we can put it forward as a proposal, but I think that's the cleanest way how to do it. um We define variables in the in in the application css, essentially right and if they're not defined, we fall back on the light. One I mean in the future. If we move on with the light one, we could even remove the fallback right if we can ensure that these are defined um yeah I mean another thing would be that you know one yeah.

A

No, I think that's this yeah I mean we also could start scoping it down similar to the ide ones like like similar to these ones. Right.

B

Yeah, where you have, we have page specific variables.

A

Yeah, but I feel like this is also a bit of overhead and might lead to a situation when we want to change blue 50. I mean I already get.

B

Oh, I still they they're not actually using the variables they have hard-coded.

A

Colors yeah, I already get um a stomach aid again because if you search for this color yeah, it is a blue 600 right and it's like it's weird. They.

B

A

Didn't use it here because, ah please see read me: they probably didn't use it in this um uh in this one because they had don't have it available right. I don't know this is where this one could help it. Yeah again, it's it's weird that we with application css, and I think we started to work on the dark application css when before we were able to use these custom properties, because those custom properties are just usable if you drop internet, explorer, 11 right and I think the work on the.

C

B

A

Before we dropped internet explorer.

B

Yeah, it's, I think it started two releases ago. I think so yeah. It makes sense.

A

Yeah, so I don't know how? How do you feel about uh how to about defining these, like so.

B

I'm I'm conflicted in that to move the objective of the of the epic of of migrating these files forward. We should use the, I guess, the the light, the lightest weight solution and but um you know the conflict comes in. Is it the right thing for the overall code base you know so are we? Are we sacrificing short-term long-term pain for short-term gain?

B

So but I, but what I do, what I do.

B

I do like this interim approach that we discussed more than any of the others. The others feel you know duplicating files. You know having two to do. Css files feels overkill, um because, because a lot of a lot of these page files are also small, yes, there's a couple that are big, but a lot of them are quite small, and so just to have two files for the sake of it feels like overkill, um and I feel like this is an interim kind of like step.

B

The only thing is that, if somebody looks at the code base and they're not aware of this interim phase, are they going to understand what's going on here and why it is like it is? Are we going to have pushback.

A

I think you know what we should do. We should do it for this file say hey. This is the solution. We came up with.

B

A

Link it as an rfc, get the maintainers opinion and call it a day. We can say: hey, look, we evaluated. One solution would be to duplicate the rendering of the file. The other.

C

A

Would also be introducing you know, basically removing something like this. um The only thing I thought about would be hey, let's maybe add like a prefix like theme, because then even you know, like variable theme, white probably looks better, even if the color is black right, yeah or a dark gray and uh yeah, and then we can slowly migrate. Our our uh things towards this.

B

Yeah that that sounds like a sense of approach to me. Okay,.

A

Cool then, let's, uh let's revert everything that happened here um and let's see if I can graciously fail at uh a drag x.

A

Okay, we want essentially the name right. Then we don't want. uh We basically just want a to z and uh this and we want numbers.

A

This looks pretty good. um Then we can be like. uh We basically want to replace this with var minus minus. Then this comma.

A

Dollar, this yeah, okay, this is one one too many. I think this looks reasonable, hey we want to have var minus ah and we want to add like theme at the beginning,.

B

What do you have? Why do you have a dollar? Oh it's! Why do you have a dollar there before the for the last argument, so you've got dollar dollar one.

A

um Because dollar is like the uh so dollar one is just to access the capture group and yes, the other dollar is the dollar we've removed here, like the beginning of the css variable right, so that we have the fallback so that it is the normal css variable again.

B

ah That's right. Sorry: the capture group is only for the alphanumerics nevermind yeah cool. Okay, I'm.

A

I'm with you and then we just add a space so now I just hope that we don't ah okay. So I think I think we want to mainly do this for colors. uh Let's have a look if they in the dark theme also overwrite like weights, but I don't think they do. No there's no font weight or anything.

C

A

All looks like colors, because sometimes you would want to overwrite like the the font weight because font weights are you know if you have dark mode, you might want to use a thinner weight or something yeah.

A

So and now you asked me last time when we were on this, why I'm using this four qteal and now I can show you because now it would be pretty easy for me to go through this and be like okay, these are all colors, so I want those.

B

Yeah and you just you- ignore the ones that aren't relevant okay.

A

Exactly so here we have a.

B

You've convinced me I will.

A

B

A

We change the before color was before the other one. This is the only problem like but yeah, so maybe it's maybe it's still easier to search for font weight normal and you know, returns to its former glory.

A

uh Oh maybe we should keep the font weight, though right. So maybe the thing we can search for is font weight.

A

Or phone one should be able to type font weight and then we can oops and then oh gosh fond wait and I want the ones that have a variable. So this one we can remove.

A

Oh- and this was the last one thanks fond size.

A

Okay, okay, so we have these ones. These are colors.

A

These are colors, sorry, and these are colors, so it should be easy yeah. Now, the only thing that we need to check is that we all re define all of them in the dark mode, and my question would be: would you just define them all or how would you do it? You know, because right we would need.

B

I mean it's going to be really tricky. To I mean we could either go incrementally where you need to go and define the ones that your page needs as we go through this journey or we can define all of them up front and say they're available, and then people don't have to worry about it. Yeah.

B

How much how much do we add to the bundle size by defining all of these variables.

A

To be honest, I think it's okay, like you know we basically right now. This just contains variables more or less right, like all of these, uh so more or less. It will be like this right, pb paste.

A

So in this case, like two kilobytes.

A

For the dark mode right.

B

And it's just for dark mode.

B

I think, if you cross over to the dark side, you can sacrifice two kilobytes.

A

Yeah- and I mean this is like two kilobytes that are not g-zipped right, like.

B

Yeah yeah yeah and most of most of those the text is repeating anyway, so it should be zipped quite tightly.

A

Oh geez, so the question in the dark mode, though, is like gl, so I'm super confused like text.

A

I'm super confused because we, if you look at gl text, color it's gray, 900 and that seems like ah oh gosh.

A

This is like super bad.

A

Oh, I think we ran into a little bit of a snag, because this is, for example, an example where hey we define gl text color as gray 900, but the dark mode is overwriting. What grade 900 actually means right. Yeah.

B

A

So I mean yeah, essentially, ideally, you would need to migrate to using the variables you know everywhere and, for example, if you look like gl grayish blue right like why this is like. You know we have like typography right, but but still it's like hey. We have these definitions of things that are then used in more or less not that many places right.

A

But, as greyish blue, for example, is not overwritten in a dark mode, this this gets a little bit ridiculous right.

C

B

Yeah, the stock mode is definitely introducing some complexity from a maintenance point of view.

A

Definitely is yeah, so I think, with these theme, colors gray, light and so on is that defined here, gray, yeah, lightest.

A

It's always every time we introduce such a new palette, I'm asking myself: why aren't we just using gray right like okay? Let's try it, um I wonder if we can now, let's, let's bring out some scss magic, maybe scss mix-ins.

A

You can see that I already visited this page.

A

A

ah Can can one loop? Is there like a thing like a race yeah.

B

You can there's maps and but you can uh they've they've got four loops ah each each.

A

Loop, two sizes: okay, with maps the structure they even have the structuring, wow.

A

uh Mixin, okay, I was just wondering if, like maybe with you know, we could define a mix in that is like define theme variable right and.

A

C

A

Maybe we could do something like you know, define theme variable and then uh great, basically just get a list of all of them right like create gray, yes, 50 and so on. Right yep and this would just be include right, and uh so how do mixin arguments work? Arguments arguments this can also have trailing commas.

A

Optional arguments arbitrary arguments huh here we have it right, so we have like variables.

A

And then I'm just going to take this nice ah and it's uh three dots right.

A

That's just you know four valuables nth variable.

B

Oh well, we don't need that rule selector. We just need to define the variable now.

A

Yeah, so we just, I just wonder, like root or we can put it into root or we can put it into body right so can we do something like huh do we? Can we get the name name of an argument? That would be the question like the because right now is my question: we're gonna, yeah yeah.

B

You're, probably gonna get the value yeah I mean you're gonna get the value so yeah. You need to pass it like.

C

A

Single quotes: yeah, okay, whatever um okay.

A

Scss variable by name variables, variables are simple: okay, default values built in variables, scope, shadowing flow control, advanced variable functions, who this sounds like.

A

Interpolation, maybe inter population.

B

Yes, I think it's it's interpolation, I think it's you can yeah it's the hash and in bracket the hash curlys and with the name of the variable will give you the should give you the variable.

A

Okay back to the mixing for a second, so where's, the.

A

A

Do they have like in each each name? Okay, okay, name color, syntax, colors taking arbitrary, so we probably can do like.

C

A

Each name in write, meta keywords: what's meta keywords, ah look how they do it.

C

A

Keywords, meter: keywords function. I wonder if something had one before. I assume it's a newer one, yeah it's not in ruby sauce, so we can't use it.

A

Oh gosh that would have been so nice, so you're saying we should do like.

A

Will it then look something like this.

B

No, I think, without needing the the the dollar curly that that should give us the so so, if name is uh we we're gonna have to concatenate the the dollar?

B

Can we yeah so so we need to so we need to add uh yeah.

B

And then to get to the value of creating.

A

That's the question right: yeah.

B

So you, if you you're gonna, have to concatenate.

B

uh I did this previously, but this was a while ago.

A

Scss get variable from string, maybe ah yeah.

C

C

Wait of merge conflicts.

A

Dynamic variable.

A

C

A

So they say we should create a map and, to be honest, I think we already have one for the grace. For example,.

B

I I I recall this map thing now. I use we. We defined our color names in our map as well. Previously.

B

A

I I wonder, yeah, no, I don't wonder.

C

I wonder how I wonder why.

A

I I I think I saw something like um yeah whatever. What probably here is uh uh what blue nice everything is blue. Now, um unexpected color name blue.

A

I was just like.

A

I thought that there is like performance bar color gray.

A

Maybe I should search for like something like okay, so we have gr ah here. We have color maps.

B

A

So we should be able to iterate over all the grays right.

C

A

uh So we had the stack flow. This one was the answer before right, like somewhere here: yeah colors. So what did they do?

A

Mix in color set color name, and then they got it from the okay, so we probably can do.

A

A

Does someone use grace actually.

A

ah Color ranges: okay. This gets more interesting, ah four variant in okay. This is each. ah This is nice. Okay, this is nice and good. haha Look! Someone creates this stuff. It's.

C

Already written.

A

It's already written so for each variant in the color ranges, or maybe let's do it. uh Maybe let's do it easier and just do like hey instead of the color ranges we can just maybe do.

A

It at each so and we have the the grays okay. So this is the color.

A

And- or this is the name right and this color- and this is like range- then we we just do the um okay.

A

Now I need to cheat again: no, it was where was it used? Where did I copy this file from utilities, and this is how they do it? ah Okay, so this is how you build a string.

A

I don't like scss.

A

So we would be using this.

A

A

A

A

Like this right and then it would just be color.

B

C

A

I think we also need to do this. I remember it from yesterday because variables how they work, and but that then would mean we also. ah This is actually the the value right value so and then we need the name, and we can give the name here.

A

And then this is the value, and this is gray and grace yes, okay now this should have been compiled.

A

Oh undefined variable grace so.

B

We include utilities, no, we did with. Where does those ranges defined.

A

I assume yeah. We basically include these before. We include the utilities, yeah ah shoot.

A

So in the app because, if I remember correctly application css, so what we actually would do is we could go into the application dock right and be, like I mean maybe we could switch to ordering around, but this should like. Do it right.

A

C

We will get the latest color value.

A

A

Okay, we broke something, make the done buttons out.

C

A

Oh, why are you not on my headphones anymore.

C

A

So now I'm a bit confused to be honest, like.

B

Are we, why are you at including the the call to the mixing.

A

Isn't this, how one does a mix in or could we just do this.

B

A

Okay, let me let me just check what what we're ending up with uh html. I wonder.

A

Maybe we shouldn't we.

B

It's it's. It's defining, then there's theme grey variables on the front.

C

A

So if they are defined, why do we have problems with the styling here? Is it just because the screen is too small or something.

A

To do, let's hope.

A

I mean it seems like we broke something right somehow it's it's.

B

Like we yeah, it's like we changed the layout, but we were supposed to just colors.

A

I know why you see that we still have the. If else there are.

B

It's not loaded, thank goodness.

A

Okay uh gray, we definitely need to do it for the blues as well right, yeah blues. I, like that name.

B

The dark thing is a bit of a blues thing.

C

B

Yeah that looks better.

A

ah It reloaded.

B

Yes and the holder is right.

A

So this is all the to do pending right yeah. Here you can see it. This is like it's using the theme blue, otherwise it's using the fallback right. Yes, I think this looks nice.

A

I can't the only the only concern. Maybe we should have a look into the. Where is it defined? Is it defined in.

A

Variables like where was this defined again great blues, the blues and grays variables, you know to be honest, like I wonder if, in the themes we could just do.

A

Add import right and then do the because page. I know this looks bad if we could just do.

A

A

uh This is the mixin right.

A

A

Is it greens probably should be greens right.

C

A

uh Place quotes okay, greens, we have the.

A

Blues blue. We have.

A

The these names just get better and better.

B

A

Red this piece is like the name of some football team or something.

B

A

Goes indie goes, oh, I think no one ever defined the indigos. That's that's not nice! For the indigos.

B

There's no indigos.

B

A

ah Here we have the indigos.

A

B

There they are.

A

They wait, why do we the maps I.

C

A

I think the indigos are, the map is not defined and I think.

B

A

Like the indigos are just for the indigo theme, I don't know if we use.

B

For the for the header.

A

Indigo minus- I know someone used this in some boards right, yeah, okay, um but to be honest, like for our variables, we're probably almost done right, like yeah. This is.

A

Okay, let's just double check: uh if we have get status, the easy way to find out which ones are defined should be just cut, and then we can grab uh for minus minus wall right.

C

A

What shouldn't this have, like the I know, it's just war yeah, so these are the ones that we actually need. Theme, blue theme, white.

B

White, we haven't defined white. Yet yes,.

A

So is there a way with us that we could end up with one root element, because we're now adding like the whole root thing for everything right, probably smarter, to do to do it? This way around.

A

And uh then just have one statement right.

B

Okay, I see what you mean: yeah, okay, that makes sense.

A

uh Define theme variable. uh Oh, I have another idea.

A

What do you think about making this arrangement.

C

B

I was the name did bug me like.

A

Yeah and this one will just be like.

B

It's also it's not really. It's not a the color range define theme, color range variable, define think variables from.

A

B

Well, what are we defining we're defining uh variables, yeah we're defining color we're defining color range variables, so define theme, color range variables, okay from from coloring wow.

A

Define theme color range variables right.

C

A

B

C

B

Says what it does right, because essentially that mix and just goes and defines those color range variables.

A

Yeah, I have another idea, this should be value, and this should be like color.

A

B

A

This is good, shade, shade value, because then we can have.

B

A

Easier here and just call it name value right, define theme, color range variables: okay, blue. We already defined okay. So in this case this needs to be that.

A

Let me just take the root element with us: hey. This is the reds.

A

And I think that should be it right. uh Just.

C

A

Great and wines yeah, so we need the inc so which ones do we need? uh Let me just okay. We have that here. Let's just up okay theme: blue. We have theme blue 200. We have right white, normal gray, light blue blue 600. We have.

A

B

A

B

Exception: there's an exception to the naming scheme of theme white.

B

A

B

Our naming scheme takes two variables.

A

Oh, no, it doesn't does not. No, I think you know.

B

uh You're right, you're, right, yeah.

A

So we would just be like uh at include define theme variable and we just would be white white right and then we have white normal. ah Yes, then we have grey light.

A

um So text color is a tricky one, because text color later gets defined as gray night 900 or maybe it even doesn't, because now we include.

A

Oh I'm super confused. Now I don't know what this will end up as, but let's let's check how it will end up so gray. 500 should be in gray 100. I think this is a reasonably sized, mr, so let's reload and see what happens. Oh I'm so excited, uh oh man. If this stuff can get me inside a gl text, color, okay, where's this in the badge pill right.

A

So here. How should it look like, though? Oh I don't know? Oh gosh, what's happening. Oh.

B

That'd be good.

A

Okay, why does this happen to us.

B

Maybe compilation error and it didn't include it. I don't know.

A

I have a feeling that no, I don't want to click that or something I just want to have the okay. I have the feeling var theme, blue 50.

A

I mean the variable is right or theme blue 50, but it is the light.

B

It's the light ones.

A

It should be the other way, probably because this import is not doing what it does or should do right. Oh no, the this one is actually correct. I I think in the.

A

In the um in the theme.

A

Should not be done right.

B

A

Now we get the compilation error, but you know, to be honest, I think you're probably faster if we just copy paste these few values and call it a day.

C

B

Yeah, that's that's right, because those those color ranges were defined from the light theme.

A

Yeah, so how do we do this again? We do uh okay, backslash dollar, and then we have a minus z, minus uh zero, minus nine, and then we have this here and we have that there and we have this here and we have okay. This looks about right.

A

Why is this source ah okay learned something today? So how do we define the variable? We say we want this to be the name. So in a string we have oh, uh yes. Obviously we need to the plus inside the capture group. So we have grade 10. Then we add a comma and a space and uh then instead.

A

Boop uh and then we just use the same thing again, because we don't want to define things twice right, so it's this and then we close the brackets and then we close the line. Okay, this looks right.

A

A

A

Goodbye color range it was nicer to look at, but.

B

Yeah, it looks cleaner, but um yeah.

A

Gl text color and by chance we know that this is just gray.

A

A

A

So gray 900 is gray, 900, really dark or.

A

A

I wonder which one? No? Where was which? Which do you remember, which style it was.

A

No, I can't theme gl text, color badge body badge, pill.

A

What's the to do, buddy batch pull.

B

A

Where do we get another to do, let's, let's search for ah to do body, so um we have dot.

A

What there is no to do body.

B

A

This, maybe when we mark one as done no where's to do buddy.

A

Okay, to do hamlet.

B

uh What, if you took the what, if you took the dot out in front of the search there uh in the in devtools yeah, when he's doing a text, search or.

A

See if to do note present ah so apparent we can have. Do you have a note this is like, when can I so maybe like? If there is a note like if someone mentions you by name or something, maybe let's go into more realistic to-do's, and this is the wrong one.

A

Sorry we had time right.

B

uh It's okay: I can go on if you're, okay,.

A

Yeah, I'm okay, so to do body. ah ah So if someone really mentions you.

B

A

Okay, but then in the markdown there needs to be a badge with a pill, no batch pill ah or the p tag. ah So the color of the note. ah So this color, ah okay, okay. So if someone mentions you by name right- and we don't have any of those notes here, so what do we do? Do we just impersonate real, quick and have a check?

A

Let's, let's do that? Oh this, okay, oh wow, unfortunate, just realized something doesn't matter.

A

uh Where are users.

A

This is also, why is this a link? uh Okay, we can go on teesha and thiesha can imper. We impersonate yesha.

A

Oh yeah jesus obviously has a different theme right.

A

And there must be an issue.

A

A

A

This is a bit convoluted way of doing this. I feel like wait. ah Tiesha is a reported user.

A

So probably doesn't make too much sense to use that user.

A

Okay, stop impersonation.

C

A

C

A

ah Https, okay, admin.

A

Okay, okay, admin area users: let's not take a user who, who is uh okay, last activity so sharer? uh These are all reported user. No users.

A

Can I ping my I can ping myself right.

A

Shouldn't that.

B

Is you should be able to, I guess.

A

Like these, badges are really you need. A really good monitor to have like okay dismiss lie, part. No, that's the I'm rude and I.

C

A

If you mention yourself doesn't create a to do, though right yeah, it does okay. So this looks about right, and so, if you look at this, this was a convoluted way. It should have the yeah theme, gl text color or the normal one.

A

Yes, so our approach seems to work right: markdown, grayish, blue yeah. Why do people define like new colors? I don't get it like. It's like at one point. We probably have like how many colors are there 255 times 255 times for 255.? We can just create a variable for every color. Okay.

B

16 60 million variables.

A

Yeah so um yeah. I think this would be it right.

A

To be honest, I I think this is the preferable way, because it has not that much impact on all of the styles. It just has an impact. If you move styles, the only downside that I see that we might need to deal with is um and I've circumnavigated around. This is if someone uses like darken, ah which is not used that often, but if someone use like darken or lighten or one of these things that manipulate colors, it obviously doesn't work right.

A

So these would be a bit uh the weird ones right um yeah um then, basically, one has to go and define like colors for these, but yeah yeah, but you can see it's not used that often.

A

What do you think is this our approach.

B

I think it's a good compromise.

B

It's it's lightweight in, in the sense that it doesn't add a lot of overhead for for people trying to achieve with the help of the migration, and it's not too heavy-handed that it adds a lot of tech, depth or bloat to the to the bundles, or anything like that. So I think it's a perfect compromise.

A

One of the good things about it is: if we, for example, forget to define a variable right like imagine, we don't have white normal defined or something it would just fall back on this one. So it would still look odd in the dark mode, but then you know the people who can care about dartmouth. We can move ahead with the migration and if there are certain variables that we want to uh want to add to the theme you know they can basically uh start caring about this right. Yeah. That's.

B

A

huh I would be interested if it makes sense to define like ah let's leave it like that. I would just wonder if we just should call it like instead of theme, gl text color, if we should just call it uh geo text, color right.

B

B

Let's leave it for now.

A

Okay, good sounds nice. um Yeah, okay, um get check out. Do you have the to do stock? Do you have the issue issue handy.

B

Let me just find it quickly.

A

ah To do hover style isn't correct right.

B

Now there we go.

A

Okay, good check out minus b fix hover style.

C

C

A

B

He's just like king of the castle just lied lying there watching things.

A

Don't have a dark mode variant rather than compiling one, oh by the way, I think, let's make it a big builder bigger rather than compiling. Oh, maybe not that big compiling.

A

Page, a css file for each theme um we make use of css variables in order.

C

To define correct colors.

A

A

um Is there anything you want to add like to commit message? I always like writing a good commit message, because then we can also use it just as the pull request, description right, yeah.

B

Maybe maybe the fact that how this introduces the I mean.

B

I mean do we need to add, I mean we probably want to explain um the um the mixing that we're adding and it was something else we wanted to explain as well um yeah. It doesn't have to be in the comments necessarily.

A

There is prior art with the um ide.

A

And eventually we can move.

A

To only use these variables.

A

We have defined.

C

These variables, with a fallback so that in.

A

Case one isn't defined in case. One variable is undefined. We will fall back.

A

B

Yeah it's essentially our approach makes the light thing. The fallback is the likely um so yeah, so you only you only have we are we're only defining variables for dark for the dark theme, because the fallback is the light field.

A

B

A

uh Does we just define the variables.

C

A

We just need to define right.

B

Yeah, since since the fallback is lightning.

A

This approach will allow us to utilize.

A

To create other themes.

C

For excess ability, oh.

A

B

I b, I l, I t y.

C

A

Okay, it needs to be on the next.

C

Line color blindness.

C

C

The future right.

B

How would we yeah so? How would we go about when we have a third theme, for instance? So right now are we defining dark and we just need to have so we'll have a conditional for the include of yes, you know dark or normal or high contrast and so on, yeah and then in the dark.

A

So, ideally in the future, the only.

B

Thing is ideally.

A

In the future, we just have one application, css page specific css, and we include a light or a dark variable field right and that's it. That should be the ideal outcome of this yeah.

C

Yes, yeah, okay, yeah.

B

A

Things yeah um and then we could have all the themes. Okay, get mr cool um yeah. This I will keep running. I was working on jira fun, stuff, ah jira. Integration is a lot of fun. This is why I have I have to. If you want to interact with the jira cloud, you need to publish.

B

Yes, I was wondering why you were going through the buyer.

A

Yeah, um okay, cool! um So let's add it to that issue, um and do we want to create an rfc around it um or should we have a look whether there is an rfc around the you know what I'm interested in just a quick, quick peek like these ide themes when they were introduced right copy pal?

A

uh This is the path and I don't know do you know about that cool feature um that if you are you can, if you basically on any page, that is not a merge request. Page you can press t and then you end up in this really fast search. No.

A

It's like and you you know it yeah and, as you can see, it's fast right now, good that I make adverts yeah there. You can see it right there, you have it uh dark css and it has like a fuzzy finder. So you could be like. I need a dark, scss right and uh yeah.

B

So that's any page except the merge request page.

A

Yeah, because in the merge request, page t opens a search that.

A

Opens the search in the merge request right, um yeah yeah by the way keyboard shortcuts.

B

A

um Okay, so let's, let's maybe have a look when this file was introduced.

A

Why is my ah there? We have it again: uh okay, migrate, dark theme to ucss variables, so this would be interesting to see if this maybe has like associated.

C

A

See they exactly the same idea, and here.

B

A

Here they, even you know, on the yeah page, bundles ide same idea, and here they even do it by adding a certain class to a thing. That's the only thing that we might want to change that um essentially we're just saying in the: where did we define the variables again um themes, yeah, so, except that we could do body dot, uh gl, yeah yeah, that that's the only thing but I've committed and pushed anyway. I think it makes more sense to look into the approach in general and then yeah but yeah.

A

Okay, do you think we should create an rfc, or should we just ping like people on this merge.

B

Request, um maybe we can have a look at that merch request that introduced that file originally see if there was any conversation around this approach.

A

Yeah, that's uh that's a good, that's a good idea.

A

This is also update, ide themes, so all right, it was under themesdark before so. Changes update, ide themes, so we want to go to page bundle, ide scss.

A

So, what's what was the file name before dark scss.

A

Themes, oh theme, stock.

A

Okay, okay, so page bundles uh history. When was this introduced, I mean there should be something like with a theme here right at dark themed, support to web ide.

A

Okay, this is the merch request that introduced it.

A

Oh okay, himanshu added this. I don't know if there was like.

B

A

B

B

Yeah, this is the original one yeah like that, one, that one for three months ago that introduced the variables is probably the merge request.

A

Yeah three months ago, 13 0- this is probably like. Okay, let's, let's see button info martin changed value for consistency.

A

Caulk is necessary, variable names.

A

Okay resolved tom quirk.

C

Oops, oh click. Why sorry.

A

Like sometimes in a review right so.

A

Manchu such a satisfying approach see more themes added in the future light.

A

Okay, they don't really discuss the approach, but it's a it's.

B

A

It's a it's it's uh I.

B

Mean it should be non-controversial, I mean it's, it's standard css. We can support it and.

C

A

ah Here paul slaughter: what do you think so we have himanshu paul nathan.

A

Okay, we can link to this issue as being prior art right. Yes, okay, okay, cool cool um yeah. I will update the merge request, ping, you and ping all of the peeps that you know dealt with this before. I also share it in our front-end channels and then I will hand it over to you, because you know impending doom parental leave and.

A

And uh yeah then yeah, you can see it through and yeah all right thanks ip thanks have a good one. See you later. You too bye.