chore(styles): remove unused placeholder + cleanup

Author: leagrdv

.changeset/loose-jeans-hug.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Removed the unused placeholder `%btn-transparent-background`.

packages/documentation/src/stories/misc/migration-guide/migrationv8-9.component.ts

@@ -573,6 +573,12 @@ export class MigrationV89Component extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span>
                   </p>
                 </li>
+                <li class="mb-16">
+                  <p>
+                    The <code>%btn-transparent-background</code> CSS placeholder has been removed.
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                </li>
                 <li class="mb-16">
                   <p>
                     The <code>.pi-*</code> classes have been removed

packages/styles/src/placeholders/_button.scss

@@ -1,24 +1,11 @@
 @use './../mixins/utilities';
-@use './../mixins/color' as color-mx;
-@use './../variables/color';
 @use './../variables/components/button';
 @use './../mixins/button' as button-mx;
 @use '../functions/tokens';
 @use '../tokens/components';
 
 tokens.$default-map: components.$post-button;
 
-%btn-transparent-background {
-  @include utilities.not-disabled-focus-hover() {
-    color: color.$black;
-  }
-
-  // Invert icon on dark backgrounds
-  @include color-mx.on-dark-background() {
-    color: color.$black;
-  }
-}
-
 %btn {
   // Resets
   display: inline-flex;

packages/styles/src/placeholders/_close.scss

@@ -1,46 +1,42 @@
-@use './../mixins/button' as button-mx;
-@use './../mixins/color' as color-mx;
-@use './../mixins/forms' as forms-mx;
-@use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities' as utilities-mx;
-
-@use './../variables/animation';
-@use './../variables/color';
+@use './../mixins/button';
+@use './../mixins/icons';
+@use './../mixins/utilities';
+
 @use './../variables/commons';
 @use './../variables/components/close';
 
 %btn-close {
-  @include button-mx.reset-button;
+  @include button.reset-button;
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
   cursor: pointer;
 
-  @include utilities-mx.focus-style {
+  @include utilities.focus-style {
     border-radius: commons.$border-radius;
   }
 
   &::before {
-    @include icons-mx.icon(2043);
+    @include icons.icon(2043);
     content: '';
     display: block;
     height: close.$close-size;
     width: close.$close-size;
   }
 
-  @include utilities-mx.not-disabled-focus-hover() {
+  @include utilities.not-disabled-focus-hover() {
     color: close.$close-hover-color;
   }
 
   &:disabled {
     color: close.$close-disabled-color;
   }
 
-  @include utilities-mx.high-contrast-mode() {
+  @include utilities.high-contrast-mode() {
     color: CanvasText;
     forced-color-adjust: none;
 
-    @include utilities-mx.not-disabled-focus-hover() {
+    @include utilities.not-disabled-focus-hover() {
       color: Highlight;
     }
   }