The New Olivero Theme – Awesome to the Core

Matt Kleve: For June 16th, 2022. It's the Lullabot podcast.

[Intro music]

Matt Kleve: Hey everybody! It's a Lullabot podcast. Episode 257 I'm Matt Kleve, a senior developer at Lullabot. And today we're talking Olivero! Olivero, a new default theme for Drupal. And with me talking Drupal and Olivero, we have the people that made it happen. And I've got a few guests with me today. First off, we have a front end developer from AVB digital. He's everyone's favorite alligator wrestler from Gainesville, Florida, the former co-host of the Lullabot podcast, Mike Herchel. Hey, Mike.

Mike Herchel: Hey, Matt. Long time no talk.

Matt Kleve: It's been a while. Glad you're here.

Mike Herchel: Thanks. I'm glad to be here.

Matt Kleve: Second on the list, we have designer at Lullabot who has experience working on everything from mobile apps to websites, including some branding and print work. She's taken on that experience at Lullabot, working with big clients such as MSNBC, This Old House, IBM, and many, many more. From Buffalo, New York, we have associate design director, Jen Witkowski. Hi, Jen.

Jen Witowski: Hi. How are you? [Laughing]

Matt Kleve: We have the fearless leader of Lullabot's design efforts as well. The bio on his website says he's spent more than a decade designing for the web and interactive applications, but I know that he's been at Lullabot for, like 13 years or something. So over the course of his career, he's led design efforts and produced design and UX consulting for clients like MIT, Time Warner, NBC, Intel, the Grammys, and many, many more. We have Lullabot's Chief Creative Officer from Atlanta, Georgia, Jared Ponchot. Hey, Jared.

Jared Ponchot: Uh yeah, thanks for having me.

Matt Kleve: And we have on board a former science teacher who's been involved with Drupal since 2016. He's been doing a lot of work on Olivero and Claro themes that are now in core. He's my small town brethren from Minster, Ohio, senior front end developer Andy Bloom. Hey, Andy.

Andy Bloom: Hey. How's it going?

Matt Kleve: Glad you're here. So I guess let's jump in! Olivero. How'd this happen? What? What got started? I think we've done a podcast on this before, Mike, haven't we?

Mike Herchel: Yeah, I think we did with Putra.

Matt Kleve: And Putra...

Jared Ponchot: I was going to say, there's a bunch of people involved that aren't here right now, so.

Mike Herchel: Yeah!

Matt Kleve: That's true. I threw a calendar invite at the wall, and whatever stuck is here. So.

Jared Ponchot: Yeah.

Matt Kleve: Thank you.

Jared Ponchot: We should acknowledge lots of people did lots of work.

Matt Kleve: Yes.

Mike Herchel: Yeah, yeah, yeah, yeah, 100%. So this all kind of started in 2019 at Drupal Con Seattle where Putra and I were just kind of hanging out in a hotel lobby, and my memory's a little hazy, but I think we were there with, like, Lauri Eskola, Angie Byron, and maybe Gábor, I don't know. And we ended up, we were just talking and and I asked, hey, is there anyone working on a front end theme? And someone said, no, but you should. And I was like, ha ha ha. Yeah, maybe. And the next morning when we were Putra and I shared a a ride to the airport and we had breakfast and we were talking about it there, and I was like, yeah, we could probably make this happen. And then, of course, I didn't do anything. And then once again, she she reached out to me maybe like a month later, and she said, hey, remember that conversation? We should do it. So at that point I started reaching out to people. I reached out to Jen, who is, like, my most favorite designer, reached out to Jared, reached out to

Jared Ponchot: I won't take that personally, Mike.

Mike Herchel: [Laughter] Yeah. And so we started, like, put kind of kind of just like assembling the team, you know, like one of the like back then I was obviously at Lullabot and and and one of the cool things about being at Lullabot is just you have this, you have access to all these amazing people who could just who could just make things happen. So one one thing that I do very well is I wrangle people I, I like, kind of cajole them into, into doing stuff that they might not want to do. So I, I kind of like flexed that muscle and.

Matt Kleve: That sounds like project manager skills, Mike.

Mike Herchel: It definitely is project manager skills. But but I also hate spreadsheets, which is why I'm still a developer.

Matt Kleve: Okay.

Mike Herchel: So I we we started just to kind of go through the process and the whole the, the process of creating the design was really, really interesting. But like, honestly, I feel like Jen and Jared can maybe pick up the story from here.

Jen Witowski: Yeah. So I think, Mike, you came to to me and was like, hey, can you help design a theme? And I was like, sure. But I realized, like, I had I've worked in themes many, many times. I have never designed a theme before. So I think I had then reached out to Jared and was like, hey, do you want to get involved in this? Because I feel like I needed just a second pair of eyes and some, some experience from somebody else to who was also well versed in, you know, working in themes and working in Drupal. So we can come up with the, the correct way and the right approach for creating this theme. So because there's many intricacies that we came across when we were designing this theme because it could be filled with anything like so.

Mike Herchel: Yeah. Do you want to talk about like the actual process, like the three designs and the stakeholders and all that type of stuff?

Jen Witowski: Sure. So let's see here. I'm kind of like thinking back [laughter].

Mike Herchel: It's so long ago!

Jen Witowski: I know!

Mike Herchel: It's like...

Jared Ponchot: Yeah, I do remember...

Mike Herchel: It's like before the pandemic.

Jen Witowski: Yeah.

Jared Ponchot: I do remember Jen and I saying, how do we design when our stakeholders are, you know, all users of Drupal? That that makes it really difficult to make design decisions. So that was a fun, a fun thing about the process for sure.

Matt Kleve: And if you're building a theme that's in core, it's not only like, hey, you installed Drupal, isn't this pretty? It needs to be functional with everything that is inside of Drupal core already, right?

Mike Herchel: Yeah.

Jared Ponchot: Yeah.

Matt Kleve: So with every module enabled stuff should look right. So it sounds like a big task.

Jared Ponchot: It's asking a chef to come up with a menu and say, please, please make sure that all food is on it.

Matt Kleve: Everybody who walks in the door will be satisfied.

Mike Herchel: That's a good analogy!

Jen Witowski: Yeah.

Matt Kleve: Yeah.

Jen Witowski: Yeah.

Matt Kleve: Wow.

Mike Herchel: So we came up with a list of stakeholders which included people like Dries, Gábor, we had Christina Chumillas, who is a UX maintainer. And we had a, we had a was it like 4 or 5 people and y'all came up with three designs and, and they chose one, and then we and then you iterated on it, right?

Jared Ponchot: We did a little planning before that. We formed that proxy group. And that I think that was key, was we realized before we put stuff in front of the entire community, we need to have people that can serve as representatives of the community from different kinds of perspectives, or who have had a lot of engagement over the years with different community members. And they would help guide, like, how do we want this thing to be? You know what's true about Bartik that needs to stay true about whatever replaces it? What what what do we want to have this one achieve that that wasn't there before we did a Jen, do you remember? It's been a while now. I should have looked this up before coming. We did a spectrum exercise where we had...

Jen Witowski: Yeah.

Jared Ponchot: ...All those stakeholders...

Mike Herchel: Yeah!

Jared Ponchot: ...Kind of map things on a spectrum to try to help guide the direction for things. And I should track that thing down because I'm having a trouble, trouble remembering.

