@swisspost/design-system-styles 6.6.4 → 7.1.0

package/variables/_type.scss

@@ -10,7 +10,15 @@
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: 'Frutiger Neue For Post', system-ui, sans-serif !default;
+$font-family-sans-serif:
+  'Frutiger Neue For Post',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
   monospace !default;
 $font-family-base: $font-family-sans-serif !default;

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/_stepper.scss

@@ -1,34 +1,45 @@
-@use './forms';
 @use './../type';
 @use './../color';
 @use './../spacing';
+@use './../animation';
 
 @use './../../functions/icons' as icon-fn;
 
 $stepper-bar-height: spacing.$size-micro;
+$stepper-bar-color: color.$gray-40;
+$stepper-bar-fill-color: color.$yellow;
 
-$stepper-indicator-height: spacing.$size-bigger-big;
+$stepper-indicator-size: spacing.$size-bigger-big;
 $stepper-indicator-border-width: spacing.$size-micro;
-$stepper-indicator-border-color: color.$white;
-$stepper-indicator-font-size: type.$font-size-regular;
-$stepper-indicator-font-weight: type.$font-weight-base;
+$stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
+$stepper-indicator-font-weight: type.$font-weight-bold;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$stepper-indicator-check-icon-size: spacing.$size-large;
-$stepper-indicator-hover-color: color.$white;
-$stepper-indicator-hover-bg: color.$black;
-$stepper-indicator-hover-outline: forms.$input-focus-outline-thickness solid
-  var(--post-contrast-color);
+$stepper-indicator-check-size: spacing.$size-large;
+$stepper-indicator-transition:
+  color animation.$transition-base-timing,
+  background-color animation.$transition-base-timing;
+
+$stepper-indicator-hover-color: var(--post-contrast-color-inverted);
+$stepper-indicator-hover-bg: var(--post-contrast-color);
+
 $stepper-indicator-future-bg: color.$gray-60;
 $stepper-indicator-future-color: color.$white;
 
+$stepper-link-line-height: type.$line-height-sm;
 $stepper-link-gap: spacing.$size-mini;
-$stepper-link-color: color.$gray-60;
-$stepper-link-hover-color: color.$black;
-$stepper-link-current-color: color.$black;
-$stepper-link-current-font-size: type.$font-size-regular;
+$stepper-link-spacing: spacing.$size-regular;
+$stepper-link-color: var(--post-gray-60);
+
+$stepper-link-current-color: var(--post-gray-80);
 $stepper-link-current-font-weight: type.$font-weight-bold;
 
 // DEPRECATED
+$stepper-link-hover-color: $stepper-link-color;
+$stepper-indicator-hover-outline: spacing.$size-line solid var(--post-focus-color);
+$stepper-indicator-font-size: type.$font-size-16;
+$stepper-link-current-font-size: type.$font-size-16;
 $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
 $stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url('2105',$stepper-indicator-hover-color)}');
+$stepper-indicator-height: $stepper-indicator-size;
+$stepper-indicator-check-icon-size: $stepper-indicator-check-size;

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/components/choice-control-card.scss

@@ -1,148 +0,0 @@
-@use '../variables/color';
-@use '../variables/commons';
-@use '../variables/spacing';
-@use '../mixins/utilities';
-
-.radio-button-card,
-.checkbox-button-card {
-  --post-card-select--hover-bg: #{color.$gray-10};
-
-  position: relative;
-  display: flex;
-  gap: 0 spacing.$size-mini;
-
-  width: 100%;
-
-  color: color.$gray-80;
-  background-color: color.$white;
-  border: 2px solid color.$gray-60;
-  border-radius: commons.$border-radius;
-  padding: spacing.$size-regular;
-  transition:
-    color 100ms ease-in-out,
-    background-color 100ms ease-in-out,
-    border-color 100ms ease-in-out;
-
-  // Checked
-  &:where(:has(input:checked), .checked) {
-    --post-card-select--hover-bg: #{color.$yellow};
-    background-color: color.$yellow;
-    border-color: color.$gray-60;
-
-    input {
-      background-color: color.$white !important;
-    }
-  }
-
-  // Focus
-  &:where(:has(input:focus-visible), .focused) {
-    background-color: var(--post-card-select--hover-bg);
-    outline: 2px solid color.$black;
-    outline-offset: 2px;
-    border-color: color.$black;
-
-    input {
-      border-color: color.$black;
-    }
-  }
-
-  // Hover
-  &:where(:hover:not(:has(input:disabled)), :hover:not(.disabled)) {
-    border-color: color.$black;
-    color: color.$black;
-    background-color: var(--post-card-select--hover-bg);
-
-    input {
-      border-color: color.$black;
-    }
-
-    @include utilities.high-contrast-mode() {
-      border-color: Highlight;
-      transition: none;
-    }
-  }
-
-  // Disabled
-  &:has(input:disabled),
-  &.disabled {
-    border-color: color.$gray-20;
-    color: color.$gray-40 !important;
-
-    > * {
-      cursor: default;
-    }
-  }
-
-  &:has(input:disabled:checked),
-  &.disabled.checked {
-    background-color: color.$gray-10;
-  }
-
-  // Error
-  &:has(input[aria-invalid]),
-  &:has(input.is-invalid),
-  &.is-invalid {
-    color: color.$error;
-    border-color: color.$error;
-
-    ~ .invalid-feedback {
-      display: block;
-    }
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  > * {
-    cursor: pointer;
-  }
-
-  post-icon {
-    width: 2em;
-    height: 2em;
-    margin-left: spacing.$size-mini;
-    pointer-events: none;
-  }
-
-  input {
-    border-color: color.$gray-80;
-    background-color: color.$white;
-    transition: border-color 100ms ease-in-out;
-    grid-column: 1 / 2;
-
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
-
-  .form-check-label {
-    padding-left: 0;
-
-    &::before {
-      // This spans up the click area of the label to the whole
-      // card in order to make it clickable natively.
-      content: '';
-      position: absolute;
-      inset: -2px;
-    }
-
-    span {
-      // Lift spans above the before element to make them selectable
-      position: relative;
-    }
-  }
-
-  input,
-  .form-check-label {
-    margin-block: 0.25rem;
-  }
-
-  // Align input and label if there is an icon
-  &:has(post-icon) {
-    input,
-    .form-check-label {
-      margin-top: 0.25rem;
-    }
-  }
-}

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
-  }
-}