@swisspost/design-system-styles 6.6.3 → 7.0.0

package/variables/components/_badge.scss

@@ -1,48 +1,24 @@
-@use 'sass:math';
-
-@use './button';
-@use './../animation';
 @use './../color';
 @use './../commons';
 @use './../spacing';
 @use './../type';
 
+@use './button';
 @use './../../functions/sizing';
 
-// Design System custom variables
-$badge-height: button.$btn-height-rg;
-$badge-gap: spacing.$size-mini;
-$badge-border-color: var(--post-gray-60);
-$badge-border-width: commons.$border-thick;
-$badge-transition:
-  color 250ms,
-  background-color 250ms,
-  border-color 250ms;
-$badge-hover-color: color.$black;
-$badge-hover-bg-color: color.$gray-10;
-$badge-active-color: color.$black;
-$badge-active-bg-color: color.$yellow;
-
-$badge-height-sm: button.$btn-height-sm;
-$badge-gap-sm: sizing.px-to-rem(6px);
-$badge-font-size-sm: type.$font-size-tiny;
+$badge-border-radius: 50rem;
+$badge-line-height: type.$line-height-copy;
+$badge-color: color.$white;
+$badge-bg: color.$error;
+$badge-border: color.$white solid commons.$border-thick;
 
-$badge-nested-height: sizing.px-to-rem(22px);
-$badge-nested-color: color.$gray-60;
-$badge-nested-bg-color: color.$gray-10;
-$badge-nested-border-color: color.$white;
-$badge-nested-font-size: sizing.px-to-rem(10px);
-$badge-nested-translate-x: ($badge-height - $badge-nested-height) * 0.5;
-$badge-nested-active-bg-color: color.$white;
-$badge-nested-translate-x-sm: ($badge-height-sm - $badge-nested-height) * 0.5;
+$badge-height: spacing.$size-large;
+$badge-height-sm: spacing.$size-regular;
+$badge-height-empty: spacing.$size-mini;
 
-$badge-check-input-height: spacing.$size-small-large;
-$badge-check-input-bg-color: color.$white;
+$badge-padding-x: spacing.$size-mini;
+$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
 
-// Bootstrap variables
-$badge-font-size: type.$font-size-small;
-$badge-font-weight: type.$font-weight-normal;
-$badge-color: var(--post-gray-80);
-$badge-padding-y: 0;
-$badge-padding-x: spacing.$size-regular - sizing.px-to-rem($badge-border-width);
-$badge-border-radius: 50rem;
+$badge-font-size: type.$font-size-12;
+$badge-font-size-sm: 10px;

package/variables/components/_card.scss

@@ -22,7 +22,7 @@ $card-border-color: color.$gray-20 !default; // Design System
 $card-inner-border-radius: calc(
   #{$card-border-radius} - #{$card-border-width}
 ) !default; // Design System
-$card-cap-bg: color.$gray-background-light !default;
+$card-cap-bg: color.$light !default;
 $card-bg: color.$white !default;
 
 $card-img-overlay-padding: $card-spacer-x !default;

package/variables/components/_chip.scss

@@ -0,0 +1,50 @@
+@use './button';
+@use './../animation';
+@use './../color';
+@use './../commons';
+@use './../spacing';
+@use './../type';
+
+@use './../../functions/sizing';
+
+$chip-color: color.$gray-80;
+$chip-bg: color.$white;
+$chip-border-color: color.$gray-60;
+$chip-border-width: commons.$border-thick;
+$chip-border-radius: commons.$border-radius-pill;
+
+$chip-height: button.$btn-height-rg;
+$chip-max-width: sizing.px-to-rem(296px);
+$chip-padding-x: spacing.$size-regular;
+$chip-gap: spacing.$size-mini;
+
+$chip-font-size: type.$font-size-16;
+$chip-font-weight: type.$font-weight-normal;
+$chip-line-height: type.$line-height-copy;
+
+$chip-transition:
+  color animation.$transition-base-timing,
+  background-color animation.$transition-base-timing,
+  border-color animation.$transition-base-timing;
+
+$chip-height-sm: button.$btn-height-sm;
+$chip-gap-sm: sizing.px-to-rem(6px);
+$chip-font-size-sm: type.$font-size-14;
+$chip-padding-x-sm: spacing.$size-small-regular;
+
+$chip-hover-color: color.$black;
+$chip-hover-bg: color.$gray-20;
+
+$chip-active-color: color.$black;
+$chip-active-bg: color.$yellow;
+
+$chip-disabled-bg: color.$white;
+$chip-disabled-active-bg: color.$gray;
+
+$chip-text-transition: text-decoration animation.$transition-time-simple
+  animation.$transition-easing-default;
+
+$chip-close-button-icon: 2043;
+$chip-close-button-border-radius: commons.$border-radius-round;
+$chip-close-button-height: spacing.$size-large;
+$chip-close-button-height-sm: spacing.$size-regular;

