fix(styles): fix collapsible component styles

.changeset/yellow-wombats-battle.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Fixed collapsible/accordion styles that broke after Bootstrap removed several CSS custom properties.

packages/components/src/components/post-collapsible/post-collapsible.scss

@@ -1,4 +1,3 @@
-@use '@swisspost/design-system-styles/basics';
 @use '@swisspost/design-system-styles/components/accordion';
 @use '@swisspost/design-system-styles/components/transitions';
 

packages/demo/src/app/home/home.component.scss

@@ -151,7 +151,7 @@
 }
 
 .accordion-button {
-  @include post.font-curve(post.$accordion-font-curve);
+  @include post.font-curve(post.$accordion-heading-font-curve);
 
   small {
     @include post.font-curve('tiny');

packages/styles/src/components/accordion.scss

@@ -1,94 +1,103 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/accordion' as ba;
+@use './../mixins/button' as button-mixins;
+@use './../mixins/color' as color-mixins;
+@use './../mixins/icons' as icon-mixins;
+@use './../mixins/type' as type-mixins;
+@use './../mixins/utilities' as utility-mixins;
 
-@use './../mixins/type';
-@use './../mixins/utilities';
-@use './../variables/spacing';
 @use './../variables/components/accordion';
-@use './../variables/components/button';
 
 .accordion-item {
-  border-right: 0;
-  border-left: 0;
-  background-color: transparent;
+  border-block-start: accordion.$accordion-border-width solid accordion.$accordion-border-color;
+}
 
-  &:last-of-type {
-    border-bottom: 0;
-  }
+.accordion-header {
+  @include type-mixins.font-curve(accordion.$accordion-header-font-curve);
+  font-weight: accordion.$accordion-header-font-weight;
+  line-height: accordion.$accordion-header-line-height;
+  margin: 0;
 }
 
 .accordion-button {
-  @include type.font-curve(accordion.$accordion-font-curve);
+  @include button-mixins.reset-button;
 
-  background-color: transparent;
-  font-weight: accordion.$accordion-button-font-weight;
-  line-height: accordion.$accordion-button-line-height;
+  width: 100%;
+  position: relative;
+  padding-block: accordion.$accordion-button-padding;
+  padding-inline-start: accordion.$accordion-button-padding;
+  padding-inline-end: accordion.$accordion-button-padding + accordion.$accordion-icon-size;
+  text-align: start;
 
-  &:hover,
-  &:focus {
-    &:not(:disabled) {
-      color: accordion.$accordion-button-hover-color;
-    }
+  &:not(:disabled) {
+    cursor: accordion.$accordion-button-cursor;
   }
 
   &:disabled {
-    opacity: button.$btn-disabled-opacity !important;
+    opacity: accordion.$accordion-button-disabled-opacity;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: accordion.$accordion-button-focus-box-shadow;
+  }
+
+  &::after {
+    @include icon-mixins.icon(accordion.$accordion-icon-name);
+    content: '';
+    display: block;
+    height: accordion.$accordion-icon-size;
+    width: accordion.$accordion-icon-size;
+    position: absolute;
+    inset-inline-end: accordion.$accordion-button-padding;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    transition: accordion.$accordion-icon-transition;
+
+    // add border to fix visual issue during rotation
+    border: 1px solid rgb(var(--post-bg-rgb, 255, 255, 255));
   }
 
-  .accordion-item[open] &::after {
-    transform: accordion.$accordion-icon-transform;
+  &.collapsed::after {
+    transform: translateY(-50%) accordion.$accordion-icon-transform;
   }
 
-  // style to improve hcm mode
-  @include utilities.high-contrast-mode() {
+  // TODO: find a way to style WHCM within web component
+  @include utility-mixins.high-contrast-mode() {
     &:hover,
     &:focus-visible {
       &:not(:disabled) {
-        outline: spacing.$size-line solid Highlight;
+        outline: accordion.$accordion-border-width solid Highlight;
       }
     }
 
     &:disabled {
       opacity: 1 !important;
     }
+  }
+}
 
-    &::after {
-      background-image: $accordion-hcm-icon;
-    }
-
-    &:not(.collapsed)::after {
-      background-image: $accordion-hcm-icon;
+.accordion-body {
+  padding: accordion.$accordion-body-padding;
+  border-block-start: accordion.$accordion-border-width solid accordion.$accordion-border-color;
+
+  @each $heading-size in (1 2 3 4 5 6) {
+    h#{$heading-size},
+    .h#{$heading-size} {
+      @include type-mixins.font-curve(accordion.$accordion-heading-font-curve);
+      margin: accordion.$accordion-heading-margin;
+      font-weight: accordion.$accordion-heading-font-weight;
     }
   }
 }
 
+.accordion-button,
 .accordion-body {
-  padding-top: accordion.$accordion-body-padding-top;
-  padding-bottom: accordion.$accordion-body-padding-bottom;
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include type.font-curve(accordion.$accordion-font-curve);
-
-    margin-top: accordion.$accordion-body-heading-margin-top;
-    margin-bottom: 0;
-    font-weight: accordion.$accordion-body-heading-font-weight;
-
-    &,
-    p {
-      &:first-child {
-        margin-top: 0;
-      }
+  > :first-child {
+    margin-block-start: 0 !important;
+  }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  > :last-child {
+    margin-block-end: 0 !important;
   }
 }

packages/styles/src/functions/_icons.scss

@@ -46,7 +46,7 @@
   @return $svg;
 }
 
-@function get-colored-svg-url($icon-name, $color) {
+@function get-svg-url($icon-name) {
   $svg-url: '';
 
   @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
@@ -59,7 +59,11 @@
     @error "Icon '#{$icon-name}' does not exist.";
   }
 
-  @return add-fill-color($svg-url, $color);
+  @return $svg-url;
+}
+
+@function get-colored-svg-url($icon-name, $color) {
+  @return add-fill-color(get-svg-url($icon-name), $color);
 }
 
 @function get-pre-colored-svg-url($icon-name) {

packages/styles/src/mixins/_icons.scss

@@ -7,6 +7,12 @@
 @use './../functions/icons' as icon-fn;
 @use './../mixins/utilities';
 
+@mixin icon($name) {
+  background-color: currentColor;
+  mask-image: url('#{icon-fn.get-svg-url($name)}');
+}
+
+// DEPRECATED
 @mixin pi($name, $color: color.$black) {
   $type: meta.type-of($color);
   $final-color: $color;
@@ -21,18 +27,18 @@
     }
   }
   border-color: $final-color;
-  background-image: url(icon-fn.get-colored-svg-url($name, $final-color));
+  background-image: url('#{icon-fn.get-colored-svg-url($name, $final-color)}');
 
   // set icon to white on hcm
   @include utilities.high-contrast-mode() {
     @if ($final-color == color.$black) {
       filter: invert(100%);
     } @else {
-      background-image: url(icon-fn.get-colored-svg-url($name, color.$white));
+      background-image: url('#{icon-fn.get-colored-svg-url($name, color.$white)}');
     }
   }
 }
 
 @mixin pi-pre($name) {
-  background-image: url(icon-fn.get-pre-colored-svg-url($name));
+  background-image: url('#{icon-fn.get-pre-colored-svg-url($name)}');
 }

packages/styles/src/variables/components/_accordion.scss

@@ -1,35 +1,53 @@
-@use './../spacing';
-@use './../type';
+@use './../../functions/icons';
+
+@use './../animation';
 @use './../color';
 @use './../commons';
-@use './../animation';
-@use './../../functions/sizing';
-@use './../../functions/icons';
+@use './../spacing';
+@use './../type';
 
-$accordion-padding-x: spacing.$size-regular !default;
-$accordion-border-color: color.$gray-10 !default;
+@use './button';
+
+$accordion-padding: spacing.$spacer !default;
 $accordion-border-width: commons.$border-thick !default;
+$accordion-border-color: color.$gray-10 !default;
+
+$accordion-header-font-curve: 'regular' !default;
+$accordion-header-font-weight: type.$font-weight-bold !default;
+$accordion-header-line-height: type.$line-height-copy !default;
+
+$accordion-button-cursor: pointer !default;
+$accordion-button-padding: $accordion-padding !default;
+$accordion-button-disabled-opacity: button.$btn-disabled-opacity !default;
+$accordion-button-focus-box-shadow: button.$btn-focus-box-shadow !default;
+
+$accordion-icon-name: 2112 !default;
+$accordion-icon-size: spacing.$size-large !default;
+$accordion-icon-transition: transform animation.$transition-base-timing !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+
+$accordion-body-padding: spacing.$size-small-regular $accordion-padding spacing.$size-bigger-big !default;
+
+$accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
+$accordion-heading-font-curve: $accordion-header-font-curve !default;
+$accordion-heading-font-weight: $accordion-header-font-weight !default;
+
+// Deprecated
+$accordion-padding-x: spacing.$size-regular !default;
 $accordion-border-radius: 0 !default;
 $accordion-font-curve: 'regular';
-
 $accordion-body-padding-top: spacing.$size-small-regular !default;
 $accordion-body-padding-bottom: spacing.$size-bigger-big !default;
-
 $accordion-body-heading-margin-top: spacing.$size-bigger-big;
 $accordion-body-heading-font-weight: type.$font-weight-bold;
-
 $accordion-button-padding-y: spacing.$size-regular !default;
 $accordion-button-color: color.$black !default;
 $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: color.$black !default;
 $accordion-button-hover-color: color.$black !default;
 $accordion-button-font-weight: type.$font-weight-bold !default;
 $accordion-button-line-height: type.$line-height-copy !default;
-
 $accordion-icon-width: spacing.$size-large !default;
-$accordion-icon-transform: rotate(180deg) !default;
-$accordion-icon-transition: transform animation.$transition-base-timing;
-
 $_accordion-chevron: icons.get-colored-svg-url(2113, $accordion-button-color);
 $_accordion-active-chevron: icons.get-colored-svg-url(2113, $accordion-button-active-color);
 $_accordion-hcm-chevron: icons.get-colored-svg-url(2113, color.$white);