Modernizing the Foundation theme

[sk-or-v1-contents]

Is this issue still going to be fixed?

Modernizing the Foundation theme

Theres a small gap under the Related button [Related button] [Suggested button] Becomes more obvious if the font size is increased Stylus .more-topics__container .nav .d-button-label { font-size: 150%; } [Related button enlarged font] [Suggested button enlarged font]

I can still see the issue.

[chapoi]

@Moin

It’s a shame that accessibility is such a low priority for you.

That’s quite a leap you’re making. I just said “keep reporting issues” – what part of that makes it sound I don’t care about accessibility?

As it happens, on this same issue reported elsewhere, I have replied

@chapoi

There wont be a built-in way but you can alwaya customise it regularly with CSS. That being said, Im having a look at this particular change, because I think we can/should use REM instead of EM which would avoid this size.

That being said, another designer is assigned to this project, so the final decision on what to do is not up to me. Perhaps we’ll just fix it up in the WCAG theme instead.

@Moin

I’m sure you’ll understand that it’s not much fun to use a site where you can’t see the interface properly.

In the mean time, perhaps increase the font-size in settings so you can see the interface properly again.

While I understand us testing on Meta can sometimes be annoying, it’s also quite necessary.

[jordan.vidrine]

@Moin I want to apologize for the lack of addressing your early feedback here. It’s not a great excuse but I am the “owner” of this project in the sense that it was my idea. I have also taken on a lot of other projects / tasks as the design manager since then and let this project fall to the back of the line.

I will make a priority this week to address the feedback stated about these changes here and give you an update soon.

[jordan.vidrine]

UX: Implement foundation fixes & feedback (#40494)

@Moin

It seems some icon colors don’t work well with the wcag palette.

Fixed

@Moin

Another example where the icon and text color do not match is the expand button on my profile

Fixed

@Moin

I think the icon in the language dropdown is now very large in relation to the text.
Before:

After:

Fixed

[/quote]

Fixed

@Canapin

Search input and submit are squished!

fixed

@dax

Assigned (button border missing):

fixed

@Canapin

On mobile, the notification button’s transparent background cause issues:

fixed

@Moin

The group selection for the upcoming change also looks unusually large in the new design:

fixed

@sk-or-v1-contents

I think the navbar text size is too small on mobile (less legible than it looks like in the screenshot as it’s at the top of the page).

Fixed

---

@Moin

I think you didn’t mention that not only the font size of the table headers, but also the size of the numbers in the Replies, Views, and Activity columns, seem to be decreased.

Yes this is true, all “data” has been decreased in size slightly. From 16px → ~14px. I will not be changing this.

@sk-or-v1-contents

Theres a small gap under the Related button

I will try and fix these, but this is actually a markup issue of how this part of the app is implemented. It needs some tweaks

[haydenjames]

I hate to start a topic for this. But what did you guys change recently to the UI of these forums? I logged in today, and the font and layout feel MUCH better but in a subtle way. Was this announced somewhere? Am I imagining things?

[haydenjames]

Thanks! Looks beautiful! Less is more.

[sniper756]

The issue with the small font and tight spacing has persisted. Will this be optimized?

After the recent rebuild update, the homepage font became very small - Contributions / User Experience - Discourse Meta

[Moin]

The border around tags is larger than the tag field itself

I think there is no border around these buttons in the review queue, but there is one around “edit post”

I noticed that the colored border of the category boxes is smaller now, mentioning it in case that was not intentional because the first post says

@jordan.vidrine

• removal of thicc left colored border

The group names in the dropdown on the group pages are shortened now. Since the default trust_level groups only differ at the end this is a little disadvantageous. Without the change the full name is visible

Edit button on data explorer list:

The placeholders are not longer centered vertically

Similarly, the icons on the bot PM page are no longer centered

[sk-or-v1-contents]

Modernizing the Foundation theme

I think the navbar text size is too small on mobile (less legible than it looks like in the screenshot as it’s at the top of the page). The Suggested/Related font is too small too. [New font sizes too small] Old font sizes are good: [Old font sizes] See also

The Related text spacing is fixed! Thanks

[jordan.vidrine]

@Moin

I noticed that the colored border of the category boxes is smaller now, mentioning it in case that was not intentional because the first post says

@jordan.vidrine

• removal of thicc left colored border

This was intentional. It felt too strong to completely remove something that’s been a staple in the app for so long. So I just thinned it out instead of completely removing.

@Moin

The group names in the dropdown on the group pages are shortened now. Since the default trust_level groups only differ at the end this is a little disadvantageous. Without the change the full name is visible

I have adjusted this slightly to allow more characters to show.

---

All will be addressed here

UX: Core foundation changes (#40847)

[Moin]

@Moin

I think the icon in the language dropdown is now very large in relation to the text.
Before:

After:

This is a problem again.

[awesomerobot (Kris)]

we added a missing wrapper to the language toggle and that changed some css specificity, will be fixed by

UX: exclude language switcher from upcoming change icon resize (#41348)

[per1234]

Is it expected that enabling “Modernize Foundation theme” in a Discourse forum’s “Upcoming changes” will affect the forum’s theme when that forum is not using the Foundation theme?

My forum has a lovely custom theme that was crafted by the Discourse team. We are very happy with the theme as it is. I enabled the “Modernize Foundation theme” in “Upcoming changes” today because I am trying to make a general habit of intentionally introducing the upcoming changes rather letting them later get rolled out automatically. However, I didn’t expect it to have any effect. However, it did result in various changes, such as the removal of gray backgrounds from buttons.

Maybe our custom theme inherits some things from Foundation?

[Moin]

I think every theme is based on Foundation. It’s how a forum looks by default. There is no need for your theme to change a button color that already looks like it should by default. These defaults change now, which is why it affects all themes - even the Horizon theme is affected:
You can see that the header is thinner, the chat icon is darker, and the button is no longer filled.

What you just did is the advantage of the upcoming changes system: you can see how this affects your forum and act based on that before your forum has to use the new defaults.

[chapoi]

@per1234

“Upcoming changes” will affect the forum’s theme when that forum is not using the Foundation theme?

Yes, this is a common point of understandable confusion, but all themes use the Foundation basis.

So yes, if your buttons don’t have any “own” styling (owned by your theme), they will inherit the basic styling and be impacted by things such as this:

@per1234

However, it did result in various changes, such as the removal of gray backgrounds from buttons.

[per1234]

Thanks for your explanation!

Am I correct to conclude that, although the change to the Foundation theme is currently only an “opt in”, it will eventually be rolled out to my forum without an site setting for configuring the site to use the non-modernized Foundation theme?

Obviously the theme changes I experienced earlier were entirely self-inflicted, as I was the one who enabled the change. If the ability to avoid the introduction of the changes will always remain under my control then I don’t need to worry about taking any action in anticipation of this “upcoming change” reaching its production roll out stage.

Conversely, if there is not going to be a site setting to control this (which I suspect will be the case), then I should instead start working now on carefully evaluating the impact of the change and determining which adjustments might be needed to maintain the current consistency of design of our bespoke theme.