monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore: generate

Browse Source
This commit is contained in:
opencode-agent[bot]
2026-01-30 17:58:31 +00:00
parent 20619a6a26
commit fe66ca163c
55 changed files with 4865 additions and 4953 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/app/src/components/prompt-input.tsx
View File

@@ -925,7 +925,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
.abort({ .abort({
sessionID, sessionID,
}) })
.catch(() => { }) .catch(() => {})
} }
const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => { const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => {
@@ -1351,18 +1351,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
const contextParts: Array< const contextParts: Array<
| { | {
id: string id: string
type: "text" type: "text"
text: string text: string
synthetic?: boolean synthetic?: boolean
} }
| { | {
id: string id: string
type: "file" type: "file"
mime: string mime: string
url: string url: string
filename?: string filename?: string
} }
> = [] > = []
const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => { const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => {

32
packages/app/src/components/settings-general.tsx
View File

@@ -61,24 +61,24 @@ export const SettingsGeneral: Component = () => {
const actions = const actions =
platform.update && platform.restart platform.update && platform.restart
? [ ? [
{ {
label: language.t("toast.update.action.installRestart"), label: language.t("toast.update.action.installRestart"),
onClick: async () => { onClick: async () => {
await platform.update!() await platform.update!()
await platform.restart!() await platform.restart!()
},
}, },
}, {
{ label: language.t("toast.update.action.notYet"),
label: language.t("toast.update.action.notYet"), onClick: "dismiss" as const,
onClick: "dismiss" as const, },
}, ]
]
: [ : [
{ {
label: language.t("toast.update.action.notYet"), label: language.t("toast.update.action.notYet"),
onClick: "dismiss" as const, onClick: "dismiss" as const,
}, },
] ]
showToast({ showToast({
persistent: true, persistent: true,

184
packages/ui/src/components/accordion.css
View File

@@ -1,107 +1,107 @@
[data-component="accordion"] { [data-component="accordion"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
align-self: stretch; align-self: stretch;
[data-slot="accordion-item"] { [data-slot="accordion-item"] {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
overflow: clip; overflow: clip;
[data-slot="accordion-header"] { [data-slot="accordion-header"] {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
[data-slot="accordion-trigger"] { [data-slot="accordion-trigger"] {
width: 100%; width: 100%;
display: flex; display: flex;
height: 32px; height: 32px;
padding: 8px 12px; padding: 8px 12px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
cursor: default; cursor: default;
user-select: none; user-select: none;
background-color: var(--surface-base); background-color: var(--surface-base);
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: clip; overflow: clip;
color: var(--text-strong); color: var(--text-strong);
transition-property: background-color, border-color; transition-property: background-color, border-color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
/* text-12-regular */ /* text-12-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&:hover { &:hover {
background-color: var(--surface-base); background-color: var(--surface-base);
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
[data-slot="accordion-arrow"] { [data-slot="accordion-arrow"] {
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="accordion-content"] { [data-slot="accordion-content"] {
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
transition-property: grid-template-rows, opacity; transition-property: grid-template-rows, opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
width: 100%; width: 100%;
> * { > * {
overflow: hidden; overflow: hidden;
} }
} }
[data-slot="accordion-content"][data-expanded] { [data-slot="accordion-content"][data-expanded] {
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
[data-slot="accordion-content"][data-closed] { [data-slot="accordion-content"][data-closed] {
grid-template-rows: 0fr; grid-template-rows: 0fr;
} }
&[data-expanded] [data-slot="accordion-trigger"] { &[data-expanded] [data-slot="accordion-trigger"] {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
&[data-expanded] [data-slot="accordion-content"] { &[data-expanded] [data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
border-top: none; border-top: none;
border-bottom-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
height: auto; height: auto;
} }
} }
} }

64
packages/ui/src/components/avatar.css
View File

@@ -1,49 +1,49 @@
[data-component="avatar"] { [data-component="avatar"] {
--avatar-bg: var(--color-surface-info-base); --avatar-bg: var(--color-surface-info-base);
--avatar-fg: var(--color-text-base); --avatar-fg: var(--color-text-base);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid var(--color-border-weak-base); border: 1px solid var(--color-border-weak-base);
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
background-color: var(--avatar-bg); background-color: var(--avatar-bg);
color: var(--avatar-fg); color: var(--avatar-fg);
} }
[data-component="avatar"][data-has-image] { [data-component="avatar"][data-has-image] {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
[data-component="avatar"][data-size="small"] { [data-component="avatar"][data-size="small"] {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1; line-height: 1;
} }
[data-component="avatar"][data-size="normal"] { [data-component="avatar"][data-size="normal"] {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.5rem; line-height: 1.5rem;
} }
[data-component="avatar"][data-size="large"] { [data-component="avatar"][data-size="large"] {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 2rem; line-height: 2rem;
} }
[data-component="avatar"] [data-slot="avatar-image"] { [data-component="avatar"] [data-slot="avatar-image"] {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
object-fit: cover; object-fit: cover;
border-radius: inherit; border-radius: inherit;
} }

168
packages/ui/src/components/basic-tool.css
View File

@@ -1,97 +1,97 @@
[data-component="tool-trigger"] { [data-component="tool-trigger"] {
content-visibility: auto; content-visibility: auto;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
gap: 20px; gap: 20px;
justify-content: space-between; justify-content: space-between;
[data-slot="basic-tool-tool-trigger-content"] { [data-slot="basic-tool-tool-trigger-content"] {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
gap: 20px; gap: 20px;
} }
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
flex-shrink: 0; flex-shrink: 0;
} }
[data-slot="basic-tool-tool-info"] { [data-slot="basic-tool-tool-info"] {
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
} }
[data-slot="basic-tool-tool-info-structured"] { [data-slot="basic-tool-tool-info-structured"] {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
justify-content: space-between; justify-content: space-between;
} }
[data-slot="basic-tool-tool-info-main"] { [data-slot="basic-tool-tool-info-main"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
} }
[data-slot="basic-tool-tool-title"] { [data-slot="basic-tool-tool-title"] {
flex-shrink: 0; flex-shrink: 0;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-base); color: var(--text-base);
&.capitalize { &.capitalize {
text-transform: capitalize; text-transform: capitalize;
} }
} }
[data-slot="basic-tool-tool-subtitle"] { [data-slot="basic-tool-tool-subtitle"] {
flex-shrink: 1; flex-shrink: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-weak); color: var(--text-weak);
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
transition: color 0.15s ease; transition: color 0.15s ease;
&:hover { &:hover {
color: var(--text-base); color: var(--text-base);
} }
} }
} }
[data-slot="basic-tool-tool-arg"] { [data-slot="basic-tool-tool-arg"] {
flex-shrink: 1; flex-shrink: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-weak); color: var(--text-weak);
} }
} }

287
packages/ui/src/components/button.css
View File

@@ -1,168 +1,167 @@
[data-component="button"] { [data-component="button"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
padding: 4px 8px; padding: 4px 8px;
white-space: nowrap; white-space: nowrap;
transition-property: transition-property: background-color, border-color, color, box-shadow, opacity;
background-color, border-color, color, box-shadow, opacity; transition-duration: var(--transition-duration);
transition-duration: var(--transition-duration); transition-timing-function: var(--transition-easing);
transition-timing-function: var(--transition-easing); outline: none;
outline: none; line-height: 20px;
line-height: 20px;
&[data-variant="primary"] { &[data-variant="primary"] {
background-color: var(--button-primary-base); background-color: var(--button-primary-base);
border-color: var(--border-weak-base); border-color: var(--border-weak-base);
color: var(--icon-invert-base); color: var(--icon-invert-base);
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-invert-base); color: var(--icon-invert-base);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--icon-strong-hover); background-color: var(--icon-strong-hover);
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
background-color: var(--icon-strong-focus); background-color: var(--icon-strong-focus);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--icon-strong-active); background-color: var(--icon-strong-active);
} }
&:disabled { &:disabled {
background-color: var(--icon-strong-disabled); background-color: var(--icon-strong-disabled);
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-invert-base); color: var(--icon-invert-base);
} }
} }
} }
&[data-variant="ghost"] { &[data-variant="ghost"] {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
color: var(--text-strong); color: var(--text-strong);
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-base); color: var(--icon-base);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
} }
&:disabled { &:disabled {
color: var(--text-weak); color: var(--text-weak);
cursor: not-allowed; cursor: not-allowed;
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-disabled); color: var(--icon-disabled);
} }
} }
&[data-selected="true"]:not(:disabled) { &[data-selected="true"]:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&[data-active="true"] { &[data-active="true"] {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
} }
} }
&[data-variant="secondary"] { &[data-variant="secondary"] {
border: transparent; border: transparent;
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
color: var(--text-strong); color: var(--text-strong);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--button-secondary-hover); background-color: var(--button-secondary-hover);
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
} }
&:focus-visible:not(:active) { &:focus-visible:not(:active) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
box-shadow: var(--shadow-xs-border-focus); box-shadow: var(--shadow-xs-border-focus);
} }
&:focus-visible:active { &:focus-visible:active {
box-shadow: none; box-shadow: none;
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
scale: 0.99; scale: 0.99;
} }
&:disabled { &:disabled {
border-color: var(--border-disabled); border-color: var(--border-disabled);
background-color: var(--surface-disabled); background-color: var(--surface-disabled);
color: var(--text-weak); color: var(--text-weak);
cursor: not-allowed; cursor: not-allowed;
} }
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
&[data-size="small"] { &[data-size="small"] {
padding: 2px 8px; padding: 2px 8px;
&[data-icon] { &[data-icon] {
padding: 2px 12px 2px 4px; padding: 2px 12px 2px 4px;
} }
gap: 4px; gap: 4px;
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&[data-size="normal"] { &[data-size="normal"] {
padding: 4px 6px; padding: 4px 6px;
&[data-icon] { &[data-icon] {
padding: 4px 12px 4px 4px; padding: 4px 12px 4px 4px;
} }
gap: 6px; gap: 6px;
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&[data-size="large"] { &[data-size="large"] {
padding: 6px 12px; padding: 6px 12px;
&[data-icon] { &[data-icon] {
padding: 6px 12px 6px 8px; padding: 6px 12px 6px 8px;
} }
gap: 4px; gap: 4px;
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&:focus { &:focus {
outline: none; outline: none;
} }
} }

52
packages/ui/src/components/card.css
View File

@@ -1,31 +1,31 @@
[data-component="card"] { [data-component="card"] {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--surface-inset-base); background-color: var(--surface-inset-base);
border: 1px solid var(--border-weaker-base); border: 1px solid var(--border-weaker-base);
transition-property: background-color, border-color; transition-property: background-color, border-color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 6px 12px; padding: 6px 12px;
overflow: clip; overflow: clip;
&[data-variant="error"] { &[data-variant="error"] {
background-color: var(--surface-critical-weak); background-color: var(--surface-critical-weak);
border: 1px solid var(--border-critical-base); border: 1px solid var(--border-critical-base);
color: rgba(218, 51, 25, 0.6); color: rgba(218, 51, 25, 0.6);
/* text-12-regular */ /* text-12-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&[data-component="icon"] { &[data-component="icon"] {
color: var(--icon-critical-active); color: var(--icon-critical-active);
} }
} }
} }

227
packages/ui/src/components/checkbox.css
View File

@@ -1,136 +1,133 @@
[data-component="checkbox"] { [data-component="checkbox"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
cursor: default; cursor: default;
[data-slot="checkbox-checkbox-control"] { [data-slot="checkbox-checkbox-control"] {
transition-property: border-color, background-color, box-shadow; transition-property: border-color, background-color, box-shadow;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
[data-slot="checkbox-checkbox-indicator"] { [data-slot="checkbox-checkbox-indicator"] {
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
[data-slot="checkbox-checkbox-input"] { [data-slot="checkbox-checkbox-input"] {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
border-width: 0; border-width: 0;
} }
[data-slot="checkbox-checkbox-control"] { [data-slot="checkbox-checkbox-control"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 16px; width: 16px;
height: 16px; height: 16px;
padding: 2px; padding: 2px;
aspect-ratio: 1; aspect-ratio: 1;
flex-shrink: 0; flex-shrink: 0;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
/* background-color: var(--surface-weak); */ /* background-color: var(--surface-weak); */
} }
[data-slot="checkbox-checkbox-indicator"] { [data-slot="checkbox-checkbox-indicator"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--icon-base); color: var(--icon-base);
opacity: 0; opacity: 0;
} }
/* [data-slot="checkbox-checkbox-content"] { */ /* [data-slot="checkbox-checkbox-content"] { */
/* } */ /* } */
[data-slot="checkbox-checkbox-label"] { [data-slot="checkbox-checkbox-label"] {
user-select: none; user-select: none;
color: var(--text-base); color: var(--text-base);
/* text-12-regular */ /* text-12-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="checkbox-checkbox-description"] { [data-slot="checkbox-checkbox-description"] {
color: var(--text-base); color: var(--text-base);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="checkbox-checkbox-error"] { [data-slot="checkbox-checkbox-error"] {
color: var(--text-error); color: var(--text-error);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&:hover:not([data-disabled], [data-readonly]) &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] {
[data-slot="checkbox-checkbox-control"] { border-color: var(--border-hover);
border-color: var(--border-hover); background-color: var(--surface-hover);
background-color: var(--surface-hover); }
}
&:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] { &:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
border-color: var(--border-focus); border-color: var(--border-focus);
box-shadow: 0 0 0 2px var(--surface-focus); box-shadow: 0 0 0 2px var(--surface-focus);
} }
&[data-checked] [data-slot="checkbox-checkbox-control"], &[data-checked] [data-slot="checkbox-checkbox-control"],
&[data-indeterminate] [data-slot="checkbox-checkbox-control"] { &[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
border-color: var(--border-base); border-color: var(--border-base);
background-color: var(--surface-weak); background-color: var(--surface-weak);
} }
&[data-checked]:hover:not([data-disabled], [data-readonly]) &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"],
[data-slot="checkbox-checkbox-control"], &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] {
&[data-indeterminate]:hover:not([data-disabled]) border-color: var(--border-hover);
[data-slot="checkbox-checkbox-control"] { background-color: var(--surface-hover);
border-color: var(--border-hover); }
background-color: var(--surface-hover);
}
&[data-checked] [data-slot="checkbox-checkbox-indicator"], &[data-checked] [data-slot="checkbox-checkbox-indicator"],
&[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] { &[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
opacity: 1; opacity: 1;
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
&[data-disabled] [data-slot="checkbox-checkbox-control"] { &[data-disabled] [data-slot="checkbox-checkbox-control"] {
border-color: var(--border-disabled); border-color: var(--border-disabled);
background-color: var(--surface-disabled); background-color: var(--surface-disabled);
} }
&[data-invalid] [data-slot="checkbox-checkbox-control"] { &[data-invalid] [data-slot="checkbox-checkbox-control"] {
border-color: var(--border-error); border-color: var(--border-error);
} }
&[data-readonly] { &[data-readonly] {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
} }

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

@@ -1,4 +1,4 @@
[data-component="code"] { [data-component="code"] {
content-visibility: auto; content-visibility: auto;
overflow: hidden; overflow: hidden;
} }

170
packages/ui/src/components/collapsible.css
View File

@@ -1,99 +1,99 @@
[data-component="collapsible"] { [data-component="collapsible"] {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--surface-inset-base); background-color: var(--surface-inset-base);
border: 1px solid var(--border-weaker-base); border: 1px solid var(--border-weaker-base);
transition-property: background-color, border-color; transition-property: background-color, border-color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: clip; overflow: clip;
[data-slot="collapsible-trigger"] { [data-slot="collapsible-trigger"] {
width: 100%; width: 100%;
display: flex; display: flex;
height: 32px; height: 32px;
padding: 6px 8px 6px 12px; padding: 6px 8px 6px 12px;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
cursor: default; cursor: default;
user-select: none; user-select: none;
color: var(--text-base); color: var(--text-base);
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
/* &:hover { */ /* &:hover { */
/* background-color: var(--surface-base); */ /* background-color: var(--surface-base); */
/* } */ /* } */
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
[data-slot="collapsible-arrow"] { [data-slot="collapsible-arrow"] {
flex-shrink: 0; flex-shrink: 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-weak); color: var(--text-weak);
} }
} }
[data-slot="collapsible-content"] { [data-slot="collapsible-content"] {
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
transition-property: grid-template-rows, opacity; transition-property: grid-template-rows, opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
> * { > * {
overflow: hidden; overflow: hidden;
} }
&[data-expanded] { &[data-expanded] {
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
&[data-closed] { &[data-closed] {
grid-template-rows: 0fr; grid-template-rows: 0fr;
} }
} }
&[data-variant="ghost"] { &[data-variant="ghost"] {
background-color: transparent; background-color: transparent;
border: none; border: none;
> [data-slot="collapsible-trigger"] { > [data-slot="collapsible-trigger"] {
background-color: transparent; background-color: transparent;
border: none; border: none;
padding: 0; padding: 0;
/* &:hover { */ /* &:hover { */
/* color: var(--text-strong); */ /* color: var(--text-strong); */
/* } */ /* } */
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
&[data-variant="ghost"][data-scope="filetree"] { &[data-variant="ghost"][data-scope="filetree"] {
> [data-slot="collapsible-trigger"] { > [data-slot="collapsible-trigger"] {
height: 24px; height: 24px;
} }
} }
} }

85
packages/ui/src/components/cycle-label.css
View File

@@ -1,52 +1,51 @@
.cycle-label { .cycle-label {
--c-dur: 200ms; --c-dur: 200ms;
--c-stag: 30ms; --c-stag: 30ms;
--c-ease: cubic-bezier(0.25, 0, 0.5, 1); --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
--c-opacity-start: 0; --c-opacity-start: 0;
--c-opacity-end: 1; --c-opacity-end: 1;
--c-blur-start: 0px; --c-blur-start: 0px;
--c-blur-end: 0px; --c-blur-end: 0px;
--c-skew: 10deg; --c-skew: 10deg;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
perspective: 500px; perspective: 500px;
transition: width 200ms var(--c-ease); transition: width 200ms var(--c-ease);
will-change: width; will-change: width;
overflow: hidden; overflow: hidden;
.cycle-char { .cycle-char {
display: inline-block; display: inline-block;
transform-style: preserve-3d; transform-style: preserve-3d;
min-width: 0.25em; min-width: 0.25em;
backface-visibility: hidden; backface-visibility: hidden;
transition: transition:
transform var(--c-dur) var(--c-ease), transform var(--c-dur) var(--c-ease),
opacity var(--c-dur) var(--c-ease), opacity var(--c-dur) var(--c-ease),
filter var(--c-dur) var(--c-ease); filter var(--c-dur) var(--c-ease);
transition-delay: calc(var(--i, 0) * var(--c-stag)); transition-delay: calc(var(--i, 0) * var(--c-stag));
&.enter { &.enter {
opacity: var(--c-opacity-end); opacity: var(--c-opacity-end);
filter: blur(var(--c-blur-end)); filter: blur(var(--c-blur-end));
transform: translateY(0) rotateX(0) skewX(0); transform: translateY(0) rotateX(0) skewX(0);
} }
&.exit { &.exit {
opacity: var(--c-opacity-start); opacity: var(--c-opacity-start);
filter: blur(var(--c-blur-start)); filter: blur(var(--c-blur-start));
transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew)); transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
} }
&.pre { &.pre {
opacity: var(--c-opacity-start); opacity: var(--c-opacity-start);
filter: blur(var(--c-blur-start)); filter: blur(var(--c-blur-start));
transition: none; transition: none;
transform: translateY(-50%) rotateX(-90deg) transform: translateY(-50%) rotateX(-90deg) skewX(calc(var(--c-skew) * -1));
skewX(calc(var(--c-skew) * -1)); }
} }
}
} }

306
packages/ui/src/components/dialog.css
View File

@@ -1,196 +1,192 @@
/* [data-component="dialog-trigger"] { } */ /* [data-component="dialog-trigger"] { } */
[data-component="dialog-overlay"] { [data-component="dialog-overlay"] {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 50; z-index: 50;
background-color: hsl(from var(--background-base) h s l / 0.2); background-color: hsl(from var(--background-base) h s l / 0.2);
animation: overlayHide var(--transition-duration) var(--transition-easing) animation: overlayHide var(--transition-duration) var(--transition-easing) forwards;
forwards;
&[data-expanded] { &[data-expanded] {
animation: overlayShow var(--transition-duration) var(--transition-easing) animation: overlayShow var(--transition-duration) var(--transition-easing) forwards;
forwards; }
}
@starting-style { @starting-style {
animation: none; animation: none;
} }
} }
[data-component="dialog"] { [data-component="dialog"] {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 50; z-index: 50;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none; pointer-events: none;
[data-slot="dialog-container"] { [data-slot="dialog-container"] {
position: relative; position: relative;
z-index: 50; z-index: 50;
width: min(calc(100vw - 16px), 640px); width: min(calc(100vw - 16px), 640px);
height: min(calc(100vh - 16px), 512px); height: min(calc(100vh - 16px), 512px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-items: start; justify-items: start;
[data-slot="dialog-content"] { [data-slot="dialog-content"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
min-height: 280px; min-height: 280px;
pointer-events: auto; pointer-events: auto;
/* padding: 8px; */ /* padding: 8px; */
/* padding: 8px 8px 0 8px; */ /* padding: 8px 8px 0 8px; */
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
background: var(--surface-raised-stronger-non-alpha); background: var(--surface-raised-stronger-non-alpha);
background-clip: padding-box; background-clip: padding-box;
box-shadow: var(--shadow-lg-border-base); box-shadow: var(--shadow-lg-border-base);
animation: contentHide var(--transition-duration) var(--transition-easing) animation: contentHide var(--transition-duration) var(--transition-easing) forwards;
forwards;
&[data-expanded] { &[data-expanded] {
animation: contentShow var(--transition-duration) animation: contentShow var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards; }
}
@starting-style { @starting-style {
animation: none; animation: none;
} }
[data-slot="dialog-header"] { [data-slot="dialog-header"] {
display: flex; display: flex;
padding: 20px; padding: 20px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
[data-slot="dialog-title"] { [data-slot="dialog-title"] {
color: var(--text-strong); color: var(--text-strong);
/* text-16-medium */ /* text-16-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-large); font-size: var(--font-size-large);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-x-large); /* 150% */ line-height: var(--line-height-x-large); /* 150% */
letter-spacing: var(--letter-spacing-tight); letter-spacing: var(--letter-spacing-tight);
} }
/* [data-slot="dialog-close-button"] {} */ /* [data-slot="dialog-close-button"] {} */
} }
[data-slot="dialog-description"] { [data-slot="dialog-description"] {
display: flex; display: flex;
padding: 16px; padding: 16px;
padding-left: 24px; padding-left: 24px;
padding-top: 0; padding-top: 0;
margin-top: -8px; margin-top: -8px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch; align-self: stretch;
color: var(--text-base); color: var(--text-base);
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="dialog-body"] { [data-slot="dialog-body"] {
width: 100%; width: 100%;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
} }
} }
&[data-fit] { &[data-fit] {
[data-slot="dialog-container"] { [data-slot="dialog-container"] {
height: auto; height: auto;
[data-slot="dialog-content"] { [data-slot="dialog-content"] {
min-height: 0; min-height: 0;
} }
} }
} }
&[data-size="large"] [data-slot="dialog-container"] { &[data-size="large"] [data-slot="dialog-container"] {
width: min(calc(100vw - 32px), 800px); width: min(calc(100vw - 32px), 800px);
height: min(calc(100vh - 32px), 600px); height: min(calc(100vh - 32px), 600px);
} }
&[data-size="x-large"] [data-slot="dialog-container"] { &[data-size="x-large"] [data-slot="dialog-container"] {
width: min(calc(100vw - 32px), 960px); width: min(calc(100vw - 32px), 960px);
height: min(calc(100vh - 32px), 600px); height: min(calc(100vh - 32px), 600px);
} }
} }
[data-component="dialog"][data-transition] [data-slot="dialog-content"] { [data-component="dialog"][data-transition] [data-slot="dialog-content"] {
animation: contentHide 100ms ease-in forwards; animation: contentHide 100ms ease-in forwards;
&[data-expanded] { &[data-expanded] {
animation: contentShow 150ms ease-out; animation: contentShow 150ms ease-out;
} }
} }
@keyframes overlayShow { @keyframes overlayShow {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
@keyframes overlayHide { @keyframes overlayHide {
from { from {
opacity: 1; opacity: 1;
} }
to { to {
opacity: 0; opacity: 0;
} }
} }
@keyframes contentShow { @keyframes contentShow {
from { from {
opacity: 0; opacity: 0;
transform: translateY(2.5%) scale(0.975); transform: translateY(2.5%) scale(0.975);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
} }
@keyframes contentHide { @keyframes contentHide {
from { from {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: translateY(-2.5%) scale(0.975); transform: translateY(-2.5%) scale(0.975);
} }
} }

66
packages/ui/src/components/diff-changes.css
View File

@@ -1,41 +1,41 @@
[data-component="diff-changes"] { [data-component="diff-changes"] {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
[data-slot="diff-changes-additions"] { [data-slot="diff-changes-additions"] {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-feature-settings: var(--font-family-mono--font-feature-settings); font-feature-settings: var(--font-family-mono--font-feature-settings);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
text-align: right; text-align: right;
color: var(--text-diff-add-base); color: var(--text-diff-add-base);
} }
[data-slot="diff-changes-deletions"] { [data-slot="diff-changes-deletions"] {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-feature-settings: var(--font-family-mono--font-feature-settings); font-feature-settings: var(--font-family-mono--font-feature-settings);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
text-align: right; text-align: right;
color: var(--text-diff-delete-base); color: var(--text-diff-delete-base);
} }
} }
[data-component="diff-changes"][data-variant="bars"] { [data-component="diff-changes"][data-variant="bars"] {
width: 18px; width: 18px;
flex-shrink: 0; flex-shrink: 0;
svg { svg {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
} }
} }

60
packages/ui/src/components/diff.css
View File

@@ -1,35 +1,35 @@
[data-component="diff"] { [data-component="diff"] {
content-visibility: auto; content-visibility: auto;
[data-slot="diff-hunk-separator-line-number"] { [data-slot="diff-hunk-separator-line-number"] {
position: sticky; position: sticky;
left: 0; left: 0;
background-color: var(--surface-diff-hidden-strong); background-color: var(--surface-diff-hidden-strong);
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
[data-slot="diff-hunk-separator-line-number-icon"] { [data-slot="diff-hunk-separator-line-number-icon"] {
aspect-ratio: 1; aspect-ratio: 1;
width: 24px; width: 24px;
height: 24px; height: 24px;
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
[data-slot="diff-hunk-separator-content"] { [data-slot="diff-hunk-separator-content"] {
position: sticky; position: sticky;
background-color: var(--surface-diff-hidden-base); background-color: var(--surface-diff-hidden-base);
color: var(--text-base); color: var(--text-base);
width: var(--diffs-column-content-width); width: var(--diffs-column-content-width);
left: var(--diffs-column-number-width); left: var(--diffs-column-number-width);
padding-left: 8px; padding-left: 8px;
user-select: none; user-select: none;
cursor: default; cursor: default;
text-align: left; text-align: left;
[data-slot="diff-hunk-separator-content-span"] { [data-slot="diff-hunk-separator-content-span"] {
mix-blend-mode: var(--text-mix-blend-mode); mix-blend-mode: var(--text-mix-blend-mode);
} }
} }
} }

214
packages/ui/src/components/dropdown-menu.css
View File

@@ -1,136 +1,134 @@
[data-component="dropdown-menu-content"], [data-component="dropdown-menu-content"],
[data-component="dropdown-menu-sub-content"] { [data-component="dropdown-menu-sub-content"] {
min-width: 8rem; min-width: 8rem;
overflow: hidden; overflow: hidden;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
background-clip: padding-box; background-clip: padding-box;
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
padding: 4px; padding: 4px;
z-index: 100; z-index: 100;
transform-origin: var(--kb-menu-content-transform-origin); transform-origin: var(--kb-menu-content-transform-origin);
&:focus-within, &:focus-within,
&:focus { &:focus {
outline: none; outline: none;
} }
animation: dropdownMenuContentHide var(--transition-duration) animation: dropdownMenuContentHide var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards;
@starting-style { @starting-style {
animation: none; animation: none;
} }
&[data-expanded] { &[data-expanded] {
pointer-events: auto; pointer-events: auto;
animation: dropdownMenuContentShow var(--transition-duration) animation: dropdownMenuContentShow var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards; }
}
} }
[data-component="dropdown-menu-content"], [data-component="dropdown-menu-content"],
[data-component="dropdown-menu-sub-content"] { [data-component="dropdown-menu-sub-content"] {
[data-slot="dropdown-menu-item"], [data-slot="dropdown-menu-item"],
[data-slot="dropdown-menu-checkbox-item"], [data-slot="dropdown-menu-checkbox-item"],
[data-slot="dropdown-menu-radio-item"], [data-slot="dropdown-menu-radio-item"],
[data-slot="dropdown-menu-sub-trigger"] { [data-slot="dropdown-menu-sub-trigger"] {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: default; cursor: default;
outline: none; outline: none;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong); color: var(--text-strong);
transition-property: background-color, color; transition-property: background-color, color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
user-select: none; user-select: none;
&:hover { &:hover {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&[data-disabled] { &[data-disabled] {
color: var(--text-weak); color: var(--text-weak);
pointer-events: none; pointer-events: none;
} }
} }
[data-slot="dropdown-menu-sub-trigger"] { [data-slot="dropdown-menu-sub-trigger"] {
&[data-expanded] { &[data-expanded] {
background: var(--surface-raised-base-hover); background: var(--surface-raised-base-hover);
outline: none; outline: none;
border: none; border: none;
} }
} }
[data-slot="dropdown-menu-item-indicator"] { [data-slot="dropdown-menu-item-indicator"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
[data-slot="dropdown-menu-item-label"] { [data-slot="dropdown-menu-item-label"] {
flex: 1; flex: 1;
} }
[data-slot="dropdown-menu-item-description"] { [data-slot="dropdown-menu-item-description"] {
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="dropdown-menu-separator"] { [data-slot="dropdown-menu-separator"] {
height: 1px; height: 1px;
margin: 4px -4px; margin: 4px -4px;
border-top-color: var(--border-weak-base); border-top-color: var(--border-weak-base);
} }
[data-slot="dropdown-menu-group-label"] { [data-slot="dropdown-menu-group-label"] {
padding: 4px 8px; padding: 4px 8px;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="dropdown-menu-arrow"] { [data-slot="dropdown-menu-arrow"] {
fill: var(--surface-raised-stronger-non-alpha); fill: var(--surface-raised-stronger-non-alpha);
} }
} }
@keyframes dropdownMenuContentShow { @keyframes dropdownMenuContentShow {
from { from {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
to { to {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
} }
@keyframes dropdownMenuContentHide { @keyframes dropdownMenuContentHide {
from { from {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
} }

6
packages/ui/src/components/file-icon.css
View File

@@ -1,5 +1,5 @@
[data-component="file-icon"] { [data-component="file-icon"] {
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }

90
packages/ui/src/components/hover-card.css
View File

@@ -1,63 +1,61 @@
[data-slot="hover-card-trigger"] { [data-slot="hover-card-trigger"] {
display: flex; display: flex;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }
[data-component="hover-card-content"] { [data-component="hover-card-content"] {
z-index: 50; z-index: 50;
min-width: 200px; min-width: 200px;
max-width: 320px; max-width: 320px;
max-height: calc(100vh - 1rem); max-height: calc(100vh - 1rem);
border-radius: 8px; border-radius: 8px;
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
pointer-events: auto; pointer-events: auto;
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
background-clip: padding-box; background-clip: padding-box;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform-origin: var(--kb-hovercard-content-transform-origin); transform-origin: var(--kb-hovercard-content-transform-origin);
&:focus-within { &:focus-within {
outline: none; outline: none;
} }
&[data-closed] { &[data-closed] {
animation: hover-card-close var(--transition-duration) animation: hover-card-close var(--transition-duration) var(--transition-easing);
var(--transition-easing); }
}
&[data-expanded] { &[data-expanded] {
animation: hover-card-open var(--transition-duration) animation: hover-card-open var(--transition-duration) var(--transition-easing);
var(--transition-easing); }
}
[data-slot="hover-card-body"] { [data-slot="hover-card-body"] {
padding: 4px; padding: 4px;
max-height: inherit; max-height: inherit;
overflow: hidden; overflow: hidden;
} }
} }
@keyframes hover-card-open { @keyframes hover-card-open {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.96); transform: scale(0.96);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
} }
@keyframes hover-card-close { @keyframes hover-card-close {
from { from {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(0.96); transform: scale(0.96);
} }
} }

246
packages/ui/src/components/icon-button.css
View File

@@ -1,143 +1,143 @@
[data-component="icon-button"] { [data-component="icon-button"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
aspect-ratio: 1; aspect-ratio: 1;
flex-shrink: 0; flex-shrink: 0;
transition-property: background-color, color, opacity, box-shadow; transition-property: background-color, color, opacity, box-shadow;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
&[data-variant="primary"] { &[data-variant="primary"] {
background-color: var(--icon-strong-base); background-color: var(--icon-strong-base);
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
/* color: var(--icon-weak-base); */ /* color: var(--icon-weak-base); */
color: var(--icon-invert-base); color: var(--icon-invert-base);
/* &:hover:not(:disabled) { */ /* &:hover:not(:disabled) { */
/* color: var(--icon-weak-hover); */ /* color: var(--icon-weak-hover); */
/* } */ /* } */
/* &:active:not(:disabled) { */ /* &:active:not(:disabled) { */
/* color: var(--icon-strong-active); */ /* color: var(--icon-strong-active); */
/* } */ /* } */
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--icon-strong-hover); background-color: var(--icon-strong-hover);
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
background-color: var(--icon-strong-focus); background-color: var(--icon-strong-focus);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--icon-strong-active); background-color: var(--icon-strong-active);
} }
&:disabled { &:disabled {
background-color: var(--icon-strong-disabled); background-color: var(--icon-strong-disabled);
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-invert-base); color: var(--icon-invert-base);
} }
} }
} }
&[data-variant="secondary"] { &[data-variant="secondary"] {
border: transparent; border: transparent;
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
color: var(--text-strong); color: var(--text-strong);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--button-secondary-hover); background-color: var(--button-secondary-hover);
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
} }
&:focus-visible:not(:active) { &:focus-visible:not(:active) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
box-shadow: var(--shadow-xs-border-focus); box-shadow: var(--shadow-xs-border-focus);
} }
&:focus-visible:active { &:focus-visible:active {
box-shadow: none; box-shadow: none;
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
} }
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
&:disabled { &:disabled {
background-color: var(--icon-strong-disabled); background-color: var(--icon-strong-disabled);
color: var(--icon-invert-base); color: var(--icon-invert-base);
cursor: not-allowed; cursor: not-allowed;
} }
} }
&[data-variant="ghost"] { &[data-variant="ghost"] {
background-color: transparent; background-color: transparent;
/* color: var(--icon-base); */ /* color: var(--icon-base); */
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-base); color: var(--icon-base);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
/* [data-slot="icon-svg"] { */ /* [data-slot="icon-svg"] { */
/* color: var(--icon-hover); */ /* color: var(--icon-hover); */
/* } */ /* } */
} }
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
/* [data-slot="icon-svg"] { */ /* [data-slot="icon-svg"] { */
/* color: var(--icon-active); */ /* color: var(--icon-active); */
/* } */ /* } */
} }
&[data-selected]:not(:disabled) { &[data-selected]:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
/* [data-slot="icon-svg"] { */ /* [data-slot="icon-svg"] { */
/* color: var(--icon-selected); */ /* color: var(--icon-selected); */
/* } */ /* } */
} }
&:disabled { &:disabled {
color: var(--icon-invert-base); color: var(--icon-invert-base);
cursor: not-allowed; cursor: not-allowed;
} }
} }
&[data-size="normal"] { &[data-size="normal"] {
width: 24px; width: 24px;
height: 24px; height: 24px;
font-size: var(--font-size-small); font-size: var(--font-size-small);
line-height: var(--line-height-large); line-height: var(--line-height-large);
gap: calc(var(--spacing) * 0.5); gap: calc(var(--spacing) * 0.5);
} }
&[data-size="large"] { &[data-size="large"] {
height: 32px; height: 32px;
/* padding: 0 8px 0 6px; */ /* padding: 0 8px 0 6px; */
gap: 8px; gap: 8px;
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&:focus { &:focus {
outline: none; outline: none;
} }
} }

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

@@ -1,34 +1,34 @@
[data-component="icon"] { [data-component="icon"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
/* resize: both; */ /* resize: both; */
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
color: var(--icon-base); color: var(--icon-base);
&[data-size="small"] { &[data-size="small"] {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&[data-size="normal"] { &[data-size="normal"] {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
&[data-size="medium"] { &[data-size="medium"] {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
&[data-size="large"] { &[data-size="large"] {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
width: 100%; width: 100%;
height: auto; height: auto;
} }
} }

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

@@ -86,7 +86,10 @@ export interface IconProps extends ComponentProps<"svg"> {
export function Icon(props: IconProps) { export function Icon(props: IconProps) {
const [local, others] = splitProps(props, ["name", "size", "class", "classList"]) const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
return ( return (
<div data-component="icon" data-size={typeof local.size !== 'number' ? local.size || "normal" : `size-[${local.size}px]`}> <div
data-component="icon"
data-size={typeof local.size !== "number" ? local.size || "normal" : `size-[${local.size}px]`}
>
<svg <svg
data-slot="icon-svg" data-slot="icon-svg"
classList={{ classList={{

110
packages/ui/src/components/image-preview.css
View File

@@ -1,63 +1,63 @@
[data-component="image-preview"] { [data-component="image-preview"] {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 50; z-index: 50;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
[data-slot="image-preview-container"] { [data-slot="image-preview-container"] {
position: relative; position: relative;
z-index: 50; z-index: 50;
width: min(calc(100vw - 32px), 90vw); width: min(calc(100vw - 32px), 90vw);
max-width: 1200px; max-width: 1200px;
height: min(calc(100vh - 32px), 90vh); height: min(calc(100vh - 32px), 90vh);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
[data-slot="image-preview-content"] { [data-slot="image-preview-content"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-height: 100%; max-height: 100%;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--surface-raised-stronger-non-alpha); background: var(--surface-raised-stronger-non-alpha);
box-shadow: box-shadow:
0 15px 45px 0 rgba(19, 16, 16, 0.35), 0 15px 45px 0 rgba(19, 16, 16, 0.35),
0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25), 0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25),
0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2); 0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2);
overflow: hidden; overflow: hidden;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
[data-slot="image-preview-header"] { [data-slot="image-preview-header"] {
display: flex; display: flex;
padding: 8px 8px 0; padding: 8px 8px 0;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
} }
[data-slot="image-preview-body"] { [data-slot="image-preview-body"] {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
} }
[data-slot="image-preview-image"] { [data-slot="image-preview-image"] {
max-width: 100%; max-width: 100%;
max-height: calc(90vh - 100px); max-height: calc(90vh - 100px);
object-fit: contain; object-fit: contain;
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
} }
} }
} }

28
packages/ui/src/components/inline-input.css
View File

@@ -1,17 +1,17 @@
[data-component="inline-input"] { [data-component="inline-input"] {
color: inherit; color: inherit;
background: transparent; background: transparent;
border: 0; border: 0;
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0; padding: 0;
min-width: 0; min-width: 0;
font: inherit; font: inherit;
letter-spacing: inherit; letter-spacing: inherit;
line-height: inherit; line-height: inherit;
box-sizing: border-box; box-sizing: border-box;
&:focus { &:focus {
outline: none; outline: none;
box-shadow: 0 0 0 1px var(--border-interactive-focus); box-shadow: 0 0 0 1px var(--border-interactive-focus);
} }
} }

30
packages/ui/src/components/keybind.css
View File

@@ -1,18 +1,18 @@
[data-component="keybind"] { [data-component="keybind"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
height: 20px; height: 20px;
padding: 0 8px; padding: 0 8px;
border-radius: 2px; border-radius: 2px;
background: var(--surface-base); background: var(--surface-base);
box-shadow: var(--shadow-xxs-border); box-shadow: var(--shadow-xxs-border);
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 1; line-height: 1;
color: var(--text-weak); color: var(--text-weak);
} }

140
packages/ui/src/components/line-comment.css
View File

@@ -1,117 +1,115 @@
[data-component="line-comment"] { [data-component="line-comment"] {
position: absolute; position: absolute;
right: 24px; right: 24px;
z-index: var(--line-comment-z, 30); z-index: var(--line-comment-z, 30);
} }
[data-component="line-comment"][data-open] { [data-component="line-comment"][data-open] {
z-index: var(--line-comment-open-z, 100); z-index: var(--line-comment-open-z, 100);
} }
[data-component="line-comment"] [data-slot="line-comment-button"] { [data-component="line-comment"] [data-slot="line-comment-button"] {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--icon-interactive-base); background: var(--icon-interactive-base);
box-shadow: var(--shadow-xs); box-shadow: var(--shadow-xs);
cursor: default; cursor: default;
border: none; border: none;
} }
[data-component="line-comment"] [data-component="icon"] { [data-component="line-comment"] [data-component="icon"] {
color: var(--white); color: var(--white);
} }
[data-component="line-comment"] [data-slot="line-comment-button"]:focus { [data-component="line-comment"] [data-slot="line-comment-button"]:focus {
outline: none; outline: none;
} }
[data-component="line-comment"] [data-component="line-comment"] [data-slot="line-comment-button"]:focus-visible {
[data-slot="line-comment-button"]:focus-visible { box-shadow: var(--shadow-xs-border-focus);
box-shadow: var(--shadow-xs-border-focus);
} }
[data-component="line-comment"] [data-slot="line-comment-popover"] { [data-component="line-comment"] [data-slot="line-comment-popover"] {
position: absolute; position: absolute;
top: calc(100% + 4px); top: calc(100% + 4px);
right: -8px; right: -8px;
z-index: var(--line-comment-popover-z, 40); z-index: var(--line-comment-popover-z, 40);
min-width: 200px; min-width: 200px;
max-width: min(320px, calc(100vw - 48px)); max-width: min(320px, calc(100vw - 48px));
border-radius: 8px; border-radius: 8px;
background: var(--surface-raised-stronger-non-alpha); background: var(--surface-raised-stronger-non-alpha);
box-shadow: var(--shadow-lg-border-base); box-shadow: var(--shadow-lg-border-base);
padding: 12px; padding: 12px;
} }
[data-component="line-comment"][data-variant="editor"] [data-component="line-comment"][data-variant="editor"] [data-slot="line-comment-popover"] {
[data-slot="line-comment-popover"] { width: 380px;
width: 380px; max-width: min(380px, calc(100vw - 48px));
max-width: min(380px, calc(100vw - 48px)); padding: 8px;
padding: 8px; border-radius: 14px;
border-radius: 14px;
} }
[data-component="line-comment"] [data-slot="line-comment-content"] { [data-component="line-comment"] [data-slot="line-comment-content"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
} }
[data-component="line-comment"] [data-slot="line-comment-text"] { [data-component="line-comment"] [data-slot="line-comment-text"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-x-large); line-height: var(--line-height-x-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong); color: var(--text-strong);
white-space: pre-wrap; white-space: pre-wrap;
} }
[data-component="line-comment"] [data-slot="line-comment-label"], [data-component="line-comment"] [data-slot="line-comment-label"],
[data-component="line-comment"] [data-slot="line-comment-editor-label"] { [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-weak); color: var(--text-weak);
white-space: nowrap; white-space: nowrap;
} }
[data-component="line-comment"] [data-slot="line-comment-editor"] { [data-component="line-comment"] [data-slot="line-comment-editor"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
[data-component="line-comment"] [data-slot="line-comment-textarea"] { [data-component="line-comment"] [data-slot="line-comment-textarea"] {
width: 100%; width: 100%;
resize: vertical; resize: vertical;
padding: 8px; padding: 8px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--surface-base); background: var(--surface-base);
border: 1px solid var(--border-base); border: 1px solid var(--border-base);
color: var(--text-strong); color: var(--text-strong);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
line-height: var(--line-height-large); line-height: var(--line-height-large);
} }
[data-component="line-comment"] [data-slot="line-comment-textarea"]:focus { [data-component="line-comment"] [data-slot="line-comment-textarea"]:focus {
outline: none; outline: none;
box-shadow: var(--shadow-xs-border-select); box-shadow: var(--shadow-xs-border-select);
} }
[data-component="line-comment"] [data-slot="line-comment-actions"] { [data-component="line-comment"] [data-slot="line-comment-actions"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
[data-component="line-comment"] [data-slot="line-comment-editor-label"] { [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
margin-right: auto; margin-right: auto;
} }

568
packages/ui/src/components/list.css
View File

@@ -1,337 +1,333 @@
@property --bottom-fade { @property --bottom-fade {
syntax: "<length>"; syntax: "<length>";
inherits: false; inherits: false;
initial-value: 0px; initial-value: 0px;
} }
@keyframes scroll { @keyframes scroll {
0% { 0% {
--bottom-fade: 20px; --bottom-fade: 20px;
} }
90% { 90% {
--bottom-fade: 20px; --bottom-fade: 20px;
} }
100% { 100% {
--bottom-fade: 0; --bottom-fade: 0;
} }
} }
[data-component="list"] { [data-component="list"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
overflow: hidden; overflow: hidden;
padding: 0 12px; padding: 0 12px;
[data-slot="list-search-wrapper"] { [data-slot="list-search-wrapper"] {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
align-self: stretch; align-self: stretch;
margin-bottom: 4px; margin-bottom: 4px;
> [data-component="icon-button"] { > [data-component="icon-button"] {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
background-color: transparent; background-color: transparent;
opacity: 0.5; opacity: 0.5;
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus-visible:not(:disabled), &:focus-visible:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
opacity: 0.7; opacity: 0.7;
} }
&:hover:not(:disabled) [data-slot="icon-svg"] { &:hover:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-hover); color: var(--icon-hover);
} }
&:active:not(:disabled) [data-slot="icon-svg"] { &:active:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-active); color: var(--icon-active);
} }
} }
} }
[data-slot="list-search"] { [data-slot="list-search"] {
display: flex; display: flex;
flex: 1; flex: 1;
padding: 8px; padding: 8px;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--surface-base); background: var(--surface-base);
[data-slot="list-search-container"] { [data-slot="list-search-container"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex: 1 0 0; flex: 1 0 0;
max-height: 20px; max-height: 20px;
[data-slot="list-search-input"] { [data-slot="list-search-input"] {
width: 100%; width: 100%;
&[data-slot="input-input"] { &[data-slot="input-input"] {
line-height: 20px; line-height: 20px;
max-height: 20px; max-height: 20px;
} }
} }
} }
> [data-component="icon-button"] { > [data-component="icon-button"] {
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: transparent; background-color: transparent;
opacity: 0.5; opacity: 0.5;
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus-visible:not(:disabled), &:focus-visible:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
opacity: 0.7; opacity: 0.7;
} }
&:hover:not(:disabled) [data-slot="icon-svg"] { &:hover:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-hover); color: var(--icon-hover);
} }
&:active:not(:disabled) [data-slot="icon-svg"] { &:active:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-active); color: var(--icon-active);
} }
} }
> [data-component="icon-button"] { > [data-component="icon-button"] {
background-color: transparent; background-color: transparent;
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus:not(:disabled), &:focus:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
} }
&:hover:not(:disabled) [data-slot="icon-svg"] { &:hover:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-hover); color: var(--icon-hover);
} }
&:active:not(:disabled) [data-slot="icon-svg"] { &:active:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-active); color: var(--icon-active);
} }
} }
} }
[data-slot="list-scroll"] { [data-slot="list-scroll"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
[data-slot="list-empty-state"] { [data-slot="list-empty-state"] {
display: flex; display: flex;
padding: 32px 48px; padding: 32px 48px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
align-self: stretch; align-self: stretch;
[data-slot="list-message"] { [data-slot="list-message"] {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
max-width: 100%; max-width: 100%;
color: var(--text-weak); color: var(--text-weak);
white-space: nowrap; white-space: nowrap;
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="list-filter"] { [data-slot="list-filter"] {
color: var(--text-strong); color: var(--text-strong);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
[data-slot="list-group"] { [data-slot="list-group"] {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:last-child { &:last-child {
padding-bottom: 12px; padding-bottom: 12px;
} }
[data-slot="list-header"] { [data-slot="list-header"] {
display: flex; display: flex;
z-index: 10; z-index: 10;
padding: 8px 12px 8px 8px; padding: 8px 12px 8px 8px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
background: var(--surface-raised-stronger-non-alpha); background: var(--surface-raised-stronger-non-alpha);
position: sticky; position: sticky;
top: 0; top: 0;
color: var(--text-weak); color: var(--text-weak);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
height: 16px; height: 16px;
background: linear-gradient( background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
to bottom, pointer-events: none;
var(--surface-raised-stronger-non-alpha), opacity: 0;
transparent transition-property: opacity;
); transition-duration: var(--transition-duration);
pointer-events: none; transition-timing-function: var(--transition-easing);
opacity: 0; }
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
}
&[data-stuck="true"]::after { &[data-stuck="true"]::after {
opacity: 1; opacity: 1;
} }
} }
[data-slot="list-items"] { [data-slot="list-items"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
[data-slot="list-item"] { [data-slot="list-item"] {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
padding: 6px 8px 6px 8px; padding: 6px 8px 6px 8px;
align-items: center; align-items: center;
color: var(--text-strong); color: var(--text-strong);
scroll-margin-top: 28px; scroll-margin-top: 28px;
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
[data-slot="list-item-selected-icon"] { [data-slot="list-item-selected-icon"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
[data-component="icon"] { [data-component="icon"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
[name="check"] { [name="check"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
[data-slot="list-item-active-icon"] { [data-slot="list-item-active-icon"] {
display: none; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
[data-component="icon"] { [data-component="icon"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
[data-slot="list-item-extra-icon"] { [data-slot="list-item-extra-icon"] {
color: var(--icon-base); color: var(--icon-base);
margin-left: -4px; margin-left: -4px;
} }
[data-slot="list-item-divider"] { [data-slot="list-item-divider"] {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: var(--list-divider-inset, 16px); left: var(--list-divider-inset, 16px);
right: var(--list-divider-inset, 16px); right: var(--list-divider-inset, 16px);
height: 1px; height: 1px;
background: var(--border-weak-base); background: var(--border-weak-base);
pointer-events: none; pointer-events: none;
} }
[data-slot="list-item"]:last-child [data-slot="list-item-divider"] { [data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
display: none; display: none;
} }
&[data-active="true"] { &[data-active="true"] {
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--surface-raised-base-hover); background: var(--surface-raised-base-hover);
[data-slot="list-item-active-icon"] { [data-slot="list-item-active-icon"] {
display: inline-flex; display: inline-flex;
} }
[data-slot="list-item-extra-icon"] { [data-slot="list-item-extra-icon"] {
display: block !important; display: block !important;
color: var(--icon-strong-base) !important; color: var(--icon-strong-base) !important;
} }
} }
&:active { &:active {
background: var(--surface-raised-base-active); background: var(--surface-raised-base-active);
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
} }
[data-slot="list-item-add"] { [data-slot="list-item-add"] {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
padding: 6px 8px 6px 8px; padding: 6px 8px 6px 8px;
align-items: center; align-items: center;
color: var(--text-strong); color: var(--text-strong);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
[data-component="input"] { [data-component="input"] {
width: 100%; width: 100%;
} }
} }
} }
} }
} }
} }

8
packages/ui/src/components/list.tsx
View File

@@ -268,13 +268,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
{searchAction()} {searchAction()}
</div> </div>
</Show> </Show>
<ScrollFade <ScrollFade ref={setScrollRef} direction="vertical" fadeStartSize={0} fadeEndSize={20} data-slot="list-scroll">
ref={setScrollRef}
direction="vertical"
fadeStartSize={0}
fadeEndSize={20}
data-slot="list-scroll"
>
<Show <Show
when={flat().length > 0 || showAdd()} when={flat().length > 0 || showAdd()}
fallback={ fallback={

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

@@ -1,4 +1,4 @@
[data-component="logo-mark"] { [data-component="logo-mark"] {
width: 16px; width: 16px;
aspect-ratio: 4 / 5; aspect-ratio: 4 / 5;
} }

354
packages/ui/src/components/markdown.css
View File

@@ -1,211 +1,209 @@
[data-component="markdown"] { [data-component="markdown"] {
/* Reset & Base Typography */ /* Reset & Base Typography */
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
overflow-wrap: break-word; overflow-wrap: break-word;
color: var(--text-base); color: var(--text-base);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); /* 14px */ font-size: var(--font-size-base); /* 14px */
line-height: var(--line-height-x-large); line-height: var(--line-height-x-large);
/* Spacing for flow */ /* Spacing for flow */
> *:first-child { > *:first-child {
margin-top: 0; margin-top: 0;
} }
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/* Headings: Same size, distinguished by color and spacing */ /* Headings: Same size, distinguished by color and spacing */
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--text-strong); color: var(--text-strong);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
line-height: var(--line-height-large); line-height: var(--line-height-large);
} }
/* Emphasis & Strong: Neutral strong color */ /* Emphasis & Strong: Neutral strong color */
strong, strong,
b { b {
color: var(--text-strong); color: var(--text-strong);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
/* Paragraphs */ /* Paragraphs */
p { p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/* Links */ /* Links */
a { a {
color: var(--text-interactive-base); color: var(--text-interactive-base);
text-decoration: none; text-decoration: none;
font-weight: inherit; font-weight: inherit;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
/* Lists */ /* Lists */
ul, ul,
ol { ol {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: 1.5rem; padding-left: 1.5rem;
list-style-position: outside; list-style-position: outside;
} }
ul { ul {
list-style-type: disc; list-style-type: disc;
} }
ol { ol {
list-style-type: decimal; list-style-type: decimal;
} }
li { li {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
li > p:first-child { li > p:first-child {
display: inline; display: inline;
margin: 0; margin: 0;
} }
li > p + p { li > p + p {
display: block; display: block;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
li::marker { li::marker {
color: var(--text-weak); color: var(--text-weak);
} }
/* Nested lists spacing */ /* Nested lists spacing */
li > ul, li > ul,
li > ol { li > ol {
margin-top: 0.25rem; margin-top: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
padding-left: 1rem; /* Minimal indent for nesting only */ padding-left: 1rem; /* Minimal indent for nesting only */
} }
/* Blockquotes */ /* Blockquotes */
blockquote { blockquote {
border-left: 2px solid var(--border-weak-base); border-left: 2px solid var(--border-weak-base);
margin: 1.5rem 0; margin: 1.5rem 0;
padding-left: 0.5rem; padding-left: 0.5rem;
color: var(--text-weak); color: var(--text-weak);
font-style: normal; font-style: normal;
} }
/* Horizontal Rule - Invisible spacing only */ /* Horizontal Rule - Invisible spacing only */
hr { hr {
border: none; border: none;
height: 0; height: 0;
margin: 2.5rem 0; margin: 2.5rem 0;
} }
.shiki { .shiki {
font-size: 13px; font-size: 13px;
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 4px;
border: 0.5px solid var(--border-weak-base); border: 0.5px solid var(--border-weak-base);
} }
[data-component="markdown-code"] { [data-component="markdown-code"] {
position: relative; position: relative;
} }
[data-slot="markdown-copy-button"] { [data-slot="markdown-copy-button"] {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
opacity: 0; opacity: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
z-index: 1; z-index: 1;
} }
[data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] { [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
opacity: 1; opacity: 1;
} }
[data-slot="markdown-copy-button"] [data-slot="check-icon"] { [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
display: none; display: none;
} }
[data-slot="markdown-copy-button"][data-copied="true"] [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
[data-slot="copy-icon"] { display: none;
display: none; }
}
[data-slot="markdown-copy-button"][data-copied="true"] [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
[data-slot="check-icon"] { display: inline-flex;
display: inline-flex; }
}
pre { pre {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
overflow: auto; overflow: auto;
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
} }
:not(pre) > code { :not(pre) > code {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-feature-settings: var(--font-family-mono--font-feature-settings); font-feature-settings: var(--font-family-mono--font-feature-settings);
color: var(--syntax-string); color: var(--syntax-string);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
/* font-size: 13px; */ /* font-size: 13px; */
/* padding: 2px 2px; */ /* padding: 2px 2px; */
/* margin: 0 1.5px; */ /* margin: 0 1.5px; */
/* border-radius: 2px; */ /* border-radius: 2px; */
/* background: var(--surface-base); */ /* background: var(--surface-base); */
/* box-shadow: 0 0 0 0.5px var(--border-weak-base); */ /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
} }
/* Tables */ /* Tables */
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 1.5rem 0; margin: 1.5rem 0;
font-size: var(--font-size-base); font-size: var(--font-size-base);
} }
th, th,
td { td {
/* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */ /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
border-bottom: 1px solid var(--border-weaker-base); border-bottom: 1px solid var(--border-weaker-base);
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
th { th {
color: var(--text-strong); color: var(--text-strong);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
border-bottom: 1px solid var(--border-weak-base); border-bottom: 1px solid var(--border-weak-base);
} }
/* Images */ /* Images */
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 4px; border-radius: 4px;
margin: 1.5rem 0; margin: 1.5rem 0;
display: block; display: block;
} }
} }

165
packages/ui/src/components/message-nav.css
View File

@@ -1,123 +1,122 @@
[data-component="message-nav"] { [data-component="message-nav"] {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
&[data-size="normal"] { &[data-size="normal"] {
width: 240px; width: 240px;
gap: 4px; gap: 4px;
} }
&[data-size="compact"] { &[data-size="compact"] {
width: 24px; width: 24px;
} }
} }
[data-slot="message-nav-item"] { [data-slot="message-nav-item"] {
display: flex; display: flex;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
justify-content: flex-end; justify-content: flex-end;
[data-component="message-nav"][data-size="normal"] & { [data-component="message-nav"][data-size="normal"] & {
justify-content: flex-start; justify-content: flex-start;
} }
} }
[data-slot="message-nav-tick-button"] { [data-slot="message-nav-tick-button"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
height: 12px; height: 12px;
width: 24px; width: 24px;
border: none; border: none;
background: none; background: none;
padding: 0; padding: 0;
&[data-active] [data-slot="message-nav-tick-line"] { &[data-active] [data-slot="message-nav-tick-line"] {
background-color: var(--icon-strong-base); background-color: var(--icon-strong-base);
width: 100%; width: 100%;
} }
} }
[data-slot="message-nav-tick-line"] { [data-slot="message-nav-tick-line"] {
height: 1px; height: 1px;
width: 16px; width: 16px;
background-color: var(--icon-base); background-color: var(--icon-base);
transition: transition:
width 0.2s, width 0.2s,
background-color 0.2s; background-color 0.2s;
} }
[data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
[data-slot="message-nav-tick-line"] { width: 100%;
width: 100%; background-color: var(--icon-strong-base);
background-color: var(--icon-strong-base);
} }
[data-slot="message-nav-message-button"] { [data-slot="message-nav-message-button"] {
display: flex; display: flex;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;
column-gap: 12px; column-gap: 12px;
cursor: default; cursor: default;
border: none; border: none;
background: none; background: none;
padding: 4px 12px; padding: 4px 12px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
[data-slot="message-nav-title-preview"] { [data-slot="message-nav-title-preview"] {
font-size: 14px; /* text-14-regular */ font-size: 14px; /* text-14-regular */
color: var(--text-base); color: var(--text-base);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: 0; min-width: 0;
text-align: left; text-align: left;
&[data-active] { &[data-active] {
color: var(--text-strong); color: var(--text-strong);
} }
} }
[data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] { [data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
background-color: var(--surface-base); background-color: var(--surface-base);
} }
[data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] { [data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
background-color: var(--surface-base-active); background-color: var(--surface-base-active);
} }
[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] { [data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
color: var(--text-base); color: var(--text-base);
} }
[data-slot="message-nav-tooltip"] { [data-slot="message-nav-tooltip"] {
z-index: 1000; z-index: 1000;
} }
[data-slot="message-nav-tooltip-content"] { [data-slot="message-nav-tooltip-content"] {
display: flex; display: flex;
padding: 4px 4px 6px 4px; padding: 4px 4px 6px 4px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--surface-raised-stronger-non-alpha); background: var(--surface-raised-stronger-non-alpha);
max-height: calc(100vh - 6rem); max-height: calc(100vh - 6rem);
overflow-y: auto; overflow-y: auto;
/* border/shadow-xs/base */ /* border/shadow-xs/base */
box-shadow: box-shadow:
0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 2px 0 rgba(19, 16, 16, 0.06),
0 1px 3px 0 rgba(19, 16, 16, 0.08); 0 1px 3px 0 rgba(19, 16, 16, 0.08);
* { * {
margin: 0 !important; margin: 0 !important;
} }
} }

1292
packages/ui/src/components/message-part.css
View File

File diff suppressed because it is too large Load Diff

16
packages/ui/src/components/morph-chevron.css
View File

@@ -1,10 +1,10 @@
[data-slot="morph-chevron-svg"] { [data-slot="morph-chevron-svg"] {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: block; display: block;
fill: none; fill: none;
stroke-width: 1.5; stroke-width: 1.5;
stroke: currentcolor; stroke: currentcolor;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
} }

200
packages/ui/src/components/popover.css
View File

@@ -1,136 +1,132 @@
[data-slot="popover-trigger"] { [data-slot="popover-trigger"] {
display: inline-flex; display: inline-flex;
} }
[data-component="popover-content"] { [data-component="popover-content"] {
z-index: 50; z-index: 50;
min-width: 200px; min-width: 200px;
max-width: 320px; max-width: 320px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
background-clip: padding-box; background-clip: padding-box;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform-origin: var(--kb-popover-content-transform-origin); transform-origin: var(--kb-popover-content-transform-origin);
animation: popoverContentHide var(--transition-duration) animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards;
@starting-style { @starting-style {
animation: none; animation: none;
} }
&[data-expanded] { &[data-expanded] {
pointer-events: auto; pointer-events: auto;
animation: popoverContentShow var(--transition-duration) animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards; }
}
[data-origin-top-right] { [data-origin-top-right] {
transform-origin: top right; transform-origin: top right;
} }
[data-origin-top-left] { [data-origin-top-left] {
transform-origin: top left; transform-origin: top left;
} }
[data-origin-bottom-right] { [data-origin-bottom-right] {
transform-origin: bottom right; transform-origin: bottom right;
} }
[data-origin-bottom-left] { [data-origin-bottom-left] {
transform-origin: bottom left; transform-origin: bottom left;
} }
&:focus-within { &:focus-within {
outline: none; outline: none;
} }
[data-slot="popover-header"] { [data-slot="popover-header"] {
display: flex; display: flex;
padding: 12px; padding: 12px;
padding-bottom: 0; padding-bottom: 0;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
[data-slot="popover-title"] { [data-slot="popover-title"] {
flex: 1; flex: 1;
color: var(--text-strong); color: var(--text-strong);
margin: 0; margin: 0;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="popover-close-button"] { [data-slot="popover-close-button"] {
flex-shrink: 0; flex-shrink: 0;
} }
} }
[data-slot="popover-description"] { [data-slot="popover-description"] {
padding: 0 12px; padding: 0 12px;
margin: 0; margin: 0;
color: var(--text-base); color: var(--text-base);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="popover-body"] { [data-slot="popover-body"] {
padding: 12px; padding: 12px;
} }
[data-slot="popover-arrow"] { [data-slot="popover-arrow"] {
fill: var(--surface-raised-stronger-non-alpha); fill: var(--surface-raised-stronger-non-alpha);
} }
} }
@keyframes popoverContentShow { @keyframes popoverContentShow {
from { from {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
to { to {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
} }
@keyframes popoverContentHide { @keyframes popoverContentHide {
from { from {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
} }
[data-component="model-popover-content"] { [data-component="model-popover-content"] {
transform-origin: var(--kb-popper-content-transform-origin); transform-origin: var(--kb-popper-content-transform-origin);
pointer-events: none; pointer-events: none;
animation: popoverContentHide var(--transition-duration) animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards;
@starting-style { @starting-style {
animation: none; animation: none;
} }
&[data-expanded] { &[data-expanded] {
pointer-events: auto; pointer-events: auto;
animation: popoverContentShow var(--transition-duration) animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards; }
}
} }

14
packages/ui/src/components/progress-circle.css
View File

@@ -1,10 +1,10 @@
[data-component="progress-circle"] { [data-component="progress-circle"] {
color: inherit; color: inherit;
[data-slot="progress-circle-background"] { [data-slot="progress-circle-background"] {
transform-origin: 50% 50%; transform-origin: 50% 50%;
transform: rotate(270deg); transform: rotate(270deg);
stroke-opacity: 0.5; stroke-opacity: 0.5;
transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1); transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
} }
} }

6
packages/ui/src/components/provider-icon.css
View File

@@ -1,5 +1,5 @@
[data-component="provider-icon"] { [data-component="provider-icon"] {
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }

279
packages/ui/src/components/radio-group.css
View File

@@ -1,169 +1,156 @@
[data-component="radio-group"] { [data-component="radio-group"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
[data-slot="radio-group-wrapper"] { [data-slot="radio-group-wrapper"] {
all: unset; all: unset;
background-color: var(--surface-base); background-color: var(--surface-base);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: relative;
width: fit-content; width: fit-content;
} }
[data-slot="radio-group-items"] { [data-slot="radio-group-items"] {
display: inline-flex; display: inline-flex;
list-style: none; list-style: none;
flex-direction: row; flex-direction: row;
} }
[data-slot="radio-group-indicator"] { [data-slot="radio-group-indicator"] {
background: var(--button-secondary-base); background: var(--button-secondary-base);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
content: ""; content: "";
opacity: var(--indicator-opacity, 1); opacity: var(--indicator-opacity, 1);
position: absolute; position: absolute;
transition-property: opacity, box-shadow, width, height, transform; transition-property: opacity, box-shadow, width, height, transform;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
[data-slot="radio-group-item"] { [data-slot="radio-group-item"] {
position: relative; position: relative;
} }
/* Separator between items */ /* Separator between items */
[data-slot="radio-group-item"]:not(:first-of-type)::before { [data-slot="radio-group-item"]:not(:first-of-type)::before {
background: var(--border-weak-base); background: var(--border-weak-base);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
content: ""; content: "";
inset: 6px 0; inset: 6px 0;
position: absolute; position: absolute;
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
width: 1px; width: 1px;
transform: translateX(-0.5px); transform: translateX(-0.5px);
} }
/* Hide separator when item or previous item is checked */ /* Hide separator when item or previous item is checked */
[data-slot="radio-group-item"]:has( [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])::before,
[data-slot="radio-group-item-input"][data-checked] [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])
)::before, + [data-slot="radio-group-item"]::before {
[data-slot="radio-group-item"]:has( opacity: 0;
[data-slot="radio-group-item-input"][data-checked] }
)
+ [data-slot="radio-group-item"]::before {
opacity: 0;
}
[data-slot="radio-group-item-label"] { [data-slot="radio-group-item-label"] {
color: var(--text-weak); color: var(--text-weak);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: calc(var(--spacing) * 1); gap: calc(var(--spacing) * 1);
line-height: 1; line-height: 1;
padding: 6px 12px; padding: 6px 12px;
place-content: center; place-content: center;
position: relative; position: relative;
transition-property: color, opacity; transition-property: color, opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
user-select: none; user-select: none;
} }
[data-slot="radio-group-item-input"] { [data-slot="radio-group-item-input"] {
all: unset; all: unset;
} }
/* Checked state */ /* Checked state */
[data-slot="radio-group-item-input"][data-checked] [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
+ [data-slot="radio-group-item-label"] { color: var(--text-strong);
color: var(--text-strong); }
}
/* Disabled state */ /* Disabled state */
[data-slot="radio-group-item-input"][data-disabled] [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
+ [data-slot="radio-group-item-label"] { cursor: not-allowed;
cursor: not-allowed; opacity: 0.5;
opacity: 0.5; }
}
/* Hover state for unchecked, enabled items */ /* Hover state for unchecked, enabled items */
[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) + [data-slot="radio-group-item-label"] {
+ [data-slot="radio-group-item-label"] { cursor: pointer;
cursor: pointer; user-select: none;
user-select: none; }
}
[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+ [data-slot="radio-group-item-label"]:hover { + [data-slot="radio-group-item-label"]:hover {
color: var(--text-base); color: var(--text-base);
} }
[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+ [data-slot="radio-group-item-label"]:active { + [data-slot="radio-group-item-label"]:active {
opacity: 0.7; opacity: 0.7;
} }
/* Focus state */ /* Focus state */
[data-slot="radio-group-wrapper"]:has( [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
[data-slot="radio-group-item-input"]:focus-visible [data-slot="radio-group-indicator"] {
) box-shadow: var(--shadow-xs-border-focus);
[data-slot="radio-group-indicator"] { }
box-shadow: var(--shadow-xs-border-focus);
}
/* Hide indicator when nothing is checked */ /* Hide indicator when nothing is checked */
[data-slot="radio-group-wrapper"]:not( [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
:has([data-slot="radio-group-item-input"][data-checked]) [data-slot="radio-group-indicator"] {
) --indicator-opacity: 0;
[data-slot="radio-group-indicator"] { }
--indicator-opacity: 0;
}
/* Vertical orientation */ /* Vertical orientation */
&[aria-orientation="vertical"] [data-slot="radio-group-items"] { &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
flex-direction: column; flex-direction: column;
} }
&[aria-orientation="vertical"] &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
[data-slot="radio-group-item"]:not(:first-of-type)::before { height: 1px;
height: 1px; width: auto;
width: auto; inset: 0 6px;
inset: 0 6px; transform: translateY(-0.5px);
transform: translateY(-0.5px); }
}
/* Small size variant */ /* Small size variant */
&[data-size="small"] { &[data-size="small"] {
[data-slot="radio-group-item-label"] { [data-slot="radio-group-item-label"] {
font-size: 12px; font-size: 12px;
padding: 4px 8px; padding: 4px 8px;
} }
[data-slot="radio-group-item"]:not(:first-of-type)::before { [data-slot="radio-group-item"]:not(:first-of-type)::before {
inset: 4px 0; inset: 4px 0;
} }
&[aria-orientation="vertical"] &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
[data-slot="radio-group-item"]:not(:first-of-type)::before { inset: 0 4px;
inset: 0 4px; }
} }
}
/* Disabled root state */ /* Disabled root state */
&[data-disabled] { &[data-disabled] {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
} }

12
packages/ui/src/components/reasoning-icon.css
View File

@@ -1,10 +1,8 @@
[data-component="reasoning-icon"] { [data-component="reasoning-icon"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
[data-slot="reasoning-icon-percentage"] { [data-slot="reasoning-icon-percentage"] {
transition: clip-path 200ms cubic-bezier(0.25, 0, 0.5, 1); transition: clip-path 200ms cubic-bezier(0.25, 0, 0.5, 1);
clip-path: inset( clip-path: inset(calc(100% - var(--reasoning-icon-percentage) * 100%) 0 0 0);
calc(100% - var(--reasoning-icon-percentage) * 100%) 0 0 0 }
);
}
} }

18
packages/ui/src/components/reasoning-icon.tsx
View File

@@ -25,8 +25,22 @@ export function ReasoningIcon(props: ReasoningIconProps) {
[split.class ?? ""]: !!split.class, [split.class ?? ""]: !!split.class,
}} }}
> >
<path d="M5.83196 10.3225V11.1666C5.83196 11.7189 6.27967 12.1666 6.83196 12.1666H9.16687C9.71915 12.1666 10.1669 11.7189 10.1669 11.1666V10.3225M5.83196 10.3225C5.55695 10.1843 5.29695 10.0206 5.05505 9.83459C3.90601 8.95086 3.16549 7.56219 3.16549 6.00055C3.16549 3.33085 5.32971 1.16663 7.99941 1.16663C10.6691 1.16663 12.8333 3.33085 12.8333 6.00055C12.8333 7.56219 12.0928 8.95086 10.9438 9.83459C10.7019 10.0206 10.4419 10.1843 10.1669 10.3225M5.83196 10.3225H10.1669M6.5 14.1666H9.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /> <path
<circle cx="8" cy="5.83325" r="2.86364" fill="currentColor" stroke="currentColor" stroke-width={strokeWidth()} style={{ '--reasoning-icon-percentage': split.percentage / 100 }} data-slot="reasoning-icon-percentage" /> d="M5.83196 10.3225V11.1666C5.83196 11.7189 6.27967 12.1666 6.83196 12.1666H9.16687C9.71915 12.1666 10.1669 11.7189 10.1669 11.1666V10.3225M5.83196 10.3225C5.55695 10.1843 5.29695 10.0206 5.05505 9.83459C3.90601 8.95086 3.16549 7.56219 3.16549 6.00055C3.16549 3.33085 5.32971 1.16663 7.99941 1.16663C10.6691 1.16663 12.8333 3.33085 12.8333 6.00055C12.8333 7.56219 12.0928 8.95086 10.9438 9.83459C10.7019 10.0206 10.4419 10.1843 10.1669 10.3225M5.83196 10.3225H10.1669M6.5 14.1666H9.5"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle
cx="8"
cy="5.83325"
r="2.86364"
fill="currentColor"
stroke="currentColor"
stroke-width={strokeWidth()}
style={{ "--reasoning-icon-percentage": split.percentage / 100 }}
data-slot="reasoning-icon-percentage"
/>
</svg> </svg>
) )
} }

100
packages/ui/src/components/resize-handle.css
View File

@@ -1,60 +1,60 @@
[data-component="resize-handle"] { [data-component="resize-handle"] {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
opacity: 0; opacity: 0;
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
&:hover::after, &:hover::after,
&:active::after { &:active::after {
opacity: 1; opacity: 1;
} }
&[data-direction="horizontal"] { &[data-direction="horizontal"] {
inset-block: 0; inset-block: 0;
inset-inline-end: 0; inset-inline-end: 0;
width: 8px; width: 8px;
transform: translateX(50%); transform: translateX(50%);
cursor: col-resize; cursor: col-resize;
&[data-edge="start"] { &[data-edge="start"] {
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: auto; inset-inline-end: auto;
transform: translateX(-50%); transform: translateX(-50%);
} }
&::after { &::after {
width: 3px; width: 3px;
inset-block: 0; inset-block: 0;
inset-inline-start: 50%; inset-inline-start: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
&[data-direction="vertical"] { &[data-direction="vertical"] {
inset-inline: 0; inset-inline: 0;
inset-block-start: 0; inset-block-start: 0;
height: 8px; height: 8px;
transform: translateY(-50%); transform: translateY(-50%);
cursor: row-resize; cursor: row-resize;
&[data-edge="end"] { &[data-edge="end"] {
inset-block-start: auto; inset-block-start: auto;
inset-block-end: 0; inset-block-end: 0;
transform: translateY(50%); transform: translateY(50%);
} }
&::after { &::after {
height: 3px; height: 3px;
inset-inline: 0; inset-inline: 0;
inset-block-start: 50%; inset-block-start: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
} }

182
packages/ui/src/components/scroll-fade.css
View File

@@ -1,122 +1,82 @@
[data-component="scroll-fade"] { [data-component="scroll-fade"] {
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
scrollbar-width: none; scrollbar-width: none;
box-sizing: border-box; box-sizing: border-box;
color: inherit; color: inherit;
font: inherit; font: inherit;
-ms-overflow-style: none; -ms-overflow-style: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
&[data-direction="horizontal"] { &[data-direction="horizontal"] {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
/* Both fades */ /* Both fades */
&[data-fade-start][data-fade-end] { &[data-fade-start][data-fade-end] {
mask-image: linear-gradient( mask-image: linear-gradient(
to right, to right,
transparent, transparent,
black var(--scroll-fade-start), black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)), black calc(100% - var(--scroll-fade-end)),
transparent transparent
); );
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to right, to right,
transparent, transparent,
black var(--scroll-fade-start), black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)), black calc(100% - var(--scroll-fade-end)),
transparent transparent
); );
} }
/* Only start fade */ /* Only start fade */
&[data-fade-start]:not([data-fade-end]) { &[data-fade-start]:not([data-fade-end]) {
mask-image: linear-gradient( mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
to right, -webkit-mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
transparent, }
black var(--scroll-fade-start),
black 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black var(--scroll-fade-start),
black 100%
);
}
/* Only end fade */ /* Only end fade */
&:not([data-fade-start])[data-fade-end] { &:not([data-fade-start])[data-fade-end] {
mask-image: linear-gradient( mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
to right, -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
black 0%, }
black calc(100% - var(--scroll-fade-end)), }
transparent
);
-webkit-mask-image: linear-gradient(
to right,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
}
&[data-direction="vertical"] { &[data-direction="vertical"] {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&[data-fade-start][data-fade-end] { &[data-fade-start][data-fade-end] {
mask-image: linear-gradient( mask-image: linear-gradient(
to bottom, to bottom,
transparent, transparent,
black var(--scroll-fade-start), black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)), black calc(100% - var(--scroll-fade-end)),
transparent transparent
); );
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to bottom, to bottom,
transparent, transparent,
black var(--scroll-fade-start), black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)), black calc(100% - var(--scroll-fade-end)),
transparent transparent
); );
} }
/* Only start fade */ /* Only start fade */
&[data-fade-start]:not([data-fade-end]) { &[data-fade-start]:not([data-fade-end]) {
mask-image: linear-gradient( mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
to bottom, -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
transparent, }
black var(--scroll-fade-start),
black 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent,
black var(--scroll-fade-start),
black 100%
);
}
/* Only end fade */ /* Only end fade */
&:not([data-fade-start])[data-fade-end] { &:not([data-fade-start])[data-fade-end] {
mask-image: linear-gradient( mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
to bottom, -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
black 0%, }
black calc(100% - var(--scroll-fade-end)), }
transparent
);
-webkit-mask-image: linear-gradient(
to bottom,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
}
} }

2
packages/ui/src/components/scroll-reveal.tsx
View File

@@ -1,5 +1,5 @@
import { type JSX, onCleanup, splitProps } from "solid-js" import { type JSX, onCleanup, splitProps } from "solid-js"
import { ScrollFade, type ScrollFadeProps } from './scroll-fade' import { ScrollFade, type ScrollFadeProps } from "./scroll-fade"
const SCROLL_SPEED = 60 const SCROLL_SPEED = 60
const PAUSE_DURATION = 800 const PAUSE_DURATION = 800

286
packages/ui/src/components/select.css
View File

@@ -1,165 +1,163 @@
[data-component="select"] { [data-component="select"] {
[data-slot="select-select-trigger"] { [data-slot="select-select-trigger"] {
display: flex; display: flex;
padding: 4px 8px !important; padding: 4px 8px !important;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: none; box-shadow: none;
transition-property: background-color; transition-property: background-color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
[data-slot="select-select-trigger-value"] { [data-slot="select-select-trigger-value"] {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
[data-slot="select-select-trigger-icon"] { [data-slot="select-select-trigger-icon"] {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
color: var(--icon-base); color: var(--icon-base);
} }
&:hover, &:hover,
&[data-expanded] { &[data-expanded] {
&[data-variant="secondary"] { &[data-variant="secondary"] {
background-color: var(--button-secondary-hover); background-color: var(--button-secondary-hover);
} }
&[data-variant="ghost"] { &[data-variant="ghost"] {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
} }
&[data-variant="primary"] { &[data-variant="primary"] {
background-color: var(--icon-strong-active); background-color: var(--icon-strong-active);
} }
} }
&:not([data-expanded]):focus, &:not([data-expanded]):focus,
&:not([data-expanded]):focus-visible { &:not([data-expanded]):focus-visible {
&[data-variant="secondary"] { &[data-variant="secondary"] {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
} }
&[data-variant="ghost"] { &[data-variant="ghost"] {
background-color: transparent; background-color: transparent;
} }
&[data-variant="primary"] { &[data-variant="primary"] {
background-color: var(--icon-strong-base); background-color: var(--icon-strong-base);
} }
} }
} }
} }
[data-component="select-content"] { [data-component="select-content"] {
min-width: 8rem; min-width: 8rem;
max-width: 23rem; max-width: 23rem;
overflow: hidden; overflow: hidden;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
padding: 4px; padding: 4px;
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
z-index: 50; z-index: 50;
transform-origin: var(--kb-popper-content-transform-origin); transform-origin: var(--kb-popper-content-transform-origin);
pointer-events: none; pointer-events: none;
animation: selectContentHide var(--transition-duration) animation: selectContentHide var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards;
@starting-style { @starting-style {
animation: none; animation: none;
} }
&[data-expanded] { &[data-expanded] {
pointer-events: auto; pointer-events: auto;
animation: selectContentShow var(--transition-duration) animation: selectContentShow var(--transition-duration) var(--transition-easing) forwards;
var(--transition-easing) forwards; }
}
[data-slot="select-select-content-list"] { [data-slot="select-select-content-list"] {
overflow-y: auto; overflow-y: auto;
max-height: 12rem; max-height: 12rem;
white-space: nowrap; white-space: nowrap;
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:focus { &:focus {
outline: none; outline: none;
} }
> *:not([role="presentation"]) + *:not([role="presentation"]) { > *:not([role="presentation"]) + *:not([role="presentation"]) {
margin-top: 2px; margin-top: 2px;
} }
} }
[data-slot="select-select-item"] { [data-slot="select-select-item"] {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 8px; padding: 4px 8px;
gap: 12px; gap: 12px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong); color: var(--text-strong);
transition-property: background-color, color; transition-property: background-color, color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
outline: none; outline: none;
user-select: none; user-select: none;
&:hover { &:hover {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&[data-disabled] { &[data-disabled] {
background-color: var(--surface-raised-base); background-color: var(--surface-raised-base);
pointer-events: none; pointer-events: none;
} }
[data-slot="select-select-item-indicator"] { [data-slot="select-select-item-indicator"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
color: var(--icon-strong-base); color: var(--icon-strong-base);
svg { svg {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
&:focus { &:focus {
outline: none; outline: none;
} }
&:hover { &:hover {
background: var(--surface-raised-base-hover); background: var(--surface-raised-base-hover);
} }
} }
} }
@keyframes selectContentShow { @keyframes selectContentShow {
from { from {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
to { to {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
} }
@keyframes selectContentHide { @keyframes selectContentHide {
from { from {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scaleY(0.95); transform: scaleY(0.95);
} }
} }

365
packages/ui/src/components/session-review.css
View File

@@ -1,216 +1,215 @@
[data-component="session-review"] { [data-component="session-review"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
contain: strict; contain: strict;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
/* [data-slot="session-review-container"] { */ /* [data-slot="session-review-container"] { */
/* height: 100%; */ /* height: 100%; */
/* } */ /* } */
[data-slot="session-review-header"] { [data-slot="session-review-header"] {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 20; z-index: 20;
background-color: var(--background-stronger); background-color: var(--background-stronger);
height: 32px; height: 32px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
} }
[data-slot="session-review-title"] { [data-slot="session-review-title"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-large); font-size: var(--font-size-large);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
color: var(--text-strong); color: var(--text-strong);
} }
[data-slot="session-review-actions"] { [data-slot="session-review-actions"] {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 16px; column-gap: 16px;
padding-right: 1px; padding-right: 1px;
} }
[data-component="sticky-accordion-header"] { [data-component="sticky-accordion-header"] {
top: 40px; top: 40px;
&[data-expanded]::before { &[data-expanded]::before {
top: -40px; top: -40px;
} }
} }
[data-slot="accordion-trigger"] { [data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important; background-color: var(--background-stronger) !important;
} }
[data-slot="session-review-accordion-item"][data-selected] { [data-slot="session-review-accordion-item"][data-selected] {
[data-slot="session-review-accordion-content"] { [data-slot="session-review-accordion-content"] {
box-shadow: var(--shadow-xs-border-select); box-shadow: var(--shadow-xs-border-select);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
} }
[data-slot="accordion-item"] { [data-slot="accordion-item"] {
[data-slot="accordion-content"] { [data-slot="accordion-content"] {
/* Use grid-template-rows for smooth height transition */ /* Use grid-template-rows for smooth height transition */
display: grid; display: grid;
} }
} }
[data-slot="accordion-content"] { [data-slot="accordion-content"] {
-webkit-user-select: text; -webkit-user-select: text;
user-select: text; user-select: text;
} }
[data-slot="session-review-accordion-content"] { [data-slot="session-review-accordion-content"] {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
[data-slot="session-review-trigger-content"] { [data-slot="session-review-trigger-content"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
gap: 20px; gap: 20px;
} }
[data-slot="session-review-file-info"] { [data-slot="session-review-file-info"] {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
min-width: 0; min-width: 0;
} }
[data-slot="session-review-file-name-container"] { [data-slot="session-review-file-name-container"] {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
} }
[data-slot="session-review-directory"] { [data-slot="session-review-directory"] {
color: var(--text-base); color: var(--text-base);
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
direction: rtl; direction: rtl;
text-align: left; text-align: left;
} }
[data-slot="session-review-filename"] { [data-slot="session-review-filename"] {
color: var(--text-strong); color: var(--text-strong);
flex-shrink: 0; flex-shrink: 0;
} }
[data-slot="session-review-view-button"] { [data-slot="session-review-view-button"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2px; padding: 2px;
margin-left: 8px; margin-left: 8px;
border: none; border: none;
background: transparent; background: transparent;
color: var(--text-base); color: var(--text-base);
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
opacity: 0; opacity: 0;
transition-property: opacity, background-color, color; transition-property: opacity, background-color, color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
&:hover { &:hover {
color: var(--text-strong); color: var(--text-strong);
background: var(--surface-base); background: var(--surface-base);
} }
} }
[data-slot="accordion-trigger"]:hover [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
[data-slot="session-review-view-button"] { opacity: 1;
opacity: 1; }
}
[data-slot="session-review-trigger-actions"] { [data-slot="session-review-trigger-actions"] {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
[data-slot="session-review-change"] { [data-slot="session-review-change"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
[data-slot="session-review-change"][data-type="added"] { [data-slot="session-review-change"][data-type="added"] {
color: var(--icon-diff-add-base); color: var(--icon-diff-add-base);
} }
[data-slot="session-review-change"][data-type="removed"] { [data-slot="session-review-change"][data-type="removed"] {
color: var(--icon-diff-delete-base); color: var(--icon-diff-delete-base);
} }
[data-slot="session-review-file-container"] { [data-slot="session-review-file-container"] {
padding: 0; padding: 0;
} }
[data-slot="session-review-image-container"] { [data-slot="session-review-image-container"] {
padding: 12px; padding: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background: var(--background-stronger); background: var(--background-stronger);
} }
[data-slot="session-review-image"] { [data-slot="session-review-image"] {
max-width: 100%; max-width: 100%;
max-height: 60vh; max-height: 60vh;
object-fit: contain; object-fit: contain;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
background: var(--background-base); background: var(--background-base);
} }
[data-slot="session-review-image-placeholder"] { [data-slot="session-review-image-placeholder"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="session-review-audio-container"] { [data-slot="session-review-audio-container"] {
padding: 12px; padding: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background: var(--background-stronger); background: var(--background-stronger);
} }
[data-slot="session-review-audio"] { [data-slot="session-review-audio"] {
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
} }
[data-slot="session-review-audio-placeholder"] { [data-slot="session-review-audio-placeholder"] {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="session-review-diff-wrapper"] { [data-slot="session-review-diff-wrapper"] {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
--line-comment-z: 5; --line-comment-z: 5;
--line-comment-popover-z: 30; --line-comment-popover-z: 30;
} }
} }

1139
packages/ui/src/components/session-turn.css
View File

File diff suppressed because it is too large Load Diff

2
packages/ui/src/components/session-turn.tsx
View File

@@ -553,7 +553,7 @@ export function SessionTurn(
data-slot="session-turn-collapsible-trigger-content" data-slot="session-turn-collapsible-trigger-content"
variant="ghost" variant="ghost"
size="small" size="small"
onClick={props.onStepsExpandedToggle ?? (() => { })} onClick={props.onStepsExpandedToggle ?? (() => {})}
aria-expanded={props.stepsExpanded} aria-expanded={props.stepsExpanded}
> >
<Switch> <Switch>

8
packages/ui/src/components/spinner.css
View File

@@ -1,6 +1,6 @@
[data-component="spinner"] { [data-component="spinner"] {
color: inherit; color: inherit;
flex-shrink: 0; flex-shrink: 0;
width: 18px; width: 18px;
aspect-ratio: 1; aspect-ratio: 1;
} }

24
packages/ui/src/components/sticky-accordion-header.css
View File

@@ -1,16 +1,16 @@
[data-component="sticky-accordion-header"] { [data-component="sticky-accordion-header"] {
position: sticky; position: sticky;
top: 0px; top: 0px;
&[data-expanded] { &[data-expanded] {
z-index: 10; z-index: 10;
&::before { &::before {
content: ""; content: "";
z-index: -10; z-index: -10;
position: absolute; position: absolute;
inset: 0; inset: 0;
background-color: var(--background-stronger); background-color: var(--background-stronger);
} }
} }
} }

223
packages/ui/src/components/switch.css
View File

@@ -1,133 +1,132 @@
[data-component="switch"] { [data-component="switch"] {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
cursor: default; cursor: default;
[data-slot="switch-input"] { [data-slot="switch-input"] {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
border-width: 0; border-width: 0;
} }
[data-slot="switch-control"] { [data-slot="switch-control"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: 28px; width: 28px;
height: 16px; height: 16px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
background: var(--surface-base); background: var(--surface-base);
transition-property: background-color, border-color, box-shadow; transition-property: background-color, border-color, box-shadow;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
[data-slot="switch-thumb"] { [data-slot="switch-thumb"] {
width: 14px; width: 14px;
height: 14px; height: 14px;
box-sizing: content-box; box-sizing: content-box;
border-radius: 2px; border-radius: 2px;
border: 1px solid var(--border-base); border: 1px solid var(--border-base);
background: var(--icon-invert-base); background: var(--icon-invert-base);
/* shadows/shadow-xs */ /* shadows/shadow-xs */
box-shadow: box-shadow:
0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 2px 0 rgba(19, 16, 16, 0.06),
0 1px 3px 0 rgba(19, 16, 16, 0.08); 0 1px 3px 0 rgba(19, 16, 16, 0.08);
transform: translateX(-1px); transform: translateX(-1px);
transition-property: transform, background-color, border-color; transition-property: transform, background-color, border-color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
[data-slot="switch-label"] { [data-slot="switch-label"] {
user-select: none; user-select: none;
color: var(--text-base); color: var(--text-base);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="switch-description"] { [data-slot="switch-description"] {
color: var(--text-base); color: var(--text-base);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="switch-error"] { [data-slot="switch-error"] {
color: var(--text-error); color: var(--text-error);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] { &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
border-color: var(--border-hover); border-color: var(--border-hover);
background-color: var(--surface-hover); background-color: var(--surface-hover);
} }
&:focus-within:not([data-readonly]) [data-slot="switch-control"] { &:focus-within:not([data-readonly]) [data-slot="switch-control"] {
border-color: var(--border-focus); border-color: var(--border-focus);
box-shadow: 0 0 0 2px var(--surface-focus); box-shadow: 0 0 0 2px var(--surface-focus);
} }
&[data-checked] [data-slot="switch-control"] { &[data-checked] [data-slot="switch-control"] {
box-sizing: border-box; box-sizing: border-box;
border-color: var(--icon-strong-base); border-color: var(--icon-strong-base);
background-color: var(--icon-strong-base); background-color: var(--icon-strong-base);
} }
&[data-checked] [data-slot="switch-thumb"] { &[data-checked] [data-slot="switch-thumb"] {
border: none; border: none;
transform: translateX(12px); transform: translateX(12px);
background-color: var(--icon-invert-base); background-color: var(--icon-invert-base);
} }
&[data-checked]:hover:not([data-disabled], [data-readonly]) &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
[data-slot="switch-control"] { border-color: var(--border-hover);
border-color: var(--border-hover); background-color: var(--surface-hover);
background-color: var(--surface-hover); }
}
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
&[data-disabled] [data-slot="switch-control"] { &[data-disabled] [data-slot="switch-control"] {
border-color: var(--border-disabled); border-color: var(--border-disabled);
background-color: var(--surface-disabled); background-color: var(--surface-disabled);
} }
&[data-disabled] [data-slot="switch-thumb"] { &[data-disabled] [data-slot="switch-thumb"] {
background-color: var(--icon-disabled); background-color: var(--icon-disabled);
} }
&[data-invalid] [data-slot="switch-control"] { &[data-invalid] [data-slot="switch-control"] {
border-color: var(--border-error); border-color: var(--border-error);
} }
&[data-readonly] { &[data-readonly] {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
} }

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

@@ -1,454 +1,454 @@
[data-component="tabs"] { [data-component="tabs"] {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--background-stronger); background-color: var(--background-stronger);
overflow: clip; overflow: clip;
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
height: 48px; height: 48px;
width: 100%; width: 100%;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
overflow-x: auto; overflow-x: auto;
/* Hide scrollbar */ /* Hide scrollbar */
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
/* After element to fill remaining space */ /* After element to fill remaining space */
&::after { &::after {
content: ""; content: "";
display: block; display: block;
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
border-bottom: 1px solid var(--border-weak-base); border-bottom: 1px solid var(--border-weak-base);
background-color: var(--background-base); background-color: var(--background-base);
} }
&:empty::after { &:empty::after {
display: none; display: none;
} }
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
position: relative; position: relative;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
color: var(--text-base); color: var(--text-base);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
max-width: 280px; max-width: 280px;
border-bottom: 1px solid var(--border-weak-base); border-bottom: 1px solid var(--border-weak-base);
border-right: 1px solid var(--border-weak-base); border-right: 1px solid var(--border-weak-base);
background-color: var(--background-base); background-color: var(--background-base);
transition-property: background-color, border-color, color; transition-property: background-color, border-color, color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 14px 24px 14px 12px; padding: 14px 24px 14px 12px;
outline: none; outline: none;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&:focus-visible { &:focus-visible {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
} }
[data-slot="tabs-trigger-close-button"] { [data-slot="tabs-trigger-close-button"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
[data-component="icon-button"] { [data-component="icon-button"] {
margin: -0.25rem; margin: -0.25rem;
} }
&:disabled { &:disabled {
pointer-events: none; pointer-events: none;
color: var(--text-weaker); color: var(--text-weaker);
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
&:has([data-hidden]) { &:has([data-hidden]) {
[data-slot="tabs-trigger-close-button"] { [data-slot="tabs-trigger-close-button"] {
opacity: 0; opacity: 0;
} }
&:hover { &:hover {
[data-slot="tabs-trigger-close-button"] { [data-slot="tabs-trigger-close-button"] {
opacity: 1; opacity: 1;
} }
} }
} }
&:has([data-selected]) { &:has([data-selected]) {
color: var(--text-strong); color: var(--text-strong);
background-color: transparent; background-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
[data-slot="tabs-trigger-close-button"] { [data-slot="tabs-trigger-close-button"] {
opacity: 1; opacity: 1;
} }
} }
&:hover:not(:disabled):not([data-selected]) { &:hover:not(:disabled):not([data-selected]) {
color: var(--text-strong); color: var(--text-strong);
} }
&:has([data-slot="tabs-trigger-close-button"]) { &:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 12px; padding-right: 12px;
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
padding-right: 0; padding-right: 0;
} }
} }
} }
[data-slot="tabs-content"] { [data-slot="tabs-content"] {
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
/* Hide scrollbar */ /* Hide scrollbar */
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
} }
&[data-variant="alt"] { &[data-variant="alt"] {
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
gap: 12px; gap: 12px;
border-bottom: 1px solid var(--border-weak-base); border-bottom: 1px solid var(--border-weak-base);
background-color: transparent; background-color: transparent;
&::after { &::after {
border: none; border: none;
background-color: transparent; background-color: transparent;
} }
&:empty::after { &:empty::after {
display: none; display: none;
} }
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
border: none; border: none;
color: var(--text-base); color: var(--text-base);
background-color: transparent; background-color: transparent;
border-bottom-width: 2px; border-bottom-width: 2px;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-color: transparent; border-bottom-color: transparent;
gap: 4px; gap: 4px;
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-x-large); /* 171.429% */ line-height: var(--line-height-x-large); /* 171.429% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
height: 100%; height: 100%;
padding: 4px; padding: 4px;
background-color: transparent; background-color: transparent;
border-bottom-width: 2px; border-bottom-width: 2px;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
[data-slot="tabs-trigger-close-button"] { [data-slot="tabs-trigger-close-button"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
[data-component="icon-button"] { [data-component="icon-button"] {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: 0; margin: 0;
} }
&:has([data-selected]) { &:has([data-selected]) {
color: var(--text-strong); color: var(--text-strong);
background-color: transparent; background-color: transparent;
border-bottom-color: var(--icon-strong-base); border-bottom-color: var(--icon-strong-base);
} }
&:hover:not(:disabled):not([data-selected]) { &:hover:not(:disabled):not([data-selected]) {
color: var(--text-strong); color: var(--text-strong);
} }
&:has([data-slot="tabs-trigger-close-button"]) { &:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 0; padding-right: 0;
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
padding-right: 0; padding-right: 0;
} }
} }
} }
/* [data-slot="tabs-content"] { */ /* [data-slot="tabs-content"] { */
/* } */ /* } */
} }
&[data-variant="pill"][data-orientation="horizontal"] { &[data-variant="pill"][data-orientation="horizontal"] {
background-color: transparent; background-color: transparent;
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
height: auto; height: auto;
padding: 6px 0; padding: 6px 0;
gap: 4px; gap: 4px;
background-color: var(--background-base); background-color: var(--background-base);
&::after { &::after {
display: none; display: none;
} }
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
height: 32px; height: 32px;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background-color: transparent; background-color: transparent;
gap: 0; gap: 0;
/* text-13-medium */ /* text-13-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0 12px; padding: 0 12px;
background-color: transparent; background-color: transparent;
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
color: var(--text-strong); color: var(--text-strong);
} }
&:has([data-selected]) { &:has([data-selected]) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
color: var(--text-strong); color: var(--text-strong);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
} }
} }
} }
} }
&[data-variant="pill"][data-orientation="horizontal"][data-scope="filetree"] { &[data-variant="pill"][data-orientation="horizontal"][data-scope="filetree"] {
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
height: 48px; height: 48px;
padding-inline: 12px; padding-inline: 12px;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
height: 26px; height: 26px;
border-radius: 6px; border-radius: 6px;
color: var(--text-weak); color: var(--text-weak);
&:not(:has([data-selected])):hover:not(:disabled) { &:not(:has([data-selected])):hover:not(:disabled) {
color: var(--text-base); color: var(--text-base);
} }
&:has([data-selected]) { &:has([data-selected]) {
color: var(--text-strong); color: var(--text-strong);
} }
} }
} }
&[data-orientation="vertical"] { &[data-orientation="vertical"] {
flex-direction: row; flex-direction: row;
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
flex-direction: column; flex-direction: column;
width: auto; width: auto;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 8px; padding: 8px;
gap: 4px; gap: 4px;
background-color: var(--background-base); background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base); border-right: 1px solid var(--border-weak-base);
&::after { &::after {
display: none; display: none;
} }
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
width: 100%; width: 100%;
height: 32px; height: 32px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background-color: transparent; background-color: transparent;
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
height: 100%; height: 100%;
padding: 0 8px; padding: 0 8px;
gap: 8px; gap: 8px;
justify-content: flex-start; justify-content: flex-start;
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:has([data-selected]) { &:has([data-selected]) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
color: var(--text-strong); color: var(--text-strong);
} }
} }
[data-slot="tabs-content"] { [data-slot="tabs-content"] {
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
} }
&[data-variant="alt"] { &[data-variant="alt"] {
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
padding: 8px; padding: 8px;
gap: 4px; gap: 4px;
border: none; border: none;
&::after { &::after {
display: none; display: none;
} }
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
height: 32px; height: 32px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
border: none; border: none;
padding: 0 8px; padding: 0 8px;
gap: 8px; gap: 8px;
justify-content: flex-start; justify-content: flex-start;
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:has([data-selected]) { &:has([data-selected]) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
color: var(--text-strong); color: var(--text-strong);
} }
} }
} }
&[data-variant="settings"] { &[data-variant="settings"] {
[data-slot="tabs-list"] { [data-slot="tabs-list"] {
width: 150px; width: 150px;
min-width: 150px; min-width: 150px;
@media (min-width: 640px) { @media (min-width: 640px) {
width: 200px; width: 200px;
min-width: 200px; min-width: 200px;
} }
padding: 12px; padding: 12px;
gap: 0; gap: 0;
background-color: var(--background-base); background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base); border-right: 1px solid var(--border-weak-base);
&::after { &::after {
display: none; display: none;
} }
} }
[data-slot="tabs-section-title"] { [data-slot="tabs-section-title"] {
width: 100%; width: 100%;
padding: 0 0 0 4px; padding: 0 0 0 4px;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--text-weak); color: var(--text-weak);
} }
[data-slot="tabs-trigger-wrapper"] { [data-slot="tabs-trigger-wrapper"] {
height: 32px; height: 32px;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
[data-slot="tabs-trigger"] { [data-slot="tabs-trigger"] {
border: none; border: none;
padding: 0 8px; padding: 0 8px;
gap: 12px; gap: 12px;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
[data-component="icon"] { [data-component="icon"] {
color: var(--icon-base); color: var(--icon-base);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:has([data-selected]) { &:has([data-selected]) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
color: var(--text-strong); color: var(--text-strong);
[data-component="icon"] { [data-component="icon"] {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
} }
} }
} }
[data-slot="tabs-content"] { [data-slot="tabs-content"] {
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
} }
} }
} }
} }

66
packages/ui/src/components/tag.css
View File

@@ -1,40 +1,40 @@
[data-component="tag"] { [data-component="tag"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
border: 0.5px solid var(--border-weak-base); border: 0.5px solid var(--border-weak-base);
background: var(--surface-raised-base); background: var(--surface-raised-base);
color: var(--text-base); color: var(--text-base);
transition-property: background-color, border-color, color; transition-property: background-color, border-color, color;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
&[data-size="normal"] { &[data-size="normal"] {
height: 18px; height: 18px;
padding: 0 6px; padding: 0 6px;
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&[data-size="large"] { &[data-size="large"] {
height: 22px; height: 22px;
padding: 0 8px; padding: 0 8px;
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
} }

218
packages/ui/src/components/text-field.css
View File

@@ -1,134 +1,134 @@
[data-component="input"] { [data-component="input"] {
width: 100%; width: 100%;
[data-slot="input-input"] { [data-slot="input-input"] {
width: 100%; width: 100%;
color: var(--text-strong); color: var(--text-strong);
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&:focus { &:focus {
outline: none; outline: none;
} }
&::placeholder { &::placeholder {
color: var(--text-weak); color: var(--text-weak);
} }
} }
&[data-variant="normal"] { &[data-variant="normal"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
[data-slot="input-label"] { [data-slot="input-label"] {
color: var(--text-weak); color: var(--text-weak);
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 18px; /* 150% */ line-height: 18px; /* 150% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
[data-slot="input-wrapper"] { [data-slot="input-wrapper"] {
display: flex; display: flex;
align-items: start; align-items: start;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding-right: 4px; padding-right: 4px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
background: var(--input-base); background: var(--input-base);
&:focus-within:not(:has([data-readonly])) { &:focus-within:not(:has([data-readonly])) {
border-color: transparent; border-color: transparent;
/* border/shadow-xs/select */ /* border/shadow-xs/select */
box-shadow: box-shadow:
0 0 0 3px var(--border-weak-selected), 0 0 0 3px var(--border-weak-selected),
0 0 0 1px var(--border-selected), 0 0 0 1px var(--border-selected),
0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 2px 0 rgba(19, 16, 16, 0.08),
0 1px 3px 0 rgba(19, 16, 16, 0.12); 0 1px 3px 0 rgba(19, 16, 16, 0.12);
} }
&:has([data-invalid]) { &:has([data-invalid]) {
background: var(--surface-critical-weak); background: var(--surface-critical-weak);
border: 1px solid var(--border-critical-selected); border: 1px solid var(--border-critical-selected);
} }
&:not(:has([data-slot="input-copy-button"])) { &:not(:has([data-slot="input-copy-button"])) {
padding-right: 0; padding-right: 0;
} }
} }
[data-slot="input-input"] { [data-slot="input-input"] {
color: var(--text-strong); color: var(--text-strong);
display: flex; display: flex;
height: 32px; height: 32px;
padding: 2px 12px; padding: 2px 12px;
align-items: center; align-items: center;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
background: transparent; background: transparent;
border: none; border: none;
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&:focus { &:focus {
outline: none; outline: none;
} }
&::placeholder { &::placeholder {
color: var(--text-weak); color: var(--text-weak);
} }
} }
textarea[data-slot="input-input"] { textarea[data-slot="input-input"] {
height: auto; height: auto;
min-height: 32px; min-height: 32px;
padding: 6px 12px; padding: 6px 12px;
resize: none; resize: none;
} }
[data-slot="input-copy-button"] { [data-slot="input-copy-button"] {
flex-shrink: 0; flex-shrink: 0;
margin-top: 4px; margin-top: 4px;
color: var(--icon-base); color: var(--icon-base);
&:hover { &:hover {
color: var(--icon-strong-base); color: var(--icon-strong-base);
} }
} }
[data-slot="input-error"] { [data-slot="input-error"] {
color: var(--text-on-critical-base); color: var(--text-on-critical-base);
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: 18px; /* 150% */ line-height: 18px; /* 150% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
} }
} }

330
packages/ui/src/components/toast.css
View File

@@ -1,205 +1,205 @@
[data-component="toast-region"] { [data-component="toast-region"] {
position: fixed; position: fixed;
bottom: 48px; bottom: 48px;
right: 32px; right: 32px;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
[data-slot="toast-list"] { [data-slot="toast-list"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
[data-component="toast"] { [data-component="toast"] {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 20px; gap: 20px;
padding: 16px 20px; padding: 16px 20px;
pointer-events: auto; pointer-events: auto;
transition: all 150ms ease-out; transition: all 150ms ease-out;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
background: var(--surface-float-base); background: var(--surface-float-base);
color: var(--text-invert-base); color: var(--text-invert-base);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
[data-slot="toast-inner"] { [data-slot="toast-inner"] {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
} }
&[data-opened] { &[data-opened] {
animation: toastPopIn 150ms ease-out; animation: toastPopIn 150ms ease-out;
} }
&[data-closed] { &[data-closed] {
animation: toastPopOut 100ms ease-in forwards; animation: toastPopOut 100ms ease-in forwards;
} }
&[data-swipe="move"] { &[data-swipe="move"] {
transform: translateX(var(--kb-toast-swipe-move-x)); transform: translateX(var(--kb-toast-swipe-move-x));
} }
&[data-swipe="cancel"] { &[data-swipe="cancel"] {
transform: translateX(0); transform: translateX(0);
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
} }
&[data-swipe="end"] { &[data-swipe="end"] {
animation: toastSwipeOut 100ms ease-out forwards; animation: toastSwipeOut 100ms ease-out forwards;
} }
/* &[data-variant="success"] { */ /* &[data-variant="success"] { */
/* border-color: var(--color-semantic-positive); */ /* border-color: var(--color-semantic-positive); */
/* } */ /* } */
/**/ /**/
/* &[data-variant="error"] { */ /* &[data-variant="error"] { */
/* border-color: var(--color-semantic-danger); */ /* border-color: var(--color-semantic-danger); */
/* } */ /* } */
/**/ /**/
/* &[data-variant="loading"] { */ /* &[data-variant="loading"] { */
/* border-color: var(--color-semantic-info); */ /* border-color: var(--color-semantic-info); */
/* } */ /* } */
[data-slot="toast-icon"] { [data-slot="toast-icon"] {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
[data-component="icon"] { [data-component="icon"] {
color: var(--text-invert-stronger); color: var(--text-invert-stronger);
/* color: var(--icon-invert-base); */ /* color: var(--icon-invert-base); */
} }
} }
[data-slot="toast-content"] { [data-slot="toast-content"] {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
min-width: 0; min-width: 0;
} }
[data-slot="toast-title"] { [data-slot="toast-title"] {
color: var(--text-invert-strong); color: var(--text-invert-strong);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */ line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
margin: 0; margin: 0;
} }
[data-slot="toast-description"] { [data-slot="toast-description"] {
color: var(--text-invert-base); color: var(--text-invert-base);
text-wrap-style: pretty; text-wrap-style: pretty;
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-x-large); /* 171.429% */ line-height: var(--line-height-x-large); /* 171.429% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
margin: 0; margin: 0;
} }
[data-slot="toast-actions"] { [data-slot="toast-actions"] {
display: flex; display: flex;
gap: 16px; gap: 16px;
margin-top: 8px; margin-top: 8px;
} }
[data-slot="toast-action"] { [data-slot="toast-action"] {
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
color: var(--text-invert-weak); color: var(--text-invert-weak);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
&:first-child { &:first-child {
color: var(--text-invert-strong); color: var(--text-invert-strong);
} }
} }
[data-slot="toast-close-button"] { [data-slot="toast-close-button"] {
flex-shrink: 0; flex-shrink: 0;
} }
[data-slot="toast-progress-track"] { [data-slot="toast-progress-track"] {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 3px; height: 3px;
background-color: var(--surface-base); background-color: var(--surface-base);
border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden; overflow: hidden;
} }
[data-slot="toast-progress-fill"] { [data-slot="toast-progress-fill"] {
height: 100%; height: 100%;
width: var(--kb-toast-progress-fill-width); width: var(--kb-toast-progress-fill-width);
background-color: var(--color-primary); background-color: var(--color-primary);
transition: width 250ms linear; transition: width 250ms linear;
} }
} }
@keyframes toastPopIn { @keyframes toastPopIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes toastPopOut { @keyframes toastPopOut {
from { from {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
to { to {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
} }
@keyframes toastSwipeOut { @keyframes toastSwipeOut {
from { from {
transform: translateX(var(--kb-toast-swipe-end-x)); transform: translateX(var(--kb-toast-swipe-end-x));
} }
to { to {
transform: translateX(100%); transform: translateX(100%);
} }
} }

116
packages/ui/src/components/tooltip.css
View File

@@ -1,74 +1,74 @@
[data-component="tooltip-trigger"] { [data-component="tooltip-trigger"] {
display: flex; display: flex;
} }
[data-slot="tooltip-keybind"] { [data-slot="tooltip-keybind"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
[data-slot="tooltip-keybind-key"] { [data-slot="tooltip-keybind-key"] {
color: var(--text-invert-base); color: var(--text-invert-base);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); line-height: var(--line-height-large);
} }
[data-component="tooltip"] { [data-component="tooltip"] {
z-index: 1000; z-index: 1000;
max-width: 320px; max-width: 320px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background-color: var(--surface-float-base); background-color: var(--surface-float-base);
color: var(--text-invert-strong); color: var(--text-invert-strong);
background: var(--surface-float-base); background: var(--surface-float-base);
padding: 2px 8px; padding: 2px 8px;
border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07)); border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
pointer-events: none !important; pointer-events: none !important;
/* transition: all 150ms ease-out; */ /* transition: all 150ms ease-out; */
/* transform: translate3d(0, 0, 0); */ /* transform: translate3d(0, 0, 0); */
/* transform-origin: var(--kb-tooltip-content-transform-origin); */ /* transform-origin: var(--kb-tooltip-content-transform-origin); */
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
&[data-expanded] { &[data-expanded] {
opacity: 1; opacity: 1;
/* transform: translate3d(0, 0, 0); */ /* transform: translate3d(0, 0, 0); */
} }
&[data-closed]:not([data-force-open="true"]) { &[data-closed]:not([data-force-open="true"]) {
opacity: 0; opacity: 0;
} }
/* &[data-placement="top"] { */ /* &[data-placement="top"] { */
/* &[data-closed] { */ /* &[data-closed] { */
/* transform: translate3d(0, 4px, 0); */ /* transform: translate3d(0, 4px, 0); */
/* } */ /* } */
/* } */ /* } */
/**/ /**/
/* &[data-placement="bottom"] { */ /* &[data-placement="bottom"] { */
/* &[data-closed] { */ /* &[data-closed] { */
/* transform: translate3d(0, -4px, 0); */ /* transform: translate3d(0, -4px, 0); */
/* } */ /* } */
/* } */ /* } */
/**/ /**/
/* &[data-placement="left"] { */ /* &[data-placement="left"] { */
/* &[data-closed] { */ /* &[data-closed] { */
/* transform: translate3d(4px, 0, 0); */ /* transform: translate3d(4px, 0, 0); */
/* } */ /* } */
/* } */ /* } */
/**/ /**/
/* &[data-placement="right"] { */ /* &[data-placement="right"] { */
/* &[data-closed] { */ /* &[data-closed] { */
/* transform: translate3d(-4px, 0, 0); */ /* transform: translate3d(-4px, 0, 0); */
/* } */ /* } */
/* } */ /* } */
} }

18
packages/ui/src/components/typewriter.css
View File

@@ -1,14 +1,14 @@
@keyframes blink { @keyframes blink {
0%, 0%,
50% { 50% {
opacity: 1; opacity: 1;
} }
51%, 51%,
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
.blinking-cursor { .blinking-cursor {
animation: blink 1s step-end infinite; animation: blink 1s step-end infinite;
} }

16
packages/ui/src/context/dialog.tsx
View File

@@ -121,12 +121,16 @@ function init() {
const render = (element: JSX.Element, id: string, owner: Owner) => { const render = (element: JSX.Element, id: string, owner: Owner) => {
setRenders((renders) => ({ ...renders, [id]: element })) setRenders((renders) => ({ ...renders, [id]: element }))
show(() => element, owner, () => { show(
setRenders((renders) => { () => element,
const { [id]: _, ...rest } = renders owner,
return rest () => {
}) setRenders((renders) => {
}) const { [id]: _, ...rest } = renders
return rest
})
},
)
} }
const isActive = (id: string) => { const isActive = (id: string) => {

231
packages/ui/src/styles/utilities.css
View File

@@ -1,174 +1,173 @@
:root { :root {
interpolate-size: allow-keywords; interpolate-size: allow-keywords;
/* Transition tokens */ /* Transition tokens */
--transition-duration: 200ms; --transition-duration: 200ms;
--transition-easing: cubic-bezier(0.25, 0, 0.5, 1); --transition-easing: cubic-bezier(0.25, 0, 0.5, 1);
--transition-fast: 150ms; --transition-fast: 150ms;
--transition-slow: 300ms; --transition-slow: 300ms;
/* Allow height transitions from 0 to auto */ /* Allow height transitions from 0 to auto */
@supports (interpolate-size: allow-keywords) { @supports (interpolate-size: allow-keywords) {
interpolate-size: allow-keywords; interpolate-size: allow-keywords;
} }
[data-popper-positioner] { [data-popper-positioner] {
pointer-events: none; pointer-events: none;
} }
/* ::selection { */ /* ::selection { */
/* background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */ /* background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
/* background-color: var(--color-primary); */ /* background-color: var(--color-primary); */
/* color: var(--color-background); */ /* color: var(--color-background); */
/* } */ /* } */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--surface-float-base); background-color: var(--surface-float-base);
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
* { * {
scrollbar-color: var(--surface-float-base) transparent; scrollbar-color: var(--surface-float-base) transparent;
} }
} }
.no-scrollbar { .no-scrollbar {
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
/* Hide scrollbar for IE, Edge and Firefox */ /* Hide scrollbar for IE, Edge and Firefox */
& { & {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
} }
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
border-width: 0; border-width: 0;
} }
.truncate-start { .truncate-start {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
direction: rtl; direction: rtl;
text-align: left; text-align: left;
} }
.text-12-regular { .text-12-regular {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-12-medium { .text-12-medium {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-12-mono { .text-12-mono {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-feature-settings: var(--font-feature-settings-mono); font-feature-settings: var(--font-feature-settings-mono);
font-size: var(--font-size-small); font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 166.667% */ line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-14-regular { .text-14-regular {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-x-large); /* 171.429% */ line-height: var(--line-height-x-large); /* 171.429% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-14-medium { .text-14-medium {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 171.429% */ line-height: var(--line-height-large); /* 171.429% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-14-mono { .text-14-mono {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-feature-settings: var(--font-feature-settings-mono); font-feature-settings: var(--font-feature-settings-mono);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 171.429% */ line-height: var(--line-height-large); /* 171.429% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
.text-16-medium { .text-16-medium {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-large); font-size: var(--font-size-large);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-x-large); /* 150% */ line-height: var(--line-height-x-large); /* 150% */
letter-spacing: var(--letter-spacing-tight); letter-spacing: var(--letter-spacing-tight);
} }
.text-20-medium { .text-20-medium {
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-x-large); font-size: var(--font-size-x-large);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-x-large); /* 120% */ line-height: var(--line-height-x-large); /* 120% */
letter-spacing: var(--letter-spacing-tightest); letter-spacing: var(--letter-spacing-tightest);
} }
/* Transition utility classes */ /* Transition utility classes */
.transition-colors { .transition-colors {
transition-property: background-color, border-color, color, fill, stroke; transition-property: background-color, border-color, color, fill, stroke;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
.transition-opacity { .transition-opacity {
transition-property: opacity; transition-property: opacity;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
.transition-transform { .transition-transform {
transition-property: transform; transition-property: transform;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
.transition-shadow { .transition-shadow {
transition-property: box-shadow; transition-property: box-shadow;
transition-duration: var(--transition-duration); transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing); transition-timing-function: var(--transition-easing);
} }
.transition-interactive { .transition-interactive {
transition-property: transition-property: background-color, border-color, color, box-shadow, opacity;
background-color, border-color, color, box-shadow, opacity; transition-duration: var(--transition-duration);
transition-duration: var(--transition-duration); transition-timing-function: var(--transition-easing);
transition-timing-function: var(--transition-easing);
} }