UX: update appropriate btn-flat instances to btn-transparent (#25945)

With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.

app/assets/javascripts/admin/addon/components/theme-upload-add.hbs

@@ -41,7 +41,7 @@
     <DButton
       @action={{@closeModal}}
       @label="cancel"
-      class="btn-flat d-modal-cancel"
+      class="btn-transparent d-modal-cancel"
     />
   </:footer>
 </DModal>

app/assets/javascripts/admin/addon/components/themes-list.hbs

@@ -65,7 +65,7 @@
                 />
               {{else}}
                 <DButton
-                  class="btn-flat select-inactive-mode"
+                  class="btn-transparent select-inactive-mode"
                   @action={{this.toggleInactiveMode}}
                 >
                   {{d-icon "list"}}

app/assets/javascripts/discourse/app/components/composer-container.hbs

@@ -401,7 +401,7 @@
               @translatedTitle={{this.composer.toggleText}}
               @icon="angle-double-left"
               class={{concat-class
-                "btn-flat btn-mini-toggle toggle-preview"
+                "btn-transparent btn-mini-toggle toggle-preview"
                 (unless this.composer.showPreview "active")
               }}
             />

app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs

@@ -3,5 +3,5 @@
   @icon="times"
   @label="composer.esc"
   @ariaLabel="composer.esc_label"
-  class="btn-flat close"
+  class="btn-transparent close"
 />

app/assets/javascripts/discourse/app/components/composer-toggles.hbs

@@ -18,7 +18,7 @@
       @icon={{this.fullscreenIcon}}
       @action={{this.toggleFullscreen}}
       @title={{this.fullscreenTitle}}
-      class="btn-flat toggle-fullscreen btn-mini-toggle"
+      class="btn-transparent toggle-fullscreen btn-mini-toggle"
     />
   {{/if}}
 
@@ -26,6 +26,6 @@
     @icon={{this.toggleIcon}}
     @action={{this.toggleComposer}}
     @title={{this.toggleTitle}}
-    class="btn-flat toggler toggle-minimize btn-mini-toggle"
+    class="btn-transparent toggler toggle-minimize btn-mini-toggle"
   />
 </div>

app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs

@@ -11,7 +11,7 @@
       @title="experimental_lightbox.buttons.previous"
       @icon={{@previousButtonIcon}}
       @ariaHidden="true"
-      class="d-lightbox__previous-button btn-flat"
+      class="d-lightbox__previous-button btn-transparent"
     />
   {{/if}}
   {{#if @isLoading}}

app/assets/javascripts/discourse/app/components/d-modal.hbs

@@ -57,7 +57,7 @@
               @icon="times"
               @action={{this.handleCloseButton}}
               @title="modal.close"
-              class="btn-flat modal-close"
+              class="btn-transparent modal-close"
             />
           {{/if}}
         </div>

app/assets/javascripts/discourse/app/components/global-notice.hbs

@@ -16,7 +16,7 @@
             <DButton
               @icon="times"
               @action={{fn this.dismissNotice notice}}
-              class="btn-flat close"
+              class="btn-transparent close"
             />
           {{/if}}
         </div>

app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs

@@ -70,7 +70,7 @@ export default class NotificationConsentBanner extends Component {
             @icon="times"
             @action={{this.dismiss}}
             @title="banner.close"
-            class="btn-flat close"
+            class="btn-transparent close"
           />
         </div>
       </div>

app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs

@@ -12,7 +12,7 @@
         @icon="times"
         @action={{action "dismiss"}}
         @title="banner.close"
-        class="btn-flat close"
+        class="btn-transparent close"
       />
     </div>
   </div>

app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs

@@ -4,7 +4,7 @@
     @action={{@toggleSectionDisplay}}
     aria-controls={{@sidebarSectionContentID}}
     aria-expanded={{if @isExpanded "true" "false"}}
-    class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
+    class="sidebar-section-header sidebar-section-header-collapsable btn-transparent"
   >
     {{yield}}
   </DButton>

app/assets/javascripts/discourse/app/components/user-status-picker.hbs

@@ -5,7 +5,7 @@
   >
     <button
       type="button"
-      class="btn-emoji btn-flat"
+      class="btn-emoji btn-transparent"
       onclick={{this.toggleEmojiPicker}}
       {{on "focus" this.focus}}
       {{on "blur" this.blur}}

app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr

@@ -1,3 +1,3 @@
-<button class='btn-flat {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
+<button class='btn-transparent {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
   {{d-icon icon}}
 </button>

app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs

@@ -48,7 +48,7 @@ const DDefaultToast = <template>
       {{/if}}
     </div>
     <div class="fk-d-default-toast__close-container">
-      <DButton class="btn-flat" @icon="times" @action={{@close}} />
+      <DButton class="btn-transparent" @icon="times" @action={{@close}} />
     </div>
   </div>
 </template>;

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

@@ -176,10 +176,6 @@ html.composer-open {
       display: flex;
       gap: 8px;
       margin-left: 8px;
-
-      .d-icon {
-        color: var(--primary-medium);
-      }
     }
   }
 

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -82,6 +82,10 @@
     &.sidebar-section-header-collapsable {
       justify-content: flex-start;
 
+      &:hover {
+        color: var(--primary);
+      }
+
       &:focus {
         background: transparent;
       }

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

@@ -452,16 +452,9 @@
   border-radius: var(--d-border-radius);
   padding: 0.4em 0.467em;
   .d-icon {
-    color: var(--primary-high);
+    color: var(--primary-medium);
   }
   @include hover {
-    background: transparent;
-    .d-icon {
-      color: var(--primary);
-    }
-  }
-  &:focus {
-    background: var(--primary-low);
     .d-icon {
       color: var(--primary);
     }

app/assets/stylesheets/common/components/user-status-picker.scss

@@ -12,10 +12,6 @@
       margin: 3px;
       width: 2.3em;
       text-align: center;
-
-      .svg-icon {
-        color: var(--primary-high);
-      }
     }
 
     .user-status-description {

plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs

@@ -38,7 +38,7 @@ export default class ChatNotices extends Component {
       <DButton
         @icon="times"
         @action={{this.clearNotice}}
-        class="btn-flat chat-notices__notice__clear"
+        class="btn-transparent chat-notices__notice__clear"
       />
     </div>
   </template>

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs

@@ -41,7 +41,7 @@ export default class ChatRetentionReminder extends Component {
         <DButton
           @action={{this.dismiss}}
           @icon="times"
-          class="btn no-text btn-icon btn-flat no-text dismiss-btn"
+          class="no-text btn-icon btn-transparent dismiss-btn"
         />
       </div>
     {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs

@@ -18,7 +18,7 @@ export default class ChatNavbarCloseDrawerButton extends Component {
       @icon="times"
       @action={{this.closeDrawer}}
       @title="chat.close"
-      class="btn-flat no-text c-navbar__close-drawer-button"
+      class="btn-transparent no-text c-navbar__close-drawer-button"
     />
   </template>
 }

plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs

@@ -10,7 +10,7 @@ export default class ChatNavbarCloseThreadButton extends Component {
   <template>
     {{#if this.site.desktopView}}
       <LinkTo
-        class="c-navbar__close-thread-button btn-flat btn btn-icon no-text"
+        class="c-navbar__close-thread-button btn-transparent btn btn-icon no-text"
         @route="chat.channel"
         @models={{@thread.channel.routeModels}}
         title={{i18n "chat.thread.close"}}

plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs

@@ -12,7 +12,7 @@ export default class ChatNavbarCloseThreadsButton extends Component {
   <template>
     {{#if this.site.desktopView}}
       <LinkTo
-        class="c-navbar__close-threads-button btn-flat btn btn-icon no-text"
+        class="c-navbar__close-threads-button btn-transparent btn btn-icon no-text"
         @route="chat.channel"
         @models={{@channel.routeModels}}
         title={{this.closeButtonTitle}}

plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs

@@ -24,7 +24,7 @@ export default class ChatNavbarFullPageButton extends Component {
     {{#if this.chatStateManager.isDrawerExpanded}}
       <DButton
         @icon="discourse-expand"
-        class="btn-flat no-text c-navbar__full-page-button"
+        class="btn-transparent no-text c-navbar__full-page-button"
         @title="chat.open_full_page"
         @action={{this.openInFullPage}}
       />

plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs

@@ -22,7 +22,7 @@ export default class ChatNavbarOpenDrawerButton extends Component {
       <DButton
         @icon="discourse-compress"
         @title="chat.close_full_page"
-        class="c-navbar__open-drawer-button btn-flat"
+        class="c-navbar__open-drawer-button btn-transparent"
         @action={{this.openDrawer}}
       />
     {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs

@@ -30,7 +30,7 @@ export default class ChatNavbarThreadSettingsButton extends Component {
         @action={{this.openThreadSettings}}
         @icon="cog"
         @title="chat.thread.settings"
-        class="btn-flat c-navbar__thread-settings-button"
+        class="btn-transparent c-navbar__thread-settings-button"
       />
     {{/if}}
   </template>

plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs

@@ -19,7 +19,7 @@ export default class ChatNavbarToggleDrawerButton extends Component {
         "chat.collapse"
         "chat.expand"
       }}
-      class="btn-flat no-text c-navbar__toggle-drawer-button"
+      class="btn-transparent no-text c-navbar__toggle-drawer-button"
     />
   </template>
 }

plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs

@@ -537,7 +537,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       @action={{this.onArchiveChannel}}
                       @label="chat.channel_settings.archive_channel"
                       @icon="archive"
-                      class="archive-btn chat-form__btn btn-flat"
+                      class="archive-btn chat-form__btn btn-transparent"
                     />
                   </:action>
                 </section.row>
@@ -550,14 +550,14 @@ export default class ChatRouteChannelInfoSettings extends Component {
                       @action={{this.onToggleChannelState}}
                       @label="chat.channel_settings.close_channel"
                       @icon="lock"
-                      class="close-btn chat-form__btn btn-flat"
+                      class="close-btn chat-form__btn btn-transparent"
                     />
                   {{else}}
                     <DButton
                       @action={{this.onToggleChannelState}}
                       @label="chat.channel_settings.open_channel"
                       @icon="unlock"
-                      class="open-btn chat-form__btn btn-flat"
+                      class="open-btn chat-form__btn btn-transparent"
                     />
                   {{/if}}
                 </:action>
@@ -569,7 +569,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
                     @action={{this.onDeleteChannel}}
                     @label="chat.channel_settings.delete_channel"
                     @icon="trash-alt"
-                    class="delete-btn chat-form__btn btn-flat"
+                    class="delete-btn chat-form__btn btn-transparent"
                   />
                 </:action>
               </section.row>

plugins/chat/assets/stylesheets/common/chat-navbar.scss

@@ -99,6 +99,9 @@
   display: flex;
   align-items: center;
   height: var(--chat-header-offset);
+  .d-icon {
+    color: var(--primary-low-mid);
+  }
 }
 
 .c-navbar__back-button ~ .c-navbar__title {