Version: 4.6.0

Framework Version: 11.0.0

Release Notes: ### 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)

```scss /* 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.

Version: 4.5.1

Framework Version: 11.0.0

Release Notes: ### Changed

- We improved the styling of the Text Area widget to make its height easier to customize.

Version: 4.5.0

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue where exclude-bootstrap and exclude-mxui variable creates compile error when set to true
- We fix RTL label alignment for control-label/checkbox/radio

Version: 4.4.0

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue where the color variants were declared multiple times due to repeated imports of the Atlas Core variables.

Version: 4.3.8

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue where the validation feedback of the Check Box widget was not full width and its height depended on the label length.

Version: 4.3.7

Framework Version: 11.0.0

Release Notes: ### Changed

- We removed legacy styling for switch widget below version 3.0.

### Fixed

- We added scss variables fallback for css variables styling in modal-dialog.

Version: 4.3.6

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue with logo overriding using $brand-logo variable not working correctly.

Version: 4.3.5

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue where the scroll container did not stretch to the full height in popup layouts.
- We fixed an issue with Text Box widget in vertical form orientation.
- We fixed an issue where circular references in legacy-variables() would cause undefined variables, in projects not using CSS custom properties yet.

Version: 4.3.4

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue with label alignment in Check Box widgets.
- We fixed an issue Text Box widget being stretched when corresponding label is multiline.

Version: 4.3.3

Framework Version: 11.0.0

Release Notes: ### Fixed

- We fixed an issue with scroll container regions not scrolling correctly in some cases.