ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(app): v2 desktop UI improvements (#29689)

Browse source 
Co-authored-by: Brendan Allan <git@brendonovich.dev>
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
This commit is contained in:
Aarav Sareen 2026-06-02 00:39:09 +05:30 • committed by GitHub
commit 363d6d1a26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
80 changed files with 3575 additions and 575 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/v2/components/accordion-v2.css
View file

@ -15,7 +15,6 @@
box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
overflow: hidden;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
color: var(--accordion-v2-fg);
-webkit-font-smoothing: antialiased;
@ -59,7 +58,6 @@
cursor: default;
user-select: none;
font-family: inherit;
font-size: 13px;
font-weight: 440;
line-height: 100%;

1
packages/ui/src/v2/components/avatar-v2.css
View file

@ -14,7 +14,6 @@
height: 28px;
border-radius: var(--avatar-radius);
border: 0.5px solid var(--v2-border-border-base);
font-family: var(--v2-font-family-sans);
font-weight: 530;
font-size: var(--avatar-font-size);
line-height: 1;

9
packages/ui/src/v2/components/badge-v2.css
View file

@ -10,19 +10,18 @@
user-select: none;
border-radius: 2px;
border: 0.5px solid var(--border-border-base);
background: var(--background-bg-layer-02);
border: 0.5px solid var(--v2-border-border-base);
background: var(--v2-background-bg-layer-02);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 11px;
line-height: 1;
letter-spacing: 0.05px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-variant-numeric: tabular-nums;
}
[data-component="tag"][data-high-contrast] {
border-color: var(--border-border-strong);
border-color: var(--v2-border-border-strong);
}

1
packages/ui/src/v2/components/basic-tool-v2.css
View file

@ -21,7 +21,6 @@
gap: 8px;
min-width: 0;
width: 100%;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
[data-slot="basic-tool-v2-trigger"] {

24
packages/ui/src/v2/components/button-v2.css
View file

@ -11,7 +11,6 @@
justify-content: center;
gap: 6px;
border-radius: 6px;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 13px;
@ -145,3 +144,26 @@
opacity: 0.5;
cursor: not-allowed;
}
/* Ghost muted */
[data-component="button-v2"][data-variant="ghost-muted"] {
background-color: transparent;
color: var(--v2-text-text-muted);
}
[data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
color: var(--v2-icon-icon-muted);
}
[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-color: var(--v2-overlay-simple-overlay-hover);
}
[data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-color: var(--v2-overlay-simple-overlay-pressed);
}
[data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
opacity: 0.5;
cursor: not-allowed;
}

9
packages/ui/src/v2/components/button-v2.stories.tsx
View file

