@swisspost/design-system-styles

9.0.0-next.8

Major Changes

Removed size variants for textarea form control. The sizing classes .form-control-sm, .form-control-rg and .form-control-lg for textarea no longer have any effect and can be removed safely. (by @leagrdv with #4062)

Minor Changes

Internalized bootstrap position utilities into the design system. (by @leagrdv with #3988)
Implemented simple check list component. (by @myrta2302 with #4171)
Created the search-input component. (by @alionazherdetska with #4099)
Added list mixins list-bullet, list-revert and list-unstyled. (by @leagrdv with #4166)
Updated .form-control textarea to new Post design. (by @leagrdv with #4062)

Patch Changes

Fixed ´switch´ alignment for long labels. (by @schaertim with #4140)
Updated the ´post-accordion´ styles to match the new Post design. (by @leagrdv with #4166)
Reverted ol lists to use standard display (not grid). (by @leagrdv with #4110)
Updated fieldset-legend styles with Design Tokens. (by @leagrdv with #4166)

9.0.0-next.7

Major Changes

Removed deprecated valid-tooltip and invalid-tooltip classes. (by @leagrdv with #4076)
Removed the rg and xxl grid breakpoints, reducing the grid to 5 breakpoints instead of the previous 7. This change affects all CSS classes tied to specific breakpoints (e.g., col-rg-2, m-xxl-4).
Previous Breakpoints:
- xs: 0px
- sm: 400px
- rg: 600px
- md: 780px
- lg: 1024px
- xl: 1280px
- xxl: 1440px
New Breakpoints:
- xs: 0px
- sm: 600px
- md: 780px
- lg: 1024px
- xl: 1280px
To maintain compatibility with the updated grid system, you need to update your code by replacing any *-rg-* classes with *-sm-*, and any *-xxl-* classes with *-xl-*. For example:
- col-rg-2 → col-sm-2
- m-xxl-4 → m-xl-4 (by @alizedebray with #3982)
Removed deprecated carousel component. (by @leagrdv with #4075)

Patch Changes

Updated the grid padding and gutters. (by @alizedebray with #4045)
Updated the styles of the form validation messages to match the new Post design. (by @myrta2302 with #3824)

9.0.0-next.6

Major Changes

Renamed the alert component to banner and updated the styles of banner and toast components. The class .alert is still supported for now but is deprecated and will be removed in v10. Changed web component <post-alert> to <post-banner>. Additionally, the classes .{toast|alert}-primary, .{toast|alert}-gray and .toast-notification have been deprecated. (by @leagrdv with #3862)
Removed size variants for form select. The sizing classes .form-select-sm, .form-select-rg, .form-select-md and .form-select-lg no longer have any effect and can be removed safely. (by @leagrdv with #3978)
Removed the alert-fixed-bottom variant of the alert. (by @leagrdv with #3862)
Removed sizes option for text inputs. (by @leagrdv with #3946)
Removed deprecated topic-teaser. (by @leagrdv with #4056)
Changed the class name of assistive text below form fields from .form-text to .form-hint and improved accessibility by connecting the hint to the form through aria-describedby. (by @leagrdv with #3961)

Minor Changes

Added a new segmented-button component, which allows users to toggle between two or more content sections within the same area on the screen. (by @alionazherdetska with #3879)
Internalized bootstrap overflow utilities into the design system. (by @leagrdv with #4006)
Updated radio-button styles with Design Tokens. (by @schaertim with #3965)
Addes Cargo theme styles. (by @alizedebray with #3993)
Updated .form-select select to v2. (by @leagrdv with #3978)
Updated checkbox styles with Design Tokens. (by @schaertim with #3965)
Updated switch styles with Design Tokens. (by @schaertim with #3965)
Added color palettes to easily apply colors to a page section using predefined color sets. (by @alizedebray with #3850)

Patch Changes

Updated .form-control text input to new Post design. (by @leagrdv with #3946)
Updated the blockquote styles to match the new Post design. (by @myrta2302 with #3882)

9.0.0-next.5

Major Changes

Removed the deprecated .pi-* classes, which were previously used to display icons. The post-icon component should now be used instead. (by @alizedebray with #3947)

Minor Changes

Added custom styles for the ordered lists. (by @veyaromain with #3755)

Patch Changes

Fixed issue where the focus ring was not appearing on inactive chips. (by @schaertim with #3820)

9.0.0-next.4

Major Changes

Removed regular button size. Buttons that were previously using btn-rg will now fall back to the default btn-md size. (by @leagrdv with #3849)
Updated list group to v2 and added new options: list links, list documents and list switches. (by @leagrdv with #3740)
Removed the btn-animated class. It no longer has any effect and can be removed from existing buttons. (by @leagrdv with #3849)
Removed the .breadcrumb-item class, which previously handled styling for breadcrumb items. Introduced a new post-breadcrumb-item that should be used in place of the .breadcrumb-item class. (by @alionazherdetska with #3659)

Minor Changes

Added Form Footer component. (by @leagrdv with #3616)
Created token-based styles for <ul> elements. (by @oliverschuerch with #3859)
Updated vertical-align utility (by @myrta2302 with #3805)
Updated button component to v2. (by @leagrdv with #3849)
Added the skiplinks component to styles and documentation. (by @leagrdv with #3875)
Added close button web component. (by @leagrdv with #3880)
Internalized bootstraps floating utilities into the design system. (by @myrta2302 with #3752)

9.0.0-next.3

Major Changes

Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities. (by @alionazherdetska with #3693)
Removed deprecated grid container helper classes. (by @veyaromain with #3527)

Minor Changes

Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component. (by @alionazherdetska with #3590)
Updated the utility classes for opacity. (by @myrta2302 with #3754)
Added a new App Store Badge component for promoting apps, supporting both Google Play and Apple App Store badges. (by @alionazherdetska with #3731)
Added paragraph style. (by @bashirkarimi with #3569)

Patch Changes

Updated margin styles according to the contribution guidelines. Content elements like headings and paragraphs no longer have a margin top if they're the first child and no margin bottom if they're the last child in a container. (by @gfellerph with #3667)

9.0.0-next.2

Minor Changes

Updated and tokenized styles for the legend element. (by @bashirkarimi with #3614)
Added styling support and documentation for the <dialog> element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap. (by @gfellerph with #2772)

Patch Changes

Wrapped new token only entry files in a CSS layer called 'design-system'. The two files affected are 'post-tokens-external.scss' and 'post-tokens-internal.scss' as well as their compiled CSS counterparts. (by @gfellerph with #3720)
Deprecated the ng-bootstrap components Modal and Notification overlay in favor of the new Dialog component. The styles for these ng-bootstrap components will be removed in a future major version. (by @gfellerph with #2772)
Fixed an issue with element styles that were not compiled to the output as CSS. (by @gfellerph with #3709)

9.0.0-next.1

Major Changes

Removed the following placeholders: %list-adjustment, %module-container, %default-module-spacer, %text-container. (by @leagrdv with #3623)
Updated the margin, padding, and gap utility classes to use the pixel values (1, 2, ... , 112) instead of size names (hair, line, ..., bigger-giant). (by @alizedebray with #3557)

Minor Changes

Added Text Highlighted component. (by @bashirkarimi with #3586)
Added lead text component for introductory paragraphs. (by @bashirkarimi with #3575)

Patch Changes

styles: Added reset styles (by @bashirkarimi with #3545)
Removed global styles (by @bashirkarimi with #3554)
Updated the style of headings (h1-h6). (by @bashirkarimi with #3534)

9.0.0-next.0

Major Changes

Removed deprecated datatable variables. (by @schaertim with #3395)
Removed deprecated display-size variables. (by @schaertim with #3430)
Removed deprecated line-height-calc function. (by @schaertim with #3409)
Removed deprecated form-check variables. (by @schaertim with #3393)
Removed deprecated stepper variables. (by @schaertim with #3394)
Removed deprecated line-height variables. (by @veyaromain with #3521)

Minor Changes

Added tokens file for elements, components and utilties. (by @oliverschuerch with #3495)

Patch Changes

Improved accessibility of headings with subheadings by removing the
element and added the utility class d-block. Consult https://design-system.post.ch/?path=/docs/7ecd87f1-de96-4e39-a057-ba1798eb6959--docs for updated markup. (by @bashirkarimi with #3491)
Aligned chip styles with the latest design specifications from Figma. (by @schaertim with #3463)
Resolved issue where validation message icons repeated on each line of multi-line messages. Implemented flexbox layout to ensure a single, vertically centered icon regardless of message length. (by @schaertim with #3517)

8.2.0

Minor Changes

Added four new entry files that enable working with Design Tokens:
- post-external.(s)css: For portal and other external pages
- post-internal.(s)css: For applications and other internal pages
- post-tokens-external.(s)css: External tokens only
- post-tokens-internal.(s)css: Internal tokens only (by @oliverschuerch with #3477)

Patch Changes

Realigned the checkbox and the radio button with the label. (by @oliverschuerch with #3477)
Set the max-width constraint of the tag component to 100% for improved accessibility. Try to keep tag text as short as possible though. (by @oliverschuerch with #3477)

8.1.0

Patch Changes

Fixed a broken CSS selector in the alerts styles. The file now produces valid output again. (by @gfellerph with #3343)

8.0.0

Major Changes

Upgraded to Angular 18 (by @gfellerph with #3243)

Patch Changes

Removed the icon from inside form-controls (input, select, textarea). (by @davidritter-dotcom with #3229)

7.4.0

7.3.1

7.3.0

Minor Changes

Added an invalid message for the card-control component and an icon in the invalid message of the checkbox and radio button (by @davidritter-dotcom with #2978)
Pre-compiled CSS files are now shipped with the package to enable projects not using Sass to selectively import component styles. (by @gfellerph with #3283)

Patch Changes

Fixed visual issues with validated form-elements who receive focus. (by @oliverschuerch with #3166)
Updated buttons colors. (by @imagoiq with #2977)
Updated table colors on dark backgrounds. (by @alizedebray with #2718)
Switched from light to regular font weight for most texts, excluding sub-titles. (by @oliverschuerch with #3284)

7.2.1

Patch Changes

Fixed a bug where the year in the datepicker got cut and fixed the icon placement in the small variant of the datepicker input. (by @davidritter-dotcom with #3203)

7.2.0

Minor Changes

Added a small variant for the textarea with floating label. (by @davidritter-dotcom with #2857)
Updated disabled styles of form controls to have a dashed border. (by @davidritter-dotcom with #2857)

Patch Changes

Added @angular/core as an optional peer dependency to the styles package to indicate the Angular versions that are compatible with the current version of the styles. (by @gfellerph with #3168)
Fixed an issue with icon URL declarations when building styles with esbuild. (by @alizedebray with #3123)
Fixed the misaligned calendar icon in the datepicker input field. (by @oliverschuerch with #3145)
Implemented button wrapping for overflow in button groups. (by @alizedebray with #3062)

7.1.0

Minor Changes

Added the option for a Button animation to the left. (by @alizedebray with #3104)

Patch Changes

Fixed missing chevron in valid and invalid select entries. (by @alizedebray with #3104)
Updated popover styles. - Removed popover min-width and updated max-width.
- Simplyfied popover arrow size definition.
- Removed :focus selector fom .text-auto utility class (by @alizedebray with #3104)
Fixed grid-area behaviour in card-control component, if used without any icon. (by @oliverschuerch with #3099)
Updated the stepper styles: changed the colors and font-weights, as well as the current step label position on smaller screens. (by @alizedebray with #3088)
Merged the card-control, checkbox-card and radio button card docs pages and updated the choice-card-control styles. (by @alizedebray with #3104)
Fixed high-contrast-mode for card-control component. (by @alizedebray with #3104)
Added missing focus ring on checkbox and radio button groups. (by @alizedebray with #3104)

7.0.0

Major Changes

Restricted badges to showcase counts exclusively and set their color to red by default.
Use tags to display states, properties, or other metadata. Opt for chips when presenting dismissible or selectable information.

Use the background utility classes to change the badge color as needed. (by @alizedebray with #2860)
Refactored brand colors. Renamed $gray-background SCSS variable to $gray and removed $gray-background-light variable because it is a duplication of the already existing variable $light.
Updated the usage of said variables in dependant packages accordingly. (by @oliverschuerch with #2861)
Synchronized the versions of the following packages:
- @swisspost/design-system-styles
- @swisspost/design-system-components
- @swisspost/design-system-components-react
- @swisspost/design-system-components-angular
- @swisspost/design-system-migrations
- @swisspost/design-system-icons
- @swisspost/design-system-intranet-header
This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by @gfellerph with #2856)
Added support for Angular 17 and ng-bootstrap 16. (by @alizedebray with #2760)
Updated Sass color variables: - Removed variables $success-green, $error-red, $warning-orange, $success-text, $error-text, $danger as well as the Sass map $contextual-colors. Instead use the variables $success, $error, $warning and the Sass map $signal-colors.
- Updated the Sass map $signal-colors keys and added a new Sass map $signal-background-colors.
- Updated the Sass map $background-colors and all the dependant packages accordingly.
With the exception of the components notification, toast and tag, there is no component providing a danger variant anymore. Instead use the error variant. (by @oliverschuerch with #2861)
Renamed the badge into "chip", added a disable state and updated its styles. (by @alizedebray with #2855)

Minor Changes

Added new black and white alpha colors. Replaced hardcoded alpha colors with the new color definitions in card-control component. (by @oliverschuerch with #2861)
Changed mobile navigation trigger to make it more accessible by default using a button element. (by @imagoiq with #2834)
Added a new tag component. This component is available in standard HTML or as webcomponent. (by @b1aserlu with #2552)
Introduced new focus style for text input and select, and added new wrapper element .focus-control-wrapper, .form-range-wrapper, .form-select-wrapper. (by @imagoiq with #2774)
Added new focus color variables. (by @oliverschuerch with #2861)
Added a pattern for error pages with an image. Currently available is a graphic for "404 not found" errors. More error types may be supported in the future. (by @gfellerph with #2676)

Patch Changes

Adjusted focus styles with new color for button, checkbox, radio, switch, rating elements. (by @imagoiq with #2780)
Updated size of radio button to match design. (by @imagoiq with #2737)
Fixed the .form-check-input background-color, by setting it to white on none or light backgrounds. (by @oliverschuerch with #2260)
Added a workaround to display progress bar on input range and on webkit browsers without JavaScript. (by @imagoiq with #2781)
Fixed color and border-color on hover for checkbox and radio form element. (by @imagoiq with #2961)
Added new disabled styles for radio and checkbox, fixed color contrast on this state and fixed cursor style. (by @imagoiq with #2813)
Fixed layout on post-alert with medium (md) breakpoint. (by @imagoiq with #2775)
Fixed wrongly escaped Sass variables in the form-switch hcm styles, which caused problems in the styles of the card-control component. (by @oliverschuerch with #2965)
Replaced system-ui fallback font with a list of fallbacks to avoid rendering issues with specific writing system (chinese, arabic…). (by @imagoiq with #2735)
Fixed active button color-contrast on dark background (by @imagoiq with #2823)
Replace all parts that used the old success color with the new success-green color. (by @imagoiq with #2808)
Fixed usage of background color on checkbox which make the checkmark invisible on dark background. (by @imagoiq with #2953)
Made styling more coherent for forms elements with High contrast mode and focus/hover state. (by @imagoiq with #2774)
Refactored the new focus style to only be visible when using keyboard for form elements. (by @imagoiq with #2810)
Fixed color contrast of alert component on success background color. (by @imagoiq with #2845)
Fixed form validation feedback color and indicators in high contrast mode. (by @imagoiq with #2766)

6.6.4

Patch Changes

Fixed color-contrast on post-tabs with dark background. (by @imagoiq with #2753)

6.6.3

Patch Changes

Updated the color of success alerts from black to white for a better contrast. (by @alizedebray with #2740)
Fixed color-contrast on blockquote footer with dark background. (by @imagoiq with #2714)
Fixed close icon button which is not visible on hover with light theme and high contrast mode enabled. (by @imagoiq with #2705)
Improved display of badge and switch checked state with high contrast mode. (by @imagoiq with #2706)
Reduced the xxl breakpoint size form 1441px to 1440ppx. (by @alizedebray with #2741)
Fixed color-contrast issue on valid form-feedback. (by @imagoiq with #2717)
Removes unwanted margin from heading within the notification overlay component. (by @b1aserlu with #2407)

6.6.2

Patch Changes

Updated high contrast styles for the form switch component. (by @alizedebray with #2667)
Fixed display of icons in high-contrast mode in webkit. (by @imagoiq with #2638)
Deprecated sizes loader-sm and loader-xs for the spinner. They are replace respectively with loader-40 and loader-16. (by @imagoiq with #2612)
Removed transparent background for notification in high-contrast mode. (by @imagoiq with #2653)
Fixed visibility of select arrow in icon in high-contrast mode with light theme. (by @imagoiq with #2696)
Sets the font-size of h5 on small mobile devices to 16px as defined in Figma. (by @gfellerph with #2610)

6.6.1

Patch Changes

Updated form-control and form-select sizes and added support for floating label small size variant. (by @imagoiq with #2396)

6.6.0

Minor Changes

Deprecation of legacy grid classes:
- .vertical-gutters (use gutter classes instead, e.g. .g-*, .gy-* or .gx-*)
- .row.border-gutters
- .container-reset
- .container-reset-left and .container-reset-right
- .container-fluid-#{$breakpoint} (by @b1aserlu with #2400)

Patch Changes

Fixed the alignment of icons on datatable buttons. (by @imagoiq with #2500)
Updated styles for the .is-valid class. (by @imagoiq with #2391)
Update the background color of accordion to be white on any background color other than white. The accordion background remains gray on white backgrounds. (by @alizedebray with #2379)
Fixed a visual regression on the intranet-header with a sidenav. (by @imagoiq with #2521)

6.5.1

Patch Changes

Added breakpoint specific utility classes to set width to 25%, 50%, 75%, 100%, or auto. (by @imagoiq with #2308)
Changed color of text on the success background (#2c911c) to white from black for better contrast according to WCAG 3.0 (by @b1aserlu with #2358)
Converted padding-bottom to margin after tabs-content so it doesn't impact vertical rhythm. (by @imagoiq with #2349)
Fixed close button color in high contrast mode. The button is now visible when forced colors are active. (by @gfellerph with #2109)

6.5.0

Minor Changes

Separated the migration schematics from the styles to their own package @swisspost/design-system-migrations. (by @alizedebray with #2270)

Patch Changes

Updated the accordion styles. (by @alizedebray with #2310)
Fixed overflow on datepicker select variant. (by @imagoiq with #2319)
Added small variant to floating label select. (by @gfellerph with #2368)
Updated select styles to match design. (by @imagoiq with #2312)
Fixed intranet-header sticky navigation on mobile which prevent interactivity on the page within a certain viewport width. (by @imagoiq with #2320)
Fixed spacing regression on form switch label. (by @imagoiq with #2356)
Fixed active color and chevron display of the ngb-pagination component in High Contrast Mode. (by @imagoiq with #2366)
Transformed the gap between the label and the radio/checkbox/switch into a clickable area. (by @imagoiq with #2333)

6.4.4

Patch Changes

Added official way to use label in a floating-label select as a placeholder. (by @imagoiq with #2200)
Fixed display of button-group input when using checkbox or radio variant. (by @imagoiq with #2133)
Fixed offset of radio button when checked and in inline layout. (by @imagoiq with #2065)
The following placeholders from the \_text.scss file are depreacted an will be removed in a future version: %list-adjustment, %module-container, %default-module-spacer, %text-container. (by @b1aserlu with #2171)
Fixed default icon flashing when using a post-icon on alerts. (by @imagoiq with #2244)

6.4.3

Patch Changes

Changed dropdown icon for the select component and adjusted the size of the icon. (by @b1aserlu with #2164)
Added table-mono variant for table component. (by @imagoiq with #2106)
Set a max-width for badges and add ellipsis for overflowing text. (by @davidritter-dotcom with #1892)
Applied autoprefixer to distributed sass files. Sass files will now contain prefixes for supported browsers according to the browserslist file. (by @imagoiq with #2115)

6.4.2

Patch Changes

Refactored the grid-system: adjusted container paddings, added responsive gutter-widths. Updated grid docs. (by @oliverschuerch with #2045)
Added small variants for checkbox and radio buttons. Lowered font-size of validation blocks for form elements. (by @imagoiq with #2086)
Fixed missing active tab border on HTML component. (by @imagoiq with #2037)
Fixed active switch control showing a check icon in Chrome. (by @alizedebray with #2090)

6.4.1

Patch Changes

Removed bound between logo and language to allow any language to display the logo. (by @imagoiq with #2009)
Reduced the gap between the alert body and action buttons. (by @alizedebray with #1085)
Removed duplicated close button on toast when using ngx-toastr programatically. (by @imagoiq with #2011)
Updated and added the gaps between the title and the link-list in the .topic-teaser-content class to comply with the figma design. (by @b1aserlu with #1927)
Added missing pointer-events to allow a dismissible toast to be closed interactively. (by @imagoiq with #2008)
Updated icons to display as mask images, this way their color can be set by adjusting the CSS background-color property. (by @alizedebray with #1945)

6.4.0

Minor Changes

Added the checkbox and radio-button card pattern. These two components are now available in the styles package (by @gfellerph with #1607)

Patch Changes

Deprecated sizes "regular" and "medium" for text inputs, textareas and select boxes. Future major versions of the Design System will only support the sizes "small" and "large". This change will make it easier to decide what variant to use where: small for internal applications, large for customer facing external applications. (by @gfellerph with #1837)
Fixed a bug with the ngb-dropdown where the chevron was not shown on primary buttons. This use case is now documented and white chevrons are shown. (by @gfellerph with #1890)
Fixed the .pi-calendar class not showing an icon in the datepicker. (by @alizedebray with #1806)
Fixed datepicker input value that was overlapping with the calendar button on very narrow datepickers. (by @gfellerph with #1886)
Fixed a problem where textarea and multiselect had an unexpected height when regular size (form-control-rg / form-select-rg) was used. (by @b1aserlu with #1830)
Added a new post-tabs component. (by @alizedebray with #1181)

6.3.0

Minor Changes

Added a gray notification variant for cookie banners. (by @alizedebray with #1350)

Patch Changes

Updated close button styles for Alerts, Toasts, Badges, and Modals. It now has the same colors as the tertiary buttons to be accessible on all our backgrounds. (by @alizedebray with #1350)
Added custom resizer for textarea elements. (by @oliverschuerch with #1765)
Update button styles: padding, gap and border-radius. (by @imagoiq with #1666)
Updated alert and toast styles.
Deprecated classes for alerts/notifications:
- alert-error becomes alert-danger
- alert-notification becomes alert-primary
- toast-notification becomes toast-primary (by @alizedebray with #1350)
Stepper:
- Normalize font styles and weights.
- Position the step label under the badge on small viewport.
- Center the step label when its is multiline.
- Use hover step label color only on interactive step.
- Add contrasted step label color on focus. (by @imagoiq with #1646)
Adjusted the gap inside the badge. (by @b1aserlu with #1772)
Fixed collapsible/accordion styles that broke after Bootstrap removed several CSS custom properties. (by @alizedebray with #1324)

6.2.6

Patch Changes

Updated button styles:
- Reduced horizontal padding of tertiary buttons.
- Updated font-size progression according to button size.
- Changed transparent color to full-tone colors.
- Updated the font-color and border-color of secondary and tertiary buttons. (by @imagoiq with #1635)

6.2.5

Patch Changes

Fixed the placeholder for the file upload in Safari. It's no longer cut off and pluralisation for the button label with a multiple attribute is now supported. Also fixed padding when the state is valid or invalid. (by @imagoiq with #1614)

6.2.4

Patch Changes

Fix an issue with two empty CSS files in the styles package. Empty files are no longer delivered. (by @imagoiq with #1600)
Fixed default font-size and weight of the legend element (by @geekrumper with #1512)

6.2.3

Patch Changes

Optimized floating-label controls to show placeholders. (by @alizedebray with #1509)
Added missing definitions for italic font faces. (by @yannikstuker with #1513)

6.2.2

Patch Changes

Fixed an issue with the stepper on mobile where the name of the last step was misaligned on mobile devices. (by @gfellerph with #1317)
Updated dependency Bootstrap to 5.3.0 (by @gfellerph with #1466)
Removed unused variable $shadow-color. It was added by mistake. (by @oliverschuerch with #1438)
Fixed an issue in Safari where the input value of a floating label input field was hidden by the floating label. (by @gfellerph with #1461)

6.2.1

Patch Changes

Fixed the form-selector-button visualisation for firefox. (by @oliverschuerch with #1323)
Fixed overlapping of the search input label and the search input icon in the post-search component. (by @oliverschuerch with #1367)
Updated badge colors. (by @alizedebray with #1349)

6.2.0

Minor Changes

Updated the new Logo in the intranet-header component. (by @oliverschuerch with #1351)

6.1.0

Minor Changes

Updated line-heights to match accessibility requirements and added new variables for them. The new values are $line-height-body: 1.5 for body copy (text) and $line-height-headings: 1.2 for headings. (by @gfellerph with #1298)
Added new font-size variables following the new naming convention of using pixel based naming. The font sizes remain defined in rem and the new variables are $font-size-14, $font-size-16, $font-size-18, $font-size-20, $font-size-24, $font-size-28, $font-size-32, $font-size-40, $font-size-48 and $font-size-56. (by @gfellerph with #1315)

Patch Changes

Deprecated font-size variables $font-size-tiny, $font-size-small, $font-size-regular, $font-size-bigger-regular, $font-size-medium, $font-size-large, $font-size-small-big, $font-size-big, $font-size-bigger-big, $font-size-small-huge and $font-size-huge. New variables use a pixel based naming (in accordance with #588). (by @gfellerph with #1298)
Updated the Angular migration schematic for ngb-buttons to work correctly whith the NgFor directive. (by @alizedebray with #1311)
Updated heading sizes according to the new Design. (by @gfellerph with #1298)
Deprecating variables $display1-size, $display2-size, $display3-size, $display4-size, $display1-weight, $display2-weight, $display3-weight, $display4-weight and $display-line-height because they are unused. (by @gfellerph with #1298)
Deprecating the line-height-calc function as unused. (by @gfellerph with #1298)
Deprecating validation-tooltips like .valid-tooltip and .invalid-tooltip. Absolutely positioned tooltips are no longer recommended for usage. Use the respective feedback classes instead. (by @gfellerph with #1298)
Deprecated line-height variables $line-height-tiny, $line-height-small, $line-height-regular, $line-height-bigger-regular, $line-height-medium, $line-height-large, $line-height-small-big, $line-height-big, $line-height-bigger-big, $line-height-small-huge and $line-height-huge. They will be removed in the next major version. (by @gfellerph with #1298)

6.0.0

Major Changes

Removed the unused Sass variable $table-head-bg. You can use it's value rgba(var(--post-contrast-color-rgb), 0.6) directly as an alternative (by @gfellerph with #1240)
Updated the markup for the stepper component in order to improve accessibility. Completed items now require the prefix "Complete" and incomplete steps are no longer links. (by @gfellerph with #1232)
Removed deprecated ng-bootstrap Checkbox and Radio buttons and replaced them with Bootstrap button groups. (by @alizedebray with #1199)
Major dependency update. The following versions are now supported:
- Angular 15
- Bootstrap 5.2.3
- ng-bootstrap 14 (by @gfellerph with #1210)

Minor Changes

Decoupled the fixed and the action button styles for the alert component. Alerts can now be fixed to bottom without having action buttons and can have action buttons without being fixed to the bottom of the page. (by @gfellerph with #1230)

Patch Changes

Deprecated the alert-error and the alert-notification variants of the alert component. These variants will be removed in the next major version. (by @gfellerph with #1214)
Deprecated the current sizing variables in favour of a new naming system that is more consistent with the design in Figma (by @gfellerph with #1251)
Deprecated the font-weight classes bold, regular and light. (by @gfellerph with #1216)
Changed the info color to light blue for alerts, notifications and contextual usage (by @gfellerph with #1235)
Deprecated the text-auto class. It's no longer necessary in combination with background utilities. (by @gfellerph with #1216)
Deprecated the base64 icons defined as CSS backgrounds. This technology is outdated and contributes a large amount to the CSS bloat. The current approach for using icons is the post-icon web-component. (by @gfellerph with #1226)
Deprecated the post-specific sizing variables (e.g. $size-hair, $size-huge, etc.) and classes (.m-1, .mt-sm-4, etc.) for all of the following properties: margin, padding, line-height, height, max-height, width, max-width and gap. (by @oliverschuerch with #1267)

5.4.1

Patch Changes

Reverted the update to Bootstrap 5.2 and Angular 15. This update should have been a major release and will be re-released as such as soon as possible. (by @gfellerph with #1207)

5.4.0

Minor Changes

Major dependency update. The following versions are now supported:
- Angular 15
- Bootstrap 5.2.3
- ng-bootstrap 14 (by @oliverschuerch with #1146)

Patch Changes

Fixed an issue with the font size of lead text that was too small due to a specificity issue with sass placeholders. (by @oliverschuerch with #1143)
Fixed an issue with floating labels on input fields that prevented the label from being truncated correctly if it was overflowing the text box (by @gfellerph with #1155)
Updated the algorithm for calculating color contrast and optimal text color based on a given background color. Texts on colored buttons now comply with the WCAG 2.1 AA guidelines. (by @gfellerph with #1154)

5.3.2

Patch Changes

Fixed font-weight for all headings. The default is now bold (700). (by @gfellerph with #1122)
Fixed table styles for striped, bordered and borderless tables (default HTML table) (by @gfellerph with #1063)
Added a highlight color for validation messages in Windows High Contrast Mode so these messages are more visible (by @gfellerph with #1121)

5.3.1

Patch Changes

Fixed the default and bordered table styles (by @gfellerph with #1062)

5.3.0

Minor Changes

Added two new icons number 2307 (roll container) and 2308 (collection container) (by @gfellerph with #977)

5.2.0

Minor Changes

Added a font-face definition CSS file for use with SAP cloud solutions as they need an externally hosted CSS file. (by @gfellerph with #929)

Patch Changes

Added bg-black as a background utility class with automatic text color (by @gfellerph with #830)
Unwrapped complex :is selector. When integrating in another project, the not-disabled-focus-hover mixin causes sass to silently fail and generate an empty output. (by @gfellerph with #889)

5.1.3

Patch Changes

Fixed an issue with the sidebar width. The fixed sidebar no longer spans the whole page and no longer hides the main page content beneath. (by @gfellerph with #858)

5.1.2

Patch Changes

Correctly declares dependencies used in Migration Schematics for Angular projects, fixing an issue when trying to migrate projects. (by @oliverschuerch with #794)
When outside days get hidden, they collapse in their flex context and change the alignment of the first days of the month. Adding flex-grow 1 ensures the hidden days still keep their space so the day labels on top match correctly with the calendar days. (by @gfellerph with #793)

5.1.1

Patch Changes

Set the opacity of tooltips to 1 (fully opaque) because text is hardly legible if the tooltip has underlying content.
^{by @gfellerph with #784}

5.1.0

Minor Changes

Added automatic migration for bootstrap close-button component.
^{by @oliverschuerch with #687}
Added automatic migration for bg-opacity classes.
^{by @oliverschuerch with #687}
Added automatic migration for button component btn-icon class.
^{by @oliverschuerch with #687}
Added automatic migration for general rtl properties.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap button component.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap form-switch component.
^{by @oliverschuerch with #687}
Added automatic migration for text-auto class.
^{by @oliverschuerch with #687}
Added automatic migration for required form-label class.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap blockquote component with footer.
^{by @oliverschuerch with #687}
Added automatic migration for form-checkbox component.
^{by @oliverschuerch with #687}
Added automatic migration for post custom-select component.
^{by @oliverschuerch with #687}
Added automatic migration for forms elements.
^{by @oliverschuerch with #687}
Added floating-labels migration for bootstrap form-control, form-select and textarea components.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap badge component.
^{by @oliverschuerch with #687}
Added automatic migration functionality which includes cheerio. This enalbes us to write migrations to mutate the html files of a project, with a simple jQuery like selector and with jQuery like update functions (e.g. $element.removeClass('test');, etc.).
^{by @oliverschuerch with #651}
Added automatic migration for sr-only and sr-only-focusable classes.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap blockquote component.
^{by @oliverschuerch with #687}
Added automatic migration for post subnavigation component.
^{by @oliverschuerch with #687}
Added automatic migration for bootstrap form-radio component.
^{by @oliverschuerch with #687}
Added automatic migration for post topic-teaser component.
^{by @oliverschuerch with #687}
Added automatic migration for ngbootstrap buttons component.
^{by @oliverschuerch with #687}

5.0.0

Major Changes

Refactored the stepper component in order to facilitate its use within a project.
^{by @alizedebray with #308}
Refactored colors. Bootstrap overrides are now clearly separated from Design System colors and only Design System colors are used in the components. This change also prepares for a dynamic dark mode by offering CSS variables for background and text contrast colors (see buttons.scss for an example).
^{by @gfellerph with #96}
Added requirement for width and height attributes on images in the topic-teaser component to be set to 100%. To be able to display the image properly in firefox and safari.
^{by @gfellerph with #350}
Added and extended grid-cols definition for .topic-teaser-content and .topic-teaser-image-container containers inside css and removed col classes from html. Improved image aspect-ratios, as well as font-size and padding of .link-list elements on smaller devices.
^{by @oliverschuerch with #310}
Updated entry file names for the styles package.
```
@use '@swisspost/design-system-styles'; // Default internet styles
@use '@swisspost/design-system-styles/intranet'; // Default intranet styles
@use '@swisspost/design-system-styles/core' as post; // Variables, mixins, functions and placeholders
```
1. Default import is now as simple as possible.
2. Intranet styles are clearly named as such.
3. Core functionality is a clear name, but for consistency with other prefixes, the core module can be namespaced as post. The usage would then be background-color: post.$yellow;.
  ^{by @gfellerph with #389}
Added storybook for documenting the basic styles.
^{by @gfellerph with #141}
Renamed Common Web Frontend to Swiss Post Design System.
^{by @gfellerph with #355}
Removed sass-variables such as $isolate-components. Moved bootstrap-feature variables ($enable-*) to a separate file. These will no longer be forwarded and cannot be overriden.
^{by @oliverschuerch with #188}
Dropped rounded and colored badges, updated dismissible badges and added checkable badges.
^{by @alizedebray with #353}
Removed inverted class for the subnavigation component, which is no longer necessary when using any bg-{colorname} class.
^{by @gfellerph with #361}
Css variables originating from the Design System are now prefixed with --post-{variablename}. Css variables from bootstrap are prefixed with --bs-{variablename}.
^{by @gfellerph with #361}
Removed deprecated scss-variables $font-size-map, $font-size-sm, $font-size-rg and $font-size-lg from project, in favor of the new $font-sizes map.
^{by @oliverschuerch with #189}
Refactored font-size and line-height maps with keys, for easier automation. Variables now are always accessible individually and collected in a loopable map. Font-sizes and line-heights are defined for the same sizes so it's possible to cross-reference a line-height based on font-size (see font-curve mixin).
^{by @gfellerph with #115}
Refactored background classes (.bg-{colorname}) for the alert and notification component.
^{by @oliverschuerch with #357}
Fixed heights on .form-control-lg and .floating-label .form-control elements. Removed some Design System only scss-variables.
^{by @oliverschuerch with #450}

Minor Changes

Added a story for the cards component.
^{by @LarissaMS with #250}
Added migrations for ng-button component. This will replace .btn-primary with .btn.btn-secondary on ng-button label elements.
^{by @oliverschuerch with #628}
Added migration for close-button component. This will remove .btn and .btn-icon from close-button elements.
^{by @oliverschuerch with #642}
Added a story for the badge component.
^{by @LarissaMS with #420}
Added a story for blockquote component.
^{by @LarissaMS with #257}
Added Angular migration schematics to the @swisspost/design-system-styles package. These migrations can be automatically applied by using the ng update @swisspost/design-system-styles command in your Angular project. For more information, have a look at the migration guide.
^{by @oliverschuerch with #611}
Added a button story with an overview and two single button stories.
^{by @LarissaMS with #233}
Added migration for the subnavigation component. This will remove the subnavigation-inverted class from the main element.
^{by @oliverschuerch with #640}
Added a story for topic-teaser component.
^{by @LarissaMS with #449}
Added migration for the topic-teaser component. This will remove the grid and font-curve classes.
^{by @oliverschuerch with #643}
Added migration for secondary-classes. This will remove the classes bg-secondary, border-secondary and text-secondary.
^{by @oliverschuerch with #626}
Added Angular migration schematics that can be executed with the ng update command.
^{by @oliverschuerch with #538}

Patch Changes

Changed the form-range component to show the pointer cursor on the thumb element.
^{by @LarissaMS with #302}
Added high-contrast-mode styles for the form-range component.
^{by @oliverschuerch with #159}
Fixed the contrast color used in alert component with color success, the close button styles and icons color in toast and alert component in high-contrast-mode.
^{by @Janobob with #2}
Removed the postinstall script from the package.json files, which was previously used to install the cypress binary in the CI environment. This is now handled on the CI environment itself.
^{by @oliverschuerch with #656}
Added high-contrast-mode styles for form-switch component.
^{by @oliverschuerch with #342}
Fixed high-contrast-mode styles for tabs component.
^{by @oliverschuerch with #252}
Added high-contrast-mode styles for .accordion-button elements.
^{by @oliverschuerch with #388}
Fixed dropdown line-height and an invalid background-color style in the intranet-header component.
^{by @oliverschuerch with #253}
Fixed heading styles. This includes the html tags h1, h2, h3, h4, h5 and h6, as well as there css-class pendants .h1, h2...
^{by @gfellerph with #115}
Updated sizes for button components and reduced CSS output size.
^{by @gfellerph with #103}
Refactored tabs component, to get rid of the css-class text-auto.
^{by @oliverschuerch with #187}
Added styles to show floating-label placeholder in empty form-select component like a default input placeholder.
^{by @oliverschuerch with #169}
Added high-contrast-mode styles for datatable component.
^{by @oliverschuerch with #434}
Fixed border styles in form-switch component in high-contrast-mode.
^{by @gfellerph with #116}
Fixed floating-label placeholder opacity in high-contrast-mode.
^{by @LarissaMS with #303}
Added high-contrast-mode styles for all form components with class form-control.
^{by @oliverschuerch with #384}
Fixed safari display error in forms components.
^{by @oliverschuerch with #433}
Added high-contrast-mode styles for component stepper component.
^{by @oliverschuerch with #164}
Refactored styles for topic-teaser component.
^{by @oliverschuerch with #162}
Added styles and documentation for ng-datatable component loading indicator.
^{by @Janobob with #7}
Removed border style from the table body element.
^{by @Janobob with #5}
Added high-contrast-mode styles for the subnavigation component.
^{by @oliverschuerch with #403}
Added high-contrast-mode styles for the form-select component.
^{by @oliverschuerch with #348}
Added high-contrast-mode styles for the progressbar component.
^{by @oliverschuerch with #153}
Added high-contrast-mode styles for link elments. This overrides all a, a:visited, a:focus and a:hover colors with important, to avoid different styling for visited links in firefox.
^{by @oliverschuerch with #402}
Added high-contrast-mode styles for the spinner component.
^{by @oliverschuerch with #395}
Added font-size in .link-list elements, without a font-size-curve and removed the corresponding classes from the html-example.
^{by @oliverschuerch with #310}
Added padding for inner elements in nested badge component.
^{by @oliverschuerch with #646}
Moved timepicker validation fix from version 4 to version 5.
^{by @Janobob with #14}
Added high-contrast-mode styles to dropdown compoment. Added high-contrast-mode styles to the .datatale-button element in the datatable component. Fixed high-contrast-mode styles for disabled buttons.
^{by @oliverschuerch with #439}
Added high-contrast-mode styles for the ng-timepicker component.
^{by @oliverschuerch with #394}
Included last 2 safari versions in the .browserslistrc and aligned .browserslistrc files in all projects.
^{by @oliverschuerch with #162}
Added high-contrast-mode styles for the progressbar component.
^{by @oliverschuerch with #393}
Added story for the form-control component.
^{by @alizedebray with #560}
Fixed font-color in high-contrast-mode for focussed .form-select and .form-select[multiple] elements.
^{by @oliverschuerch with #338}
Removed unnecessary pseudo-element on open sidebar menu icon.
^{by @oliverschuerch with #419}
Removed search button border, from the intranet-header component.
^{by @oliverschuerch with #417}
Add padding on media-breakpoint-down(md) in the intranet-header component.
^{by @LarissaMS with #451}
Fixed missing scss-variable imports in the datepicker component.
^{by @oliverschuerch with #460}
Created a new package offering migration schematics for the Design System Styles. Removed custom input styles that are no longer used.
^{by @alizedebray with #183}
Switched to the Apache 2.0 License.
^{by @gfellerph with #12}
Removed license text from CSS bundles. The license is included in distributed NPM packages.
^{by @gfellerph with #12}

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

@swisspost/design-system-styles

9.0.0-next.8

Major Changes

Minor Changes

Patch Changes

9.0.0-next.7

Major Changes

Patch Changes

9.0.0-next.6

Major Changes

Minor Changes

Patch Changes

9.0.0-next.5

Major Changes

Minor Changes

Patch Changes

9.0.0-next.4

Major Changes

Minor Changes

9.0.0-next.3

Major Changes

Minor Changes

Patch Changes

9.0.0-next.2

Minor Changes

Patch Changes

9.0.0-next.1

Major Changes

Minor Changes

Patch Changes

9.0.0-next.0

Major Changes

Minor Changes

Patch Changes

8.2.0

Minor Changes

Patch Changes

8.1.0

Patch Changes

8.0.0

Major Changes

Patch Changes

7.4.0

7.3.1

7.3.0

Minor Changes

Patch Changes

7.2.1

Patch Changes

7.2.0

Minor Changes

Patch Changes

7.1.0

Minor Changes

Patch Changes

7.0.0

Major Changes

Minor Changes

Patch Changes

6.6.4

Patch Changes

6.6.3

Patch Changes

6.6.2

Patch Changes

6.6.1

Patch Changes

6.6.0

Minor Changes

Patch Changes

6.5.1

Patch Changes

6.5.0

Minor Changes