package/variables/components/_datatable.scss

@@ -11,7 +11,7 @@
 $datatable-header-font-weight: type.$font-weight-bold;
 $datatable-header-unsorted-color: color.$gray-60;
 
-$datatable-cell-bg: color.$gray-background-light;
+$datatable-cell-bg: color.$light;
 $datatable-cell-padding-x: spacing.$size-regular;
 $datatable-cell-padding-y: spacing.$size-mini;
 $datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x;

package/variables/components/_dropdowns.scss

@@ -17,7 +17,7 @@ $dropdown-box-shadow: 0 0.5rem 1rem rgba(color.$black, 0.175) !default;
 
 $dropdown-link-color: color.$gray-60 !default;
 $dropdown-link-hover-color: color.$black !default;
-$dropdown-link-hover-bg: color.$gray-background-light !default;
+$dropdown-link-hover-bg: color.$light !default;
 
 $dropdown-link-active-color: color.$gray-80 !default;
 $dropdown-link-active-bg: color.$yellow !default;

package/variables/components/_form-check.scss

@@ -5,15 +5,89 @@
 @use './../animation';
 @use './../../functions/icons';
 @use './../../functions/sizing';
+@use './../../functions/forms' as forms-fn;
 
 $form-check-row-gap: spacing.$size-small-regular !default;
 $form-check-column-gap: spacing.$size-mini !default;
 $form-check-margin-bottom: spacing.$size-regular !default;
 $form-check-inline-margin-right: spacing.$size-large !default;
-$form-check-input-size: spacing.$size-large !default;
+$form-check-input-size: 1.375rem !default;
 $form-check-input-size-sm: spacing.$size-regular !default;
 $form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