Mike Herchel: It was pretty cool. It was like it was like like a line. And we asked each of the stakeholders between formal and friendly, where on the line, like draw a dot and write a comment.

Jen Witowski: Yeah, it was more just trying to suss out like the visual approach of how we wanted this thing to feel, because it could be super modern, it could be very traditional. And so just we this is a spectrum that we often use with, with clients and stakeholders and trying to figure out like, okay, like, how do you want this theme to look like, what are the key components that this theme should like from a visual standpoint, should it have? So.

Matt Kleve: Well, considering something, Jen, you said the word modern, which kind of spiked my 'hmm' thing because I don't know. I don't know what to call it, I don't know. Anyway, you said modern and [laughter] the one thing I did looking back is I said, well, let's see, I'm sure we had something about Bartik on the podcast. Many, many years ago. And I found a a behind the screens episode with Jen Simmons talking about designing Bartik and getting it into Drupal seven...

Mike Herchel: Oh yeah?

Matt Kleve: From from May of 2010.

Mike Herchel: I want to hear that. Yeah.

Jared Ponchot: When I joined Lullabot, I had a conversation with Jen Simmons, who was in process with like, Bartik was quite a ways along at that point. But I remember yeah, it's and and so anytime you have a design period, whether it's a Drupal theme or anything that can last for a decade it's impressive. And it's also there's no way it's not going to be showing its age, you know.

Matt Kleve: Yeah, yeah. So making it feel modern is great, but it also kind of needs to last the test of time.

Jen Witowski: Yeah. Timeless. Yeah.

Mike Herchel: Yeah.

Jared Ponchot: Yeah, we had the spectrum, I found it, and it's like there was the stakeholder group. It was sort of like more formal than casual in its feel, way more light and bright than dark and impactful. Contemporary, more than traditional. Professional, more so than friendly. Official more, more kind of in the middle between official and approachable is where the where all the the votes lay. And then kind of in the middle with novel versus conservative, which is interesting. Familiar, more than unique. Cool, more than warm. High contrast, more than restrained. And light more than heavy. So that was our, you know, our kind of early guidance to start exploring visual ideas. Yeah, I think we there might have been a little bit more than just that that we did but.

Mike Herchel: Yeah.

Jen Witowski: Well we also created like a component list. So we had a full understanding of like what components we had to account for when we were designing for this so.

Matt Kleve: Well. And also if you're, if you're designing a core theme that is going to run on Drupal 9 or 8 at the time or whatever we were thinking, that also includes views, right? So components can be really like like a long list of things.

Mike Herchel: That's interesting because like Drupal, like you have components, but then again, Drupal only ships with a couple different view modes, you know. So of course we, we styled like teasers and full view modes and stuff and made some default styles. And then like I took some extra care to like go into the views and like, like in between like the different views, I don't know, like subcomponents, you know, like the header, the, the content area, the views. I have like some spacing in there. So it all like, kind of looks good. And Yeah. But

Matt Kleve: So we're talking about these, these ideas, right, that you were on the spectrum of ideas. How does that translate to the screen in the form of an eye of a design like.

Mike Herchel: Yeah, that's a good question. So like so, so like one of the things I was like really concerned with is accessibility, you know, like so so we're naming this thing after Rachel Olivero. Rachel Olivero was a community member that that passed away. She was an accessibility advocate. She was blind. She worked at the National Federation for the blind. And so we thought it would be really appropriate to name this theme after her. And of course, when you're naming a theme after an accessibility advocate, it better well, damn be accessible, you know?

Matt Kleve: Sure.

Mike Herchel: So I ended up doing a lot of like, a lot of mock ups and just static HTML and and. Like running that by accessibility maintainers and things like that. And, and we we got a lot, a lot of the architectural decisions out of the way in static HTML. And that was like really nice because that, you know, you didn't have to muck around with Drupal templates or pre-process. You just write the HTML and and so that was helpful. And then remember it was Florida Drupal Camp maybe 2020 that we actually moved it into contrib theme. Putra, we, Putra and I like had a code sprint down down in, in Florida Drupal camp, and we had a bunch of people helping out to kind of take that static HTML and move it into a theme.

Mike Herchel: And by the end of the code, sprint, like, it kind of looked a little bit like Olivero, but it was Drupal and that was like a really, really big deal. You know, and up until that point, like that static HTML mockup, it sounds easy, but it took like three months of back and forth figuring stuff out. It was a lot, you know, like, there's a lot to go over with the designers and stuff and with the accessibility maintainers and things. So we finally moved it into code. And so at that point, it was a contrib theme. It was obviously not into Drupal Core. And we just started started doing development. You know, we started just doing stuff. And the cool thing about having your own your own contrib project is like, you don't have to always create issues. I would find bugs and just commit directly to the main branch, you know, whatever the branch was eight dot x dot one or whatever. And so we made a whole bunch of rapid progress. Putra was very active back then.

Matt Kleve: You're talking about Putra Bonaccorsi, who's a PM at Lullabot, right? Also was a frontend developer.

Mike Herchel: And an awesome front end developer. She's a PM, but like her front end development skills are are pretty pretty awesome. And we were fixing accessibility issues. We we got a whole bunch done. And it was it was really, really. So that went on for maybe about eight months or so. And then we got into Drupal Core as an experimental theme. And when so Drupal going into Drupal Core, you can have a module or a theme go in as experimental. And what that means is it's like less than perfect. It might not have all the accessibility fixes that are needed. It might not have it might have some bugs, but nothing too critical.

Matt Kleve: But the code is in core and that's like one of the big hurdles.

Mike Herchel: Yeah.

Matt Kleve: And when did that happen?

Mike Herchel: I'd have to look it up, but. But if I were to guess, I would, I would say like maybe like September, October 2020 or something like that. And so that was that was a huge deal. And but what happens when it's in core is you start getting a lot more critical eyes on it. So like, number one, things move a lot slower. But number two, like the people that are looking at the code and looking at this are doing so a lot more critically. So we we found like a lot of bugs and, and like a lot of different stuff in there that that. You know, we eventually resolved and so.

Matt Kleve: Which is kind of the, the, the power of open source that everybody talks about is the eyes on a project. And it sounds like you kind of experienced that when more people end up looking at it. It's it's helpful because people put things together in ways that you weren't expecting. And, hey, look, there's something we can fix.

Mike Herchel: Yeah, a lot of that. And about that time, I guess, is when you got in here, Andy like like we hired a Andy on a at Lullabot, and he ended up kind of coming on to the same project that I was on. So, of course, like in my like...

Matt Kleve: In your people wrangling skills, you said, hey, Andy...

Mike Herchel: Ya my people wrangling I'm like hey...

Mike Herchel: ...since you're here, maybe you could help us out.

Mike Herchel: Yeah. You want to do some? You want to do some work for free?

Andy Bloom: Well. And I may have I may have inadvertently volunteered for that because Mike was also part of the committee that was on my interview.

Mike Herchel: [Laughter].

Andy Bloom: And I mentioned to him during the interview process that I found a bug and posted a patch on an issue for Olivero. So even before I was on, I think Mike had in his head, this guy's doing my grunt work.

Jen Witowski: Hell yeah. Yeah, yeah.

Matt Kleve: Was that your move to look good during your interview? Like it.

Andy Bloom: It absolutely was. It was also my first core commit. So that was fun.

