662 - css fixes

Author: prashanthr6383

src/components/modus-wc-content-tree/modus-wc-content-tree.scss

@@ -7,16 +7,25 @@ modus-wc-content-tree {
   background-color: var(--modus-wc-color-base-page);
   border: 1px solid var(--modus-wc-color-base-100);
   display: block;
-  min-width: 320px;
+  min-width: 290px;
   width: 100%;
 
   .modus-wc-content-tree-actions {
     align-items: center;
     display: flex;
     gap: var(--modus-wc-spacing-xs, 0.5rem);
     justify-content: flex-end;
-    margin-top: var(--modus-wc-spacing-md, 1rem);
-    padding-bottom: var(--modus-wc-spacing-sm, 0.75rem);
+    padding: var(--modus-wc-spacing-sm, 0.75rem);
+
+    .modus-wc-content-tree-action-button {
+      background-color: transparent;
+
+      &:hover,
+      &:active,
+      &[aria-pressed='true'] {
+        background-color: transparent;
+      }
+    }
 
     .modus-wc-content-tree-action-icon {
       color: var(--modus-wc-color-black);
@@ -33,7 +42,7 @@ modus-wc-content-tree {
   }
 
   .modus-wc-content-tree-header {
-    padding: var(--modus-wc-spacing-md, 1rem);
+    padding: var(--modus-wc-spacing-sm, 1rem);
   }
 
   .modus-wc-content-tree-empty {

src/components/modus-wc-content-tree/modus-wc-content-tree.tsx

@@ -228,6 +228,7 @@ export class ModusWcContentTree {
             {this.includeActions && (
               <div class="modus-wc-content-tree-actions">
                 <modus-wc-button
+                  customClass="modus-wc-content-tree-action-button"
                   variant="borderless"
                   size="sm"
                   shape="circle"

src/components/modus-wc-content-tree/modus-wc-tree-actions/modus-wc-tree-actions.scss

@@ -10,13 +10,18 @@ modus-wc-tree-actions {
     .modus-wc-tree-action-button {
       background: transparent;
       border: none;
-      color: var(--modus-wc-color-black);
+      color: var(--modus-wc-color-base-content);
       cursor: pointer;
       visibility: hidden;
 
       &:hover {
         background: transparent;
-        color: var(--modus-wc-color-black);
+        color: var(--modus-wc-color-base-content);
+      }
+
+      &:active,
+      &[aria-pressed='true'] {
+        background: transparent;
       }
     }
   }
@@ -70,10 +75,10 @@ modus-wc-tree-actions {
 [data-theme='connect-dark'] {
   .modus-wc-tree-actions-container {
     .modus-wc-tree-action-button {
-      color: var(--modus-wc-color-gray-light);
+      color: var(--modus-wc-color-base-content);
 
       &:hover {
-        color: var(--modus-wc-color-white);
+        color: var(--modus-wc-color-base-content);
       }
     }
   }

src/components/modus-wc-content-tree/modus-wc-tree-actions/modus-wc-tree-actions.tsx

@@ -198,6 +198,7 @@ export class ModusWcTreeActions {
               disabled={action.disabled}
               size={this.size}
               shape="circle"
+              variant="borderless"
               onClick={(e) => this.handleActionClick(action, e)}
             >
               <modus-wc-icon
@@ -213,6 +214,7 @@ export class ModusWcTreeActions {
                 customClass="modus-wc-tree-action-button"
                 size={this.size}
                 shape="circle"
+                variant="borderless"
                 ref={(el) => (this.moreActionsButton = el as HTMLElement)}
                 onClick={this.handleMoreActionsClick}
                 aria-expanded={this.isDropdownOpen ? 'true' : 'false'}

src/components/modus-wc-content-tree/modus-wc-tree-item/modus-wc-tree-item.scss

@@ -11,13 +11,33 @@ modus-wc-tree-item {
   .modus-wc-tree-item-selected > .modus-wc-tree-content {
     background-color: var(--modus-wc-color-blue-pale);
     border-radius: unset;
-    color: var(--modus-wc-color-primary);
+    color: var(--modus-wc-color-base-content);
+
+    .modus-wc-tree-item-label,
+    modus-wc-icon {
+      color: var(--modus-wc-color-base-content);
+    }
+
+    modus-wc-tree-actions .modus-wc-tree-actions-container .modus-wc-tree-action-button {
+      visibility: visible;
+    }
+  }
+
+  .modus-wc-tree-item:focus-visible {
+    outline: none;
+  }
+
+  .modus-wc-tree-item:focus-visible > .modus-wc-tree-content {
+    border-radius: 0;
+    outline: 2px solid #0063a3;
+    outline-offset: 0;
   }
 
   .modus-wc-tree-content {
     align-items: center;
     display: flex;
-    gap: var(--modus-wc-spacing-sm, 0.5rem);
+    gap: var(--modus-wc-font-size-xs);
+    padding: var(--modus-wc-spacing-xs) var(--modus-wc-font-size-xs);
 
     .modus-wc-tree-drag-handle {
       left: 0;
@@ -26,6 +46,16 @@ modus-wc-tree-item {
 
     .modus-wc-tree-toggle-btn {
       background-color: transparent;
+
+      &:hover,
+      &:active,
+      &[aria-pressed='true'] {
+        background-color: transparent;
+      }
+    }
+
+    .modus-wc-tree-toggle-icon {
+      color: var(--modus-wc-color-base-content);
     }
 
     .modus-wc-tree-toggle-button-hidden {
@@ -39,7 +69,7 @@ modus-wc-tree-item {
     &:hover {
       border-radius: unset;
 
-      modus-wc-tree-actions .modus-wc-tree-action-button {
+      modus-wc-tree-actions .modus-wc-tree-actions-container .modus-wc-tree-action-button {
         visibility: visible;
       }
     }
@@ -105,7 +135,7 @@ modus-wc-tree-item {
 
     &.modus-wc-tree-dropdown-show {
       display: block;
-      margin-inline-start: 1.6rem;
+      margin-inline-start: 1.3rem;
     }
   }