wip: desktop work

3 files changed, 18 insertions, 15 deletions

diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
index f483f92a7..abc82609b 100644
--- a/packages/ui/src/components/icon-button.tsx
+++ b/packages/ui/src/components/icon-button.tsx
@@ -5,11 +5,12 @@ import { Icon, IconProps } from "./icon"
 export interface IconButtonProps {
   icon: IconProps["name"]
   size?: "normal" | "large"
+  iconSize?: IconProps["size"]
   variant?: "primary" | "secondary" | "ghost"
 }
 
 export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"])
+  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList"])
   return (
     <Kobalte
       {...rest}
@@ -21,7 +22,7 @@ export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Icon data-slot="icon" name={props.icon} size={split.size === "large" ? "normal" : "small"} />
+      <Icon data-slot="icon" name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
     </Kobalte>
   )
 }
diff --git a/packages/ui/src/components/icon.css b/packages/ui/src/components/icon.css
index 59c644b70..7f1f18339 100644
--- a/packages/ui/src/components/icon.css
+++ b/packages/ui/src/components/icon.css
@@ -18,8 +18,8 @@
   }
 
   &[data-size="large"] {
-    width: 32px;
-    height: 32px;
+    width: 24px;
+    height: 24px;
   }
 
   [data-slot="svg"] {
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 70d7b03e1..29057fc87 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -3,14 +3,11 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--radius-sm);
-  border-color: var(--border-weak-base);
   background-color: var(--background-stronger);
   overflow: clip;
 
   [data-slot="list"] {
+    height: 40px;
     width: 100%;
     position: relative;
     display: flex;
@@ -32,7 +29,6 @@
       height: 100%;
       border-bottom: 1px solid var(--border-weak-base);
       background-color: var(--background-base);
-      border-top-right-radius: var(--radius-sm);
     }
 
     &:empty::after {
@@ -42,19 +38,25 @@
 
   [data-slot="trigger"] {
     position: relative;
-    height: 36px;
-    padding: 8px 12px;
+    height: 100%;
+    padding: 8px 24px;
     display: flex;
     align-items: center;
-    font-size: var(--text-sm);
+    color: var(--text-base);
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
     font-weight: var(--font-weight-medium);
-    color: var(--text-weak);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
 
     white-space: nowrap;
     flex-shrink: 0;
     border-bottom: 1px solid var(--border-weak-base);
     border-right: 1px solid var(--border-weak-base);
-    background-color: var(--background-weak);
+    background-color: var(--background-base);
     transition:
       background-color 0.15s ease,
       color 0.15s ease;
@@ -68,7 +70,7 @@
       box-shadow: 0 0 0 2px var(--border-focus);
     }
     &[data-selected] {
-      color: var(--text-base);
+      color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
     }