Matt Kleve: That's that's very cool. Had any y'all worked on core stuff before? Andy, it sounds like you were pretty new to it.

Mike Herchel: I had a commit, like I had like 1 or 2 core commits, but they were all for, like, super minor things, you know, so you could easily argue the answer for me is no, even though I technically had some core commits, but I wasn't like I wasn't super active like I am now.

Matt Kleve: Jen? Jared?

Jen Witowski: No. [Laughter]

Jared Ponchot: Yeah. You know, I've I had done a little bit of work a couple of years ago providing some ideas. This was during like the, I want to say, the Drupal seven admin theme days around improvements to content creation interfaces.

Matt Kleve: Drupal seven just a couple of years ago. Right? [Laughter].

Jared Ponchot: Yeah.

Matt Kleve: Oh, boy.

Jared Ponchot: Yep.

Matt Kleve: I kind of remember that. So, yeah. Content creation. So these are kind of ideas that maybe you had some experience looking at in consideration that, you know, lots of people need to use it in many different ways and.

Jared Ponchot: Yeah.

Matt Kleve: Cool.

Mike Herchel: So like we we're iterating, we're doing a lot of work. And one of the things that that I want to like call out that, that I, that I feel like I did really well and this kind of goes into my once again, the people wrangling skills. The one core committer that was doing most of the work was Lauri Eskola. And you know, so so he would he would look at our patches and there's only like, for all of all of the listeners who might not know this, there's probably like maybe like 15 or odd people in the world who have the authority to commit to Drupal core, you know, so basically, like someone like me or someone like, you know, anyone else has to write a patch or now a merge request, and then it has to go through a review process. And then the last step in the review process is that core commit or someone like Lauri to commit the stuff, right? So what I did was I wrangled him, you know, like I'm like, hey when can you can we just hop on a zoom call every. Or like, when can we hop on a zoom call, you know, for 2 to 3 hours, right? And so he would say, well, I can't do it till the 23rd, you know, and I can do I can give you two hours then and I'd be like, alright. And I would send out a, I would send out a, a calendar invite. And then what I would do, what I would and I still do this is I basically just get a list of issues and RTBC, you know, which is Reviewed and Tested By the Community, kind of ready for him to look at.

Mike Herchel: And I say, these are the ones I want. These are the priorities for me. I want you to go through these, you know, and then it's really valuable because a lot of times he'll have questions and he'll say, like, well, have you thought about this? And then my answer is like, yeah, I can't do this because of XYZ. And then he's like, well, can you just leave a comment? And so I'll leave a comment. So that's documented. And that verbal exchange right there literally probably shaved off like a week, you know, because to do this stuff asynchronously can take a long time when you're just waiting for someone else to respond or, you know, or things like that and or there'll be like, well, have you thought of this? And I'd be like, I really haven't, but no one's ever going to do that. Let's create a follow up issue. And he's like, okay, create a follow up issue. And so we would we probably like started averaging like maybe having like we call them mini sprints. We would do like a two hour mini sprint every every other week, you know, sometimes every month or something like that depending on our, each of our availabilities. And it was like it was really good because it was time that we could dedicate, you know, and there would also be times where I could say, like, what do you think about this approach? What, what do you think about this approach? And and and we got stuff in fairly quickly and and I'm honestly I think that was pretty cool.

Matt Kleve: So then a few months ago the final commit happened that made it the default theme, right? And that happened at Drupal Con.

Mike Herchel: Before that...

Matt Kleve: Oh I know, I'm trying to move on.

Mike Herchel: It had to go, it had to go to stable.

Matt Kleve: Okay. So it had to go stable. Go ahead.

Mike Herchel: It had to go stable, right?

Matt Kleve: What does that mean?

Mike Herchel: It was it was still experimental.

Matt Kleve: Okay.

Mike Herchel: And there was a number of, like, accessibility bugs and code style bugs and, you know, real bugs and and things like that, that we had to we had to resolve. So like each of those were documented, had an issue. And like people like Andy and, and lots of other people all throughout the world would work on these, and I would do a lot of review and I would work on some too. And then we would, we would, we would get Lauri to commit these during the mini sprints. So there was a point where we're like, we're all done with our stable things, you know? And so we were able to make it make it stable. And that involved just like kind of removing like a little line from the info.yml line, info.yml file that said, it's experimental. And at that point we were stable. But it still wasn't the default theme, right?

Matt Kleve: Mm-hmm.

Mike Herchel: So obviously like like that's the next step. And man, this is a whole story. I feel like, yeah, I feel like.

Jared Ponchot: Tomorrow will come back and Mike is just still going.

Jen Witowski: Yeah![Laughter]

Mike Herchel: I know, I know.

Matt Kleve: So one thing I'm thinking about is, as I see our, our, our two designers are sitting here. So, Mike, it sounds like there's, there was a really long process of iteration. Did did we have the same process with designs throughout the, the timeline or, or how did that end up working?

Jen Witowski: So with with the design. What ended up happening is we came up with basically three different zoom mocks, and zoom mocks are basically it's kind of like a way of approaching design like a style tile.

Matt Kleve: The word you're saying is a zoom mock? Like the...

Jen Witowski: Zoom mock, yeah.

Matt Kleve: Zoom mock.

Jen Witowski: Yeah. We call them zoom mocks. Yeah. And so what we do is we basically take a component or a series of components, for example, like we'll mostly focus on like a high priority page, like a home page. And we'll do like, navigation and like a hero area. And we'll design like three different visual choices for that. So we'll do one that's based on the spectrum. We'll do one that's a bit more on the super contemporary, one that's a little bit more traditional, and then maybe one that falls in the middle. And then what we did is we put those in front of our proxy group, we got a lot of feedback, and they basically picked one and we just kind of moved forward with that, with the idea that it would evolve and change as we start building out the rest of the page types that we needed. And I don't think we heard too much feedback besides when it came to accessibility. So, you know, we were really stringent with accessibility. We had a lot of stakeholders giving us feedback on accessibility. And so we'd modify our designs and color choices based on some of that feedback that we're getting, so.

Mike Herchel: Yeah, yeah.

Jared Ponchot: Yeah, Jen did a lot of work with back and forth that happened and would ping me fairly regularly to ask me [laughter]. Jen did a lot of work on the iteration to get to where we solved for that, because the visual direction was very like light and bright high contrast, it meant that it was fairly easy to have like 99% of it, like just it was going to not have issues. But there was there was a lot of little things, little details that emerge, like things like label designs that were designed for, you know. You know, this is how a share link will present and it says share. And it's and it's like a heading style that's all caps. And it's like, well, but that heading style could wind up being used for these other places where the CMS will allow them to put in whatever they want, and therefore it could be multi-word. And you can't hit accessibility with all caps if it's more than so many characters or words. And so there was a lot of that kind of stuff that was like, oh, we didn't even think about that, so.

Jen Witowski: Yeah, yeah.

Mike Herchel: So yeah, we had to account for things like right to left languages, you know? So like a right to left language is something like Arabic and, you know, English obviously most Western languages, you start on the left and then you kind of read toward the right. And obviously that's opposite. So, so we had to we had to make sure that the designs corresponded with that. We had to take that, all of that into account, you know, which is which was the first time I ever did a right right to left anything, really.

Jared Ponchot: Thankfully, we didn't have to do bottom to top languages.