@ -4,7 +4,7 @@ const docs = `### Overview
Button v2 with three visual variants and two sizes.
### API
- \`variant\`: "neutral" | "contrast" | "ghost".
- \`variant\`: "neutral" | "contrast" | "ghost" | "ghost-muted".
- \`size\`: "normal" | "large".
- \`icon\`: Optional icon name.
- Inherits Kobalte Button props and native button attributes.
@ -39,7 +39,7 @@ export default {
},
variant: {
control: "select",
options: ["neutral", "contrast", "ghost"],
options: ["neutral", "contrast", "ghost", "ghost-muted"],
},
size: {
control: "select",
@ -63,6 +63,9 @@ export const Variants = {
<ButtonV2 variant="neutral">Neutral</ButtonV2>
<ButtonV2 variant="contrast">Contrast</ButtonV2>
<ButtonV2 variant="ghost">Ghost</ButtonV2>
<ButtonV2 variant="ghost-muted" icon="edit">
Ghost muted
</ButtonV2>
</div>
),
}
@ -112,7 +115,7 @@ export const Icon = {
export const AllStates = {
render: () => {
const variants = ["neutral", "contrast", "ghost"] as const
const variants = ["neutral", "contrast", "ghost", "ghost-muted"] as const
const states = ["default", "hover", "pressed", "focus", "disabled"] as const
const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
return (

4
packages/ui/src/v2/components/button-v2.tsx
View file

@ -7,7 +7,7 @@ export interface ButtonV2Props
extends ComponentProps<typeof Kobalte>,
Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
size?: "small" | "normal" | "large"
variant?: "neutral" | "contrast" | "ghost"
variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
icon?: IconProps["name"]
}
@ -27,7 +27,7 @@ export function ButtonV2(props: ButtonV2Props) {
}}
>
<Show when={resolvedIcon()}>
<Icon name={resolvedIcon()!} size="small" />
<Icon name={resolvedIcon()!} />
</Show>
{props.children}
</Kobalte>

3
packages/ui/src/v2/components/checkbox-v2.css
View file

@ -10,7 +10,6 @@
[data-slot="checkbox-v2-error"] {
color: var(--state-fg-danger);
font-family: var(--v2-font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@ -90,7 +89,6 @@
display: inline-flex;
user-select: none;
color: inherit;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-variant-numeric: tabular-nums;
@ -109,7 +107,6 @@
[data-slot="checkbox-v2-description"] {
color: var(--text-text-muted);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1;

14
packages/ui/src/v2/components/dialog-v2.css
View file

@ -4,7 +4,7 @@
position: fixed;
inset: 0;
z-index: 50;
background-color: var(--overlay-simple-overlay-scrim);
background-color: var(--v2-overlay-simple-overlay-scrim);
}
[data-component="dialog"] {
@ -22,8 +22,8 @@
align-items: flex-start;
width: 480px;
height: 368px;
background: var(--background-bg-layer-01);
box-shadow: var(--elevation-overlay);
background: var(--v2-background-bg-layer-01);
box-shadow: var(--v2-elevation-overlay);
border-radius: 6px;
overflow: visible;
pointer-events: auto;
@ -64,22 +64,20 @@
[data-slot="dialog-title"] {
margin: 0;
font-family: "Inter", var(--v2-font-family-sans);
font-weight: 530;
font-size: 15px;
line-height: 100%;
letter-spacing: -0.13px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
}
[data-slot="dialog-description"] {
font-family: "Inter", var(--v2-font-family-sans);
font-weight: 440;
font-size: 13px;
line-height: 100%;
letter-spacing: -0.04px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-variation-settings: "slnt" 0;
}
@ -94,7 +92,7 @@
cursor: pointer;
&:hover {
background: var(--overlay-simple-overlay-hover);
background: var(--v2-overlay-simple-overlay-hover);
}
}
}

1
packages/ui/src/v2/components/diff-changes-v2.css
View file

@ -6,7 +6,6 @@
[data-slot="diff-changes-additions"],
[data-slot="diff-changes-deletions"] {
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-style: normal;
font-weight: 440;

2
packages/ui/src/v2/components/field-v2.css
View file

@ -17,7 +17,6 @@
margin: 0;
padding: 0;
border: 0;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 13px;
@ -76,7 +75,6 @@
align-self: stretch;
width: 100%;
min-height: 11px;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 11px;

24
packages/ui/src/v2/components/icon.tsx
View file

@ -2,20 +2,20 @@ import { onMount, type ComponentProps, splitProps } from "solid-js"
const icons = {
edit: {
viewBox: "0 0 20 20",
body: `<path d="M17.0832 17.0807V17.5807H17.5832V17.0807H17.0832ZM2.9165 17.0807H2.4165V17.5807H2.9165V17.0807ZM2.9165 2.91406V2.41406H2.4165V2.91406H2.9165ZM9.58317 3.41406H10.0832V2.41406H9.58317V2.91406V3.41406ZM17.5832 10.4141V9.91406H16.5832V10.4141H17.0832H17.5832ZM6.24984 11.2474L5.89628 10.8938L5.74984 11.0403V11.2474H6.24984ZM6.24984 13.7474H5.74984V14.2474H6.24984V13.7474ZM8.74984 13.7474V14.2474H8.95694L9.10339 14.101L8.74984 13.7474ZM15.2082 2.28906L15.5617 1.93551L15.2082 1.58196L14.8546 1.93551L15.2082 2.28906ZM17.7082 4.78906L18.0617 5.14262L18.4153 4.78906L18.0617 4.43551L17.7082 4.78906ZM17.0832 17.0807V16.5807H2.9165V17.0807V17.5807H17.0832V17.0807ZM2.9165 17.0807H3.4165V2.91406H2.9165H2.4165V17.0807H2.9165ZM2.9165 2.91406V3.41406H9.58317V2.91406V2.41406H2.9165V2.91406ZM17.0832 10.4141H16.5832V17.0807H17.0832H17.5832V10.4141H17.0832ZM6.24984 11.2474H5.74984V13.7474H6.24984H6.74984V11.2474H6.24984ZM6.24984 13.7474V14.2474H8.74984V13.7474V13.2474H6.24984V13.7474ZM6.24984 11.2474L6.60339 11.6009L15.5617 2.64262L15.2082 2.28906L14.8546 1.93551L5.89628 10.8938L6.24984 11.2474ZM15.2082 2.28906L14.8546 2.64262L17.3546 5.14262L17.7082 4.78906L18.0617 4.43551L15.5617 1.93551L15.2082 2.28906ZM17.7082 4.78906L17.3546 4.43551L8.39628 13.3938L8.74984 13.7474L9.10339 14.101L18.0617 5.14262L17.7082 4.78906Z" fill="currentColor"/>`,
viewBox: "0 0 16 16",
body: `<path d="M13.5555 8.21534V13.5556H2.44434L2.44434 2.4445H7.78462M6.88878 9.11119C6.88878 9.11119 8.96327 9.0367 9.69678 8.3032L14.0301 3.96986C14.5824 3.4176 14.5824 2.52213 14.0301 1.96986C13.4778 1.4176 12.5824 1.4176 12.0301 1.96986L7.69678 6.3032C7.00513 6.99484 6.88878 9.11119 6.88878 9.11119Z" stroke="currentColor"/>`,
},
"folder-add-left": {
viewBox: "0 0 20 20",
body: `<path d="M2.08333 9.58268V2.91602H8.33333L10 5.41602H17.9167V16.2493H8.75M3.75 12.0827V14.5827M3.75 14.5827V17.0827M3.75 14.5827H1.25M3.75 14.5827H6.25" stroke="currentColor" stroke-linecap="square"/>`,
viewBox: "0 0 16 16",
body: `<path d="M7.5 13.3333H1.5V2H6.83333L8.83333 4H14.8333V6M10.1667 11.3333H15.5M12.8333 8.66667V14" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
},
"grid-plus": {
viewBox: "0 0 16 16",
body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
},
help: {
viewBox: "0 0 20 20",
body: `<path d="M7.91683 7.91927V6.2526H12.0835V8.7526L10.0002 10.0026V12.0859M10.0002 13.7526V13.7609M17.9168 10.0026C17.9168 14.3749 14.3724 17.9193 10.0002 17.9193C5.62791 17.9193 2.0835 14.3749 2.0835 10.0026C2.0835 5.63035 5.62791 2.08594 10.0002 2.08594C14.3724 2.08594 17.9168 5.63035 17.9168 10.0026Z" stroke="currentColor" stroke-linecap="square"/>`,
viewBox: "0 0 16 16",
body: `<path d="M6.33345 6.33349V5.00015H9.66679V7.00015L8.00015 8.00015V9.66679M8.27485 11.6819H7.71897M14.4446 8.00011C14.4446 11.5593 11.5593 14.4446 8.00011 14.4446C4.44094 14.4446 1.55566 11.5593 1.55566 8.00011C1.55566 4.44094 4.44094 1.55566 8.00011 1.55566C11.5593 1.55566 14.4446 4.44094 14.4446 8.00011Z" stroke="currentColor" stroke-linecap="square"/>`,
},
"sidebar-right": {
viewBox: "0 0 20 20",
@ -31,7 +31,7 @@ const icons = {
},
"magnifying-glass": {
viewBox: "0 0 16 16",
body: `<path d="M13 13L10.6418 10.6418M11.9552 7.47761C11.9552 9.95053 9.95053 11.9552 7.47761 11.9552C5.0047 11.9552 3 9.95053 3 7.47761C3 5.0047 5.0047 3 7.47761 3C9.95053 3 11.9552 5.0047 11.9552 7.47761Z" stroke="currentColor" stroke-linecap="square" vector-effect="non-scaling-stroke"/>`,
body: `<path d="M14 14L10.3454 10.3454M6.88889 11.7778C9.58889 11.7778 11.7778 9.58889 11.7778 6.88889C11.7778 4.18889 9.58889 2 6.88889 2C4.18889 2 2 4.18889 2 6.88889C2 9.58889 4.18889 11.7778 6.88889 11.7778Z" stroke="currentColor"/>`,
},
menu: {
viewBox: "0 0 16 16",
@ -42,8 +42,16 @@ const icons = {
body: `<path d="M8 2.88867V13.1109" stroke="currentColor" stroke-linejoin="round"/><path d="M2.88867 8H13.1109" stroke="currentColor" stroke-linejoin="round"/>`,
},
"settings-gear": {
viewBox: "0 0 16 16",
body: `<path d="M7.99998 1.3335L14 4.66683V11.3335L7.99998 14.6668L2 11.3335V4.66683L7.99998 1.3335Z" stroke="currentColor"/><path d="M9.99998 8.00016C9.99998 9.10476 9.10458 10.0002 7.99998 10.0002C6.89538 10.0002 5.99998 9.10476 5.99998 8.00016C5.99998 6.89556 6.89538 6.00016 7.99998 6.00016C9.10458 6.00016 9.99998 6.89556 9.99998 8.00016Z" stroke="currentColor"/>`,
},
"chevron-down": {
viewBox: "0 0 16 16",
body: `<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor"/>`,
},
close: {
viewBox: "0 0 20 20",
body: `<path d="M7.62516 4.46094L5.05225 3.86719L3.86475 5.05469L4.4585 7.6276L2.0835 9.21094V10.7943L4.4585 12.3776L3.86475 14.9505L5.05225 16.138L7.62516 15.5443L9.2085 17.9193H10.7918L12.3752 15.5443L14.9481 16.138L16.1356 14.9505L15.5418 12.3776L17.9168 10.7943V9.21094L15.5418 7.6276L16.1356 5.05469L14.9481 3.86719L12.3752 4.46094L10.7918 2.08594H9.2085L7.62516 4.46094Z" stroke="currentColor"/><path d="M12.5002 10.0026C12.5002 11.3833 11.3809 12.5026 10.0002 12.5026C8.61945 12.5026 7.50016 11.3833 7.50016 10.0026C7.50016 8.62189 8.61945 7.5026 10.0002 7.5026C11.3809 7.5026 12.5002 8.62189 12.5002 10.0026Z" stroke="currentColor"/>`,
body: `<path d="M14.4446 5.55566L5.55566 14.4446M5.55566 5.55566L14.4446 14.4446" stroke="currentColor" stroke-linejoin="round"/>`,
},
"xmark-small": {
viewBox: "0 0 16 16",

2
packages/ui/src/v2/components/inline-input-v2.css
View file

@ -81,7 +81,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;
@ -138,7 +137,6 @@
border: 0;
background: transparent;
outline: none;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

29
packages/ui/src/v2/components/keybind-v2.css
View file

@ -6,13 +6,13 @@
[data-component="keybind-v2"] {
box-sizing: border-box;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0px;
padding: 0;
gap: 2px;
flex-shrink: 0;
}
[data-component="keybind-v2"] *,
@ -26,9 +26,9 @@
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
padding: 0;
gap: 4px;
width: 14px;
min-width: 14px;
height: 14px;
border-radius: 2px;
flex: none;
@ -36,7 +36,7 @@
}
[data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-key"] {
background: var(--background-bg-layer-03);
background: var(--v2-background-bg-layer-03);
}
[data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-key"] {
@ -48,26 +48,27 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
padding: 0px;
flex: 1 1 auto;
align-self: stretch;
font-family: "Inter", var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
min-width: 14px;
height: 11px;
padding: 0;
flex: none;
font-style: normal;
font-weight: 530;
font-size: 11px;
line-height: 100%;
line-height: 1;
text-align: center;
letter-spacing: 0.05px;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" on, "lnum" on;
font-variation-settings: "slnt" 0;
user-select: none;
}
[data-component="keybind-v2"][data-variant="neutral"] [data-slot="keybind-v2-label"] {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="keybind-v2"][data-variant="ghost"] [data-slot="keybind-v2-label"] {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}

2
packages/ui/src/v2/components/line-comment-v2.css
View file

@ -6,7 +6,6 @@
[data-component="line-comment-v2"] {
box-sizing: border-box;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
min-width: 0;
width: 100%;
@ -155,7 +154,6 @@
border: 1px solid var(--border-border-base);
border-radius: 6px;
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
font-family: inherit;
font-size: 13px;
font-style: normal;
font-weight: 440;

15
packages/ui/src/v2/components/menu-v2.css
View file

@ -6,12 +6,11 @@
padding: 2px;
min-width: 160px;
background: var(--v2-background-bg-layer-01);
background: var(--background-bg-layer-01);
border-radius: 6px;
box-shadow: var(--v2-elevation-floating);
box-shadow: var(--elevation-floating);
outline: none;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -31,9 +30,9 @@
--menu-v2-fg-subtle: var(--text-text-muted);
--menu-v2-icon: var(--icon-icon-base);
--menu-v2-accent: var(--text-text-accent);
--menu-v2-badge-bg: var(--v2-background-bg-layer-02);
--menu-v2-badge-border: var(--v2-border-border-base);
--menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
--menu-v2-badge-bg: var(--background-bg-layer-02);
--menu-v2-badge-border: var(--border-border-base);
--menu-v2-hover: var(--overlay-simple-overlay-hover);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -52,7 +51,6 @@
cursor: default;
user-select: none;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
font-variation-settings: "slnt" 0;
font-variant-numeric: tabular-nums;
color: var(--menu-v2-fg);
@ -153,7 +151,7 @@
height: 1px;
width: calc(100% + 4px);
margin: 2px -2px;
background: var(--v2-border-border-muted);
background: var(--border-border-muted);
border: none;
}
@ -164,7 +162,6 @@
height: 28px;
padding: 0 12px;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 530;
line-height: 100%;

128
packages/ui/src/v2/components/project-avatar-v2.css Normal file
View file

@ -0,0 +1,128 @@
[data-component="project-avatar-v2"] {
--project-avatar-bg: var(--v2-avatar-bg-gray);
--project-avatar-border: var(--v2-avatar-border-gray);
position: relative;
box-sizing: border-box;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
overflow: hidden;
border-radius: 4px;
background:
linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%), var(--project-avatar-bg);
box-shadow: inset 0 0 0 0.5px var(--project-avatar-border);
font-weight: 530;
font-size: 11px;
line-height: 1;
letter-spacing: 0.05px;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
color: var(--v2-grey-100);
text-shadow: 0 0 4px var(--v2-alpha-dark-20);
user-select: none;
-webkit-user-select: none;
}
[data-component="project-avatar-v2"][data-variant="orange"] {
--project-avatar-bg: var(--v2-avatar-bg-orange);
--project-avatar-border: var(--v2-avatar-border-orange);
}
[data-component="project-avatar-v2"][data-variant="yellow"] {
--project-avatar-bg: var(--v2-avatar-bg-yellow);
--project-avatar-border: var(--v2-avatar-border-yellow);
}
[data-component="project-avatar-v2"][data-variant="cyan"] {
--project-avatar-bg: var(--v2-avatar-bg-cyan);
--project-avatar-border: var(--v2-avatar-border-cyan);
}
[data-component="project-avatar-v2"][data-variant="green"] {
--project-avatar-bg: var(--v2-avatar-bg-green);
--project-avatar-border: var(--v2-avatar-border-green);
}
[data-component="project-avatar-v2"][data-variant="red"] {
--project-avatar-bg: var(--v2-avatar-bg-red);
--project-avatar-border: var(--v2-avatar-border-red);
}
[data-component="project-avatar-v2"][data-variant="pink"] {
--project-avatar-bg: var(--v2-avatar-bg-pink);
--project-avatar-border: var(--v2-avatar-border-pink);
}
[data-component="project-avatar-v2"][data-variant="blue"] {
--project-avatar-bg: var(--v2-avatar-bg-blue);
--project-avatar-border: var(--v2-avatar-border-blue);
}
[data-component="project-avatar-v2"][data-variant="purple"] {
--project-avatar-bg: var(--v2-avatar-bg-purple);
--project-avatar-border: var(--v2-avatar-border-purple);
}
[data-component="project-avatar-v2"][data-variant="gray"] {
--project-avatar-bg: var(--v2-avatar-bg-gray);
--project-avatar-border: var(--v2-avatar-border-gray);
}
[data-component="project-avatar-v2"][data-has-image] {
background: var(--project-avatar-bg);
}
[data-component="project-avatar-v2"] [data-slot="project-avatar-image"] {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
[data-component="project-avatar-v2"] [data-slot="project-avatar-loader"] {
position: absolute;
inset: 0;
z-index: 2;
border-radius: 4px;
background: conic-gradient(
from 180deg at 50% 50%,
var(--v2-grey-100) 0deg,
var(--v2-grey-1200) 0.04deg,
var(--v2-alpha-dark-50) 90deg,
var(--v2-grey-100) 360deg
);
mix-blend-mode: soft-light;
pointer-events: none;
animation: project-avatar-v2-loader-spin 1.2s linear infinite;
}
@keyframes project-avatar-v2-loader-spin {
to {
transform: rotate(360deg);
}
}
[data-slot="project-avatar-slot"] {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
overflow: visible;
}
[data-component="project-avatar-v2"][data-unread] {
overflow: visible;
outline: 2px solid var(--v2-background-bg-accent);
outline-offset: 1px;
}

88
packages/ui/src/v2/components/project-avatar-v2.stories.tsx Normal file
View file

@ -0,0 +1,88 @@
// @ts-nocheck
import { For } from "solid-js"
import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "./project-avatar-v2"
const docs = `### Overview
Saturated 16px project avatar with color variants and optional unread ring.
### API
- Required: \`fallback\` string.
- Optional: \`src\`, \`variant\`, \`unread\`.
### Variants
- Color: orange, yellow, cyan, green, red, pink, blue, purple, gray.
- Image vs initial content state.
- Unread ring when \`unread\` is set.
### Theming
- Uses \`--v2-avatar-bg-*\` and \`--v2-avatar-border-*\` tokens with inset box-shadow borders.
`
export default {
title: "UI V2/ProjectAvatar",
id: "components-project-avatar-v2",
component: ProjectAvatar,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
argTypes: {
variant: {
control: "select",
options: [...PROJECT_AVATAR_VARIANTS],
},
},
args: {
fallback: "O",
variant: "orange",
},
}
export const Basic = {}
export const WithImage = {
args: {
src: "https://placehold.co/32x32/png",
fallback: "O",
variant: "blue",
},
}
export const AllVariants = {
render: () => (
<div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
<For each={PROJECT_AVATAR_VARIANTS}>
{(variant) => <ProjectAvatar fallback={variant[0].toUpperCase()} variant={variant} />}
</For>
</div>
),
}
export const Unread = {
args: {
fallback: "O",
variant: "orange",
unread: true,
},
}
export const Loading = {
args: {
fallback: "O",
variant: "orange",
loading: true,
},
}
export const LoadingAndUnread = {
args: {
fallback: "O",
variant: "blue",
loading: true,
unread: true,
},
}

71
packages/ui/src/v2/components/project-avatar-v2.tsx Normal file
View file

@ -0,0 +1,71 @@
import { type ComponentProps, splitProps, Show } from "solid-js"
import "./project-avatar-v2.css"
const segmenter =
typeof Intl !== "undefined" && "Segmenter" in Intl
? new Intl.Segmenter(undefined, { granularity: "grapheme" })
: undefined
function first(value: string) {
if (!value) return ""
if (!segmenter) return Array.from(value)[0] ?? ""
return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
}
export const PROJECT_AVATAR_VARIANTS = [
"orange",
"yellow",
"cyan",
"green",
"red",
"pink",
"blue",
"purple",
"gray",
] as const
export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
export interface ProjectAvatarProps extends ComponentProps<"div"> {
fallback: string
src?: string
variant?: ProjectAvatarVariant
unread?: boolean
loading?: boolean
}
export function ProjectAvatar(props: ProjectAvatarProps) {
const [split, rest] = splitProps(props, [
"fallback",
"src",
"variant",
"unread",
"loading",
"class",
"classList",
"style",
])
const src = split.src
return (
<div
{...rest}
data-component="project-avatar-v2"
data-variant={split.variant ?? "gray"}
data-has-image={src ? "" : undefined}
data-unread={split.unread ? "" : undefined}
data-loading={split.loading ? "" : undefined}
classList={{
...split.classList,
[split.class ?? ""]: !!split.class,
}}
style={typeof split.style === "object" ? split.style : undefined}
>
<Show when={src} fallback={first(split.fallback)}>
{(value) => <img src={value()} draggable={false} data-slot="project-avatar-image" />}
</Show>
<Show when={split.loading}>
<span data-slot="project-avatar-loader" aria-hidden="true" />
</Show>
</div>
)
}

5
packages/ui/src/v2/components/radio-v2.css
View file

@ -9,7 +9,6 @@
align-items: center;
user-select: none;
color: var(--text-text-faint);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-style: normal;
font-weight: 440;
@ -20,7 +19,6 @@
[data-slot="radio-v2-description"] {
color: var(--text-text-faint);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1.2;
@ -35,7 +33,6 @@
[data-slot="radio-v2-error"] {
color: var(--state-fg-danger);
font-family: var(--v2-font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@ -167,7 +164,6 @@
display: inline-flex;
user-select: none;
color: inherit;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-variant-numeric: tabular-nums;
@ -186,7 +182,6 @@
[data-slot="radio-v2-item-description"] {
color: var(--text-text-muted);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1;

1
packages/ui/src/v2/components/segmented-control-v2.css
View file

@ -34,7 +34,6 @@
background: transparent;
box-shadow: none;
cursor: pointer;
font-family: var(--v2-font-family-sans), var(--sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

1
packages/ui/src/v2/components/select-v2.css
View file

@ -110,7 +110,6 @@
background: transparent;
outline: none;
text-align: left;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

42
packages/ui/src/v2/components/switch-v2.css
View file

@ -29,8 +29,8 @@
border-radius: 4px;
border: none;
background:
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
box-shadow: var(--elevation-switch-off);
linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%), var(--v2-background-bg-layer-03);
box-shadow: var(--v2-elevation-switch-off);
transition:
background 90ms ease-out,
opacity 90ms ease-out,
@ -43,15 +43,15 @@
height: 12px;
transform: translateX(0);
border-radius: 2px;
border: 0.5px solid var(--overlay-gradient-depth-overlay-depth-top);
border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
background:
linear-gradient(
180deg,
var(--overlay-gradient-depth-overlay-depth-top) 0%,
var(--overlay-gradient-depth-overlay-depth-bot) 100%
var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
),
var(--grey-200);
box-shadow: var(--elevation-elements);
var(--v2-grey-200);
box-shadow: var(--v2-elevation-elements);
transition:
transform 90ms ease-out,
width 90ms ease-out,
@ -64,8 +64,7 @@
align-items: center;
height: 16px;
user-select: none;
color: var(--text-text-faint);
font-family: var(--v2-font-family-sans);
color: var(--v2-text-text-faint);
font-size: 11px;
font-style: normal;
font-weight: 440;
@ -75,8 +74,7 @@
}
[data-slot="switch-error"] {
color: var(--state-fg-danger);
font-family: var(--v2-font-family-sans);
color: var(--v2-state-fg-danger);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@ -89,8 +87,8 @@
&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%), var(--v2-background-bg-layer-03);
}
&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@ -99,14 +97,14 @@
}
&:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
}
&[data-checked] [data-slot="switch-control"] {
background:
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
box-shadow: var(--elevation-switch-on);
linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
box-shadow: var(--v2-elevation-switch-on);
}
&[data-checked] [data-slot="switch-thumb"] {
@ -115,16 +113,16 @@
background:
linear-gradient(
180deg,
var(--overlay-gradient-depth-overlay-depth-top) 0%,
var(--overlay-gradient-depth-overlay-depth-bot) 100%
var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
),
var(--grey-300);
var(--v2-grey-300);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@ -140,7 +138,7 @@
}
&[data-invalid] [data-slot="switch-control"] {
border-color: var(--state-border-danger);
border-color: var(--v2-state-border-danger);
}
&[data-readonly] {

37
packages/ui/src/v2/components/tab-state-indicator.tsx Normal file
View file

@ -0,0 +1,37 @@
import { splitProps, type ComponentProps } from "solid-js"
export function TabStateIndicator(props: ComponentProps<"svg">) {
const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
return (
<svg
{...rest}
class={local.class}
classList={local.classList}
width={local.width ?? 16}
height={local.height ?? 16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden={rest["aria-hidden"] ?? "true"}
>
<g opacity="0.25" fill="#808080">
<rect x="13.5" y="2.5" width="2" height="2" transform="rotate(90 13.5 2.5)" />
<path d="M10.5 2.5L10.5 4.5L8.5 4.5L8.5 2.5L10.5 2.5Z" />
<path d="M4.5 2.5L4.5 4.5L2.5 4.5L2.5 2.5L4.5 2.5Z" />
<path d="M13.5 5.5L13.5 7.5L11.5 7.5L11.5 5.5L13.5 5.5Z" />
<path d="M4.5 5.5L4.5 7.5L2.5 7.5L2.5 5.5L4.5 5.5Z" />
<path d="M13.5 8.5L13.5 10.5L11.5 10.5L11.5 8.5L13.5 8.5Z" />
<path d="M4.5 8.5L4.5 10.5L2.5 10.5L2.5 8.5L4.5 8.5Z" />
<path d="M13.5 11.5L13.5 13.5L11.5 13.5L11.5 11.5L13.5 11.5Z" />
<path d="M7.5 11.5L7.5 13.5L5.5 13.5L5.5 11.5L7.5 11.5Z" />
<path d="M4.5 11.5L4.5 13.5L2.5 13.5L2.5 11.5L4.5 11.5Z" />
<path d="M7.5 2.5L7.5 4.5L5.5 4.5L5.5 2.5L7.5 2.5Z" />
<path d="M10.5 5.5L10.5 7.5L8.5 7.5L8.5 5.5L10.5 5.5Z" />
<path d="M7.5 5.5L7.5 7.5L5.5 7.5L5.5 5.5L7.5 5.5Z" />
<path d="M10.5 8.5L10.5 10.5L8.5 10.5L8.5 8.5L10.5 8.5Z" />
<path d="M7.5 8.5L7.5 10.5L5.5 10.5L5.5 8.5L7.5 8.5Z" />
<path d="M10.5 11.5L10.5 13.5L8.5 13.5L8.5 11.5L10.5 11.5Z" />
</g>
</svg>
)
}

47
packages/ui/src/v2/components/tabs-v2.css
View file

@ -9,7 +9,6 @@
height: 100%;
display: flex;
overflow: clip;
font-family: var(--v2-font-family-sans);
}
[data-component="tabs-v2"][data-orientation="horizontal"] {
@ -75,11 +74,11 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}
[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="tabs-v2"] [data-component="icon-button"] {
@ -88,7 +87,7 @@
[data-component="tabs-v2"] [data-slot="tabs-v2-trigger-wrapper"]:disabled {
pointer-events: none;
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"],
@ -105,7 +104,7 @@
height: 1px;
content: "";
width: calc(100% + 16px);
background-color: var(--border-border-base);
background-color: var(--v2-border-border-base);
position: absolute;
bottom: 0px;
left: -8px;
@ -119,7 +118,7 @@
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
height: 100%;
gap: 4px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
border-bottom: 1px solid transparent;
}
@ -130,18 +129,18 @@
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
color: var(--text-text-base);
color: var(--v2-text-text-base);
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
border-bottom-color: var(--text-text-faint);
color: var(--text-text-base);
border-bottom-color: var(--v2-text-text-faint);
color: var(--v2-text-text-base);
}
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
@ -149,7 +148,7 @@
border-radius: 4px;
border: 0.5px solid transparent;
box-sizing: border-box;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger"] {
@ -162,16 +161,16 @@
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
background-color: var(--background-bg-layer-01);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);
background-color: var(--v2-background-bg-layer-01);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}
[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--background-bg-layer-02);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);
background-color: var(--v2-background-bg-layer-02);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
@ -182,13 +181,13 @@
padding: 12px;
gap: 4px;
overflow-y: auto;
border-right: 1px solid var(--border-border-base);
border-right: 1px solid var(--v2-border-border-base);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
width: 100%;
padding-left: 4px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-size: 12px;
font-weight: 500;
}
@ -199,7 +198,7 @@
border-radius: 4px;
border: 0.5px solid transparent;
box-sizing: border-box;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
@ -212,12 +211,12 @@
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
color: var(--text-text-base);
color: var(--v2-text-text-base);
}
[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
[data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
background-color: var(--background-bg-layer-02);
color: var(--text-text-base);
border: 0.5px solid var(--border-border-muted);
background-color: var(--v2-background-bg-layer-02);
color: var(--v2-text-text-base);
border: 0.5px solid var(--v2-border-border-muted);
}

32
packages/ui/src/v2/components/text-input-v2.css
View file

@ -11,8 +11,9 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
background:
linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
box-shadow: var(--v2-elevation-button-neutral);
flex: none;
align-self: stretch;
transition:
@ -27,17 +28,17 @@
[data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
}
[data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
outline-color: var(--border-border-focus);
outline-color: var(--v2-border-border-focus);
box-shadow: none;
}
[data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
outline-color: var(--state-fg-danger);
outline-color: var(--v2-state-fg-danger);
box-shadow: none;
}
@ -67,18 +68,17 @@
border: 0;
background: transparent;
outline: none;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
}
[data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}
[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
@ -99,19 +99,19 @@
border: 0;
border-radius: 4px;
background: transparent;
color: var(--icon-icon-muted);
color: var(--v2-icon-icon-muted);
cursor: pointer;
outline: none;
}
[data-component="text-input-v2"]
[data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-hover);
background-color: var(--v2-overlay-simple-overlay-hover);
}
[data-component="text-input-v2"]
[data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-pressed);
background-color: var(--v2-overlay-simple-overlay-pressed);
}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
@ -119,7 +119,7 @@
}
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
}
@ -135,11 +135,11 @@
}
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
color: var(--state-fg-danger);
caret-color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
caret-color: var(--v2-state-fg-danger);
}
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
opacity: 1;
}

