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

wip(app): settings

Browse Source
This commit is contained in:
Adam
2026-01-06 15:21:00 -06:00
parent e521fee002
commit 8bcbfd6396
16 changed files with 564 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -215,24 +215,36 @@
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 8px;
gap: 4px;
background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base);
&::after {
width: 100%;
height: auto;
flex-grow: 1;
border-bottom: none;
border-right: 1px solid var(--border-weak-base);
display: none;
}
}
[data-slot="tabs-trigger-wrapper"] {
width: 100%;
height: auto;
border-bottom: none;
border-right: 1px solid var(--border-weak-base);
height: 32px;
border: none;
border-radius: 8px;
background-color: transparent;
[data-slot="tabs-trigger"] {
padding: 0 8px;
gap: 8px;
justify-content: flex-start;
}
&:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&:has([data-selected]) {
border-right-color: transparent;
background-color: var(--surface-raised-base-hover);
color: var(--text-strong);
}
}
@@ -243,32 +255,100 @@
&[data-variant="alt"] {
[data-slot="tabs-list"] {
padding-left: 0;
padding-right: 0;
padding-top: 24px;
padding-bottom: 24px;
border-bottom: none;
border-right: 1px solid var(--border-weak-base);
padding: 8px;
gap: 4px;
border: none;
&::after {
border: none;
display: none;
}
}
[data-slot="tabs-trigger-wrapper"] {
border-bottom: none;
border-right-width: 2px;
border-right-style: solid;
border-right-color: transparent;
height: 32px;
border: none;
border-radius: 8px;
[data-slot="tabs-trigger"] {
border-bottom: none;
border: none;
padding: 0 8px;
gap: 8px;
justify-content: flex-start;
}
&:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&:has([data-selected]) {
border-right-color: var(--icon-strong-base);
background-color: var(--surface-raised-base-hover);
color: var(--text-strong);
}
}
}
&[data-variant="settings"] {
[data-slot="tabs-list"] {
width: 180px;
min-width: 180px;
padding: 12px;
gap: 0;
background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base);
&::after {
display: none;
}
}
[data-slot="tabs-section-title"] {
padding: 8px 8px 4px 8px;
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
color: var(--text-weak);
}
[data-slot="tabs-trigger-wrapper"] {
height: 32px;
border: none;
border-radius: var(--radius-md);
/* text-14-regular */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
[data-slot="tabs-trigger"] {
border: none;
padding: 0 8px;
gap: 8px;
justify-content: flex-start;
width: 100%;
}
[data-component="icon"] {
color: var(--icon-base);
}
&:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover);
}
&:has([data-selected]) {
background-color: var(--surface-raised-base-hover);
color: var(--text-strong);
[data-component="icon"] {
color: var(--icon-strong-base);
}
}
}
[data-slot="tabs-content"] {
background-color: var(--surface-raised-stronger-non-alpha);
}
}
}
}