[Laughter]

Mike Herchel: I know, right? I uh, yeah.

Matt Kleve: That has to be interesting to consider design wise with the right to left language too, because a lot of things that we're thinking about, you know, laying things out for a website are probably most Americans are locked into considering that the left is the beginning and right is the end.

Jared Ponchot: And our the whole design for Olivero is also like very like one of the ways it achieves, like a very modern contemporary feel is that it's very like intentional with its alignment choices. So it is very like left anchored. There's nothing that naturally centers in it. There's almost no centering anywhere that I can think of that happens in Olivero, and therefore it does make a complete flip flop of the entire way it works when you go right to left.

Matt Kleve: So back in the old days when I used to know about this kind of thing. So is there a right to left style sheet that gets used when you're using language? No?

Mike Herchel: So so we. Man, this is...

Andy Bloom: That's going to depend. Are you looking at Drupal nine or Drupal ten now?

Matt Kleve: Oh my goodness, it's different?

Mike Herchel: Well it's a little different because...

Matt Kleve: I didn't realize I was opening up a can of worms by...

Mike Herchel: Yeah.

Matt Kleve: ...Something I heard about 15 years ago or whatever. Yeah.

Andy Bloom: In Drupal nine we're still supporting Internet Explorer 11. And with that, you do have to scope some of your styles with a a dir attribute RTL. And that says for this style, as long as it's, it's within some element that dictates its, its writing direction is right to left, then you have to flip flop the styles. Drupal ten, you don't have to support IE11 anymore. And so we can start looking at CSS logical properties, which is neat because you can start to remove directional terms like left and right from your code instead of talking about, you know, padding-left, margin-top, we can use terms like padding-inline-start, so that's the start of the the writing direction. And so if that's in a left to right language like English, that's padding-left. And if you're switching to Hebrew or Arabic or some other right to left language, that's padding-right. And if you switch the writing direction to vertical and puts it at padding-top. And so your CSS property, if you use these logical properties which are new ish that lets you kind of just breeze past that and not really have to consider, well, is this in the left or right version or the right to left version? It just says, we're just going to anchor this in the direction of the language at the start of the line.

Mike Herchel: Yeah. So I have an idea, right?

Matt Kleve: And the language, hang on. The language is a part of the doctype or how does how do we know which language you're using?

Andy Bloom: That's a great question. I it's part of the the browser's navigator thing, I believe. Is that correct, Mike?

Matt Kleve: Technical terms.

Mike Herchel: To tell you the truth, I don't know, but the, but the browser knows what language it has.

Matt Kleve: Okay.

Mike Herchel: And and the browser will will say like well well no no no. The. Yeah that's a really good question. Matt, I don't know. [Laughter].

Jared Ponchot: The browser knows.

Mike Herchel: Yeah.

Jared Ponchot: We'll just go with that.

Matt Kleve: Google knows everything. So Chrome probably does too. Yeah.

Mike Herchel: Yeah. It's has something to do with the rootkit that Google installed on my computer.

Andy Bloom: I think. I think the browser just knows based on the language that it is it is working in.

Mike Herchel: Yeah, that makes sense.

Andy Bloom: And the browser, the browser can pull the language that's operating in based on the operating system. So, you know, if when we're talking about like light mode versus dark mode, that's actually an operating system setting that the browser knows about.

Mike Herchel: Aslo the web, and the website knows what language it's on obviously too, right? So like if you're if you have a language switcher and you go between English and Arabic, like...

Andy Bloom: Right. But you can also there is also the writing-mode CSS property, which you could set globally at one level, and then all of those styles can flip.

Mike Herchel: Yeah, maybe there's a user agent style sheet for the different like Lang attri- I don't know. Yeah, the browser knows.

Matt Kleve: Okay. Fair enough. Didn't didn't mean to open the open the can of worms.

Mike Herchel: Way to go Matt.

Matt Kleve: It's wild to think about all of these things that you don't usually end up thinking about, right.

Mike Herchel: So yeah. So there's so much but I so I want to continue the story about becoming default because I think that's pretty cool.

Matt Kleve: And this this is this happened at Drupal Con in Portland.

Mike Herchel: Yeah. And then like like.

Matt Kleve: This year.

Mike Herchel: Yeah, I after all this like maybe after the break or whatever, we can talk about some of the features and cool stuff that we did.

Matt Kleve: Okay. Yeah, absolutely. Yeah, I totally I totally do want to get into, like, what Olivero is.

Mike Herchel: Oh, man. There's so many cool things. All right. But but like the story. Like, while it's fresh in my head, right. Okay, so to recap for our listeners, we're stable, but we're not yet the default. So in my so, so going out to Drupal Con Portland and so Lauri Eskola, he and I were, were roommates together out there. And I came in one night and he said like, I was I was coming in late, and he's like, Mike, we got Claro to be the default admin team. And we high fived and I'm like, whoa! You know, and I'm in my head, I'm thinking, oh, I wonder if he could do Olivero, you know? So the next day I was talking with with, with Gábor and, and Lauri and they said, yeah, we should totally try to do this because we should try to see if we can make this to be the default theme. Right? And right then. And this is this is once again, how how I'm good with kind of wrangling people, Joe Shindelar comes around.

Matt Kleve: Joe Shindelar from the Drupalize.me team, right?

Mike Herchel: Yep yep yep. Joe Shindelar from Drupalize.me he's famous in all the videos.

Matt Kleve: Although I keep coming up with the wrong name for their company, it should be.

Mike Herchel: Osio Labs.

Matt Kleve: Osio Labs. There we go.

Mike Herchel: But they're all known as Drupalize.me.

Matt Kleve: Yep.

Mike Herchel: So like all the work that needs to be done, like, there are a whole bunch of automated tests that expect Bartik to exist.

Matt Kleve: And if it's in core, then you need tests for sure.

Mike Herchel: Yeah, yeah, yeah, yeah. So basically all these tests need to be updated to look for Olivero's markup. And then there was like a bunch of weird crap that hadn't been touched in like ten years that needed to be like adjusted, fixed and all that type of stuff. So I'm like, hey, Joe, you know php. And he's like, what? And I'm like, hey, have a seat. And so he started, of course, working on it. And he was like a machine. He is a he is a really smart person. He just started like banging it out. And there was that at one point I'm like, hey, man, do you know what you're doing? He's like, yeah, yeah, yeah go away. And so I'm like, all right, all right. And and so he starts like working on working on the merge request to get this done and ends up knocking out a number of, of, of different issues or different different test failures, right? But it's still failing and and so we come back the next day and, and we're like so close but like Drupal core like if y'all if you've ever done core development Drupal core at least, I don't know, maybe in the past year has had these random test failures. And there's something with the JavaScript and, and we're trying to figure it out and, and and so we're getting these random test failures in, in addition to our legitimate test failures, right? So we're trying to fix all of these at the same time, and then Gábor has the idea of like, hey, there's trivia night tonight. This is the Thursday of Drupal Con. Like, hey, maybe we can do a live commit to make Drupal the default for like, prior to trivia. And I'm like, heck yeah. Like like, let's do this, you know? So anyway, so Joe gets nine, Joe and and Lauri get 9.4 basically kind of going, you know, and but but we still don't have the ten dot the Drupal ten patch going yet and, and which needs to happen separately because there's so much there's already a lot of difference between Drupal ten and Drupal nine. And, and so finally Gábor says, well, we can just do the the, the Drupal nine patch and then we'll get to the Drupal ten patch when we do it, right? So trivia night comes and, and I get up in front of everybody and, and and we, we end up I ended up texting everybody on this phone call except for you, Matt, because you're not cool. I'm just kidding.

