feat(desktop): terminal pane (#5081)

Co-authored-by: Github Action <[email protected]>
Co-authored-by: Dax Raad <[email protected]>

1 files changed, 86 insertions, 10 deletions

diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index d03e57320..d60edc5c5 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -6,7 +6,7 @@
   background-color: var(--background-stronger);
   overflow: clip;
 
-  [data-slot="tabs-tabs-list"] {
+  [data-slot="tabs-list"] {
     height: 48px;
     width: 100%;
     position: relative;
@@ -36,7 +36,7 @@
     }
   }
 
-  [data-slot="tabs-tabs-trigger-wrapper"] {
+  [data-slot="tabs-trigger-wrapper"] {
     position: relative;
     height: 100%;
     display: flex;
@@ -58,14 +58,14 @@
     border-right: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
 
-    [data-slot="tabs-tabs-trigger"] {
+    [data-slot="tabs-trigger"] {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 14px 24px;
     }
 
-    [data-slot="tabs-tabs-trigger-close-button"] {
+    [data-slot="tabs-trigger-close-button"] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -84,12 +84,12 @@
       box-shadow: 0 0 0 2px var(--border-focus);
     }
     &:has([data-hidden]) {
-      [data-slot="tabs-tabs-trigger-close-button"] {
+      [data-slot="tabs-trigger-close-button"] {
         opacity: 0;
       }
 
       &:hover {
-        [data-slot="tabs-tabs-trigger-close-button"] {
+        [data-slot="tabs-trigger-close-button"] {
           opacity: 1;
         }
       }
@@ -98,23 +98,23 @@
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
-      [data-slot="tabs-tabs-trigger-close-button"] {
+      [data-slot="tabs-trigger-close-button"] {
         opacity: 1;
       }
     }
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
-    &:has([data-slot="tabs-tabs-trigger-close-button"]) {
+    &:has([data-slot="tabs-trigger-close-button"]) {
       padding-right: 12px;
 
-      [data-slot="tabs-tabs-trigger"] {
+      [data-slot="tabs-trigger"] {
         padding-right: 0;
       }
     }
   }
 
-  [data-slot="tabs-tabs-content"] {
+  [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
 
@@ -129,4 +129,80 @@
       outline: none;
     }
   }
+
+  &[data-variant="alt"] {
+    [data-slot="tabs-list"] {
+      padding-left: 24px;
+      padding-right: 24px;
+      gap: 12px;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: transparent;
+
+      &::after {
+        border: none;
+        background-color: transparent;
+      }
+      &:empty::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      border: none;
+      color: var(--text-base);
+      background-color: transparent;
+      border-bottom-width: 2px;
+      border-bottom-style: solid;
+      border-bottom-color: transparent;
+      gap: 4px;
+
+      /* text-14-regular */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-base);
+      font-style: normal;
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-x-large); /* 171.429% */
+      letter-spacing: var(--letter-spacing-normal);
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        padding: 4px;
+        background-color: transparent;
+        border-bottom-width: 2px;
+        border-bottom-color: transparent;
+      }
+
+      [data-slot="tabs-trigger-close-button"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-component="icon-button"] {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+      }
+
+      &:has([data-selected]) {
+        color: var(--text-strong);
+        background-color: transparent;
+        border-bottom-color: var(--icon-strong-base);
+      }
+
+      &:hover:not(:disabled):not([data-selected]) {
+        color: var(--text-strong);
+      }
+
+      &:has([data-slot="tabs-trigger-close-button"]) {
+        padding-right: 0;
+        [data-slot="tabs-trigger"] {
+          padding-right: 0;
+        }
+      }
+    }
+
+    /* [data-slot="tabs-content"] { */
+    /* } */
+  }
 }