[gjulivan]

Breaking change

• The default theme is now Atlas Neutral. Apps that set their own values in theme/web/custom-variables.scss keep them; everything an app left to Atlas changes:

  • brand colors: navy primary and quieter success, warning and danger colors
  • a system font stack instead of Poppins (Poppins is still bundled)
  • neutral page, text and border colors, no longer tinted by the brand color
  • smaller corners (2 / 4 / 8px)
  • soft labels and badges (tinted background, dark text)
  • neutral default buttons, a quieter grid selection, flat cards
  • the focus outline is drawn inside the element
  • a 32px logo

• Navigation bars no longer follow --brand-primary. Each layout now has one primary bar (dark by default) and may have one secondary bar (light by default):

  Layout	Primary bar	Secondary bar
  Atlas_SideBar	sidebar	top bar
  Atlas_Default	top bar	sidebar
  Atlas_TopBar	top bar	—

• Atlas no longer sets the navigation region variables (--topbar-*, --sidebar-bg, --navsidebar-* and --navtopbar-* colors, --navbar-brand-name) or the shared navigation colors (--navigation-color*, --navigation-bg*, --navigation-sub-*, --navigation-border-color). They still work as overrides, so a theme that sets them keeps its look.

• A theme that sets only a region's background must also set that region's text colors, or --navigation-color. Otherwise, where that region is the secondary bar, its text is dark.

• Layouts copied from Atlas get the bar colors only if they keep the region-topbar and region-sidebar classes. To show the app logo and name, add the AppInfo snippet.

• Sidebar navigation items are full width, without rounded corners, and the icon box is 40px.

To keep the previous look: before upgrading, paste the block below into the :root of theme/web/custom-variables.scss, and delete every line for a variable the app already sets. You can then remove lines one by one to adopt parts of the new look. Layout details (sidebar alignment, the current-page marker) change regardless.

Previous look (Atlas Core 4.5)

