feat(styles): Update buttons colors (#2977)

Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Jul 18, 2024 · 9418c67 · 9418c67
1 parent 800abe1
commit 9418c67
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 61 deletions.
diff --git a/.changeset/funny-tools-scream.md b/.changeset/funny-tools-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated buttons colors.
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -102,7 +102,7 @@ export const PostAlert: Story = {
       '<button class="btn btn-primary btn-animated" slot="actions" >' +
       '<span>Akcepti</span>' +
       '</button>' +
-      '<button class="btn btn-default btn-animated" slot="actions" >' +
+      '<button class="btn btn-secondary btn-animated" slot="actions" >' +
       '<span>Aborti</span>' +
       '</button>';
 

diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -119,7 +119,7 @@ function externalControl(story: StoryFn, { args, context }: StoryContext) {
 
   const button = html`
     <a
-      class="btn btn-default btn-animated"
+      class="btn btn-secondary btn-animated"
       href="#"
       @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
     >

diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -98,7 +98,7 @@ function externalControl(story: StoryFn, context: StoryContext) {
 
   return html`
     <a
-      class="btn btn-default btn-animated alert-button"
+      class="btn btn-secondary btn-animated alert-button"
       href="#"
       @click="${(e: Event) => toggleAlert(e)}"
     >

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
@@ -19,9 +19,6 @@
 
 .btn {
   @include button-mx.button-size();
-  @include utilities.focus-style() {
-    border-radius: commons.$border-radius;
-  }
 
   // Resets
   display: inline-flex;
@@ -41,71 +38,112 @@
   font-weight: button.$btn-font-weight;
   text-decoration: none !important; // For <a> tags, !important for hover
   white-space: nowrap; // Long content should never break in buttons
-}
 
-// Primary
-.btn-primary {
-  border-color: transparent;
-  background-color: var(--post-gray-80);
-  color: var(--post-contrast-color-inverted);
+  @include utilities.disabled-style() {
+    text-decoration: line-through !important;
+  }
 
-  @include utilities.not-disabled-focus-hover() {
-    background-color: var(--post-contrast-color);
+  @include utilities.not-disabled-hover() {
     color: var(--post-contrast-color-inverted); // Override <a> color
+    background-color: color.$gray-60;
   }
 
-  @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
+  @include utilities.focus-style() {
+    border-radius: commons.$border-radius;
+    color: var(--post-contrast-color-inverted); // Override <a> color
+    background-color: color.$gray-60;
 
-    @include utilities.not-disabled-focus-hover() {
-      background-color: var(--post-gray-80);
+    &:where(.btn-primary) {
+      background-color: var(--post-contrast-color);
     }
+  }
 
+  @include color-mx.on-dark-background {
     &:disabled {
-      color: var(--post-contrast-color);
-      background-color: var(--post-gray-40);
+      color: color.$white-alpha-80;
     }
-  }
 
-  @include color-mx.on-dark-background() {
-    .pi {
-      filter: invert(0);
+    @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: var(--post-contrast-color);
+    border-color: ButtonBorder;
     background-color: ButtonFace;
 
     &:not(:disabled, .disabled) {
-      &:hover,
-      &:focus-visible {
+      &:hover {
         border-color: highlight;
       }
     }
 
+    &: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: var(--post-gray-40);
+    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);
+    }
+  }
+
+  @include color-mx.on-dark-background() {
+    .pi {
+      filter: invert(0);
+    }
+  }
 }
 
 // Default / secondary
 .btn-default,
 .btn-secondary {
-  @extend %btn-default;
   @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);
+
+    &:disabled {
+      color: color.$white-alpha-60;
+      border-color: color.$white-alpha-60;
+    }
+  }
 }
 
 // Tertiary
@@ -115,10 +153,6 @@
   border: 0;
   padding-inline: spacing.$size-micro;
 
-  &:disabled {
-    color: var(--post-gray-60);
-  }
-
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
     color: linktext;

diff --git a/packages/styles/src/mixins/_color.scss b/packages/styles/src/mixins/_color.scss
@@ -24,12 +24,12 @@
 // Selector for styles to be applied on dark backgrounds
 @mixin on-dark-background($contains: false) {
   @if $contains == true {
-    &:is(#{color.$dark-backgrounds}),
-    :is(#{color.$dark-backgrounds}) & {
+    &:where(#{color.$dark-backgrounds}),
+    :where(#{color.$dark-backgrounds}) & {
       @content;
     }
   } @else {
-    :is(#{color.$dark-backgrounds}) & {
+    :where(#{color.$dark-backgrounds}) & {
       @content;
     }
   }

diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
@@ -83,6 +83,13 @@
   }
 }
 
+@mixin not-disabled-hover {
+  &:not(:disabled):hover,
+  &.pretend-hover {
+    @content;
+  }
+}
+
 @mixin focus-style-none {
   outline: none;
 }
@@ -154,13 +161,12 @@
     border-style: dashed;
     background-clip: padding-box;
     text-decoration: line-through;
+    // In case rules need to be slightly adjusted
+    @content;
 
     @include high-contrast-mode() {
       color: GrayText;
       border-color: GrayText;
     }
-
-    // In case rules need to be slightly adjusted
-    @content;
   }
 }
diff --git a/packages/styles/src/placeholders/_button.scss b/packages/styles/src/placeholders/_button.scss
@@ -2,27 +2,6 @@
 @use './../mixins/color' as color-mx;
 @use './../variables/components/button';
 
-%btn-default {
-  border: button.$btn-border-width solid var(--post-gray-60);
-
-  @include utilities.not-disabled-focus-hover() {
-    border-color: var(--post-contrast-color);
-  }
-
-  @include color-mx.on-dark-background() {
-    border-color: var(--post-contrast-color);
-
-    @include utilities.not-disabled-focus-hover() {
-      border-color: var(--post-gray-40);
-    }
-  }
-
-  &:disabled {
-    border-color: var(--post-gray-40);
-    color: var(--post-gray-60);
-  }
-}
-
 %btn-transparent-background {
   @include utilities.not-disabled-focus-hover() {
     color: var(--post-contrast-color);