Move icon-button styles from overrides.css to Dialog and Drawer component stylesheets

Author: slhinyc

src/components/dialog/dialog.styles.ts

@@ -149,6 +149,18 @@ export default css`
     align-items: center;
     display: flex;
     flex: none;
+    border-radius: var(--sl-border-radius-circle);
+    color: var(--ts-color-text-subdued);
+  }
+
+  .dialog__close:hover {
+    background-color: var(--sl-color-neutral-200);
+    color: var(--ts-color-text-default);
+  }
+
+  .dialog__close:active {
+    background-color: var(--sl-color-neutral-300);
+    color: var(--ts-color-text-default);
   }
 
   .dialog--announcement .dialog__header-actions {

src/components/drawer/drawer.styles.ts

@@ -96,10 +96,10 @@ export default css`
   }
 
   .drawer__header-actions {
-    flex-shrink: 0;
+    flex: 0 0 auto;
     display: flex;
-    flex-wrap: wrap;
     justify-content: end;
+    align-items: center;
     gap: var(--sl-spacing-2x-small);
     padding: 0 var(--header-spacing);
   }
@@ -112,9 +112,26 @@ export default css`
     font-size: var(--sl-font-size-medium);
   }
 
+  .drawer__close {
+    border-radius: var(--sl-border-radius-circle);
+    color: var(--ts-color-text-subdued);
+  }
+
+  .drawer__close:hover {
+    background-color: var(--sl-color-neutral-200);
+    color: var(--ts-color-text-default);
+  }
+
+  .drawer__close:active {
+    background-color: var(--sl-color-neutral-300);
+    color: var(--ts-color-text-default);
+  }
+
   .drawer__body {
     flex: 1 1 auto;
     display: block;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
     padding: var(--body-spacing);
     overflow: auto;
     -webkit-overflow-scrolling: touch;

src/components/icon-button/icon-button.styles.ts

@@ -12,7 +12,7 @@ export default css`
     align-items: center;
     background: none;
     border: none;
-    border-radius: var(--sl-border-radius-medium);
+    border-radius: var(--sl-border-radius-circle);
     font-size: inherit;
     color: inherit;
     padding: var(--sl-spacing-x-small);
@@ -23,11 +23,11 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--sl-color-primary-600);
+    background-color: var(--sl-color-neutral-200);
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: var(--sl-color-primary-700);
+    background-color: var(--sl-color-neutral-300);
   }
 
   .icon-button:focus {

src/styles/exports/overrides.css

@@ -296,27 +296,6 @@ sl-icon.contained {
   padding: var(--sl-spacing-x-small);
 }
 
-/** ********** **/
-/* Icon button custom */
-/** ********** **/
-sl-icon-button::part(base),
-sl-dialog::part(close-button__base) {
-  border-radius: var(--sl-border-radius-circle);
-  color: var(--ts-color-text-subdued);
-}
-
-sl-icon-button::part(base):hover,
-sl-dialog::part(close-button__base):hover {
-  background-color: var(--sl-color-neutral-200);
-  color: var(--ts-color-text-default);
-}
-
-sl-icon-button::part(base):active,
-sl-dialog::part(close-button__base):active {
-  background-color: var(--sl-color-neutral-300);
-  color: var(--ts-color-text-default);
-}
-
 /** ****************** */
 /* Range */
 /** ****************** */