2
packages/ui/src/v2/components/text-input-v2.stories.tsx
View file

@ -19,7 +19,7 @@ Compact single-line text field with neutral elevation, optional trailing copy ac
- **Focus** (\`:focus-within\`): focus border, elevation removed.
- **Invalid**: danger border and text.
- **Disabled**: 50% opacity.
- Uses \`data-component="text-input-v2"\` with \`--background-bg-base\`, \`--elevation-button-neutral\`, \`--text-text-faint\` (placeholder), and \`--icon-icon-muted\` (copy icon).
- Uses \`data-component="text-input-v2"\` with \`--v2-background-bg-base\`, \`--v2-elevation-button-neutral\`, \`--v2-text-text-faint\` (placeholder), and \`--v2-icon-icon-muted\` (copy icon).
### Field
Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the **Field** story.

1
packages/ui/src/v2/components/textarea-v2.css
View file

@ -53,7 +53,6 @@
background: transparent;
outline: none;
resize: vertical;
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

32
packages/ui/src/v2/components/toast-v2.css
View file

@ -43,9 +43,9 @@
transition: transform 140ms ease-out;
border-radius: 8px;
color: var(--text-text-base);
background: var(--background-bg-layer-01);
box-shadow: var(--elevation-floating);
color: var(--v2-text-text-base);
background: var(--v2-background-bg-layer-01);
box-shadow: var(--v2-elevation-floating);
&[data-opened] {
animation: toastV2PopIn 140ms ease-out;
@ -71,9 +71,10 @@
height: 20px;
min-width: 16px;
min-height: 20px;
color: var(--v2-icon-icon-base);
[data-component="icon"] {
color: var(--text-text-base);
color: var(--v2-icon-icon-base);
width: 16px;
height: 16px;
display: inline-flex;
@ -109,11 +110,10 @@
}
[data-slot="toast-v2-title"] {
color: var(--text-text-base);
color: var(--v2-text-text-base);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "Inter Variable";
font-size: 13px;
font-style: normal;
font-weight: 530;
@ -124,11 +124,10 @@
}
[data-slot="toast-v2-description"] {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
text-wrap-style: pretty;
overflow-wrap: anywhere;
word-break: break-word;
font-family: "Inter Variable";
font-size: 13px;
font-style: normal;
font-weight: 440;
@ -147,7 +146,6 @@
[data-slot="toast-v2-actions"] [data-component="button-v2"] {
min-height: 24px;
font-family: "Inter Variable";
font-size: 13px;
font-style: normal;
font-weight: 530;
@ -166,10 +164,26 @@
border: 0;
border-radius: 4px;
background: transparent;
color: var(--v2-icon-icon-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
&:hover {
background: var(--v2-overlay-simple-overlay-hover);
color: var(--v2-icon-icon-base);
}
&:active {
background: var(--v2-overlay-simple-overlay-pressed);
}
&:focus-visible {
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 2px;
}
svg {
width: 16px;
height: 16px;

4
packages/ui/src/v2/components/toast-v2.tsx
View file

@ -61,8 +61,8 @@ function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"butto
return (
<Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.25 11.75L11.75 4.25" stroke="#FAFAFA" />
<path d="M11.75 11.75L4.25 4.25" stroke="#FAFAFA" />
<path d="M4.25 11.75L11.75 4.25" stroke="currentColor" />
<path d="M11.75 11.75L4.25 4.25" stroke="currentColor" />
</svg>
</Kobalte.CloseButton>
)

1
packages/ui/src/v2/components/tool-error-card-v2.css
View file

@ -16,7 +16,6 @@
padding: 0 0 0 10px;
gap: 8px;
border-left: 2px solid var(--tec-border);
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
[data-slot="tool-error-card-trigger"] {

1
packages/ui/src/v2/components/tooltip-v2.css
View file

@ -10,7 +10,6 @@
box-shadow: var(--elevation-floating);
border-radius: 4px;
font-family: "Inter Variable";
font-style: normal;
font-weight: 530;
font-size: 11px;