Matt Kleve: Yep. That's fair.

Mike Herchel: But I get everybody, and I. We all hop in on the zoom, and and I'm like, alright, we're going to do a live commit, and I, I don't know, I, I, I had a couple beers and so I was like, hey, yeah, we I talked a little bit about Olivero, and then we we did a countdown, like ten, nine, eight, seven, six, you know, however that goes.

Matt Kleve: Four, three, two, one. Yeah.

Mike Herchel: Thank you. And and then, you know, Lauri hits enter and and then it's done. And and that was super cool. And then later the 10.0 patches passed and and so later in the night, in the middle of trivia night, I got to hit enter on, on Lauri's computer. Well, for the 10.0 that patch. And at that point, it was done. It was like it was the default theme for Drupal Core. And that was so, so cool. And and it was funny because that was almost like maybe two years, like right after right after Drupal Con Seattle too.

Matt Kleve: Well, Mike, the odds are good that I was near you that that Drupal Con Seattle When you had that conversation, I chose I chose to walk away because I knew what a time suck it would be. But congratulations for for getting this far. After the break, we're going to talk a little bit about Olivero specifically like what it is and what you should expect to see and some really cool features it might have coming up right after this.

[Intro music]

Matt Kleve: Welcome back. You're listening to the Lullabot podcast. We're talking about Olivero, which is the new default theme in Drupal. Drupal both eight and nine. So.

Mike Herchel: Drupal nine and ten.

Matt Kleve: Oh god, yeah, you're absolutely right.

Andy Bloom: What year is it?

Matt Kleve: Well, Drupal seven was a couple of years ago earlier, so I'm glad.

Mike Herchel: Yeah. Something like that.

Matt Kleve: I'm glad that I'm not the only one. So a lot of people involved in this process worked at Lullabot. Was this, like some, like, Lullabot scheme to to make Drupal design better or how did that end up happening? Is this something Lullabot said, hey, get to work, Mike. We need.

Mike Herchel: No, no, this was this was a little bit organic. But that being said, like, once I kind of started wrangling people and started talking to people. The Lullabot leadership was like 110% behind it, you know, and, and and kind of helped out. Lullabot, like, once again, I'm no longer at Lullabot, but Lullabot gives you, like what, like a quarter of your time for things other than client work. So that could be things like contribution, but also like meetings and logging your time and stuff like that. So we were able to use use that time. And to be honest, I probably put a little bit extra in there to kind of do this.

Matt Kleve: Yeah okay. Very good. So Mike, I saw a blog post or yeah, that you had written kind of talking about all of the cool Olivero things. And when I sit down and I look at Olivero, one thing that comes out to me is the menu.

Mike Herchel: Yeah.

Matt Kleve: It's it's it's pretty interesting that, like, slides away. It has a hamburger status, there's some dropdowns, there's a lot of stuff going on there.

Mike Herchel: There is a lot of stuff going on with the menu and it doesn't look complicated. I gave a talk on this at at a couple conferences, including Drupal Con Portland and so, so there's a couple things that happen, like at, like, like I want to be clear, like menus are complicated in general. Like whenever you have a menu like number one, people, this is what people use to navigate at the website. It needs to be usable. It needs to be accessible. But whenever you create a menu, you're not creating one one menu. You're typically creating multiple menus. You're creating a mobile menu and and the desktop menus. And you're typically using the same markup, you know? So it gets like, really complicated, really, really fast. The Olivero's menu also has that slide away function, which I guess isn't like so much to the menu, it's to the header. But Olivero, like as you scroll down the page, the like, if you're at wider widths, the entire menu will kind of slide off to the left. And and then if you scroll up, it'll come back. But when it slides off, it kind of like exposes like a little hamburger button. So you can kind of like you can plop the menu back open or something like that if you want to. On top of that, like Olivero supports multiple levels of navigation, like so like you have the primary like Bartik supported one, one level of navigation, you know, so if you want drop down menus, you're kind of SOL with Bartik, but with with Olivero, we supported that.

Mike Herchel: And it got complicated really quick because to make accessible, drop down, second level navigations to make them widely, widely accessible is a lot more complicated than it should be, honestly. Like, for example when you have a drop down button, but your parent menu is a link, we have to we use twig to inject a button to the right of the link that you can click on, or you can navigate with a keyboard that will then toggle the visibility to the submenu. But we still want it to activate on hover. So we have a hover menu on the whole the whole list item that will that will activate it. But what happens if you hover and immediately click then it'll kind of go away. We had to deal with that. And then we have to. It involves like a lot of a lot of weird JavaScript. We have to do a lot of things like setting Aria attributes on the buttons, you know, like like for example, on on any button that controls the submenu, we, we set the Aria expanded attribute, and then we also set Aria controls and and that can get pretty complicated even though you're just toggling a couple things because like in because we need to make sure it's not propagating down the menu. That's an issue I think that you actually fixed Andy, if you remember that where there was the Aria controls was like if there were third level menus, which we don't really support, it was breaking everything and busting our JavaScript, and we had to fix that.

Andy Bloom: Yep.

Matt Kleve: So, so from core by itself, you have a second level menu that's, that's okie dokie. And you can use the Drupal menu administration stuff and just like, indent it and stuff just works?

Mike Herchel: Yeah. And it'll just work.

Matt Kleve: That's awesome.

Mike Herchel: We also do...

Andy Bloom: To, to an extent, right? I mean, one of the things that we had to do was we had to say, you know, at some point, what is a reasonable level where we can cut off and what do we what is it? Two one level of sub navigation or two?

Mike Herchel: It'll support all of them, but it'll just look like crap.

Andy Bloom: It starts, it indents them, and the little drop down piece has a certain width. And so at a certain point you start getting kind of just one character per line and you get a really tall thing. But you know, it's, it's it's a one size fits all solution that, that we had to implement here.

Matt Kleve: And if somebody wanted to add their own CSS to make it better for them in their own specific thing, like it's totally doable, right?

Mike Herchel: Well, yeah. So like we don't officially support sub theming, but I'm, I'm totally I totally sub theming like on my own personal website which is still on dev. I actually name my sub theme. I called it dont underscore subtheme underscore olivero.

Matt Kleve: Why don't you support subthemes? What's the deal there?

Mike Herchel: Yeah, that's a really good question. So as soon as you officially support sub theming, you have like your, your markup is, is actually like an API. So like image...

Andy Bloom: You have to commit to the backwards compatibility of everything that's there. And so if...

Matt Kleve: Ah, because somebody might be using it.

Andy Bloom: ...You wanted to add something new.

Matt Kleve: Okay.

Andy Bloom: For example, if you think about Bartik, if you when you start doing a view and a grid mode, right, all of the markup is not it's not using CSS grid. It's actually doing a whole bunch of individual little divs that are all are they floated, I think, Mike, or is it a table?

Mike Herchel: There's wrapper divs for each row.

Andy Bloom: There's just all kinds of extra wrappers.

Mike Herchel: And then they're floated in there. Yeah.