+$form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2;
+$form-check-input-disabled-svg-stroke-square-pattern-lg: '2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4';
+$form-check-input-disabled-svg-stroke-square-pathlength-lg: 88;
+$form-check-input-disabled-svg-stroke-square-pattern-sm: '2 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4';
+$form-check-input-disabled-svg-stroke-square-pathlength-sm: 66;
+$form-check-input-disabled-svg-stroke-circle-pattern: '4 2';
+
+// Checkbox lg
+$form-check-input-disabled-background-url-light-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-dark-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-hcm-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+//Checkbox sm
+$form-check-input-disabled-background-url-light-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-dark-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-hcm-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+// Radio
+$form-check-input-radio-disabled-background-url-light: forms-fn.get-background-svg-stroke(
+  'circle',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-radio-disabled-background-url-dark: forms-fn.get-background-svg-stroke(
+  'circle',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg-stroke(
+  'circle',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
 
 $form-switch-column-gap: spacing.$size-regular !default;
 $form-switch-height: spacing.$size-big !default;

package/variables/components/_form-select.scss

@@ -13,10 +13,25 @@ $form-select-indicator-disabled: url(icons.get-colored-svg-url(
   '2113',
   $form-select-disabled-color
 )) !default;
-$form-select-indicator-success: url(icons.get-colored-svg-url(
-  '2105',
-  color.$success-green
-)) !default;
-$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
 $form-select-indicator-hcm-dark: url(icons.get-colored-svg-url('2113', color.$white)) !default;
 $form-select-indicator-hcm-light: url(icons.get-colored-svg-url('2113', color.$black)) !default;
+
+$form-select-indicator-success: url(icons.get-colored-svg-url('2105', color.$success)) !default;
+$form-select-indicator-success-hcm-dark: url(icons.get-colored-svg-url(
+  '2105',
+  color.$white
+)) !default;
+$form-select-indicator-success-hcm-light: url(icons.get-colored-svg-url(
+  '2105',
+  color.$black
+)) !default;
+
+$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error)) !default;
+$form-select-indicator-error-hcm-dark: url(icons.get-colored-svg-url(
+  '2104',
+  color.$white
+)) !default;
+$form-select-indicator-error-hcm-light: url(icons.get-colored-svg-url(
+  '2104',
+  color.$black
+)) !default;

package/variables/components/_form-validation.scss

@@ -3,29 +3,37 @@
 @use './../type';
 @use './../components/button';
 @use './../components/forms';
+@use './../../functions/icons';
 
 // Bootstrap variables
 $form-feedback-margin-top: 0 !default;
 $form-feedback-font-size: type.$font-size-12 !default;
 $form-feedback-valid-color: color.$gray-60 !default;
 $form-feedback-invalid-color: color.$error !default;
-$form-feedback-icon-valid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,50.588235%25,22.745098%25);fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A") !default;
+$form-feedback-icon-valid: url(icons.get-colored-svg-url('2105', color.$success)) !default;
+$form-feedback-icon-valid-hcm-dark: url(icons.get-colored-svg-url('2105', color.$white)) !default;
+$form-feedback-icon-valid-hcm-light: url(icons.get-colored-svg-url('2105', color.$black)) !default;
+$form-feedback-icon-invalid: url(icons.get-colored-svg-url('2104', color.$error)) !default;
+$form-feedback-icon-invalid-hcm-dark: url(icons.get-colored-svg-url('2104', color.$white)) !default;
+$form-feedback-icon-invalid-hcm-light: url(icons.get-colored-svg-url(
+  '2104',
+  color.$black
+)) !default;
 
 // Design System custom variables
 $form-feedback-padding-x: button.$input-btn-padding-x !default;
 $form-feedback-padding-y: 0.5 * button.$input-btn-padding-x !default;
 $form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
 $form-feedback-icon-offset: spacing.$size-mini !default;
-$form-feedback-valid-bg: color.$success-green !default;
+$form-feedback-valid-bg: color.$success !default;
 $form-feedback-valid-text: color.$white !default;
 $form-feedback-invalid-bg: color.$error !default;
 $form-feedback-invalid-text: color.$white !default;
-$form-feedback-custom-color: color.$success-green !default;
-$form-feedback-custom-bg: color.$success-green !default;
+$form-feedback-custom-color: color.$success !default;
+$form-feedback-custom-bg: color.$success !default;
 $form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
   rgba($form-feedback-invalid-color, 0.25) !default;
 $form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width
-rgba($form-feedback-valid-color, 0.25) !default;
+  rgba($form-feedback-valid-color, 0.25) !default;
 $form-feedback-custom-text: color.$white !default;
 $form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;

package/variables/components/_index.scss

@@ -4,6 +4,7 @@
 @forward 'button';
 @forward 'card';
 @forward 'carousel';
+@forward 'chip';
 @forward 'close';
 @forward 'datepicker';
 @forward 'dropdowns';
@@ -24,5 +25,6 @@
 @forward 'spinners';
 @forward 'subnavigation';
 @forward 'tables';
+@forward 'tag';
 @forward 'thumbnails';
 @forward 'tooltips';

package/variables/components/_list-group.scss

@@ -13,7 +13,7 @@ $list-group-border-radius: 0 !default;
 $list-group-item-padding-y: map.get(spacing.$post-sizes, 'small-regular') !default;
 $list-group-item-padding-x: map.get(spacing.$post-sizes, 'large') !default;
 
-$list-group-hover-bg: color.$gray-background-light !default;
+$list-group-hover-bg: color.$light !default;
 $list-group-hover-bg-inverted: color.$white !default;
 $list-group-active-color: color.$white !default;
 $list-group-active-bg: color.$gray-80 !default;

package/variables/components/_notification.scss

