Visitar URL original
feat(app): updates to design system (#34066) · BenGu3/opencode@edc2732 · GitHub
Skip to content

Commit edc2732

Browse files
arvsrnBenGu3
arvsrn
authored and
BenGu3
committed
feat(app): updates to design system (anomalyco#34066)
1 parent 8d83e38 commit edc2732

13 files changed

Lines changed: 284 additions & 98 deletions

‎packages/app/src/components/dialog-select-directory-v2.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import "@pierre/trees/web-components"
22
import { FileTree } from "@pierre/trees"
3-
import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
3+
import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
44
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
55
import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
66
import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -27,6 +27,7 @@ import {
2727
pickerRoot,
2828
} from "./directory-picker-domain"
2929
import "./dialog-select-directory-v2.css"
30+
import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
3031

3132
interface DialogSelectDirectoryV2Props {
3233
title?: string
@@ -266,8 +267,12 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
266267
onCleanup(() => tree?.cleanUp())
267268

268269
return (
269-
<Dialog title={props.title ?? language.t("command.project.open")} size="large" class="directory-picker-v2">
270-
<div class="directory-picker-v2-body">
270+
<Dialog size="large" class="directory-picker-v2">
271+
<DialogHeader>
272+
<DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
273+
</DialogHeader>
274+
<DividerV2 />
275+
<DialogBody class="directory-picker-v2-body pt-4!">
271276
<div class="directory-picker-v2-path" ref={pathArea}>
272277
<TextInputV2
273278
value={input()}
@@ -349,7 +354,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
349354
</Show>
350355
</div>
351356
<div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
352-
</div>
357+
</DialogBody>
353358
<DialogFooter>
354359
<ButtonV2 variant="neutral" onClick={() => dialog.close()}>
355360
{language.t("common.cancel")}

‎packages/app/src/components/settings-v2/dialog-server-v2.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
2-
import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
2+
import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
3+
import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
34
import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
45
import { useDialog } from "@opencode-ai/ui/context/dialog"
56
import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
@@ -52,8 +53,12 @@ export const DialogServerV2: Component<{
5253
}
5354

5455
return (
55-
<Dialog title={title()} fit class="settings-v2-server-dialog">
56-
<div class="flex w-full min-w-0 flex-1 flex-col px-4">
56+
<Dialog fit class="settings-v2-server-dialog">
57+
<DialogHeader hideClose={true}>
58+
<DialogTitle>{title()}</DialogTitle>
59+
</DialogHeader>
60+
<DividerV2 />
61+
<DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
5762
<div class="flex w-full min-w-0 flex-col gap-6">
5863
<div class="flex w-full min-w-0 flex-col gap-2">
5964
<label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
@@ -115,7 +120,7 @@ export const DialogServerV2: Component<{
115120
</div>
116121
</div>
117122
</div>
118-
</div>
123+
</DialogBody>
119124
<DialogFooter>
120125
<ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
121126
{language.t("common.cancel")}

‎packages/app/src/components/settings-v2/settings-v2.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -633,7 +633,7 @@
633633

634634
[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-header"] {
635635
align-items: center;
636-
padding: 24px 24px 0;
636+
padding: 24px 24px 16px;
637637
}
638638

639639
[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-body"] {

‎packages/app/src/wsl/settings.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useDialog } from "@opencode-ai/ui/context/dialog"
22
import { Tag } from "@opencode-ai/ui/v2/badge-v2"
33
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
4-
import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
4+
import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
5+
import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
56
import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
67
import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
78
import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
@@ -30,8 +31,14 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
3031
const language = useLanguage()
3132
const openAddWsl = () => {
3233
dialog.push(() => (
33-
<Dialog title={language.t("wsl.server.add")} size="large" fit class="settings-v2-wsl-dialog">
34-
<DialogAddWslServer />
34+
<Dialog size="large" fit class="settings-v2-wsl-dialog">
35+
<DialogHeader hideClose={true}>
36+
<DialogTitle>{language.t("wsl.server.add")}</DialogTitle>
37+
</DialogHeader>
38+
<DividerV2 />
39+
<DialogBody>
40+
<DialogAddWslServer />
41+
</DialogBody>
3542
</Dialog>
3643
))
3744
}

‎packages/ui/src/v2/components/button-v2.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,30 @@
8989
cursor: not-allowed;
9090
}
9191

92+
/* Danger */
93+
[data-component="button-v2"][data-variant="danger"] {
94+
background-color: var(--v2-background-bg-button-neutral);
95+
color: var(--v2-state-fg-danger);
96+
box-shadow: var(--v2-elevation-button-neutral);
97+
}
98+
99+
[data-component="button-v2"][data-variant="danger"]:is(:hover, [data-state="hover"]):not(:disabled) {
100+
background-image:
101+
linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
102+
linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
103+
}
104+
105+
[data-component="button-v2"][data-variant="danger"]:is(:active, [data-state="pressed"]):not(:disabled) {
106+
background-image:
107+
linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
108+
linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
109+
}
110+
111+
[data-component="button-v2"][data-variant="danger"]:is(:disabled, [data-state="disabled"]) {
112+
opacity: 0.5;
113+
cursor: not-allowed;
114+
}
115+
92116
/* Contrast */
93117
[data-component="button-v2"][data-variant="contrast"] {
94118
background-image:

‎packages/ui/src/v2/components/button-v2.stories.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const docs = `### Overview
44
Button v2 with three visual variants and two sizes.
55
66
### API
7-
- \`variant\`: "neutral" | "contrast" | "ghost" | "ghost-muted".
7+
- \`variant\`: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted".
88
- \`size\`: "normal" | "large".
99
- \`icon\`: Optional icon name.
1010
- Inherits Kobalte Button props and native button attributes.
@@ -39,7 +39,7 @@ export default {
3939
},
4040
variant: {
4141
control: "select",
42-
options: ["neutral", "contrast", "ghost", "ghost-muted"],
42+
options: ["neutral", "danger", "contrast", "ghost", "ghost-muted"],
4343
},
4444
size: {
4545
control: "select",
@@ -61,6 +61,7 @@ export const Variants = {
6161
}}
6262
>
6363
<ButtonV2 variant="neutral">Neutral</ButtonV2>
64+
<ButtonV2 variant="danger">Danger</ButtonV2>
6465
<ButtonV2 variant="contrast">Contrast</ButtonV2>
6566
<ButtonV2 variant="ghost">Ghost</ButtonV2>
6667
<ButtonV2 variant="ghost-muted" icon="edit">
@@ -115,7 +116,7 @@ export const Icon = {
115116

116117
export const AllStates = {
117118
render: () => {
118-
const variants = ["neutral", "contrast", "ghost", "ghost-muted"] as const
119+
const variants = ["neutral", "danger", "contrast", "ghost", "ghost-muted"] as const
119120
const states = ["default", "hover", "pressed", "focus", "disabled"] as const
120121
const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
121122
return (

‎packages/ui/src/v2/components/button-v2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface ButtonV2Props
77
extends ComponentProps<typeof Kobalte>,
88
Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
99
size?: "small" | "normal" | "large"
10-
variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
10+
variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted"
1111
icon?: IconProps["name"]
1212
}
1313

‎packages/ui/src/v2/components/dialog-v2.css‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,34 +49,51 @@
4949
display: flex;
5050
flex-direction: row;
5151
align-items: flex-start;
52+
align-self: stretch;
53+
width: 100%;
54+
gap: 0;
5255
padding: 16px;
53-
gap: 8px;
5456
flex-shrink: 0;
55-
align-self: stretch;
57+
58+
[data-slot="dialog-header-title"] {
59+
margin: 0;
60+
flex: 1;
61+
min-width: 0;
62+
font-weight: 530;
63+
font-size: 13px;
64+
line-height: 16px;
65+
letter-spacing: -0.04px;
66+
color: var(--v2-text-text-base);
67+
font-variation-settings: "slnt" 0;
68+
}
5669

5770
[data-slot="dialog-title-group"] {
5871
display: flex;
5972
flex-direction: column;
6073
align-items: flex-start;
61-
gap: 8px;
74+
gap: 4px;
6275
flex: 1;
6376
min-width: 0;
6477
}
6578

6679
[data-slot="dialog-title"] {
6780
margin: 0;
81+
flex: none;
82+
flex-grow: 0;
6883
font-weight: 530;
6984
font-size: 15px;
70-
line-height: 100%;
85+
line-height: 20px;
7186
letter-spacing: -0.13px;
7287
color: var(--v2-text-text-base);
7388
font-variation-settings: "slnt" 0;
7489
}
7590

7691
[data-slot="dialog-description"] {
92+
flex: none;
93+
flex-grow: 0;
7794
font-weight: 440;
7895
font-size: 13px;
79-
line-height: 100%;
96+
line-height: 20px;
8097
letter-spacing: -0.04px;
8198
color: var(--v2-text-text-muted);
8299
font-variation-settings: "slnt" 0;
@@ -86,8 +103,11 @@
86103
display: flex;
87104
justify-content: center;
88105
align-items: center;
89-
width: 24px;
90-
height: 24px;
106+
width: 20px;
107+
height: 20px;
108+
margin-top: -2px;
109+
margin-right: -2px;
110+
margin-left: auto;
91111
border-radius: 4px;
92112
flex-shrink: 0;
93113
cursor: pointer;
@@ -97,6 +117,10 @@
97117
background: var(--v2-overlay-simple-overlay-hover);
98118
}
99119
}
120+
121+
&[data-hide-close] [data-slot="dialog-close-button"] {
122+
display: none;
123+
}
100124
}
101125

102126
[data-slot="dialog-footer"] {

0 commit comments

Comments
 (0)