UX: Remove or replace button transitions with variable (#27527)

app/assets/stylesheets/common/admin/admin_report.scss

@@ -232,7 +232,6 @@
     margin: 1.5%;
     border: 1px solid var(--primary-low);
     flex: 1 1 28%;
-    transition: box-shadow 0.25s;
     min-width: 225px;
     max-width: 550px;
     a {

app/assets/stylesheets/common/base/_topic-list.scss

@@ -8,7 +8,6 @@
     color: var(--primary);
     border: 1px solid var(--primary-medium);
     font-size: var(--font-0);
-    transition: none;
     height: 100%;
     &:focus {
       border-color: var(--tertiary);

app/assets/stylesheets/common/base/discourse.scss

@@ -101,7 +101,7 @@ a.cancel {
   margin-left: 1.25em;
   line-height: normal;
   color: var(--primary-high);
-  transition: color 250ms;
+  transition: var(--d-button-transition);
   &:hover {
     color: var(--danger);
   }

app/assets/stylesheets/common/base/groups.scss

@@ -47,8 +47,6 @@
     color: var(--primary);
 
     .discourse-no-touch & {
-      transition: all 0.25s;
-
       &:hover {
         box-shadow: var(--shadow-card);
         border-color: var(--primary-low-mid-or-secondary-high);

app/assets/stylesheets/common/base/header.scss

@@ -158,7 +158,6 @@
     text-decoration: none;
     cursor: pointer;
     border: 1px solid transparent;
-    transition: all linear 0.15s;
     outline: none;
     img.avatar {
       width: 2.1333em;

app/assets/stylesheets/common/base/modal.scss

@@ -447,7 +447,6 @@
   max-height: 80vh;
 
   .btn {
-    transition: none;
     background-color: transparent;
     margin-right: 5px;
     &:hover,

app/assets/stylesheets/common/base/new-user.scss

@@ -13,7 +13,6 @@
       position: relative;
       border-bottom: var(--user-navigation__border-width) solid transparent;
       padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em 0.75em;
-      transition: color 0.25s;
 
       @include breakpoint(extra-large) {
         font-size: var(--font-0);

app/assets/stylesheets/common/components/buttons.scss

@@ -31,12 +31,12 @@
     rgba(0, 0, 0, 0)
   );
   border-radius: var(--d-button-border-radius);
-  transition: background 0.25s, color 0.25s;
+  transition: var(--d-button-transition);
   cursor: pointer;
   .d-icon {
     color: $icon-color;
     margin-right: 0.45em;
-    transition: color 0.25s;
+    transition: var(--d-button-transition);
     // For Windows High Contrast (see whcm.scss for more)
     @media (forced-colors: active) {
       color: ButtonText;
@@ -231,7 +231,7 @@
     }
     &:hover,
     &:focus {
-      color: currentColor;
+      color: inherit;
     }
   }
 
@@ -302,10 +302,10 @@
   background: transparent;
   border: 0;
   line-height: var(--line-height-small);
-  transition: background 0.25s, color 0.25s;
+  transition: var(--d-button-transition);
   .d-icon {
     color: var(--primary-low-mid);
-    transition: color 0.25s;
+    transition: var(--d-button-transition);
   }
   .discourse-no-touch & {
     &:hover,
@@ -404,7 +404,7 @@
 @mixin btn-colors($btn-color) {
   color: var(--#{$btn-color});
   .d-icon {
-    color: currentColor;
+    color: inherit;
   }
   &:focus,
   &:focus-visible {
@@ -430,14 +430,14 @@
     &:focus-visible {
       color: var(--tertiary-hover);
       .d-icon {
-        color: currentColor;
+        color: inherit;
       }
     }
     .discourse-no-touch & {
       &:hover {
         color: var(--tertiary-hover);
         .d-icon {
-          color: currentColor;
+          color: inherit;
         }
       }
     }

app/assets/stylesheets/common/components/navs.scss

@@ -40,7 +40,7 @@
       min-height: 30px;
       display: flex;
       align-items: center;
-      transition: background-color 0.2s, color 0.2s;
+      transition: var(--d-button-transition);
 
       .d-icon {
         margin-right: 5px;

app/assets/stylesheets/common/d-editor.scss

@@ -182,7 +182,6 @@
     bottom: 0.4em;
     left: 0;
     opacity: 0.9;
-    transition: all 0.25s;
     z-index: 1; // needs to be higher than image
     background: var(--secondary);
     color: var(--primary);

app/assets/stylesheets/common/foundation/base.scss

@@ -15,6 +15,7 @@
   --d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console",
     "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
     "Courier New", monospace;
+  --d-button-transition: none;
 }
 
 // --------------------------------------------------

app/assets/stylesheets/wizard.scss

@@ -338,7 +338,7 @@ body.wizard {
     font-size: var(--font-0);
     border: 0;
     padding: 0.5em;
-    transition: background-color 0.3s;
+    transition: var(--d-button-transition);
     text-decoration: none;
     background-color: var(--secondary);
     color: var(--primary-very-high);
@@ -534,7 +534,6 @@ body.wizard {
     padding: 10px;
     background-color: var(--secondary);
     border: 1px solid var(--primary-low-mid);
-    transition: border-color 0.5s;
   }
 
   &__dropdown {

plugins/chat/assets/stylesheets/common/chat-message-actions.scss

@@ -37,7 +37,6 @@
     margin-right: -1px;
     padding: 0.5em 0;
     width: 2.5em;
-    transition: background 0.2s, border-color 0.2s;
 
     > * {
       pointer-events: none;
@@ -78,7 +77,7 @@
       border-left-color: transparent;
       padding: 0.5em 0;
       width: 2.5em;
-      transition: background 0.2s, border-color 0.2s;
+      transition: var(--d-button-transition);
       border-radius: var(--d-border-radius);
       border-top-left-radius: 0px;
       border-bottom-left-radius: 0px;