aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-21 09:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: desktop work

Browse Source
This commit is contained in:
Adam
2025-10-23 15:27:31 -05:00
parent 35dec0649d
commit 3eb2db98ed
19 changed files with 1187 additions and 1115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/components/icon-button.tsx
View File

@@ -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>
)
}

4
packages/ui/src/components/icon.css
View File

@@ -18,8 +18,8 @@
}
&[data-size="large"] {
width: 32px;
height: 32px;
width: 24px;
height: 24px;
}
[data-slot="svg"] {

24
packages/ui/src/components/tabs.css
View File

@@ -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;
}