Andy Bloom: And and you know, there might have been a boatload of issues that say, hey, let's update this to use flexbox or CSS grid or something modern, but you can't because as soon as you support sub theming, if somebody wants sub themed of of Bartik back in, you know, 2010 before CSS grid existed and you start changing everything in Bartik, you're going to inherit all those changes. And now you've broken all of these people's sites that are relying on it to stay to to stay the same.

Mike Herchel: Yeah. So so long story short, we we say don't subtheme Olivero, even though there's nothing like that will stop you except for, like, a code comment. So you're asking, like, the listeners are probably asking yourself, well, what am I supposed to do? With Drupal ten, there's a new theme generation tool like right now, you can run it like, I think it's like if you run like PHP generate theme, I forget what the actual command is. Right now you can't like generate an Olivero based theme, but that's coming. And hopefully that'll be there for 10 dot, 10.0.0. And so, so basically you'll be able to generate a copy of Olivero, call it whatever you want, and at that point you can start modifying it however you want. And it has no dependencies to the actual theme. So I can so like, you know, a year down the line, say we want to start using like a new CSS feature like container queries. That's not going to affect you or potentially break your site.

Matt Kleve: So really it's just kind of a fork of Olivero that is your own theme, which is kind of the way I used to run themes anyway, when I had to run themes, right? It's my theme. It's going to be what I want it to be and nobody else cares about it. So that makes sense.

Mike Herchel: Yeah. That's pretty much it. So anyways, so back to the menus though, because the menus do a lot.

Matt Kleve: Absolutely. And I would love to hear from from Jen and Jared real quick. Any what was the the motivation there or the, the thoughts behind putting that menu system together and making it work as well as it does.

Mike Herchel: And talk about the always on menu too, always on mobile menu.

Jared Ponchot: The. Well, I can say one, one thing from our early planning that I forgot to mention was we we established like very simple set of design principles out of that early planning work as well. And those were simple, modern, focused and flexible. And the part of the way we described modern was taking advantage of capabilities that are in browsers now that maybe weren't there back when Bartik. Like, we want people to, we want this theme to feel like a like it's made for modern browsers. And so we wanted to find ways to to do that. And one way was to, to think about, well, how could we make it easier to access the navigation regardless of where you are on a site? And so and so the I think what you're referring to, Mike, the always on menu, was an idea that came out of that of like a way to have the menu or the, the header of your site kind of collapse away into this nice little thing that's just always there on the left as you're moving through the site, unless you reopen it, no matter whether you're way down a page or whatnot. So I you know, that I think a lot of the modern concepts, you know, it's always difficult to what is modern design? It's ike right now brutalism is super trendy. So it's like the you there is no such thing as, like always, modern design, so to speak. But we, you know, we focused more on keep it simple, make sure it's focused. And focused is kind of where the whole high contrast like bold make, make, make the important things really easy and big and easy to read and make the, the less important things scale back and that kind of stuff. And the, the modern really was like finding ways to do things that maybe aren't as common and create really fun things for Mike and others to figure out how to do. So, I don't know, Jen, did you have other thoughts?

Jen Witowski: Yeah. So I think one of the challenges that we had run across, too, from a design perspective, is like this menu could hold a X number of items. So like really it looks great with only five nav items, but anybody can add like 12 or 15 in there. And what happens when they actually do that? And so we had tried to come up with a solution with that. Like if you hit a certain number of nav items and it's at a certain width, it collapses into the, the mobile nav. I think another thing that we that we worked closely with, with Mike on is accessibility with navigation. So specifically with like focus states, dropdowns, so like having the carrot next to the dropdown and what is clickable versus what is hover. Those were all like interactive states that we had worked on with Mike to make it a fully accessible. So.

Andy Bloom: And speaking of carrots, Mike.

[Laughter]

Jared Ponchot: Yeah.

Mike Herchel: Yes? [Laughter].

Andy Bloom: Mike. For for those who are listening, and this will probably be a future Drupal Con trivia night fact. Mike got the second ever emoji into the Drupal CSS code base. Because he misspelled...

Mike Herchel: As a class selector too.

Andy Bloom: It's the carrot class selector, it's using the carrot emoji. Even though carrot there is not the same thing as the vegetable carrot. And that was something that Mike learned during code review.

Jared Ponchot: That's awesome.

Matt Kleve: What was the first emoji? I'm not familiar with that.

Andy Bloom: That's a great question. I don't actually know.

Mike Herchel: No, no, I think that was mine also. I think it was a was it a puke emoji or something? There was like some horrible IE11 hack. And so...

Andy Bloom: I think it was a z-index issue?

Mike Herchel: Yeah. And so I literally wrote like probably like a, a six line...

Andy Bloom: It's like a dissertation in a CSS code comment.

Mike Herchel: ...Comment, yeah. To indicate like what needed to be done. And then at the end of it I put a puke emoji. And uh...

Andy Bloom: But the carrot is actually part of the code base. And if you open up your dev tools in Olivero, you can see the carrot emoji in your in your inspector.

Mike Herchel: Yeah. It's a little triangle on the, on the wide menu. Yeah. You can you can go in there. So so so one other thing that the that Jen and Jared designed is they, they designed an always an option for an always on mobile menu. So like let's say that at the end user or the site builder, whatever puts in like 27 different menu items, they can check a box that says always use the mobile menu. And at that point the mobile menu can accommodate, you know, as many, as many menu items as you want. And I'm pretty proud of that. And then recently we actually did something like really, really cool. And I think, Andy, you reviewed this patch for me, but I ended up adding some JavaScript in there. And the JavaScript will will detect is like, as soon as you get so many menu items that it start that that that's about to wrap at that point, it will, it will transition into the mobile menu too. And that's really, really useful for like, let's say like you have a large number of menu items, but at wide widths, the, you know, they look okay, but maybe you didn't check medium widths and then it, you know, you don't want it to wrap and look all weird. So at that point it will transition to the mobile menu right when it needs to. And I think that's a pretty, pretty neat piece of JavaScript that, that we added. So I'm proud of that.

Matt Kleve: Mike I want to know more about the colors.

Mike Herchel: Yeah.

Matt Kleve: So essentially you've replaced color module kinda? Right?

Mike Herchel: Yeah. Well, when you say me. Andy did did pretty much all the work. I did a lot of review of that. But Andy, do you want to talk about that? And if you talk about that, talk about like how we have our how we have our CSS variables and like all that type of stuff too.

Andy Bloom: Yeah. So one of the, one of the things that we got to do in the move from Drupal nine to Drupal ten was drop support for Internet Explorer 11 and all versions, but 11 specifically. And so it let us use some more modern CSS. One of the things being CSS custom properties or what people will often refer to as CSS variables. And one of the things that we got to do with that then was instead of putting all of our, our colors and design tokens into sass variables that then get hardcoded back into hex values back into regular CSS, we could keep everything as a variable in the CSS that gets delivered to the browser. And the cool part about that is then you can take those, and you can combine them and construct colors in different color formats like RGB or HSL. And so if we change individual values of each of those, we can then modify the hue, the saturation, the lightness of each color. So what we ended up doing was part of the first thing we had to do was move all of our colors to we renamed them from being color dash blue dash ten. You know, whatever the lightness value was to be in color primary. And then from there we could start reconstructing those colors based on individual hue, saturation and lightness values, starting with the the blues that we got from the designs from from Jen and Jared.

