The design team are in the process of making small but powerful changes/tweaks to the foundation theme to align a bit closer to modern web standards. To view these changes live on meta, join this group:
https://meta.discourse.org/g/modernized-foundation
We will be making this change live through the new Upcoming Changes feature available in Discourse. This will allow site owners to enable the changes for any group they specify, in order to test the roll out of the changes without the fear of possibly breaking themes or current customizations.
What will change?
Header shrinks in height
We have decreased the site of the header along with some of the icons & avatar slightly to utilize onscreen real estate.
Default buttons
We are moving from a grey default button background to a transparent / “secondary” background with a border.
- removal of grey background
- addition of borders
- icon color matches text color
- buttons now have a set height
Create new topic button on topic list page
Matching Horizon and giving this a “CTA” background color of tertiary
Lots of gray background removal
Topic list
- removal of 3 px thicc top border
- decrease font size of table header data
- consistent color for table data items
- color value changes to read/unread
- slight increase in font weight to unread
Categories
- left alignment of text
- removal of thicc left colored border
- slightly rounded badges
- thinner border on box
Nav bar
- The nav pills on topic list pages will be the same height as buttons in this zone
- darker color text & icon on select kit
Sidebar
- icon & text match color
- darker text & icons
- lighter “active” background
- heavier active font weight
Welcome banner
- balanced spacing
- added variables for easier left/right/center alignment via customization
- header font weight decreased
- sub title font size decrease
Calendar
- removed grey background from “buttons”
- use grey only to signify “active”
- switch to “bordered transparent” button styling
Drop downs
- padding added to drop down container
- height, padding, gap now matches sidebar items
- unification of “clickable lists”
- border inherits
--d-border-radiusvariable
New Variables
Some of the changes here will be introduced via additional variables added into core.
Welcome banner alignment
The alignment of the welcome banner will now be able to be changed via:
// default
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// custom
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
Button height
We will now have a set button height via:
// default
--button-height: var(--space-8);
Font smoothing
We are already doing this in Horizon, it makes sense to bring to foundation.
// new default
--webkit-font-smoothing: antialiased;