@@ -73,12 +73,13 @@ $notification-variants: () !default;
 $notification-variants: list.join(
   $notification-variants,
   (
-    'primary' color.$gray-80 3134,
-    'success' color.$success-green 2105,
-    'danger' color.$error 2104,
+    // When changed, check $notification-variants as well in packages/styles/src/variables/_color.scss
+    'primary' color.$primary 3134,
+    'success' color.$success 2105,
     'warning' color.$warning 2104,
+    'danger' color.$error 2104,
     'info' color.$info 2106,
-    'gray' color.$gray-background 2201,
+    'gray' color.$gray 2201,
     // deprecated
     'notification' color.$gray-80 3134,
     'error' color.$error 2104

package/variables/components/_pagination.scss

@@ -23,7 +23,7 @@ $pagination-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
 $pagination-focus-outline: 0 !default;
 
 $pagination-hover-color: color.$black !default;
-$pagination-hover-bg: color.$gray-background-light !default;
+$pagination-hover-bg: color.$light !default;
 $pagination-hover-border-color: color.$gray-10 !default;
 
 $pagination-active-color: color.$black !default;
@@ -31,7 +31,7 @@ $pagination-active-bg: color.$yellow !default;
 $pagination-active-border-color: color.$yellow !default;
 
 $pagination-disabled-color: color.$gray-40 !default;
-$pagination-disabled-bg: color.$gray-background-light !default;
+$pagination-disabled-bg: color.$light !default;
 $pagination-disabled-border-color: color.$gray-10 !default;
 
 $pagination-height-border: $pagination-border-width * 2 !default;

package/variables/components/_subnavigation.scss

@@ -7,7 +7,7 @@
 // Subnavigation
 
 $subnavigation-background-color: color.$white;
-$subnavigation-background-color-alternate: color.$gray-background-light;
+$subnavigation-background-color-alternate: color.$light;
 
 $subnavigation-border-bottom-width: commons.$border-width;
 $subnavigation-border-bottom-color: color.$gray-10;

package/variables/components/_tag.scss

@@ -0,0 +1,27 @@
+@use './../color' as color;
+@use './../spacing' as spacing;
+@use './../type' as type;
+@use '../../functions/sizing' as sizing;
+
+$tag-gap: spacing.$size-micro;
+$tag-padding-y: 0;
+$tag-padding-x: spacing.$size-mini;
+$tag-max-width: sizing.px-to-rem(296);
+$tag-border-width: spacing.$size-hair;
+$tag-border-radius: spacing.$size-micro;
+$tag-font-size: type.$font-size-16;
+$tag-line-height: spacing.$size-big - (sizing.px-to-rem($tag-border-width) * 2);
+$tag-icon-size: $tag-font-size * 1.25;
+
+$tag-sm-line-height: spacing.$size-large;
+$tag-sm-icon-size: $tag-font-size;
+
+$tag-default-background: color.$gray-10;
+$tag-backgrounds: (
+  'white': color.$white,
+  'yellow': color.$yellow,
+  'success': color.$success,
+  'warning': color.$warning,
+  'danger': color.$error,
+  'info': color.$info,
+);

package/mixins/_badge.scss

@@ -1,31 +0,0 @@
-@use './../variables/components/badge';
-@use './../mixins/utilities';
-
-@mixin badge-hover-state {
-  color: badge.$badge-hover-color;
-  background-color: badge.$badge-hover-bg-color;
-  border-color: transparent;
-
-  @include utilities.high-contrast-mode() {
-    background-color: Highlight;
-    border-color: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none; // Disable "readability backplate" on blink browser that interferes with the colors on this case
-  }
-}
-
-@mixin badge-active-state {
-  color: badge.$badge-active-color;
-  background-color: badge.$badge-active-bg-color;
-  border-color: transparent;
-
-  > .badge {
-    background-color: badge.$badge-nested-active-bg-color;
-  }
-
-  @include utilities.high-contrast-mode() {
-    background-color: SelectedItem;
-    color: SelectedItemText;
-    forced-color-adjust: none; // Disable "readability backplate" on blink browser that interferes with the colors on this case
-  }
-}