Andy Bloom: And so kind of breaking those down from the blue hex value to an HSL value and then start looking at if we were to start changing these, how could we, how could we do that and maintain, you know, kind of the color scale. Because if you look at if you look at Oliveiro in the top left corner of all the pages, you have kind of that header, logo, brand block thing, and there's a gradient on a color. And so what we can do is we can say if we start modifying that, can we maintain that kind of look and feel of that gradient but with different colors? Does it still work if we change the blue to a green, does it still work? If we change the blue to a lighter blue or to a darker blue? Or does it just start capping out at white or black? And so what we ended up doing was we put a new theme setting in in the appearance section of the admin pages, where users can change the, you know, the kind of the root color from, from the blue that we have. And we put in some presets but they can just pick whatever color they want to, and then all of the other instances of that color will, will adjust to be lighter, where the blue was lighter to be darker where the blue was darker and to be whatever hue you know, they chose.

Matt Kleve: So real quick, Andy because I have nice people who I work with, like you, I haven't been in this world. How is that actually happening? Css variables that exist now, where do the variables get set? Is it set? Is it another style sheet that then Drupal generates or how does that actually work?

Andy Bloom: So the the CSS variables, you can put a CSS variable wherever you want to and just like any other property because. So you know, we use the term CSS variables because that's how we like to think of them. But what they really are is custom properties is you can set any property you want to prefixed with two dashes. And so we can do dash dash primary dash color. And then we set that and then it gets inherited like any other CSS property up and down the the.

Matt Kleve: Okay.

Andy Bloom: The DOM. And so it's just it just sits alongside all of your other styles. And then anywhere that we want to use the colors, we can use those specific colors. And then so what we've done is instead of having a specific blue that we picked, we say, what's the hue value of that blue. What's the lightness value of that blue. And what's the saturation value of that blue. And then we can modify that because it's just a number. And so you can multiply it. You can divide it, you can add it, you can subtract it. And so we're we're scaling those values either to be lighter or more saturated or a slightly different hue, or we're making them darker or less saturated or a different hue in the other direction.

Matt Kleve: And you're doing all this math to keep Accessibility as far as contrast is concerned. Correct? Or how?

Andy Bloom: The math is mainly to maintain the look and feel. If you pick a super light yellow.

Jared Ponchot: Yeah.

Andy Bloom: You're going to still run into issues with white text on a light yellow.

Matt Kleve: Yeah.

Andy Bloom: So it when you, when you start modifying the color that way, you do need to be aware of the accessibility implications. But the, the blue that we have in there and the presets are, are all accessible. But if you start picking your own colors, you're, you're on your own.

Jared Ponchot: It was really...

Matt Kleve: I wanted to add...

Jared Ponchot: I was going to say I, I went into this and there's no good way to automate those choices because, like, you could definitely do programmatically, you know, I'm sure come up with a way to ensure that the color someone selects, like, you know, has a accessible contrast ratio against white or black or whatever the color is, it's going to be on it. That's doable. The problem is like if like someone's brand color is a yellow, for example, the exact same saturation and lightness values of yellow versus blue. You know, just the hue shift on that will lead to a radically different contrast ratio. And by the time you adjust the lightness in an HSL variation of of your color to get the same contrast ratio, it will no longer look very yellow to the eye like so.

Andy Bloom: Because you have light green, you have dark green, and then you have light yellow and you have brown.

Jared Ponchot: Right, exactly.

Mike Herchel: I wanted to add in there that yes, like how we got the CSS in there and he I think the CSS is injected with an inline style on the body tag.

Matt Kleve: I gotcha. Okay.

Mike Herchel: Yeah. Yeah. I also want to add that this stuff is going to come become a lot easier, like some of the issues that you were just talking about with colors because some of the browsers have have new new color functions that they're going to come out with. And there's also a new contrast function that can like select, you know, different contrast ratios that are different colors based on the contrast ratios and stuff like that. That's going to be native to CSS, but all that stuff's in the future. So but when that does come out, I totally want to do that in Olivero, because I think that's going to be really cool.

Matt Kleve: Exciting times.

Mike Herchel: Yeah, it really it really is. Honestly.

Matt Kleve: What's what's next on the list we want to mention about the Olivero features.

Mike Herchel: Man, you know, we need some designers to design a dark mode. Does anybody know anyone for? [Laughter]

Matt Kleve: And Andy you were saying that that's actually that's an OS setting whether you're on dark mode or not. And the browser can know whether you're on dark mode or not? And serve the right version of the website?

Andy Bloom: Yeah. A lot of the things that we a lot of the things that we look at now for, for media queries, you know, people will talk about media queries being being mainly what's, what's the width of the screen? And that's one thing that you can do.

Sorry that's that's the normal one, right? Yeah. Yeah.

Andy Bloom: Right. But there's other ones you can do so you know, prefers high contrast. If you if you set your operating system to run at high contrast, whether that's on your phone or your iPad or your, your desktop PC. If you set that, the browser knows about that, the website doesn't, but the browser knows about that because it's running on your machine and it can say, hey, this person prefers this. And if there are styles that are meant to respect that, we can run those. Same thing with you can reduce animation. And so the, the Olivero header slides in, slides out, and we can set that to say, hey, if they don't want animation, we can just make that set static and just appear and disappear. For anybody who, who may have vestibular disorders I'm trying to think of other settings that we can we can see in respect. Mike, do you... One of them is the, the light mode/dark mode.

Mike Herchel: Yeah. Like I think you already talked...

Andy Bloom: What's the one with the media query?

Mike Herchel: Force colors is what you're thinking of?

Andy Bloom: No no no no no the...

Mike Herchel: The, there's also like things like touch size or pointer size or something like that. And I think we might be using that maybe one place where you can say like pointer course or something like that. There's all types of media queries that people don't...

Andy Bloom: Prefers color scheme was the one I was thinking of.

Mike Herchel: Yeah yeah yeah. Prefers color scheme.

Matt Kleve: It sounds like this is a lot of future work. That is kind of also left to do if, if you can get to that. And it's we earlier talked about how you couldn't or you shouldn't subtheme Olivero. And that helps you able to like add more features along the way, right?

Mike Herchel: Yeah.

Matt Kleve: So this is this is kind of the plan is to keep doing stuff.

Mike Herchel: Yeah, yeah. We want to keep Olivero modern. We want to keep on adding new features. One of the things that we've been talking about is like having a cool design for the language switcher, you know, and, and Jen and I have been working on that. Honestly, we've we haven't, like, really given a heck of a lot of work because we've been doing we've been making it default and we've been like doing things like the color switching, which you know, but but I think language like having a cool design for a language switcher is coming up pretty soon. I like the idea of doing a dark mode like, you know, like supporting modern, modern CSS like as we can. I feel like like that's a that's a big thing. And something that I'm also excited about is and this is a little bit outside of Olivero, but like taking some of these like CSS modernization stuff that is in Olivero and start applying that to the rest of Drupal core's code base you know, like for example, like there's a new like I talked about the theme generator before? The theme generator by default will generate what's called, will use what's called the starter kit theme, which is basically a copy of stark. You know, stark being like, the most basic theme theme ever without any styles.

Matt Kleve: It's enough of a theme so that you have a theme, but there's not really much there, right? Yeah.