/* Previous Atlas look, kept through the upgrade to Atlas Core 4.6 */
--brand-primary: #264ae5;
--brand-success: #16aa16;
--brand-warning: #cd8501;
--brand-danger: #ea3337;
--brand-default: color-mix(in srgb, var(--brand-primary) 10%, #e7e7e9);
--brand-primary-hover: var(--brand-primary-700);
--bg-color: var(--brand-default-100);
--border-color-default: var(--brand-default-300);
--font-family-base: "Poppins", sans-serif;
--font-color-detail: var(--brand-primary-700);
--font-color-header: var(--brand-primary-800);
--border-radius-s: 4px;
--border-radius-m: 8px;
--border-radius-l: 12px;
--border-radius-default: var(--border-radius-s);
--topbar-bg: linear-gradient(to bottom, var(--brand-primary-500), var(--brand-primary-600));
--sidebar-bg: linear-gradient(to bottom, var(--brand-primary-600), var(--brand-primary-700));
--navigation-color: var(--font-color-contrast);
--navigation-color-hover: var(--font-color-contrast);
--navigation-color-active: var(--font-color-contrast);
--navigation-bg-hover: rgba(0, 0, 0, 0.2);
--navigation-bg-active: rgba(0, 0, 0, 0.3);
--navigation-sub-bg: rgba(0, 0, 0, 0.2);
--navigation-sub-bg-hover: var(--navigation-bg-hover);
--navigation-border-radius: var(--border-radius-m);
--navigation-scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
--navigation-border-color: var(--navigation-bg-hover);
--navsidebar-sub-bg-collapsed: var(--brand-primary-700);
--navsidebar-shadow: 0 0 4px rgb(0 0 0 / 14%), 2px 4px 8px rgb(0 0 0 / 28%);
--navsidebar-sub-bg: rgba(0, 0, 0, 0.2);
--navsidebar-sub-bg-header: rgba(0, 0, 0, 0.2);
--navsidebar-border-radius: var(--navigation-border-radius);
--navsidebar-border-right: none;
--navsidebar-icon-height: 44px;
--navsidebar-icon-width: 52px;
--navtopbar-border-bottom: none;
--m-header-color: var(--font-color-contrast);
--btn-primary-bg: var(--brand-primary-600);
--btn-default-color: var(--brand-primary);
--btn-default-icon-color: var(--gray);
--grid-bg-hover: var(--brand-default-hover);
--grid-bg-selected: var(--brand-default);
--grid-bg-selected-hover: var(--brand-default-600);
--form-input-placeholder-color: var(--gray-600);
--form-input-border-hover-color: color-mix(in srgb, var(--form-input-border-color), var(--form-input-border-focus-color) 50%);
--focus-outline-offset: 2px;
--brand-logo-height: 36px;
--brand-logo-width: 36px;
--card-shadow: var(--shadow-small) var(--shadow-color);
--card-padding: var(--spacing-large);
--label-default-bg: var(--brand-default);
--label-primary-bg: var(--brand-primary-600);
--label-success-bg: var(--brand-success-600);
--label-warning-bg: var(--brand-warning-600);
--label-danger-bg: var(--brand-danger-600);
--label-default-border-color: var(--brand-default-600);
--label-primary-border-color: var(--brand-primary-600);
--label-success-border-color: var(--brand-success-600);
--label-warning-border-color: var(--brand-warning-600);
--label-danger-border-color: var(--brand-danger-600);
--label-default-color: var(--font-color-default);
--label-primary-color: var(--color-base);
--label-success-color: var(--color-base);
--label-warning-color: var(--color-base);
--label-danger-color: var(--color-base);

Added

• --bar-primary-* and --bar-secondary-* theme variables to style the navigation bars by role: bg, bg-hover, bg-active, color, color-hover, color-active, sub-color, title-color, border-color and edge.
• AppInfo snippet that shows the app logo and app name, with a non-persistable AppInfo entity filled by a nanoflow:
  • JSA_GetAppName reads the Application title of the navigation profile.
  • JSA_GetAppLogoUrl uses the app's own logo.svg, otherwise the App icon of the navigation profile.
• A default logo.svg (the Mendix brandmark) at the web root. The app's theme/web/logo.svg or a theme module's public/logo.svg overrides it.
• A default chart palette, com.mendix.charts.json, for charts with theme configuration enabled. The app's theme/web/com.mendix.charts.json or a theme module's overrides it.
• A hover highlight for clickable cards, off when reduced motion is preferred.
• A 2px inset bar marking the current page in the sidebar.
• Variables for sidebar item alignment and spacing, including --navigation-sub-item-padding.

Changed

• Layouts:
  • Atlas_SideBar shows the logo and app name in the sidebar header. Its top bar has the classes region-topbar topbar-secondary.
  • Atlas_Default and Atlas_TopBar show the logo and app name in the top bar's .navbar-brand.
  • The app name takes the bar's title color in every layout and ends in an ellipsis when it is too long.
• The Content.Mendix image is now the Mendix brandmark.
• Sidebar labels align in one column, including items without an icon, and sub-item icons are centered under their parent's icon.
• The collapsed sidebar fades labels and the app name out instead of wrapping them, and the fly-out menu no longer indents items.
• The sidebar toggle button animates only position, rotation and opacity.
• The language selector text follows the color of its bar. Its "Contrast" color setting is no longer used.
• The mobile header uses --topbar-bg and --topbar-color when set, otherwise the primary bar colors.

Fixed

• The active item in the top bar navigation is now styled.
• Sidebar navigation items now get their hover style.
• The secondary top bar background falls back to --navtopbar-bg when --navtopbar-bg-secondary isn't set.

[yordan-st]

Tested in a Studio Pro 11.16 app with this branch's atlas_core, all three layouts, desktop and 375px mobile.

1. Collapsed sidebar fly-out: sub-items without an icon aren't aligned with the others. Their label starts ~60px further left than sub-items with an icon. The changelog says labels align in one column "including items without an icon" — true for the expanded sidebar, not for the fly-out.

2. Long app name in the top bar on mobile (Atlas_TopBar, also Atlas_Default): the name doesn't end in an ellipsis, it wraps onto several lines. In Atlas_TopBar this also pushes the logo + name below the menu toggle, because they share a flex-row container with flex-wrap: wrap. The top bar ends up ~156px tall at 375px wide. The nowrap/ellipsis rules for .sidebar-brand-name only apply inside the sidebar (_layout-atlas-responsive.scss); in the top bar's .navbar-brand the name has no white-space/overflow/min-width rules, so it can't shrink. Expected per the changelog: toggle, logo and name on one row, name truncated with "…".