fix pr lint and use placeholders

Author: leagrdv

packages/styles/src/components/button.scss

@@ -22,57 +22,7 @@
 tokens.$default-map: components.$post-button;
 
 .btn {
-  // Resets
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  overflow: hidden;
-  transition: button.$btn-transition;
-  border-width: tokens.get('button-border-width');
-  border-style: solid;
-  border-radius: tokens.get('button-border-radius-round');
-  background-color: transparent;
-  box-shadow: none;
-  font-family: inherit;
-  font-weight: tokens.get('button-label-font-weight');
-  text-decoration: none;
-  white-space: nowrap; // Long content should never break in buttons
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  @include button-mx.button-size();
-
-  &:disabled {
-    border-style: tokens.get('button-border-style-disabled');
-  }
-
-  @include utilities.focus-style;
-
-  @include utilities.high-contrast-mode() {
-    &:is(a) {
-      color: LinkText;
-      border: unset;
-    }
-
-    &:is(button) {
-      background-color: ButtonFace !important;
-      border: 1px solid ButtonBorder !important;
-    }
-
-    &:not(:disabled, .disabled) {
-      &:is(button):hover {
-        background-color: Highlight !important;
-
-        > post-icon {
-          color: HighlightText !important;
-        }
-      }
-    }
-  }
+  @extend %btn;
 }
 
 // Type variants

packages/styles/src/components/target-group.scss

@@ -1,5 +1,12 @@
 @use 'button';
 @use './../mixins/media';
+@use '../functions/tokens';
+@use '../tokens/components';
+@use './../mixins/button' as button-mx;
+@use './../mixins/utilities';
+@use './../placeholders/button' as button-ph;
+
+tokens.$default-map: components.$post-button;
 
 .target-group {
   gap: 4px;
@@ -12,17 +19,36 @@
   }
 
   a {
-    @extend .btn;
-    @extend .btn-tertiary;
-    border: none;
+    @extend %btn;
+    border: unset;
     font-weight: 400;
     padding: 4px 16px;
     min-height: 0;
     font-size: 1rem;
+
+    @include button-mx.button-variant-def('enabled', 'tertiary');
+
+    &:disabled {
+      @include button-mx.button-variant-def('disabled', 'tertiary');
+    }
+
+    @include utilities.not-disabled-hover() {
+      @include button-mx.button-variant-def('hover', 'tertiary');
+    }
   }
 
   a.active {
-    @extend .btn-primary;
+    box-shadow: tokens.get('button-elevation');
+
+    @include button-mx.button-variant-def('enabled', 'primary');
+
+    &:disabled {
+      @include button-mx.button-variant-def('disabled', 'primary');
+    }
+
+    @include utilities.not-disabled-hover() {
+      @include button-mx.button-variant-def('hover', 'primary');
+    }
   }
 
   @include media.max(lg) {

packages/styles/src/placeholders/_button.scss

@@ -2,6 +2,11 @@
 @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() {
@@ -13,3 +18,57 @@
     color: color.$black;
   }
 }
+
+%btn {
+  // Resets
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  overflow: hidden;
+  transition: button.$btn-transition;
+  border-width: tokens.get('button-border-width');
+  border-style: solid;
+  border-radius: tokens.get('button-border-radius-round');
+  background-color: transparent;
+  box-shadow: none;
+  font-family: inherit;
+  font-weight: tokens.get('button-label-font-weight');
+  text-decoration: none;
+  white-space: nowrap; // Long content should never break in buttons
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  @include button-mx.button-size();
+
+  &:disabled {
+    border-style: tokens.get('button-border-style-disabled');
+  }
+
+  @include utilities.focus-style;
+
+  @include utilities.high-contrast-mode() {
+    &:is(a) {
+      color: LinkText;
+      border: unset;
+    }
+
+    &:is(button) {
+      background-color: ButtonFace !important;
+      border: 1px solid ButtonBorder !important;
+    }
+
+    &:not(:disabled, .disabled) {
+      &:is(button):hover {
+        background-color: Highlight !important;
+
+        > post-icon {
+          color: HighlightText !important;
+        }
+      }
+    }
+  }
+}