Mike Herchel: Yeah. But like, you know, we talked about this menu system and like accessible menu systems are really hard. How cool would it be to get like the accessible menu system within that starter kit theme and just have it basic, have it, don't have it look good, but have the JavaScript written have maybe, you know, have it have the mobile stuff just kind of working, you know, and and looking very basic. And then people can apply their own styles to it. Like I think that would be like really, really neat.

Matt Kleve: Great. Well, I think we need to maybe go around the horn and then wrap up. Unless anyone has anything else we need to jump in with right now.

Mike Herchel: I got a million things, but I don't know if we have time.

[Laughter]

Jared Ponchot: This will be a five part series.

Jen Witowski: Yes.

Jared Ponchot: Yeah.

Matt Kleve: No doubt. Yeah. So, Jared anything that you wanted to point out about Olivero that we haven't gotten to or anything about the process or the design, or that you just kind of wanted to point out, as we point toward wrapping up.

Jared Ponchot: I think it was fun to work on and really interesting. And like I said, the whole like, you know, designing, designing like designing a recipe where it'll be good no matter how much cumin they put in, is like the, the, the challenges of of figuring out, you know, designing for the 80% and how are we going to define that 80%? And it was really interesting. And and it was I was actually kind of surprised at how positive the feedback was when we did reach the point where we moved from the proxy group to the broader community. And so I could just say a thank you to the community for that. Like, it was pretty neat, like how how great a job the proxy group did of of giving us, you know, really good feedback to help us zero in on something that the community would actually appreciate. And it was a yeah, it was it was a neat process. So I was glad to be a part of it.

Matt Kleve: Jen, any final thoughts or anything you would like to add?

Jen Witowski: Yeah, ditto to everything Jared said. I this was actually the first project that I worked on where it was creating a theme. And I learned a lot, and it continues to teach, this project continues to teach me. So, like, every time I work on something with Mike or with Andy or Jared, like, I learn something new. And so I think that's why it's so enjoyable. And to, like, there's, there's other things that we're going to be able to do with this. So as Mike mentioned, you know, there's dark theme that, you know, we're going to eventually look at, there's language switcher, but then also in the background, Jared and I have been having conversations of updating how we are sharing this with the community. So right now it's in Figma. And there's new ways that you can assemble things in Figma that makes it a lot easier to manage everything. And so we've been talking about updating updating how things are kind of laid out in Figma. So it's more shareable to, to the general community. Because I do know that there was some community members that had commented like, hey, this isn't really reflecting what's in the what's actually on the site right now. And it's like, well, yeah, it's because I was working fast and quick with Mike, like Mike and I would hop on a call and he'd show me. And so there's stuff like that, decisions that were made that still need to be designed, but we're also in the process are going to update how we share that all out to the community, so.

Matt Kleve: Andy?

Andy Bloom: Yeah I mean it's it's it's a beautiful theme. So it looks great. Great work on the design, Jen and Jared and and excellent work on getting it started and in to core, Mike. And it's it's been a real joy to work with and be a part of. I know Olivero, for me has been kind of my introduction to to core contribution. And it's it's been nice to have a front end centric kind of thing to work on for core. As someone who's, who's not really on the PHP side of things knows enough to do, you know, preprocesses enough for for a theme, but to not have to to worry about, you know, writing PHP unit tests. And there's plenty of smart people around me who are much better at that than I am. So it's been nice to have to have some front end work to be able to, to get into to core contribution and give back to the community.

Matt Kleve: Mike Herchel.

Mike Herchel: Yeah, this is going to take a long time. [Laughter]

Matt Kleve: I saved you to the end because I figured it would.

Andy Bloom: Yeah, I'm going to I'm going to go ahead and log off here.

Mike Herchel: [Laughter] I want to first of all, thank Putra even though she couldn't be here because even though toward the end, she didn't have the the personal bandwidth to help out, like she was indispensable. I also want to say, like, how much I learned kind of like you, Andy, Jen and Jared, like, this is my first time doing, like, substantial core contribution. I learned a lot, you know, and and I I'm a better developer because of that. I want to specifically like, thank like the accessibility maintainers. I've learned a whole bunch about accessibility through all this and developing that menu system. And it's just been awesome. And, and the, the maintainers like Lauri and Gábor and and everyone else that kind of guided us through the process. And finally, like, I miss everybody. I miss y'all. So nice to see you. And and I'm going to Drupal Camp Asheville in July, so hopefully, hopefully I can talk to you all in to going there.

Matt Kleve: We're glad you're still in the Drupal community, Mike. We get to you know, yell at you through the issue queue and whatever. So.

Mike Herchel: Yeah, yeah, yeah, I, I, I enjoy that. I enjoy being yelled at through the issue queue.

Matt Kleve: So is there a place on Drupal slack where Olivero work is done or suggestions, or if somebody has questions or suggestions or torches and pitchforks, where should they go?

Mike Herchel: Yeah. There's an Olivero channel in, in Drupal, slack. And then like Andy and I have been working a lot with Christina Chumillas also is in regards to like, Claro and stuff and we're, we're trying to combine efforts. And so we've actually combined our our meetings. We used to have separate meetings, but now that we're both default and stable we, we're, we're doing stuff together, and I, I don't know, those are like, Tuesdays or something, but those are in the front end channel. There's a front end channel with no hyphen in there, and that's in Drupal, slack. And so any of those channels you can, you can get a hold of me and, and yell at me.

Matt Kleve: Well, I have a milestone for y'all. And and I want to hear about it when it happens. So we've all been on the internet randomly and come across the website and you say, oh, this is Drupal. And I know that because it's Bartik. So when you come across a website that is Olivero, I look forward to hearing your reaction because that.

Mike Herchel: I've already, that's already happened to me.

Andy Bloom: I was going to say, I've already seen a couple of.

Matt Kleve: Just random? Like...

Mike Herchel: Yeah, yeah.

Matt Kleve: Like Mike's blog doesn't count. Like, yeah.

Mike Herchel: I mean, yeah, that.

Matt Kleve: You know, you're like ordering a pizza or researching World War two or something, and you're like, crap, that's that's Olivero.

Mike Herchel: Yeah, I, I guess, I guess to say, like, the ones I've ran across are like a little bit Drupal centric, kind of bloggy. I know a person that's that's developing like some non-profit type websites with that, but I didn't, like, organically run across those.

Matt Kleve: Yeah.

Mike Herchel: So. Yeah. Yeah.

Matt Kleve: Very cool.

Mike Herchel: It'll happen, you know, like like, I mean, Olivero is not it's going to be the default in the new version of Drupal 9.4, which I think is coming out in June, sometime this month.

Matt Kleve: Well, I mean, we've all run across Bluemarine and Bartik over the years, right?

Mike Herchel: Bluemarine.

Matt Kleve: Right. Yeah, it was awesome. And blue.

Mike Herchel: Let's let's hope we don't run across Bluemarine too much anymore.

Matt Kleve: Thank you everybody for joining us. Congratulations on your efforts. Sounds like a lot of work, but definitely useful.

Mike Herchel: It was fun.

Matt Kleve: I look forward to using it.

Mike Herchel: Yeah.

Jared Ponchot: Yeah.

Matt Kleve: Bye, everybody.

Mike Herchel: Bye.

Jen Witowski: Bye.

Jared Ponchot: Bye, everyone.

Andy Bloom: Bye.

[Intro music]