@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/components/button.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use 'sass:map';
 @use 'sass:math';
 
@@ -13,9 +11,15 @@
 @use './../mixins/utilities';
 @use './../mixins/forms';
 @use './../mixins/button' as button-mx;
+@use './../mixins/icon-button' as icon-button-mx;
 @use './../functions/icons' as icon-fn;
 @use './../functions/color' as color-fn;
 @use './../placeholders/button' as button-ph;
+@use '../functions/tokens';
+@use '../tokens/components';
+@use '../tokens/elements';
+
+tokens.$default-map: components.$post-button;
 
 .btn {
   // Resets
@@ -26,269 +30,78 @@
   max-width: 100%;
   overflow: hidden;
   transition: button.$btn-transition;
-  border-width: button.$btn-border-width;
+  border-width: tokens.get('button-border-width');
   border-style: solid;
-  border-radius: button.$btn-border-radius;
+  border-radius: tokens.get('button-border-radius-round');
   background-color: transparent;
   box-shadow: none;
-  color: var(--post-gray-80);
   font-family: inherit;
-  font-weight: button.$btn-font-weight;
-  text-decoration: none !important; // For <a> tags, !important for hover
+  font-weight: tokens.get('button-label-font-weight');
+  text-decoration: none;
   white-space: nowrap; // Long content should never break in buttons
 
-  @include button-mx.button-size();
-
-  @include utilities.disabled-style() {
-    text-decoration: line-through !important;
-  }
-
-  @include utilities.not-disabled-hover() {
-    color: var(--post-contrast-color-inverted); // Override <a> color
-    background-color: color.$gray-60;
+  &:hover {
+    text-decoration: none;
   }
 
-  @include utilities.focus-style() {
-    border-radius: commons.$border-radius;
-    color: var(--post-contrast-color-inverted); // Override <a> color
-    background-color: color.$gray-60;
+  @include button-mx.button-size();
 
-    &:where(.btn-primary) {
-      background-color: var(--post-contrast-color);
-    }
+  &:disabled {
+    border-style: tokens.get('button-border-style-disabled');
   }
 
-  @include color-mx.on-dark-background {
-    &:disabled {
-      color: color.$white-alpha-80;
-    }
+  @include utilities.focus-style;
 
-    @include utilities.not-disabled-hover() {
-      background-color: color.$yellow;
-      border-color: transparent;
-    }
-
-    @include utilities.focus-style() {
-      background-color: color.$yellow;
-      border-color: transparent;
-    }
-  }
-
-  // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    border-color: ButtonBorder;
-    background-color: ButtonFace;
+    background-color: ButtonFace !important;
 
     &:not(:disabled, .disabled) {
       &:hover {
-        border-color: highlight;
+        background-color: Highlight !important;
       }
     }
-
-    &:disabled {
-      border-color: GrayText !important;
-    }
-
-    .pi {
-      filter: invert(1) !important;
-    }
   }
 }
 
-// Primary
-.btn-primary {
-  border-color: transparent;
-  background-color: var(--post-gray-80);
-  color: var(--post-contrast-color-inverted);
-
-  &:disabled {
-    background-color: color.$gray-10;
-    border-color: color.$gray-60;
-  }
-
-  .pi {
-    filter: invert(1);
-    forced-color-adjust: none;
-  }
-
-  @include color-mx.on-dark-background {
-    background-color: var(--post-contrast-color);
-    color: var(--post-gray-10); // Apply same color as secondary/tertiary button on dark theme
-
-    &:disabled {
-      color: var(--post-contrast-color);
-      background-color: color.$white-alpha-20;
-      border-color: var(--post-contrast-color);
-    }
-  }
+// Type variants
+@each $variant in button.$btn-variants {
+  .btn-#{$variant} {
+    $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));
 
-  @include color-mx.on-dark-background() {
-    .pi {
-      filter: invert(0);
+    @if ($variant != 'link' and $variant != 'tertiary') {
+      box-shadow: tokens.get('button-elevation');
     }
-  }
-}
 
-// Default / secondary
-.btn-default,
-.btn-secondary {
-  @extend %btn-transparent-background;
-  border-color: color.$gray-60;
-
-  @include color-mx.on-dark-background {
-    border-color: var(--post-contrast-color);
-    color: var(--post-contrast-color);
+    @include button-mx.button-variant-def('enabled', $color);
 
     &:disabled {
-      color: color.$white-alpha-60;
-      border-color: color.$white-alpha-60;
-    }
-  }
-}
-
-// Tertiary
-.btn-link,
-.btn-tertiary {
-  @extend %btn-transparent-background;
-  border: 0;
-  padding-inline: spacing.$size-micro;
-
-  // Styles  to improve accessibility in high contrast mode
-  @include utilities.high-contrast-mode() {
-    color: linktext;
-    text-decoration: underline !important;
-  }
-}
-
-// Icon
-.btn-icon {
-  @include button-mx.icon-button();
-
-  @each $size in button.$btn-non-default-sizes {
-    &.btn-#{$size} {
-      @include button-mx.icon-button($size);
-    }
-  }
-}
-
-// Animated
-
-.btn-animated,
-.btn-animated-start {
-  &:not(.btn-link, .btn-tertiary) {
-    &::after {
-      @include icon-mx.icon(2111);
-      content: '';
-      display: block;
-      height: 2em;
-      width: 2em;
-      position: absolute;
-      transition:
-        opacity 250ms,
-        transform 250ms;
-      opacity: 0;
-    }
-
-    > span {
-      transition: transform 250ms;
+      @include button-mx.button-variant-def('disabled', $color);
     }
 
-    @media (prefers-reduced-motion: no-preference) {
-      @include utilities.not-disabled-focus-hover() {
-        &::after {
-          transform: translateX(0);
-          opacity: 1;
-        }
-      }
-
-      > span {
-        // Initially transform to place text in the right rendering context for a smooth animation
-        transform: translateX(0);
-      }
-    }
-  }
-}
-
-.btn-animated:not(.btn-link, .btn-tertiary) {
-  &::after {
-    right: button.$btn-padding-x-md - button.$btn-animation-distance-md -
-      (math.div(button.$btn-font-size-md * 2, 3));
-    transform: translateX(button.$btn-border-width * -1);
-  }
-
-  @each $size in button.$btn-non-default-sizes {
-    &.btn-#{$size}::after {
-      right: map.get(button.$btn-padding-x-map, $size) - map.get(
-          button.$btn-animation-distance-map,
-          $size
-        ) -
-        (math.div(map.get(button.$btn-font-size-map, $size) * 2, 3));
-    }
-  }
-
-  // Only animate when user prefers to see animations
-  @media (prefers-reduced-motion: no-preference) {
-    @include utilities.not-disabled-focus-hover() {
-      > span {
-        transform: translateX(map.get(button.$btn-animation-distance-map, md) * -1);
-      }
-
-      @each $size in button.$btn-non-default-sizes {
-        &.btn-#{$size} > span {
-          transform: translateX(map.get(button.$btn-animation-distance-map, $size) * -1);
-        }
-      }
-    }
-  }
-}
-
-.btn-animated-start:not(.btn-link, .btn-tertiary) {
-  &::after {
-    @include icon-mx.icon(2110);
-    left: button.$btn-padding-x-md - button.$btn-animation-distance-md -
-      (math.div(button.$btn-font-size-md * 2, 3));
-    transform: translateX(button.$btn-border-width);
-  }
-
-  @each $size in button.$btn-non-default-sizes {
-    &.btn-#{$size}::after {
-      left: map.get(button.$btn-padding-x-map, $size) - map.get(
-          button.$btn-animation-distance-map,
-          $size
-        ) -
-        (math.div(map.get(button.$btn-font-size-map, $size) * 2, 3));
-    }
-  }
-
-  // Only animate when user prefers to see animations
-  @media (prefers-reduced-motion: no-preference) {
-    @include utilities.not-disabled-focus-hover() {
-      > span {
-        transform: translateX(map.get(button.$btn-animation-distance-map, md));
-      }
-
-      @each $size in button.$btn-non-default-sizes {
-        &.btn-#{$size} > span {
-          transform: translateX(map.get(button.$btn-animation-distance-map, $size));
-        }
-      }
+    @include utilities.not-disabled-hover() {
+      @include button-mx.button-variant-def('hover', $color);
     }
   }
 }
 
-// Size variants, default is rg
+// Size variants, default is md
 @each $size in button.$btn-non-default-sizes {
   .btn-#{$size} {
     @include button-mx.button-size($size);
   }
 }
 
-// Color variants
-@each $name, $color in color.$accent-colors {
-  @include button-mx.button-color-variant($name, $color);
-}
+.btn-link {
+  -webkit-text-decoration: tokens.get('link-decoration', elements.$post-link);
+          text-decoration: tokens.get('link-decoration', elements.$post-link);
+  border: 0 none;
+  border-radius: tokens.get('link-border-radius', elements.$post-link);
+  min-height: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
 
-// Intranet signal buttons
-@each $name, $color in color.$signal-colors {
-  @include button-mx.button-color-variant($name, $color);
+  &:hover {
+    color: tokens.get('link-hover-fg', elements.$post-link);
+  }
 }