fix(desktop): unify UI colors onto theme tokens
This commit is contained in:
Freedom
GitHub
parent
af479c7770
commit
1cdbf4fa3d
|
|
@ -209,13 +209,13 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
|
|||
|
||||
<style>
|
||||
.json-tree {
|
||||
--json-tree-key: #1d4ed8;
|
||||
--json-tree-string: #15803d;
|
||||
--json-tree-number: #b45309;
|
||||
--json-tree-boolean: #7c3aed;
|
||||
--json-tree-null: #64748b;
|
||||
--json-tree-key: var(--info);
|
||||
--json-tree-string: var(--success);
|
||||
--json-tree-number: var(--warning);
|
||||
--json-tree-boolean: color-mix(in srgb, var(--primary) 70%, var(--info));
|
||||
--json-tree-null: var(--muted-foreground);
|
||||
|
||||
color: hsl(var(--foreground));
|
||||
color: var(--foreground);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
|
@ -245,7 +245,7 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
|
|||
}
|
||||
|
||||
.json-tree-row:hover {
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
||||
}
|
||||
|
||||
.json-tree-toggle {
|
||||
|
|
@ -257,16 +257,16 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.json-tree-toggle:hover {
|
||||
background: hsl(var(--accent));
|
||||
color: hsl(var(--foreground));
|
||||
background: var(--accent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.json-tree-toggle:focus-visible {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline: 2px solid var(--ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -299,11 +299,11 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
|
|||
.json-tree-index,
|
||||
.json-tree-punctuation,
|
||||
.json-tree-summary {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.json-tree-bracket {
|
||||
color: hsl(var(--foreground));
|
||||
color: var(--foreground);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1811,8 +1811,8 @@ watch(driverStoreTab, (tab) => {
|
|||
|
||||
<style>
|
||||
.driver-store-focus-highlight {
|
||||
background-color: hsl(var(--primary) / 0.08);
|
||||
box-shadow: inset 0 0 0 1.5px hsl(var(--primary) / 0.45);
|
||||
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
|
||||
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent);
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4708,7 +4708,7 @@ function openExternalUrl(url: string) {
|
|||
:key="opt.value"
|
||||
type="button"
|
||||
class="connection-db-picker-option group flex min-h-24 flex-col items-center justify-center gap-2 rounded-[4px] border bg-background/70 p-3 text-center transition hover:border-primary/40 hover:bg-muted/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
:class="selectedType === opt.value ? 'connection-db-picker-option--selected shadow-sm' : 'border-border'"
|
||||
:class="selectedType === opt.value ? 'dbx-tile-selected shadow-sm' : 'border-border'"
|
||||
:aria-pressed="selectedType === opt.value"
|
||||
@click="onDbTypeChange(opt.value)"
|
||||
@dblclick="goToConnectionStep(opt.value)"
|
||||
|
|
@ -4726,7 +4726,7 @@ function openExternalUrl(url: string) {
|
|||
:key="opt.value"
|
||||
type="button"
|
||||
class="connection-db-picker-option flex items-center gap-3 rounded-[4px] border bg-background px-3 py-2 text-left transition hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
:class="selectedType === opt.value ? 'connection-db-picker-option--selected' : 'border-border'"
|
||||
:class="selectedType === opt.value ? 'dbx-tile-selected' : 'border-border'"
|
||||
:aria-pressed="selectedType === opt.value"
|
||||
@click="onDbTypeChange(opt.value)"
|
||||
@dblclick="goToConnectionStep(opt.value)"
|
||||
|
|
@ -7133,32 +7133,10 @@ function openExternalUrl(url: string) {
|
|||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.connection-db-picker-option--selected {
|
||||
border-color: rgb(23, 23, 23);
|
||||
background-color: rgba(23, 23, 23, 0.08);
|
||||
box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.24);
|
||||
color: rgb(10, 10, 10);
|
||||
}
|
||||
|
||||
.connection-db-picker-option--selected:hover {
|
||||
background-color: rgba(23, 23, 23, 0.12);
|
||||
}
|
||||
|
||||
.connection-config-step :is([data-slot="input"], [data-slot="select-trigger"], [data-slot="tabs-list"], [data-slot="tabs-trigger"], textarea) {
|
||||
border-radius: var(--dbx-radius-fixed-4, 4px);
|
||||
}
|
||||
|
||||
.dark .connection-db-picker-option--selected {
|
||||
border-color: rgb(208, 208, 214);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
|
||||
color: rgb(221, 221, 226);
|
||||
}
|
||||
|
||||
.dark .connection-db-picker-option--selected:hover {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.connection-dialog-content[data-wide="true"] .grid.grid-cols-4 {
|
||||
grid-template-columns: minmax(5.5rem, 0.7fr) repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -379,12 +379,12 @@ function copyDeploySqlAll() {
|
|||
|
||||
<style scoped>
|
||||
:deep(.splitpanes--vertical > .splitpanes__splitter) {
|
||||
background-color: hsl(var(--border));
|
||||
background-color: var(--border);
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
position: relative;
|
||||
}
|
||||
:deep(.splitpanes--vertical > .splitpanes__splitter:hover) {
|
||||
background-color: hsl(var(--primary));
|
||||
background-color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -335,10 +335,10 @@ function getObjectIconColor(kind: DiffObjectKind): string {
|
|||
<style scoped>
|
||||
:deep(.splitpanes--vertical > .splitpanes__splitter) {
|
||||
width: 4px;
|
||||
background: hsl(var(--border));
|
||||
background: var(--border);
|
||||
cursor: col-resize;
|
||||
}
|
||||
:deep(.splitpanes--vertical > .splitpanes__splitter:hover) {
|
||||
background: hsl(var(--primary));
|
||||
background: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -887,10 +887,10 @@ const targetConnectionInfo = computed(() => {
|
|||
<style scoped>
|
||||
:deep(.splitpanes--horizontal > .splitpanes__splitter) {
|
||||
height: 8px;
|
||||
background: hsl(var(--border));
|
||||
background: var(--border);
|
||||
cursor: row-resize;
|
||||
}
|
||||
:deep(.splitpanes--horizontal > .splitpanes__splitter:hover) {
|
||||
background: hsl(var(--primary));
|
||||
background: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2424,24 +2424,24 @@ async function openExternalUrl(url: string) {
|
|||
font-weight: 600;
|
||||
}
|
||||
.ai-markdown :deep(a) {
|
||||
color: hsl(var(--primary));
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ai-markdown :deep(blockquote) {
|
||||
border-left: 2px solid hsl(var(--muted-foreground) / 0.3);
|
||||
border-left: 2px solid color-mix(in srgb, var(--muted-foreground) 30%, transparent);
|
||||
padding-left: 0.75em;
|
||||
margin: 0.3em 0;
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.ai-markdown :deep(code) {
|
||||
border-radius: 0.25rem;
|
||||
background: hsl(var(--muted));
|
||||
background: var(--muted);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
.ai-markdown :deep(pre) {
|
||||
background: hsl(var(--muted));
|
||||
background: var(--muted);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5em 0.75em;
|
||||
margin: 0.3em 0;
|
||||
|
|
@ -2464,7 +2464,7 @@ async function openExternalUrl(url: string) {
|
|||
max-width: 100%;
|
||||
margin: 0.3em 0;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.ai-markdown :deep(.ai-markdown-table-wrap table) {
|
||||
border: none;
|
||||
|
|
@ -2472,14 +2472,14 @@ async function openExternalUrl(url: string) {
|
|||
}
|
||||
.ai-markdown :deep(th),
|
||||
.ai-markdown :deep(td) {
|
||||
border: 1px solid hsl(var(--border));
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.25em 0.5em;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-markdown :deep(th) {
|
||||
font-weight: 600;
|
||||
background: hsl(var(--muted));
|
||||
background: var(--muted);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
|
@ -2496,11 +2496,11 @@ async function openExternalUrl(url: string) {
|
|||
height: 4px;
|
||||
width: 100%;
|
||||
cursor: ns-resize;
|
||||
background-color: hsl(var(--border));
|
||||
background-color: var(--border);
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.resize-handle:hover {
|
||||
background-color: hsl(var(--foreground) / 0.2);
|
||||
background-color: color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -491,13 +491,13 @@ defineExpose({
|
|||
}
|
||||
|
||||
.editor-search-panel--editor {
|
||||
background: #f6f7f9;
|
||||
border-color: #d8dce3;
|
||||
background: var(--popover);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
box-shadow:
|
||||
0 8px 22px rgb(15 23 42 / 0.14),
|
||||
0 1px 0 rgb(255 255 255 / 0.78) inset;
|
||||
color: #20242a;
|
||||
0 8px 22px color-mix(in srgb, var(--foreground) 14%, transparent),
|
||||
0 1px 0 color-mix(in srgb, var(--background) 78%, transparent) inset;
|
||||
color: var(--foreground);
|
||||
gap: 3px;
|
||||
max-width: min(calc(100vw - 2rem), 500px);
|
||||
padding: 4px 6px;
|
||||
|
|
@ -535,96 +535,46 @@ defineExpose({
|
|||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.border-input) {
|
||||
background: #ffffff;
|
||||
border-color: #c7ccd5;
|
||||
background: var(--background);
|
||||
border-color: var(--input);
|
||||
border-radius: var(--dbx-radius-fixed-5);
|
||||
box-shadow: 0 1px 0 rgb(15 23 42 / 0.03) inset;
|
||||
box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 3%, transparent) inset;
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.focus-within\:border-ring:focus-within) {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 1px var(--ring);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(input) {
|
||||
color: #20242a;
|
||||
color: var(--foreground);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(input::placeholder) {
|
||||
color: #7a828e;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.text-muted-foreground) {
|
||||
color: #6e7681;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.text-destructive) {
|
||||
color: #c2410c;
|
||||
color: var(--destructive);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.hover\:bg-accent:hover),
|
||||
.editor-search-panel--editor :deep(.bg-accent) {
|
||||
background: #e6e9ef;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(.hover\:text-foreground:hover),
|
||||
.editor-search-panel--editor :deep(.text-foreground) {
|
||||
color: #1f2329;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.editor-search-panel--editor :deep(button.border-border) {
|
||||
border-color: #d0d5dd;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor {
|
||||
background: #20252d;
|
||||
border-color: #2c333d;
|
||||
box-shadow:
|
||||
0 8px 24px rgb(0 0 0 / 0.28),
|
||||
0 1px 0 rgb(255 255 255 / 0.04) inset;
|
||||
color: #d4d7dc;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.border-input) {
|
||||
background: #191d25;
|
||||
border-color: #2f3742;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.focus-within\:border-ring:focus-within) {
|
||||
border-color: #4d8dff;
|
||||
box-shadow: 0 0 0 1px #4d8dff;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(input) {
|
||||
color: #d7dae0;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(input::placeholder) {
|
||||
color: #858c97;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.text-muted-foreground) {
|
||||
color: #9aa2ad;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.text-destructive) {
|
||||
color: #f59e7a;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.hover\:bg-accent:hover),
|
||||
:global(.dark) .editor-search-panel--editor :deep(.bg-accent) {
|
||||
background: #303844;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(.hover\:text-foreground:hover),
|
||||
:global(.dark) .editor-search-panel--editor :deep(.text-foreground) {
|
||||
color: #f2f4f8;
|
||||
}
|
||||
|
||||
:global(.dark) .editor-search-panel--editor :deep(button.border-border) {
|
||||
border-color: #38414d;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
|
|
|||
|
|
@ -392,10 +392,10 @@ const systemFontsLoading = ref(false);
|
|||
const systemFontsLoaded = ref(false);
|
||||
const uiScaleOptions = [0.75, 0.9, 0.95, 1, 1.05, 1.1, 1.15, 1.2, 1.25, 1.5, 1.75];
|
||||
const fontSearchTriggerClass =
|
||||
"h-8 w-full max-w-none justify-between gap-1.5 rounded-[6px] border border-input bg-transparent py-2 pl-2.5 pr-2 text-sm font-normal shadow-none hover:bg-transparent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-transparent dark:bg-input/30 dark:hover:bg-input/50";
|
||||
const appearanceFontSearchTriggerClass = `${fontSearchTriggerClass} gap-0 pl-2 pr-1.5`;
|
||||
"h-8 w-full max-w-none justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pl-2.5 pr-2 text-sm font-normal shadow-none hover:bg-muted/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-transparent dark:bg-input/30 dark:hover:bg-input/50";
|
||||
const appearanceFontSearchTriggerClass = fontSearchTriggerClass;
|
||||
const fontSearchTriggerIconClass = "size-4 text-muted-foreground";
|
||||
const appearanceFontSearchTriggerIconClass = "size-2.5 text-muted-foreground";
|
||||
const appearanceFontSearchTriggerIconClass = "size-4 text-muted-foreground";
|
||||
const disconnectTabHandlingModeDescriptionKey = computed(() => {
|
||||
switch (editDisconnectTabHandlingMode.value) {
|
||||
case "close-tabs":
|
||||
|
|
@ -3630,8 +3630,8 @@ onUnmounted(cleanupPreviewEditor);
|
|||
allow-custom
|
||||
:display-name="displayFontFamily"
|
||||
:normalize-custom="normalizeCustomFontFamilyInput"
|
||||
trigger-variant="outline"
|
||||
trigger-class="h-9 w-full max-w-none justify-between"
|
||||
:trigger-class="appearanceFontSearchTriggerClass"
|
||||
:trigger-icon-class="appearanceFontSearchTriggerIconClass"
|
||||
content-class="w-[var(--reka-popover-trigger-width)] min-w-[260px]"
|
||||
@update:model-value="onTableFontFamilyChange"
|
||||
@update:open="(open: boolean) => open && loadSystemFontOptions()"
|
||||
|
|
@ -3657,16 +3657,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="settings-appearance-group min-w-0">
|
||||
<Label>{{ t("settings.theme") }}</Label>
|
||||
<div class="settings-appearance-button-row flex flex-wrap gap-2">
|
||||
<Button
|
||||
v-for="option in appThemeModeOptions"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="settings-choice-button h-8 gap-1.5 px-3"
|
||||
:class="themeMode === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
|
||||
@click="setThemeMode(option.value)"
|
||||
>
|
||||
<Button v-for="option in appThemeModeOptions" :key="option.value" type="button" variant="outline" size="sm" class="settings-choice-button h-8 gap-1.5 px-3" :class="themeMode === option.value ? 'dbx-choice-selected' : 'text-foreground'" @click="setThemeMode(option.value)">
|
||||
<component :is="option.icon" class="h-3.5 w-3.5" />
|
||||
{{ option.label }}
|
||||
</Button>
|
||||
|
|
@ -3683,7 +3674,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
variant="outline"
|
||||
size="sm"
|
||||
class="settings-choice-button h-8 px-3"
|
||||
:class="cornerStyle === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
|
||||
:class="cornerStyle === option.value ? 'dbx-choice-selected' : 'text-foreground'"
|
||||
:style="{ borderRadius: option.previewRadius }"
|
||||
@click="setCornerStyle(option.value)"
|
||||
>
|
||||
|
|
@ -3698,7 +3689,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="settings-appearance-group">
|
||||
<Label>{{ t("settings.appLayout") }}</Label>
|
||||
<div class="settings-appearance-choice-grid">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'separated' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('separated')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'separated' ? 'dbx-choice-selected' : ''" @click="setAppLayout('separated')">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
|
|
@ -3713,7 +3704,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'classic' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('classic')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'classic' ? 'dbx-choice-selected' : ''" @click="setAppLayout('classic')">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
|
|
@ -3736,13 +3727,13 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="settings-appearance-group">
|
||||
<Label>{{ t("settings.tabLayout") }}</Label>
|
||||
<div class="settings-appearance-choice-grid">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editTabLayout === 'scroll' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setTabLayout('scroll')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editTabLayout === 'scroll' ? 'dbx-choice-selected' : ''" @click="setTabLayout('scroll')">
|
||||
<div class="w-full min-w-0 text-left">
|
||||
<div class="text-sm font-medium">{{ t("settings.tabLayoutScroll") }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ t("settings.tabLayoutScrollDescription") }}</div>
|
||||
</div>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editTabLayout === 'wrap' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setTabLayout('wrap')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editTabLayout === 'wrap' ? 'dbx-choice-selected' : ''" @click="setTabLayout('wrap')">
|
||||
<div class="w-full min-w-0 text-left">
|
||||
<div class="text-sm font-medium">{{ t("settings.tabLayoutWrap") }}</div>
|
||||
<div class="text-xs text-muted-foreground">{{ t("settings.tabLayoutWrapDescription") }}</div>
|
||||
|
|
@ -3755,7 +3746,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="settings-appearance-group">
|
||||
<Label>{{ t("settings.iconTheme") }}</Label>
|
||||
<div class="settings-appearance-choice-grid">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'default' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('default')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'default' ? 'dbx-choice-selected' : ''" @click="setIconTheme('default')">
|
||||
<div class="flex items-center gap-3 text-left w-full min-w-0">
|
||||
<img src="/icon-preview-default.png" alt="DBX" class="h-12 w-12 shrink-0" />
|
||||
<TooltipProvider>
|
||||
|
|
@ -3773,7 +3764,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
</TooltipProvider>
|
||||
</div>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'black' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('black')">
|
||||
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'black' ? 'dbx-choice-selected' : ''" @click="setIconTheme('black')">
|
||||
<div class="flex items-center gap-3 text-left w-full min-w-0">
|
||||
<img src="/icon-preview-black.png" alt="DBX" class="h-12 w-12 shrink-0" />
|
||||
<TooltipProvider>
|
||||
|
|
@ -3991,7 +3982,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="space-y-2">
|
||||
<Label>{{ t("settings.sidebarActivation") }}</Label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarActivation === 'single' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setSidebarActivation('single')">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarActivation === 'single' ? 'dbx-choice-selected' : ''" @click="setSidebarActivation('single')">
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-medium">{{ t("settings.sidebarActivationSingle") }}</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
|
|
@ -3999,7 +3990,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarActivation === 'double' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setSidebarActivation('double')">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarActivation === 'double' ? 'dbx-choice-selected' : ''" @click="setSidebarActivation('double')">
|
||||
<div class="text-left">
|
||||
<div class="text-sm font-medium">{{ t("settings.sidebarActivationDouble") }}</div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
|
|
@ -4021,7 +4012,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div class="space-y-2">
|
||||
<Label>{{ t("settings.sidebarObjectDisplay") }}</Label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarObjectDisplay === 'grouped' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setSidebarObjectDisplay('grouped')">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarObjectDisplay === 'grouped' ? 'dbx-choice-selected' : ''" @click="setSidebarObjectDisplay('grouped')">
|
||||
<div class="text-left">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-sm font-medium">{{ t("settings.sidebarObjectDisplayGrouped") }}</div>
|
||||
|
|
@ -4038,7 +4029,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarObjectDisplay === 'simple' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setSidebarObjectDisplay('simple')">
|
||||
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editSidebarObjectDisplay === 'simple' ? 'dbx-choice-selected' : ''" @click="setSidebarObjectDisplay('simple')">
|
||||
<div class="text-left">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-sm font-medium">{{ t("settings.sidebarObjectDisplaySimple") }}</div>
|
||||
|
|
@ -5171,9 +5162,9 @@ onUnmounted(cleanupPreviewEditor);
|
|||
<div v-if="aiSupportsApiStyle" class="grid grid-cols-3 items-center gap-3">
|
||||
<Label class="text-right text-xs">API</Label>
|
||||
<div class="col-span-2 flex gap-2">
|
||||
<Button size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'border-blue-300 border-2 ring-2 ring-blue-300/50': aiEditApiStyle === 'completions' }" @click="aiSelectApiStyle('completions')">/chat/completions</Button>
|
||||
<Button size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'border-blue-300 border-2 ring-2 ring-blue-300/50': aiEditApiStyle === 'responses' }" @click="aiSelectApiStyle('responses')">/responses</Button>
|
||||
<Button v-if="aiSupportsAnthropicApiStyle" size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'border-blue-300 border-2 ring-2 ring-blue-300/50': aiEditApiStyle === 'anthropic-messages' }" @click="aiSelectApiStyle('anthropic-messages')">/messages</Button>
|
||||
<Button size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'dbx-choice-selected': aiEditApiStyle === 'completions' }" @click="aiSelectApiStyle('completions')">/chat/completions</Button>
|
||||
<Button size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'dbx-choice-selected': aiEditApiStyle === 'responses' }" @click="aiSelectApiStyle('responses')">/responses</Button>
|
||||
<Button v-if="aiSupportsAnthropicApiStyle" size="sm" variant="outline" class="h-8 flex-1 text-xs" :class="{ 'dbx-choice-selected': aiEditApiStyle === 'anthropic-messages' }" @click="aiSelectApiStyle('anthropic-messages')">/messages</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -5320,7 +5311,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
:tabindex="mcpExecutionMode === 'read_only' ? 0 : -1"
|
||||
variant="outline"
|
||||
class="settings-choice-card h-auto justify-center border p-3"
|
||||
:class="mcpExecutionMode === 'read_only' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''"
|
||||
:class="mcpExecutionMode === 'read_only' ? 'dbx-choice-selected' : ''"
|
||||
@click="onMcpExecutionModeChange('read_only')"
|
||||
@keydown="onMcpExecutionModeKeydown($event, 'read_only')"
|
||||
>
|
||||
|
|
@ -5335,7 +5326,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
:tabindex="mcpExecutionMode === 'safe_write' ? 0 : -1"
|
||||
variant="outline"
|
||||
class="settings-choice-card h-auto justify-center border p-3"
|
||||
:class="mcpExecutionMode === 'safe_write' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''"
|
||||
:class="mcpExecutionMode === 'safe_write' ? 'dbx-choice-selected' : ''"
|
||||
@click="onMcpExecutionModeChange('safe_write')"
|
||||
@keydown="onMcpExecutionModeKeydown($event, 'safe_write')"
|
||||
>
|
||||
|
|
@ -5351,7 +5342,7 @@ onUnmounted(cleanupPreviewEditor);
|
|||
:tabindex="mcpExecutionMode === 'high_risk_write' ? 0 : -1"
|
||||
variant="outline"
|
||||
class="settings-choice-card h-auto justify-center border p-3"
|
||||
:class="mcpExecutionMode === 'high_risk_write' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''"
|
||||
:class="mcpExecutionMode === 'high_risk_write' ? 'dbx-choice-selected' : ''"
|
||||
@click="onMcpExecutionModeChange('high_risk_write')"
|
||||
@keydown="onMcpExecutionModeKeydown($event, 'high_risk_write')"
|
||||
>
|
||||
|
|
@ -5856,34 +5847,6 @@ onUnmounted(cleanupPreviewEditor);
|
|||
}
|
||||
}
|
||||
|
||||
.settings-category-button--active {
|
||||
background-color: rgb(23, 23, 23) !important;
|
||||
color: rgb(255, 255, 255) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.settings-choice-button {
|
||||
color: rgb(23, 23, 23);
|
||||
}
|
||||
|
||||
.settings-choice-button--selected {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
background-color: rgba(59, 130, 246, 0.1) !important;
|
||||
color: rgb(29, 78, 216) !important;
|
||||
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45) !important;
|
||||
}
|
||||
|
||||
.settings-choice-button--selected svg {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.settings-choice-card--selected {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
background-color: rgba(59, 130, 246, 0.04) !important;
|
||||
color: rgb(23, 23, 23) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45) !important;
|
||||
}
|
||||
|
||||
.settings-appearance-top-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
|
@ -5928,27 +5891,4 @@ onUnmounted(cleanupPreviewEditor);
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .settings-category-button--active {
|
||||
background-color: rgb(245, 245, 245) !important;
|
||||
color: rgb(23, 23, 23) !important;
|
||||
}
|
||||
|
||||
.dark .settings-choice-button {
|
||||
color: rgb(245, 245, 245);
|
||||
}
|
||||
|
||||
.dark .settings-choice-button--selected {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
background-color: rgba(96, 165, 250, 0.18) !important;
|
||||
color: rgb(191, 219, 254) !important;
|
||||
box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .settings-choice-card--selected {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
background-color: rgba(96, 165, 250, 0.12) !important;
|
||||
color: rgb(245, 245, 245) !important;
|
||||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.45) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3307,7 +3307,7 @@ onMounted(async () => {
|
|||
textUnderlineOffset: "3px",
|
||||
},
|
||||
".cm-sql-semantic-warning": {
|
||||
textDecoration: "underline wavy hsl(var(--warning, 38 92% 50%))",
|
||||
textDecoration: "underline wavy var(--warning)",
|
||||
textUnderlineOffset: "3px",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -394,24 +394,24 @@ async function initJsonEditor() {
|
|||
minHeight: "260px",
|
||||
maxHeight: "360px",
|
||||
fontSize: "12px",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--radius-md)",
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
color: "hsl(var(--foreground))",
|
||||
backgroundColor: "var(--background)",
|
||||
color: "var(--foreground)",
|
||||
},
|
||||
".cm-scroller": {
|
||||
fontFamily: "var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
},
|
||||
".cm-gutters": {
|
||||
backgroundColor: "hsl(var(--muted) / 0.35)",
|
||||
color: "hsl(var(--muted-foreground))",
|
||||
borderRight: "1px solid hsl(var(--border))",
|
||||
backgroundColor: "color-mix(in srgb, var(--muted) 35%, transparent)",
|
||||
color: "var(--muted-foreground)",
|
||||
borderRight: "1px solid var(--border)",
|
||||
},
|
||||
".cm-activeLine, .cm-activeLineGutter": {
|
||||
backgroundColor: "hsl(var(--muted) / 0.45)",
|
||||
backgroundColor: "color-mix(in srgb, var(--muted) 45%, transparent)",
|
||||
},
|
||||
".cm-focused": {
|
||||
outline: "2px solid hsl(var(--ring) / 0.35)",
|
||||
outline: "2px solid color-mix(in srgb, var(--ring) 35%, transparent)",
|
||||
outlineOffset: "1px",
|
||||
},
|
||||
}),
|
||||
|
|
@ -564,10 +564,10 @@ onBeforeUnmount(() => {
|
|||
<div class="space-y-2">
|
||||
<Label>{{ t("settings.sqlFormatterIndent") }}</Label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Button type="button" variant="outline" class="justify-center" :class="!settings.useTabs ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="updateOption('useTabs', false)">
|
||||
<Button type="button" variant="outline" class="justify-center" :class="!settings.useTabs ? 'dbx-choice-selected' : ''" @click="updateOption('useTabs', false)">
|
||||
{{ t("settings.sqlFormatterIndentSpaces") }}
|
||||
</Button>
|
||||
<Button type="button" variant="outline" class="justify-center" :class="settings.useTabs ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="updateOption('useTabs', true)">
|
||||
<Button type="button" variant="outline" class="justify-center" :class="settings.useTabs ? 'dbx-choice-selected' : ''" @click="updateOption('useTabs', true)">
|
||||
{{ t("settings.sqlFormatterIndentTabs") }}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@ import { tableInfoTabForDrawerToggle } from "@/lib/table/tableInfoTabPreference"
|
|||
import * as api from "@/lib/backend/api";
|
||||
import { formatElapsedSeconds } from "@/lib/common/elapsedTime";
|
||||
import { dataGridCellDisplayText, dataGridCellEditorText } from "@/lib/dataGrid/dataGridCellCoercion";
|
||||
import { dataGridActiveRowBackground } from "@/lib/dataGrid/dataGridPaintTheme";
|
||||
import { createColumnDrafts } from "@/lib/table/tableStructureEditorState";
|
||||
import type { BuildSingleColumnAlterSqlOptions } from "@/lib/table/tableStructureEditorSql";
|
||||
import { buildTableSelectSql, quoteTableDataIdentifier } from "@/lib/table/tableSelectSql";
|
||||
|
|
@ -139,7 +138,7 @@ import { canGoNextDataGridPage, hasCompleteLocalDataGridResult, resolveDataGridP
|
|||
import { dataGridCountQueryOptions } from "@/lib/dataGrid/dataGridQueryOptions";
|
||||
import { dataGridBottomScrollTop, dataGridScrollPosition, isDataGridAtScrollBottom, isDataGridNearScrollBottom, shouldCheckInfiniteScrollAfterScroll, type DataGridScrollPosition } from "@/lib/dataGrid/dataGridInfiniteScroll";
|
||||
import { CANVAS_DATA_GRID_ROW_HEIGHT, canvasDataGridActionReservedWidth, dataGridSearchMatchKey, drawCanvasDataGrid } from "@/lib/dataGrid/canvasDataGridRenderer";
|
||||
import { DATA_GRID_DARK_STRIPED_ROW_BG, DATA_GRID_LIGHT_STRIPED_ROW_BG } from "@/lib/dataGrid/dataGridPaintTheme";
|
||||
import { DATA_GRID_DARK_ROW_NUMBER_BG, DATA_GRID_DARK_STRIPED_ROW_BG, DATA_GRID_LIGHT_STRIPED_ROW_BG, dataGridActiveRowBackground } from "@/lib/dataGrid/dataGridPaintTheme";
|
||||
import { createRowLowerTextCache } from "@/lib/dataGrid/dataGridRowLowerText";
|
||||
import { dataGridPreviewLabelKey, dataGridSaveActionMode, dataGridSaveToolbarState } from "@/lib/dataGrid/dataGridSaveUi";
|
||||
import type { QueryEditabilityReason } from "@/lib/sql/sqlAnalysis";
|
||||
|
|
@ -4374,16 +4373,16 @@ function isNull(value: unknown): boolean {
|
|||
|
||||
function rowNumberStatusClass(item: RowItem): string {
|
||||
if (item.status === "draft") {
|
||||
return "border-muted-foreground/20 bg-muted/20 font-semibold text-muted-foreground";
|
||||
return "data-grid-row-number--status-draft font-semibold";
|
||||
}
|
||||
if (item.status === "new") {
|
||||
return "border-emerald-500/40 bg-emerald-500/15 font-semibold text-emerald-700 dark:text-emerald-300";
|
||||
return "data-grid-row-number--status-new font-semibold";
|
||||
}
|
||||
if (item.status === "edited") {
|
||||
return "border-amber-500/40 bg-amber-500/15 font-semibold text-amber-700 dark:text-amber-300";
|
||||
return "data-grid-row-number--status-edited font-semibold";
|
||||
}
|
||||
if (item.status === "deleted") {
|
||||
return "border-destructive/40 bg-destructive/15 font-semibold text-destructive line-through";
|
||||
return "data-grid-row-number--status-deleted font-semibold line-through";
|
||||
}
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
|
|
@ -4394,53 +4393,27 @@ function rowCellsUseSelectionVisual(rowId: number): boolean {
|
|||
|
||||
function dataGridRowStyle(item: RowItem): CSSProperties {
|
||||
const dark = isDark.value || (typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
|
||||
const activeRowBg = dataGridActiveRowBackground(dark);
|
||||
const rowBg = item.isDeleted
|
||||
? dark
|
||||
? "rgb(55, 31, 32)"
|
||||
: "rgb(255, 244, 244)"
|
||||
const deletedBg = "var(--color-error-bg, color-mix(in srgb, var(--destructive) 12%, transparent))";
|
||||
const newBg = "var(--success-bg, color-mix(in srgb, var(--success) 12%, transparent))";
|
||||
const editedBg = "var(--warning-bg, color-mix(in srgb, var(--warning) 14%, transparent))";
|
||||
const activeBg = `var(--data-grid-cell-active-bg, ${dataGridActiveRowBackground(dark)})`;
|
||||
const resolvedRowBg = item.isDeleted
|
||||
? deletedBg
|
||||
: isRowActive(item.displayIndex)
|
||||
? activeRowBg
|
||||
: item.isNew
|
||||
? dark
|
||||
? "rgb(51, 51, 55)"
|
||||
: "rgb(243, 243, 243)"
|
||||
: item.isDraft
|
||||
? dark
|
||||
? "rgb(51, 51, 55)"
|
||||
: "rgb(243, 243, 243)"
|
||||
: item.displayIndex % 2 === 1
|
||||
? `var(--data-grid-row-muted-bg, ${dark ? DATA_GRID_DARK_STRIPED_ROW_BG : DATA_GRID_LIGHT_STRIPED_ROW_BG})`
|
||||
: dark
|
||||
? "rgb(19, 20, 22)"
|
||||
: "rgb(255, 255, 255)";
|
||||
const rowNumberBg =
|
||||
item.status === "new"
|
||||
? dark
|
||||
? "rgb(33, 45, 40)"
|
||||
: "rgb(219, 244, 233)"
|
||||
: item.status === "edited"
|
||||
? dark
|
||||
? "rgb(48, 41, 28)"
|
||||
: "rgb(253, 241, 219)"
|
||||
: item.status === "deleted"
|
||||
? dark
|
||||
? "rgb(55, 31, 32)"
|
||||
: "rgb(255, 244, 244)"
|
||||
: isRowActive(item.displayIndex) && !item.isDeleted
|
||||
? activeRowBg
|
||||
: dark
|
||||
? "rgb(35, 37, 42)"
|
||||
: "rgb(255, 255, 255)";
|
||||
? activeBg
|
||||
: item.isNew || item.isDraft
|
||||
? "color-mix(in srgb, var(--muted) 80%, var(--background))"
|
||||
: item.displayIndex % 2 === 1
|
||||
? `var(--data-grid-row-muted-bg, ${dark ? DATA_GRID_DARK_STRIPED_ROW_BG : DATA_GRID_LIGHT_STRIPED_ROW_BG})`
|
||||
: "var(--background)";
|
||||
const rowNumberBg = item.status === "new" ? newBg : item.status === "edited" ? editedBg : item.status === "deleted" ? deletedBg : isRowActive(item.displayIndex) && !item.isDeleted ? activeBg : dark ? DATA_GRID_DARK_ROW_NUMBER_BG : "var(--background)";
|
||||
return {
|
||||
"--data-grid-cell-bg": rowBg,
|
||||
"--data-grid-cell-bg": resolvedRowBg,
|
||||
"--data-grid-row-number-bg": rowNumberBg,
|
||||
"--data-grid-cell-selected-bg": dark ? "rgb(20, 40, 60)" : "rgb(239, 246, 255)",
|
||||
"--data-grid-cell-selected-single-bg": dark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)",
|
||||
"--data-grid-cell-selected-dirty-bg": dark ? "rgb(76, 66, 38)" : "rgb(235, 224, 184)",
|
||||
"--data-grid-cell-selected-border": dark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)",
|
||||
"--data-grid-row-number-active-bg": activeRowBg,
|
||||
"--data-grid-row-number-selected-bg": dark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)",
|
||||
// Keep selection fill/border from [data-grid-root] tokens (primary/ring mix).
|
||||
// Do not flatten them to --accent/--border — that erases outline contrast.
|
||||
"--data-grid-cell-selected-dirty-bg": editedBg,
|
||||
"--data-grid-row-number-active-bg": activeBg,
|
||||
} as CSSProperties;
|
||||
}
|
||||
|
||||
|
|
@ -7989,8 +7962,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
<div
|
||||
class="sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-background px-3 py-0 font-medium truncate"
|
||||
:class="{
|
||||
'bg-yellow-200/60 dark:bg-yellow-500/20': transposeHeaderIsSearchMatch(visibleColumnIndexes[index]),
|
||||
'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': transposeHeaderIsCurrentMatch(visibleColumnIndexes[index]),
|
||||
'cell-search-match': transposeHeaderIsSearchMatch(visibleColumnIndexes[index]),
|
||||
'cell-current-search-match': transposeHeaderIsCurrentMatch(visibleColumnIndexes[index]),
|
||||
}"
|
||||
:style="{ width: `${transposePinnedWidth}px` }"
|
||||
:title="item.column"
|
||||
|
|
@ -8009,11 +7982,11 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
'row-cell-selected': transposeRecordUsesSelectionVisual(cell.recordIndex) && !transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'row-cell-selected-dirty': transposeRecordUsesSelectionVisual(cell.recordIndex) && !transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'bg-primary/15': transposeRecordUsesActiveHighlight(cell.recordIndex) && !transposeRecordUsesSelectionVisual(cell.recordIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex] && !transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
|
||||
'bg-yellow-500/10 cell-dirty': displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'bg-yellow-200/60 dark:bg-yellow-500/20': cellIsSearchMatch(cell.recordIndex, cell.valueIndex),
|
||||
'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': cellIsCurrentMatch(cell.recordIndex, cell.valueIndex),
|
||||
'cell-dirty': displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
|
||||
'cell-search-match': cellIsSearchMatch(cell.recordIndex, cell.valueIndex),
|
||||
'cell-current-search-match': cellIsCurrentMatch(cell.recordIndex, cell.valueIndex),
|
||||
'cursor-text': !isScrolling && canEditCellItem(displayItems[cell.recordIndex], cell.valueIndex),
|
||||
'hover:bg-gray-200 dark:hover:bg-gray-800':
|
||||
'hover:bg-accent':
|
||||
!isScrolling && canEditCellItem(displayItems[cell.recordIndex], cell.valueIndex) && !transposeRecordUsesSelectionVisual(cell.recordIndex) && !transposeRecordUsesActiveHighlight(cell.recordIndex) && !transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
|
||||
}"
|
||||
:style="{ width: `${getTransposeRecordWidth(cell.recordIndex)}px` }"
|
||||
|
|
@ -8661,17 +8634,15 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
'data-grid-cell--frozen-separator': frozenColumnCount > 0 && col.visibleColIdx === frozenColumnCount - 1,
|
||||
'text-right': columnAligns[col.visibleColIdx] === 'right',
|
||||
'text-muted-foreground italic': isNull(item.data[col.actualColIdx]),
|
||||
'bg-yellow-500/10 cell-dirty': item.isDirtyCol[col.actualColIdx],
|
||||
'cell-dirty': item.isDirtyCol[col.actualColIdx],
|
||||
'cell-selected': cellIsSelected(item.displayIndex, col.visibleColIdx) && !item.isDirtyCol[col.actualColIdx],
|
||||
'cell-selected-dirty': cellIsSelected(item.displayIndex, col.visibleColIdx) && item.isDirtyCol[col.actualColIdx],
|
||||
'row-cell-selected': rowCellsUseSelectionVisual(item.id) && !cellIsSelected(item.displayIndex, col.visibleColIdx) && !item.isDirtyCol[col.actualColIdx],
|
||||
'row-cell-selected-dirty': rowCellsUseSelectionVisual(item.id) && !cellIsSelected(item.displayIndex, col.visibleColIdx) && item.isDirtyCol[col.actualColIdx],
|
||||
'cell-search-match': cellIsSearchMatch(item.displayIndex, col.actualColIdx),
|
||||
'cell-current-search-match': cellIsCurrentMatch(item.displayIndex, col.actualColIdx),
|
||||
'bg-yellow-200/60 dark:bg-yellow-500/20': cellIsSearchMatch(item.displayIndex, col.actualColIdx),
|
||||
'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': cellIsCurrentMatch(item.displayIndex, col.actualColIdx),
|
||||
'tabular-nums': typeof item.data[col.actualColIdx] === 'number',
|
||||
'cursor-text hover:bg-gray-200 dark:hover:bg-gray-800': !isScrolling && canEditCellItem(item, col.actualColIdx),
|
||||
'cursor-text hover:bg-accent': !isScrolling && canEditCellItem(item, col.actualColIdx),
|
||||
'line-through': item.isDeleted,
|
||||
'overflow-visible z-20 border-r-transparent': editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx,
|
||||
'overflow-hidden': !(editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx),
|
||||
|
|
@ -8928,8 +8899,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
<div class="min-w-0 flex-1">
|
||||
<div class="font-medium truncate">{{ index.name }}</div>
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
<span v-if="index.is_primary" class="rounded bg-amber-500/10 px-1.5 py-0.5 text-amber-600">PK</span>
|
||||
<span v-if="index.is_unique" class="rounded bg-emerald-500/10 px-1.5 py-0.5 text-emerald-600">UNIQUE</span>
|
||||
<span v-if="index.is_primary" class="rounded bg-warning-bg px-1.5 py-0.5 text-warning">PK</span>
|
||||
<span v-if="index.is_unique" class="rounded bg-success-bg px-1.5 py-0.5 text-success">UNIQUE</span>
|
||||
<span v-if="index.index_type" class="rounded bg-muted px-1.5 py-0.5 text-muted-foreground">{{ index.index_type }}</span>
|
||||
</div>
|
||||
<div class="mt-2 font-mono text-[11px] text-muted-foreground break-all">
|
||||
|
|
@ -9323,74 +9294,32 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
@reference "../../styles/globals.css";
|
||||
|
||||
[data-grid-root] {
|
||||
--data-grid-row-muted-bg: rgb(240, 240, 240);
|
||||
--data-grid-row-new-bg: rgb(243, 243, 243);
|
||||
--data-grid-row-deleted-bg: rgb(255, 244, 244);
|
||||
--data-grid-cell-active-bg: rgb(244, 248, 255);
|
||||
--data-grid-cell-dirty-bg: rgb(255, 248, 230);
|
||||
--data-grid-cell-selected-bg: rgb(239, 246, 255);
|
||||
--data-grid-cell-selected-single-bg: rgb(191, 219, 254);
|
||||
--data-grid-cell-selected-dirty-bg: rgb(235, 224, 184);
|
||||
--data-grid-cell-selected-border: rgb(59, 130, 246);
|
||||
--data-grid-cell-hover-bg: rgb(245, 245, 245);
|
||||
--data-grid-cell-search-bg: rgb(253, 245, 184);
|
||||
--data-grid-cell-current-search-bg: rgba(253, 224, 71, 0.52);
|
||||
--data-grid-cell-current-search-border: rgba(234, 179, 8, 0.82);
|
||||
--data-grid-row-number-default-bg: rgb(255, 255, 255);
|
||||
--data-grid-row-number-new-bg: rgb(219, 244, 233);
|
||||
--data-grid-row-number-edited-bg: rgb(253, 241, 219);
|
||||
--data-grid-row-number-deleted-bg: rgb(255, 244, 244);
|
||||
--data-grid-row-number-active-bg: rgb(244, 248, 255);
|
||||
--data-grid-row-number-selected-bg: rgb(191, 219, 254);
|
||||
--data-grid-scrollbar-thumb: color-mix(in oklch, var(--foreground) 30%, transparent);
|
||||
--data-grid-scrollbar-thumb-hover: color-mix(in oklch, var(--foreground) 48%, transparent);
|
||||
/* Status / selection chrome — derived from theme tokens so palettes stay in sync. */
|
||||
--data-grid-row-muted-bg: color-mix(in srgb, var(--muted) 92%, var(--foreground));
|
||||
--data-grid-row-new-bg: color-mix(in srgb, var(--muted) 80%, var(--background));
|
||||
--data-grid-row-deleted-bg: var(--color-error-bg, color-mix(in srgb, var(--destructive) 12%, transparent));
|
||||
--data-grid-cell-active-bg: color-mix(in srgb, var(--info) 10%, var(--background));
|
||||
--data-grid-cell-dirty-bg: var(--warning-bg, color-mix(in srgb, var(--warning) 14%, transparent));
|
||||
--data-grid-cell-selected-bg: color-mix(in srgb, var(--primary) 12%, var(--accent));
|
||||
--data-grid-cell-selected-single-bg: color-mix(in srgb, var(--primary) 22%, var(--accent));
|
||||
--data-grid-cell-selected-dirty-bg: color-mix(in srgb, var(--warning) 22%, var(--accent));
|
||||
/* Prefer ring/primary so the outline stays visible on the selected fill. */
|
||||
--data-grid-cell-selected-border: color-mix(in srgb, var(--ring) 55%, var(--primary));
|
||||
--data-grid-cell-selected-single-border: var(--primary);
|
||||
--data-grid-cell-hover-bg: var(--accent);
|
||||
--data-grid-cell-search-bg: var(--warning-bg, color-mix(in srgb, var(--warning) 18%, transparent));
|
||||
--data-grid-cell-current-search-bg: color-mix(in srgb, var(--warning) 35%, transparent);
|
||||
--data-grid-cell-current-search-border: var(--warning);
|
||||
--data-grid-row-number-default-bg: var(--background);
|
||||
--data-grid-row-number-new-bg: var(--success-bg, color-mix(in srgb, var(--success) 12%, transparent));
|
||||
--data-grid-row-number-edited-bg: var(--warning-bg, color-mix(in srgb, var(--warning) 14%, transparent));
|
||||
--data-grid-row-number-deleted-bg: var(--color-error-bg, color-mix(in srgb, var(--destructive) 12%, transparent));
|
||||
--data-grid-row-number-active-bg: var(--data-grid-cell-active-bg);
|
||||
--data-grid-row-number-selected-bg: var(--data-grid-cell-selected-single-bg);
|
||||
--data-grid-scrollbar-thumb: color-mix(in srgb, var(--foreground) 30%, transparent);
|
||||
--data-grid-scrollbar-thumb-hover: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||||
--data-grid-scrollbar-track: transparent;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
[data-grid-root].data-grid--dark,
|
||||
:global(.dark) [data-grid-root] {
|
||||
--data-grid-row-muted-bg: rgb(40, 40, 43);
|
||||
--data-grid-row-new-bg: rgb(51, 51, 55);
|
||||
--data-grid-row-deleted-bg: rgb(55, 31, 32);
|
||||
--data-grid-cell-active-bg: rgb(25, 34, 46);
|
||||
--data-grid-cell-dirty-bg: rgb(94, 75, 26);
|
||||
--data-grid-cell-selected-bg: rgb(20, 40, 60);
|
||||
--data-grid-cell-selected-single-bg: rgb(30, 64, 96);
|
||||
--data-grid-cell-selected-dirty-bg: rgb(76, 66, 38);
|
||||
--data-grid-cell-selected-border: rgb(96, 165, 250);
|
||||
--data-grid-cell-hover-bg: rgb(46, 47, 51);
|
||||
--data-grid-cell-search-bg: rgb(72, 57, 8);
|
||||
--data-grid-cell-current-search-bg: rgb(116, 87, 0);
|
||||
--data-grid-cell-current-search-border: rgb(239, 177, 0);
|
||||
--data-grid-row-number-default-bg: rgb(35, 37, 42);
|
||||
--data-grid-row-number-new-bg: rgb(33, 45, 40);
|
||||
--data-grid-row-number-edited-bg: rgb(48, 41, 28);
|
||||
--data-grid-row-number-deleted-bg: rgb(55, 31, 32);
|
||||
--data-grid-row-number-active-bg: rgb(25, 34, 46);
|
||||
--data-grid-row-number-selected-bg: rgb(30, 64, 96);
|
||||
--data-grid-scrollbar-thumb: rgb(82, 82, 91);
|
||||
--data-grid-scrollbar-thumb-hover: rgb(113, 113, 122);
|
||||
--data-grid-scrollbar-track: rgb(24, 24, 27);
|
||||
background-color: rgb(19, 20, 22);
|
||||
}
|
||||
|
||||
@supports (background: color-mix(in oklab, white 50%, transparent)) {
|
||||
[data-grid-root] {
|
||||
--data-grid-row-muted-bg: color-mix(in oklab, var(--muted) 99%, var(--foreground));
|
||||
--data-grid-row-new-bg: color-mix(in oklab, var(--primary) 5%, transparent);
|
||||
--data-grid-row-deleted-bg: color-mix(in oklab, var(--destructive) 5%, transparent);
|
||||
--data-grid-cell-dirty-bg: color-mix(in oklab, rgb(240 177 0) 10%, transparent);
|
||||
--data-grid-cell-selected-bg: color-mix(in oklab, rgb(59 130 246) 12%, var(--background));
|
||||
--data-grid-cell-selected-single-bg: color-mix(in oklab, rgb(59 130 246) 30%, var(--background));
|
||||
--data-grid-cell-selected-dirty-bg: color-mix(in oklab, rgb(234 181 50) 30%, color-mix(in oklab, rgb(59 130 246) 18%, var(--background)));
|
||||
--data-grid-cell-selected-border: color-mix(in oklab, rgb(59 130 246) 75%, transparent);
|
||||
--data-grid-cell-hover-bg: color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
--data-grid-row-number-new-bg: color-mix(in oklab, rgb(16 185 129) 15%, var(--background));
|
||||
--data-grid-row-number-edited-bg: color-mix(in oklab, rgb(245 158 11) 15%, var(--background));
|
||||
--data-grid-row-number-deleted-bg: color-mix(in oklab, var(--destructive) 15%, var(--background));
|
||||
--data-grid-row-number-selected-bg: color-mix(in oklab, rgb(59 130 246) 30%, var(--background));
|
||||
}
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.data-grid-header-shell {
|
||||
|
|
@ -9400,36 +9329,28 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
}
|
||||
|
||||
.data-grid-header-cell {
|
||||
background-color: rgb(239, 239, 239);
|
||||
background-color: color-mix(in srgb, var(--muted) 88%, var(--background));
|
||||
}
|
||||
|
||||
[data-grid-root].data-grid--dark .data-grid-header-cell,
|
||||
:global(.dark) [data-grid-root] .data-grid-header-cell {
|
||||
background-color: rgb(32, 32, 34) !important;
|
||||
background-color: color-mix(in srgb, var(--muted) 70%, var(--background));
|
||||
}
|
||||
|
||||
[data-grid-root].data-grid--dark .data-grid-header-row,
|
||||
:global(.dark) [data-grid-root] .data-grid-header-row {
|
||||
color: rgb(215, 215, 219);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
[data-grid-root].data-grid--dark .data-grid-header-cell:hover,
|
||||
:global(.dark) [data-grid-root] .data-grid-header-cell:hover {
|
||||
background-color: rgb(46, 47, 51) !important;
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.data-grid-header-cell--selected {
|
||||
background-color: var(--data-grid-cell-selected-single-bg) !important;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] {
|
||||
--data-grid-cell-selected-bg: rgb(20, 40, 60);
|
||||
--data-grid-cell-selected-single-bg: rgb(30, 64, 96);
|
||||
--data-grid-cell-selected-dirty-bg: rgb(76, 66, 38);
|
||||
--data-grid-cell-selected-border: rgb(96, 165, 250);
|
||||
--data-grid-row-number-selected-bg: rgb(30, 64, 96);
|
||||
}
|
||||
|
||||
[data-grid-root].data-grid--dark .data-grid-header-cell--selected,
|
||||
[data-grid-root].data-grid--dark .transpose-record-header-selected,
|
||||
[data-grid-root].data-grid--dark .transpose-record-header-active,
|
||||
|
|
@ -9437,7 +9358,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
:global(.dark) [data-grid-root] .transpose-record-header-selected,
|
||||
:global(.dark) [data-grid-root] .transpose-record-header-active {
|
||||
background-color: var(--data-grid-cell-selected-single-bg) !important;
|
||||
color: rgb(244, 244, 245) !important;
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.data-grid-row {
|
||||
|
|
@ -9450,12 +9371,12 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
|
||||
/* 冻结列：不透明背景遮挡滚动的非冻结列；状态 class 的 !important 会覆盖此项 */
|
||||
.data-grid-cell--frozen {
|
||||
background-color: var(--data-grid-cell-bg, rgb(255, 255, 255)) !important;
|
||||
background-color: var(--data-grid-cell-bg, var(--background)) !important;
|
||||
}
|
||||
|
||||
/* 冻结列分隔线：与 Canvas 模式和列头一致（2px 深色右边框） */
|
||||
.data-grid-cell--frozen-separator {
|
||||
border-right: 2px solid rgb(100, 116, 139) !important;
|
||||
border-right: 2px solid color-mix(in srgb, var(--border) 80%, var(--foreground)) !important;
|
||||
}
|
||||
|
||||
.data-grid-row-number {
|
||||
|
|
@ -9908,16 +9829,28 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
background-color: var(--data-grid-cell-selected-dirty-bg) !important;
|
||||
}
|
||||
|
||||
.data-grid-row-number.bg-emerald-500\/15 {
|
||||
.data-grid-row-number--status-draft {
|
||||
border: 1px solid color-mix(in srgb, var(--muted-foreground) 20%, transparent);
|
||||
background-color: color-mix(in srgb, var(--muted) 20%, transparent);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.data-grid-row-number--status-new {
|
||||
border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
|
||||
background-color: var(--data-grid-row-number-new-bg);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.data-grid-row-number.bg-amber-500\/15 {
|
||||
.data-grid-row-number--status-edited {
|
||||
border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
|
||||
background-color: var(--data-grid-row-number-edited-bg);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.data-grid-row-number.bg-destructive\/15 {
|
||||
.data-grid-row-number--status-deleted {
|
||||
border: 1px solid color-mix(in srgb, var(--destructive) 40%, transparent);
|
||||
background-color: var(--data-grid-row-number-deleted-bg);
|
||||
color: var(--destructive);
|
||||
}
|
||||
|
||||
.active-row > .data-grid-row-number {
|
||||
|
|
@ -9931,35 +9864,10 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
|
|||
}
|
||||
|
||||
.cell-selected {
|
||||
color: hsl(var(--foreground));
|
||||
color: var(--foreground);
|
||||
background-color: var(--data-grid-cell-selected-single-bg) !important;
|
||||
}
|
||||
|
||||
.cell-selected {
|
||||
@apply outline outline-primary -outline-offset-1;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] .cell-selected,
|
||||
:global(.dark) [data-grid-root] .row-cell-selected {
|
||||
color: rgb(244, 244, 245) !important;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] .cell-selected {
|
||||
background-color: var(--data-grid-cell-selected-single-bg) !important;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] .row-cell-selected {
|
||||
background-color: var(--data-grid-cell-selected-bg) !important;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] .cell-selected-dirty,
|
||||
:global(.dark) [data-grid-root] .row-cell-selected-dirty {
|
||||
background-color: var(--data-grid-cell-selected-dirty-bg) !important;
|
||||
}
|
||||
|
||||
:global(.dark) [data-grid-root] .cell-selected,
|
||||
:global(.dark) [data-grid-root] .cell-selected-dirty {
|
||||
outline-color: var(--data-grid-cell-selected-border) !important;
|
||||
outline: 1px solid var(--data-grid-cell-selected-border);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.ddl-code :deep(.ddl-kw) {
|
||||
|
|
|
|||
|
|
@ -335,7 +335,9 @@ function databaseOptionIsProduction(database: string): boolean {
|
|||
:search-placeholder="t('editor.searchConnection')"
|
||||
:empty-text="t('grid.noSearchResults')"
|
||||
:loading-text="t('common.loading')"
|
||||
trigger-variant="ghost"
|
||||
trigger-class="font-medium text-foreground"
|
||||
trigger-icon-class="h-3 w-3"
|
||||
:display-name="connectionDisplayName"
|
||||
list-class="w-96 max-w-[calc(100vw-2rem)]"
|
||||
item-class="min-h-9 h-auto py-1"
|
||||
|
|
@ -376,7 +378,9 @@ function databaseOptionIsProduction(database: string): boolean {
|
|||
:loading-text="t('common.loading')"
|
||||
:loading="loadingDatabaseOptions[activeConnection?.id || '']"
|
||||
:display-name="databaseDisplayName"
|
||||
trigger-variant="ghost"
|
||||
trigger-class="gap-1.5"
|
||||
trigger-icon-class="h-3 w-3"
|
||||
@update:model-value="(database) => emit('changeDatabase', database)"
|
||||
@update:open="
|
||||
(open: boolean) => {
|
||||
|
|
@ -419,7 +423,9 @@ function databaseOptionIsProduction(database: string): boolean {
|
|||
:loading-text="t('common.loading')"
|
||||
:loading="!!activeConnection && isLoadingSchemas(activeConnection.id, schemaDatabaseKey)"
|
||||
:clear-selected-option="supportsClearableQuerySchema(activeConnection?.db_type)"
|
||||
trigger-variant="ghost"
|
||||
trigger-class="gap-1.5"
|
||||
trigger-icon-class="h-3 w-3"
|
||||
@update:model-value="(schema) => emit('changeSchema', schema || undefined)"
|
||||
@update:open="
|
||||
(open: boolean) => {
|
||||
|
|
|
|||
|
|
@ -984,15 +984,15 @@ onUnmounted(() => {
|
|||
--monitor-muted: var(--color-text-secondary, var(--color-muted-foreground, #64748b));
|
||||
--monitor-faint: var(--color-text-tertiary, color-mix(in srgb, var(--monitor-muted) 72%, transparent));
|
||||
--monitor-hover: color-mix(in srgb, var(--color-hover, var(--color-muted, #f4f4f5)) 72%, var(--monitor-accent) 7%);
|
||||
--monitor-accent: #0f766e;
|
||||
--monitor-accent-soft: rgb(15 118 110 / 0.1);
|
||||
--monitor-accent-border: rgb(15 118 110 / 0.22);
|
||||
--monitor-success: #15803d;
|
||||
--monitor-success-soft: rgb(21 128 61 / 0.1);
|
||||
--monitor-warning: #b45309;
|
||||
--monitor-warning-soft: rgb(180 83 9 / 0.12);
|
||||
--monitor-danger: #b91c1c;
|
||||
--monitor-danger-soft: rgb(185 28 28 / 0.1);
|
||||
--monitor-accent: var(--info);
|
||||
--monitor-accent-soft: var(--info-bg);
|
||||
--monitor-accent-border: color-mix(in srgb, var(--info) 22%, transparent);
|
||||
--monitor-success: var(--success);
|
||||
--monitor-success-soft: var(--success-bg);
|
||||
--monitor-warning: var(--warning);
|
||||
--monitor-warning-soft: var(--warning-bg);
|
||||
--monitor-danger: var(--destructive);
|
||||
--monitor-danger-soft: color-mix(in srgb, var(--destructive) 10%, transparent);
|
||||
--monitor-shadow: 0 18px 38px -28px rgb(15 23 42 / 0.42);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -1003,20 +1003,20 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
:global(.dark) .monitoring-panel {
|
||||
--monitor-panel-bg: color-mix(in srgb, var(--color-background, #131416) 90%, #0f766e 4%);
|
||||
--monitor-panel-bg: color-mix(in srgb, var(--color-background, #131416) 90%, var(--info) 4%);
|
||||
--monitor-surface: color-mix(in srgb, var(--color-card, #1b1b1e) 94%, #ffffff 2%);
|
||||
--monitor-surface-raised: color-mix(in srgb, var(--monitor-surface) 92%, #0f766e 8%);
|
||||
--monitor-surface-raised: color-mix(in srgb, var(--monitor-surface) 92%, var(--info) 8%);
|
||||
--monitor-border: color-mix(in srgb, var(--color-border, rgb(110 110 114 / 0.28)) 82%, transparent);
|
||||
--monitor-border-strong: color-mix(in srgb, var(--monitor-border) 76%, #2dd4bf 24%);
|
||||
--monitor-accent: #2dd4bf;
|
||||
--monitor-accent-soft: rgb(45 212 191 / 0.12);
|
||||
--monitor-accent-border: rgb(45 212 191 / 0.24);
|
||||
--monitor-success: #4ade80;
|
||||
--monitor-success-soft: rgb(74 222 128 / 0.12);
|
||||
--monitor-warning: #f59e0b;
|
||||
--monitor-warning-soft: rgb(245 158 11 / 0.14);
|
||||
--monitor-danger: #f87171;
|
||||
--monitor-danger-soft: rgb(248 113 113 / 0.12);
|
||||
--monitor-border-strong: color-mix(in srgb, var(--monitor-border) 76%, var(--info) 24%);
|
||||
--monitor-accent: var(--info);
|
||||
--monitor-accent-soft: var(--info-bg);
|
||||
--monitor-accent-border: color-mix(in srgb, var(--info) 24%, transparent);
|
||||
--monitor-success: var(--success);
|
||||
--monitor-success-soft: var(--success-bg);
|
||||
--monitor-warning: var(--warning);
|
||||
--monitor-warning-soft: var(--warning-bg);
|
||||
--monitor-danger: var(--destructive);
|
||||
--monitor-danger-soft: color-mix(in srgb, var(--destructive) 12%, transparent);
|
||||
--monitor-shadow: 0 18px 42px -28px rgb(0 0 0 / 0.72);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -761,8 +761,8 @@ watch(
|
|||
}
|
||||
|
||||
.badge-info {
|
||||
background: color-mix(in srgb, #3b82f6 18%, transparent);
|
||||
color: #2563eb;
|
||||
background: var(--color-info-alpha);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.badge-muted {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
.mq-btn-primary {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #fff;
|
||||
color: var(--color-primary-foreground);
|
||||
}
|
||||
|
||||
.mq-btn-secondary:hover:not(:disabled),
|
||||
|
|
|
|||
|
|
@ -2700,7 +2700,7 @@ function getObjectBrowserMenuItems(item: ObjectBrowserRow): ContextMenuItem[] {
|
|||
'bg-primary/10': sidePanelRow?.id === item.id && !selectedTableIds.has(item.id),
|
||||
'bg-primary/5': selectedTableIds.has(item.id),
|
||||
}"
|
||||
:style="{ gridTemplateColumns, boxShadow: sidePanelRow?.id === item.id && !selectedTableIds.has(item.id) ? 'inset 3px 0 0 hsl(var(--primary))' : undefined }"
|
||||
:style="{ gridTemplateColumns, boxShadow: sidePanelRow?.id === item.id && !selectedTableIds.has(item.id) ? 'inset 3px 0 0 var(--primary)' : undefined }"
|
||||
@click="onRowClick(item, $event)"
|
||||
@contextmenu="onContextMenu"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ watch([policyKey, () => groups.value.allowed.length], () => {
|
|||
:tabindex="scopeMode === 'all' ? 0 : -1"
|
||||
variant="outline"
|
||||
class="settings-choice-card h-auto justify-center border p-3"
|
||||
:class="[scopeMode === 'all' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : '', disabled ? 'cursor-not-allowed opacity-50' : '']"
|
||||
:class="[scopeMode === 'all' ? 'dbx-choice-selected' : '', disabled ? 'cursor-not-allowed opacity-50' : '']"
|
||||
@click="setScopeMode('all')"
|
||||
@keydown="onScopeModeKeydown($event, 'all')"
|
||||
>
|
||||
|
|
@ -177,7 +177,7 @@ watch([policyKey, () => groups.value.allowed.length], () => {
|
|||
:tabindex="scopeMode === 'selected' ? 0 : -1"
|
||||
variant="outline"
|
||||
class="settings-choice-card h-auto justify-center border p-3"
|
||||
:class="[scopeMode === 'selected' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : '', disabled ? 'cursor-not-allowed opacity-50' : '']"
|
||||
:class="[scopeMode === 'selected' ? 'dbx-choice-selected' : '', disabled ? 'cursor-not-allowed opacity-50' : '']"
|
||||
@click="setScopeMode('selected')"
|
||||
@keydown="onScopeModeKeydown($event, 'selected')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ describe("McpConnectionScopePicker", () => {
|
|||
return node.type === "button" && node.props["class"]?.includes("settings-choice-card");
|
||||
});
|
||||
|
||||
expect(modeButtons.find((node) => node.props["data-scope-mode"] === "all")?.props["class"]?.includes("settings-choice-card--selected")).toBe(true);
|
||||
expect(modeButtons.find((node) => node.props["data-scope-mode"] === "all")?.props["class"]?.includes("dbx-choice-selected")).toBe(true);
|
||||
expect(modeButtons.find((node) => node.props["data-scope-mode"] === "all")?.props.role).toBe("radio");
|
||||
expect(modeButtons.find((node) => node.props["data-scope-mode"] === "all")?.props["aria-checked"]).toBe(true);
|
||||
expect(modeButtons.find((node) => node.props["data-scope-mode"] === "selected")?.props.tabindex).toBe(-1);
|
||||
|
|
|
|||
|
|
@ -714,8 +714,8 @@ const tableSearchStyle = computed(() => {
|
|||
return {
|
||||
paddingLeft: paddingLeft.value,
|
||||
"--tree-table-search-row-bg": rowBackgroundColor,
|
||||
"--tree-table-search-input-bg": color ? hexToRgba(color, isActiveConnectionScope.value ? 0.05 : 0.03) : "hsl(var(--background) / 0.56)",
|
||||
"--tree-table-search-border": color ? hexToRgba(color, isActiveConnectionScope.value ? 0.12 : 0.08) : "hsl(var(--border) / 0.36)",
|
||||
"--tree-table-search-input-bg": color ? hexToRgba(color, isActiveConnectionScope.value ? 0.05 : 0.03) : "color-mix(in srgb, var(--background) 56%, transparent)",
|
||||
"--tree-table-search-border": color ? hexToRgba(color, isActiveConnectionScope.value ? 0.12 : 0.08) : "color-mix(in srgb, var(--border) 36%, transparent)",
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -1339,33 +1339,29 @@ function onKeydown(event: KeyboardEvent) {
|
|||
/* Multi-selection treats every selected row as equal; keep focus neutral. */
|
||||
.tree-item-active--selection-set:focus {
|
||||
background-color: var(--tree-connection-active-bg, rgb(235 235 235)) !important;
|
||||
box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.14);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 14%, transparent);
|
||||
}
|
||||
:root.dark .tree-item-active--selection-set:focus {
|
||||
background-color: var(--tree-connection-active-bg, rgb(36 36 36)) !important;
|
||||
box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.18);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent);
|
||||
}
|
||||
|
||||
/* Locate highlight: instant amber, then fade on removal */
|
||||
/* Locate highlight: instant warning tint, then fade on removal */
|
||||
.tree-item-highlight {
|
||||
background-color: rgb(253 225 167) !important;
|
||||
background-color: oklch(0.92 0.08 85) !important;
|
||||
background-color: var(--warning-bg) !important;
|
||||
transition: background-color 0.28s ease-out;
|
||||
}
|
||||
|
||||
:root.dark .tree-item-highlight {
|
||||
background-color: rgb(110 67 0) !important;
|
||||
background-color: oklch(0.42 0.12 80) !important;
|
||||
background-color: var(--warning-bg) !important;
|
||||
transition: background-color 0.28s ease-out;
|
||||
}
|
||||
|
||||
.tree-item-connection-tint.tree-item-highlight::before {
|
||||
background-color: rgb(253 225 167) !important;
|
||||
background-color: oklch(0.92 0.08 85) !important;
|
||||
background-color: var(--warning-bg) !important;
|
||||
}
|
||||
|
||||
:root.dark .tree-item-connection-tint.tree-item-highlight::before {
|
||||
background-color: rgb(110 67 0) !important;
|
||||
background-color: oklch(0.42 0.12 80) !important;
|
||||
background-color: var(--warning-bg) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3302,7 +3302,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="!sqlPreviewCollapsed" class="min-h-0 flex-1 overflow-auto p-2.5">
|
||||
<div v-if="hasSqliteTypeChange" class="mb-2 flex gap-1.5 rounded-md border border-blue-300/40 bg-blue-500/10 px-[var(--structure-cell-px)] py-[var(--structure-cell-py)] text-[length:var(--structure-font-size)] text-blue-700 dark:text-blue-300">
|
||||
<div v-if="hasSqliteTypeChange" class="mb-2 flex gap-1.5 rounded-md border border-primary/40 bg-primary/10 px-[var(--structure-cell-px)] py-[var(--structure-cell-py)] text-[length:var(--structure-font-size)] text-primary">
|
||||
<Info :class="[structureIconClass, 'mt-0.5 shrink-0']" />
|
||||
<span>{{ t("structureEditor.sqliteRebuildNotice") }}</span>
|
||||
</div>
|
||||
|
|
@ -3335,7 +3335,7 @@ watch([activeTab, ddlLoading], ([tab, loading]) => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* --primary is rgb/oklch; use color-mix like DataGrid, not hsl(var(--primary)). */
|
||||
/* --primary is rgb/oklch; use color-mix like DataGrid, not channel-based hsl wrappers. */
|
||||
.structure-column-search-match > td:first-child {
|
||||
box-shadow: inset 3px 0 0 color-mix(in oklab, var(--primary) 55%, transparent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,8 +42,8 @@ const props = withDefaults(
|
|||
clearable: false,
|
||||
clearSelectedOption: false,
|
||||
loadingText: "Loading...",
|
||||
triggerVariant: "ghost",
|
||||
triggerIconClass: "h-3 w-3",
|
||||
triggerVariant: "outline",
|
||||
triggerIconClass: "size-4 text-muted-foreground",
|
||||
displayName: (option: string) => option,
|
||||
optionTooltip: () => undefined,
|
||||
normalizeCustom: (value: string) => value,
|
||||
|
|
@ -78,7 +78,7 @@ const selectedLabel = computed(() => {
|
|||
|
||||
const triggerBaseClass = computed(() =>
|
||||
props.triggerVariant === "outline"
|
||||
? "dbx-searchable-select-trigger h-6 w-auto max-w-56 min-w-0 justify-between gap-1 px-2 text-xs font-normal shadow-none"
|
||||
? "dbx-searchable-select-trigger dbx-control-chrome h-8 w-full min-w-0 justify-between gap-1.5 border border-input bg-transparent px-2.5 text-sm font-normal shadow-none hover:bg-muted/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
|
||||
: "h-6 w-auto max-w-56 min-w-0 justify-between gap-1 border-0 bg-transparent px-1 text-xs font-normal shadow-none hover:bg-muted/50 focus-visible:ring-0",
|
||||
);
|
||||
|
||||
|
|
@ -335,37 +335,6 @@ function handleKeydown(event: KeyboardEvent) {
|
|||
</template>
|
||||
|
||||
<style>
|
||||
.dbx-searchable-select-trigger {
|
||||
border: 1px solid rgb(229, 229, 229) !important;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dbx-searchable-select-trigger:hover {
|
||||
background-color: rgb(250, 250, 250) !important;
|
||||
}
|
||||
|
||||
.dbx-searchable-select-trigger[aria-expanded="true"],
|
||||
.dbx-searchable-select-trigger:focus-visible {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger:hover {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-searchable-select-trigger[aria-expanded="true"],
|
||||
.dark .dbx-searchable-select-trigger:focus-visible {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
|
||||
}
|
||||
|
||||
.dbx-searchable-select-list {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in oklch, var(--foreground) 30%, transparent) transparent;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
|||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'dbx-select-trigger border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
'dbx-select-trigger dbx-control-chrome border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
|
|
@ -31,36 +31,3 @@ const forwardedProps = useForwardProps(delegatedProps);
|
|||
</SelectIcon>
|
||||
</SelectTrigger>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent) {
|
||||
border: 1px solid rgb(229, 229, 229) !important;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
|
||||
background-color: rgb(250, 250, 250) !important;
|
||||
}
|
||||
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
|
||||
.dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
|
||||
border-color: rgb(96, 165, 250) !important;
|
||||
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent) {
|
||||
border-color: rgba(255, 255, 255, 0.14) !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):hover {
|
||||
background-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent)[data-state="open"],
|
||||
.dark .dbx-select-trigger:not(.border-0):not(.border-transparent):focus-visible {
|
||||
border-color: rgb(147, 197, 253) !important;
|
||||
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.24) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
position: relative;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(120, 120, 128, 0.22) !important;
|
||||
background-color: rgb(229, 229, 229) !important;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
|
||||
background-color: var(--input) !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -69,8 +69,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
.dbx-switch-thumb {
|
||||
display: block !important;
|
||||
border-radius: 9999px;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
|
||||
background-color: var(--background) !important;
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 18%, transparent);
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
|
|
@ -87,8 +87,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
.dbx-switch[data-state="checked"],
|
||||
.dbx-switch[data-checked],
|
||||
.dbx-switch[aria-checked="true"] {
|
||||
border-color: rgb(23, 23, 23) !important;
|
||||
background-color: rgb(23, 23, 23) !important;
|
||||
border-color: var(--primary) !important;
|
||||
background-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-size="default"][data-state="checked"] .dbx-switch-thumb,
|
||||
|
|
@ -103,21 +103,27 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||
transform: translateX(10px) !important;
|
||||
}
|
||||
|
||||
.dbx-switch[data-state="checked"] .dbx-switch-thumb,
|
||||
.dbx-switch[data-checked] .dbx-switch-thumb,
|
||||
.dbx-switch[aria-checked="true"] .dbx-switch-thumb {
|
||||
background-color: var(--primary-foreground) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch {
|
||||
border-color: rgba(255, 255, 255, 0.16) !important;
|
||||
background-color: rgba(255, 255, 255, 0.18) !important;
|
||||
border-color: color-mix(in srgb, var(--border) 90%, transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--input) 80%, transparent) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch[data-state="checked"],
|
||||
.dark .dbx-switch[data-checked],
|
||||
.dark .dbx-switch[aria-checked="true"] {
|
||||
border-color: rgb(245, 245, 245) !important;
|
||||
background-color: rgb(245, 245, 245) !important;
|
||||
border-color: var(--primary) !important;
|
||||
background-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.dark .dbx-switch[data-state="checked"] .dbx-switch-thumb,
|
||||
.dark .dbx-switch[data-checked] .dbx-switch-thumb,
|
||||
.dark .dbx-switch[aria-checked="true"] .dbx-switch-thumb {
|
||||
background-color: rgb(23, 23, 23) !important;
|
||||
background-color: var(--primary-foreground) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,34 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { DATA_GRID_DARK_ACTIVE_ROW_BG, DATA_GRID_LIGHT_ACTIVE_ROW_BG, dataGridActiveRowBackground, resolveDataGridPaintTheme } from "@/lib/dataGrid/dataGridPaintTheme";
|
||||
|
||||
function parseRgb(value: string): { r: number; g: number; b: number } | null {
|
||||
const match = value.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
|
||||
if (!match) return null;
|
||||
return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]) };
|
||||
}
|
||||
|
||||
function relativeLuminance(rgb: { r: number; g: number; b: number }): number {
|
||||
const channel = (value: number) => {
|
||||
const s = value / 255;
|
||||
return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
|
||||
};
|
||||
return 0.2126 * channel(rgb.r) + 0.7152 * channel(rgb.g) + 0.0722 * channel(rgb.b);
|
||||
}
|
||||
|
||||
function contrastRatio(a: string, b: string): number {
|
||||
const left = parseRgb(a);
|
||||
const right = parseRgb(b);
|
||||
if (!left || !right) return 0;
|
||||
const l1 = relativeLuminance(left);
|
||||
const l2 = relativeLuminance(right);
|
||||
const lighter = Math.max(l1, l2);
|
||||
const darker = Math.min(l1, l2);
|
||||
return (lighter + 0.05) / (darker + 0.05);
|
||||
}
|
||||
|
||||
describe("data grid paint theme", () => {
|
||||
it("uses a subtle blue active-row surface in both color schemes", () => {
|
||||
it("uses a subtle active-row surface fallback in both color schemes", () => {
|
||||
expect(dataGridActiveRowBackground(false)).toBe(DATA_GRID_LIGHT_ACTIVE_ROW_BG);
|
||||
expect(dataGridActiveRowBackground(true)).toBe(DATA_GRID_DARK_ACTIVE_ROW_BG);
|
||||
|
||||
|
|
@ -12,4 +38,91 @@ describe("data grid paint theme", () => {
|
|||
expect(resolveDataGridPaintTheme({ getVar: emptyCssVariable, isDark: true }).cellActive).toBe(DATA_GRID_DARK_ACTIVE_ROW_BG);
|
||||
expect(resolveDataGridPaintTheme({ getVar: emptyCssVariable, isDark: true }).rowNumberActive).toBe(DATA_GRID_DARK_ACTIVE_ROW_BG);
|
||||
});
|
||||
|
||||
it("reads semantic success/warning tokens when present", () => {
|
||||
const vars: Record<string, string> = {
|
||||
"--background": "rgb(255, 255, 255)",
|
||||
"--foreground": "rgb(10, 10, 10)",
|
||||
"--muted-foreground": "rgb(115, 115, 115)",
|
||||
"--primary": "rgb(23, 23, 23)",
|
||||
"--destructive": "rgb(231, 0, 11)",
|
||||
"--accent": "rgb(245, 245, 245)",
|
||||
"--border": "rgb(229, 229, 229)",
|
||||
"--muted": "rgb(245, 245, 245)",
|
||||
"--success": "rgb(22, 163, 74)",
|
||||
"--warning": "rgb(217, 119, 6)",
|
||||
"--success-bg": "rgb(220, 252, 231)",
|
||||
"--warning-bg": "rgb(254, 243, 199)",
|
||||
"--color-error-bg": "rgb(254, 226, 226)",
|
||||
};
|
||||
|
||||
const theme = resolveDataGridPaintTheme({
|
||||
getVar: (name) => vars[name] ?? "",
|
||||
isDark: false,
|
||||
});
|
||||
|
||||
expect(theme.rowNumberTextNew).toBe("rgb(22, 163, 74)");
|
||||
expect(theme.rowNumberTextEdited).toBe("rgb(217, 119, 6)");
|
||||
expect(theme.rowNumberNew).toBe("rgb(220, 252, 231)");
|
||||
expect(theme.cellDirty).toBe("rgb(254, 243, 199)");
|
||||
expect(theme.rowDeleted).toBe("rgb(254, 226, 226)");
|
||||
});
|
||||
|
||||
it("derives selection border from ring/primary instead of the low-contrast border token", () => {
|
||||
const vars: Record<string, string> = {
|
||||
"--background": "rgb(255, 255, 255)",
|
||||
"--foreground": "rgb(10, 10, 10)",
|
||||
"--muted-foreground": "rgb(115, 115, 115)",
|
||||
"--primary": "rgb(23, 23, 23)",
|
||||
"--destructive": "rgb(231, 0, 11)",
|
||||
"--accent": "rgb(226, 226, 226)",
|
||||
"--border": "rgb(229, 229, 229)",
|
||||
"--ring": "rgb(23, 23, 23)",
|
||||
"--muted": "rgb(245, 245, 245)",
|
||||
};
|
||||
|
||||
const theme = resolveDataGridPaintTheme({
|
||||
getVar: (name) => vars[name] ?? "",
|
||||
isDark: false,
|
||||
});
|
||||
|
||||
expect(theme.cellSelectedBorder).toBe("rgb(23, 23, 23)");
|
||||
expect(theme.cellSelectedBorder).not.toBe(vars["--border"]);
|
||||
expect(contrastRatio(theme.cellSelectedBorder, theme.cellSelected)).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it("honors an explicit --data-grid-cell-selected-border token when provided", () => {
|
||||
const vars: Record<string, string> = {
|
||||
"--background": "rgb(255, 255, 255)",
|
||||
"--foreground": "rgb(10, 10, 10)",
|
||||
"--muted-foreground": "rgb(115, 115, 115)",
|
||||
"--primary": "rgb(23, 23, 23)",
|
||||
"--destructive": "rgb(231, 0, 11)",
|
||||
"--accent": "rgb(226, 226, 226)",
|
||||
"--border": "rgb(229, 229, 229)",
|
||||
"--ring": "rgb(161, 161, 161)",
|
||||
"--muted": "rgb(245, 245, 245)",
|
||||
"--data-grid-cell-selected-border": "rgb(37, 99, 235)",
|
||||
};
|
||||
|
||||
const theme = resolveDataGridPaintTheme({
|
||||
getVar: (name) => vars[name] ?? "",
|
||||
isDark: false,
|
||||
});
|
||||
|
||||
expect(theme.cellSelectedBorder).toBe("rgb(37, 99, 235)");
|
||||
});
|
||||
});
|
||||
|
||||
describe("dbx-control-chrome cascade contract", () => {
|
||||
it("keeps chrome defaults layered and low-specificity so invalid/focus utilities can win", () => {
|
||||
const css = readFileSync(new URL("../../../styles/globals.css", import.meta.url), "utf8");
|
||||
const chromeBlockStart = css.indexOf("Shared control chrome defaults");
|
||||
expect(chromeBlockStart).toBeGreaterThanOrEqual(0);
|
||||
const chromeSlice = css.slice(chromeBlockStart - 40, chromeBlockStart + 1600);
|
||||
expect(chromeSlice).toMatch(/@layer components/);
|
||||
expect(chromeSlice).toMatch(/:where\(\.dbx-control-chrome\)/);
|
||||
expect(chromeSlice).toMatch(/\[aria-invalid="true"\]/);
|
||||
expect(chromeSlice).not.toMatch(/box-shadow:\s*none/);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -30,13 +30,14 @@ describe("dataGridRuntime", () => {
|
|||
});
|
||||
|
||||
it("keeps runtime modules independent from the DataGrid component", () => {
|
||||
const sourceRoots = [join(process.cwd(), "apps/desktop/src/lib/dataGrid"), join(process.cwd(), "apps/desktop/src/composables")];
|
||||
const repoRoot = process.cwd().replace(/[\\/]apps[\\/]desktop$/, "");
|
||||
const sourceRoots = [join(repoRoot, "apps/desktop/src/lib/dataGrid"), join(repoRoot, "apps/desktop/src/composables")];
|
||||
const sourceFiles: string[] = [];
|
||||
const visit = (directory: string) => {
|
||||
for (const entry of readdirSync(directory, { withFileTypes: true })) {
|
||||
const path = join(directory, entry.name);
|
||||
if (entry.isDirectory()) visit(path);
|
||||
else if (entry.name.endsWith(".ts") && (!directory.endsWith("/composables") || entry.name.startsWith("useDataGrid"))) sourceFiles.push(path);
|
||||
else if (entry.name.endsWith(".ts") && (!directory.endsWith("composables") || entry.name.startsWith("useDataGrid"))) sourceFiles.push(path);
|
||||
}
|
||||
};
|
||||
sourceRoots.forEach(visit);
|
||||
|
|
|
|||
|
|
@ -246,26 +246,33 @@ export function resolveDataGridPaintTheme(options: { getVar: (name: string) => s
|
|||
const primary = cssVarColor(getVar, "--primary", isDark ? "rgb(208, 208, 214)" : "rgb(23, 23, 23)");
|
||||
const destructive = cssVarColor(getVar, "--destructive", isDark ? "rgb(243, 98, 95)" : "rgb(231, 0, 11)");
|
||||
const accent = cssVarColor(getVar, "--accent", isDark ? "rgb(46, 47, 51)" : "rgb(245, 245, 245)");
|
||||
const activeSurface = dataGridActiveRowBackground(isDark);
|
||||
const success = cssVarColor(getVar, "--success", isDark ? "rgb(74, 222, 128)" : "rgb(22, 163, 74)");
|
||||
const warning = cssVarColor(getVar, "--warning", isDark ? "rgb(251, 191, 36)" : "rgb(217, 119, 6)");
|
||||
const successBg = paintToken(getVar, "--success-bg", isDark ? DATA_GRID_DARK_ROW_NUMBER_NEW_BG : DATA_GRID_LIGHT_ROW_NUMBER_NEW_BG);
|
||||
const warningBg = paintToken(getVar, "--warning-bg", isDark ? DATA_GRID_DARK_ROW_NUMBER_EDITED_BG : DATA_GRID_LIGHT_ROW_NUMBER_EDITED_BG);
|
||||
const destructiveBg = paintToken(getVar, "--color-error-bg", isDark ? DATA_GRID_DARK_ROW_NUMBER_DELETED_BG : DATA_GRID_LIGHT_ROW_NUMBER_DELETED_BG);
|
||||
const activeSurface = paintToken(getVar, "--data-grid-cell-active-bg", dataGridActiveRowBackground(isDark));
|
||||
const rowMuted = isDark ? DATA_GRID_DARK_STRIPED_ROW_BG : DATA_GRID_LIGHT_STRIPED_ROW_BG;
|
||||
const rowNew = isDark ? "rgb(51, 51, 55)" : "rgb(243, 243, 243)";
|
||||
const rowDeleted = isDark ? "rgb(55, 31, 32)" : "rgb(255, 244, 244)";
|
||||
const rowNew = paintToken(getVar, "--muted", isDark ? "rgb(51, 51, 55)" : "rgb(243, 243, 243)");
|
||||
const rowDeleted = destructiveBg;
|
||||
const cellActive = activeSurface;
|
||||
const cellDirty = isDark ? "rgb(94, 75, 26)" : "rgb(255, 248, 230)";
|
||||
const cellSelected = isDark ? "rgb(20, 40, 60)" : "rgb(239, 246, 255)";
|
||||
const cellSelectedDirty = isDark ? "rgb(76, 66, 38)" : "rgb(235, 224, 184)";
|
||||
const cellSelectedBorder = isDark ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)";
|
||||
const cellSelectedSingle = isDark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)";
|
||||
const cellDirty = warningBg;
|
||||
const cellSelected = paintToken(getVar, "--accent", isDark ? "rgb(20, 40, 60)" : "rgb(239, 246, 255)");
|
||||
const cellSelectedDirty = warningBg;
|
||||
// Selection outline must stay readable on the selected fill (WCAG non-text ~3:1).
|
||||
// Prefer ring/primary over the generic border token, which is often near the fill.
|
||||
const cellSelectedBorder = paintToken(getVar, "--ring", isDark ? "rgb(96, 165, 250)" : primary);
|
||||
const cellSelectedSingle = paintToken(getVar, "--muted", isDark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)");
|
||||
const cellHover = accent;
|
||||
const cellSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : "rgb(253, 245, 184)";
|
||||
const cellCurrentSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.current : "rgba(253, 224, 71, 0.52)";
|
||||
const cellCurrentSearchBorder = isDark ? DATA_GRID_DARK_SEARCH_COLORS.currentBorder : "rgba(234, 179, 8, 0.82)";
|
||||
const cellSearch = paintToken(getVar, "--warning-bg", isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : "rgb(253, 245, 184)");
|
||||
const cellCurrentSearch = paintToken(getVar, "--warning-bg", isDark ? DATA_GRID_DARK_SEARCH_COLORS.current : "rgba(253, 224, 71, 0.52)");
|
||||
const cellCurrentSearchBorder = paintToken(getVar, "--warning", isDark ? DATA_GRID_DARK_SEARCH_COLORS.currentBorder : "rgba(234, 179, 8, 0.82)");
|
||||
const rowNumberDefault = isDark ? DATA_GRID_DARK_ROW_NUMBER_BG : paintToken(getVar, "--data-grid-row-number-default-bg", "rgb(255, 255, 255)");
|
||||
const rowNumberNew = isDark ? DATA_GRID_DARK_ROW_NUMBER_NEW_BG : DATA_GRID_LIGHT_ROW_NUMBER_NEW_BG;
|
||||
const rowNumberEdited = isDark ? DATA_GRID_DARK_ROW_NUMBER_EDITED_BG : DATA_GRID_LIGHT_ROW_NUMBER_EDITED_BG;
|
||||
const rowNumberDeleted = isDark ? DATA_GRID_DARK_ROW_NUMBER_DELETED_BG : DATA_GRID_LIGHT_ROW_NUMBER_DELETED_BG;
|
||||
const rowNumberNew = successBg;
|
||||
const rowNumberEdited = warningBg;
|
||||
const rowNumberDeleted = destructiveBg;
|
||||
const rowNumberActive = activeSurface;
|
||||
const rowNumberSelected = isDark ? "rgb(30, 64, 96)" : "rgb(191, 219, 254)";
|
||||
const rowNumberSelected = cellSelectedSingle;
|
||||
|
||||
return {
|
||||
background,
|
||||
|
|
@ -273,29 +280,29 @@ export function resolveDataGridPaintTheme(options: { getVar: (name: string) => s
|
|||
foreground,
|
||||
mutedForeground,
|
||||
primary,
|
||||
rowMuted: isDark ? rowMuted : paintToken(getVar, "--data-grid-row-muted-bg", rowMuted),
|
||||
rowNew: isDark ? rowNew : paintToken(getVar, "--data-grid-row-new-bg", rowNew),
|
||||
rowDeleted: isDark ? rowDeleted : paintToken(getVar, "--data-grid-row-deleted-bg", rowDeleted),
|
||||
cellActive: isDark ? cellActive : paintToken(getVar, "--data-grid-cell-active-bg", cellActive),
|
||||
cellDirty: isDark ? cellDirty : paintToken(getVar, "--data-grid-cell-dirty-bg", cellDirty),
|
||||
cellSelected: isDark ? cellSelected : paintToken(getVar, "--data-grid-cell-selected-bg", cellSelected),
|
||||
cellSelectedDirty: isDark ? cellSelectedDirty : paintToken(getVar, "--data-grid-cell-selected-dirty-bg", cellSelectedDirty),
|
||||
cellSelectedBorder: isDark ? cellSelectedBorder : paintToken(getVar, "--data-grid-cell-selected-border", cellSelectedBorder),
|
||||
cellSelectedSingle: isDark ? cellSelectedSingle : paintToken(getVar, "--data-grid-cell-selected-single-bg", cellSelectedSingle),
|
||||
cellSelectedSingleBorder: isDark ? primary : paintToken(getVar, "--data-grid-cell-selected-single-border", primary),
|
||||
cellHover: isDark ? cellHover : paintToken(getVar, "--data-grid-cell-hover-bg", cellHover),
|
||||
cellSearch: isDark ? cellSearch : paintToken(getVar, "--data-grid-cell-search-bg", cellSearch),
|
||||
cellCurrentSearch: isDark ? cellCurrentSearch : paintToken(getVar, "--data-grid-cell-current-search-bg", cellCurrentSearch),
|
||||
cellCurrentSearchBorder: isDark ? cellCurrentSearchBorder : paintToken(getVar, "--data-grid-cell-current-search-border", cellCurrentSearchBorder),
|
||||
rowMuted: paintToken(getVar, "--data-grid-row-muted-bg", rowMuted),
|
||||
rowNew: paintToken(getVar, "--data-grid-row-new-bg", rowNew),
|
||||
rowDeleted: paintToken(getVar, "--data-grid-row-deleted-bg", rowDeleted),
|
||||
cellActive: paintToken(getVar, "--data-grid-cell-active-bg", cellActive),
|
||||
cellDirty: paintToken(getVar, "--data-grid-cell-dirty-bg", cellDirty),
|
||||
cellSelected: paintToken(getVar, "--data-grid-cell-selected-bg", cellSelected),
|
||||
cellSelectedDirty: paintToken(getVar, "--data-grid-cell-selected-dirty-bg", cellSelectedDirty),
|
||||
cellSelectedBorder: paintToken(getVar, "--data-grid-cell-selected-border", cellSelectedBorder),
|
||||
cellSelectedSingle: paintToken(getVar, "--data-grid-cell-selected-single-bg", cellSelectedSingle),
|
||||
cellSelectedSingleBorder: paintToken(getVar, "--data-grid-cell-selected-single-border", primary),
|
||||
cellHover: paintToken(getVar, "--data-grid-cell-hover-bg", cellHover),
|
||||
cellSearch: paintToken(getVar, "--data-grid-cell-search-bg", cellSearch),
|
||||
cellCurrentSearch: paintToken(getVar, "--data-grid-cell-current-search-bg", cellCurrentSearch),
|
||||
cellCurrentSearchBorder: paintToken(getVar, "--data-grid-cell-current-search-border", cellCurrentSearchBorder),
|
||||
rowNumberDefault,
|
||||
rowNumberNew: isDark ? rowNumberNew : paintToken(getVar, "--data-grid-row-number-new-bg", rowNumberNew),
|
||||
rowNumberEdited: isDark ? rowNumberEdited : paintToken(getVar, "--data-grid-row-number-edited-bg", rowNumberEdited),
|
||||
rowNumberDeleted: isDark ? rowNumberDeleted : paintToken(getVar, "--data-grid-row-number-deleted-bg", rowNumberDeleted),
|
||||
rowNumberActive: isDark ? rowNumberActive : paintToken(getVar, "--data-grid-row-number-active-bg", rowNumberActive),
|
||||
rowNumberSelected: isDark ? rowNumberSelected : paintToken(getVar, "--data-grid-row-number-selected-bg", rowNumberSelected),
|
||||
rowNumberNew: paintToken(getVar, "--data-grid-row-number-new-bg", rowNumberNew),
|
||||
rowNumberEdited: paintToken(getVar, "--data-grid-row-number-edited-bg", rowNumberEdited),
|
||||
rowNumberDeleted: paintToken(getVar, "--data-grid-row-number-deleted-bg", rowNumberDeleted),
|
||||
rowNumberActive: paintToken(getVar, "--data-grid-row-number-active-bg", rowNumberActive),
|
||||
rowNumberSelected: paintToken(getVar, "--data-grid-row-number-selected-bg", rowNumberSelected),
|
||||
rowNumberTextClean: mutedForeground,
|
||||
rowNumberTextNew: isDark ? "rgb(94, 233, 181)" : "rgb(0, 122, 85)",
|
||||
rowNumberTextEdited: isDark ? "rgb(255, 210, 48)" : "rgb(187, 77, 0)",
|
||||
rowNumberTextNew: success,
|
||||
rowNumberTextEdited: warning,
|
||||
rowNumberTextDeleted: destructive,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,8 +68,19 @@
|
|||
/* Aliases for legacy MQ panel styles (used across components/mq/*). */
|
||||
--color-error: var(--destructive);
|
||||
--color-error-bg: color-mix(in srgb, var(--destructive) 10%, transparent);
|
||||
--color-error-alpha: var(--color-error-bg);
|
||||
--color-success: var(--success);
|
||||
--color-success-bg: var(--success-bg);
|
||||
--color-success-alpha: var(--success-bg);
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-bg: var(--warning-bg);
|
||||
--color-warning-alpha: var(--warning-bg);
|
||||
--color-info: var(--info);
|
||||
--color-info-bg: var(--info-bg);
|
||||
--color-info-alpha: var(--info-bg);
|
||||
--color-hover: var(--accent);
|
||||
--color-background-secondary: var(--muted);
|
||||
--color-text: var(--foreground);
|
||||
--color-text-secondary: var(--muted-foreground);
|
||||
--color-text-tertiary: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
|
||||
--color-border-light: color-mix(in srgb, var(--border) 60%, transparent);
|
||||
|
|
@ -136,6 +147,21 @@
|
|||
--sidebar-accent-foreground: rgb(23 23 23);
|
||||
--sidebar-border: rgb(229 229 229);
|
||||
--sidebar-ring: rgb(161 161 161);
|
||||
--success: rgb(22 163 74);
|
||||
--success-foreground: rgb(240 253 244);
|
||||
--success-bg: color-mix(in srgb, var(--success) 12%, transparent);
|
||||
--warning: rgb(217 119 6);
|
||||
--warning-foreground: rgb(255 251 235);
|
||||
--warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
|
||||
--info: rgb(37 99 235);
|
||||
--info-foreground: rgb(239 246 255);
|
||||
--info-bg: color-mix(in srgb, var(--info) 12%, transparent);
|
||||
--dbx-chrome: rgb(245 245 245);
|
||||
--dbx-chrome-muted: rgb(240 240 240);
|
||||
--dbx-content: rgb(255 255 255);
|
||||
--dbx-editor-toolbar: rgb(250 250 250);
|
||||
--dbx-gutter: rgb(243 243 243);
|
||||
--dbx-sidebar-header: rgb(250 250 250);
|
||||
--dbx-window-top-border: rgb(0 0 0 / 0.35);
|
||||
--dbx-viewport-height: 100vh;
|
||||
}
|
||||
|
|
@ -178,6 +204,66 @@
|
|||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
/*
|
||||
* Shared control chrome defaults.
|
||||
* Keep these in @layer components + :where() so Tailwind utilities and
|
||||
* aria-invalid / disabled / caller bg-* hover:* focus rings can override.
|
||||
* Do not set box-shadow here — it would erase focus/invalid rings.
|
||||
*/
|
||||
@layer components {
|
||||
:where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled) {
|
||||
border-color: var(--input);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
:where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled):hover {
|
||||
background-color: color-mix(in srgb, var(--muted) 55%, var(--background));
|
||||
}
|
||||
|
||||
:where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled):focus-visible,
|
||||
:where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled)[data-state="open"],
|
||||
:where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled)[aria-expanded="true"] {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
|
||||
:where(.dark) :where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled) {
|
||||
border-color: var(--input);
|
||||
background-color: color-mix(in srgb, var(--input) 30%, transparent);
|
||||
}
|
||||
|
||||
:where(.dark) :where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled):hover {
|
||||
background-color: color-mix(in srgb, var(--input) 50%, transparent);
|
||||
}
|
||||
|
||||
:where(.dark) :where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled):focus-visible,
|
||||
:where(.dark) :where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled)[data-state="open"],
|
||||
:where(.dark) :where(.dbx-control-chrome):not(.border-0):not(.border-transparent):not([aria-invalid="true"]):not(:disabled)[aria-expanded="true"] {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
}
|
||||
|
||||
.dbx-choice-selected {
|
||||
border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
|
||||
color: var(--primary) !important;
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent) !important;
|
||||
}
|
||||
|
||||
.dbx-choice-selected svg {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.dbx-tile-selected {
|
||||
border-color: var(--primary) !important;
|
||||
background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
|
||||
color: var(--foreground) !important;
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
|
||||
}
|
||||
|
||||
.dbx-tile-selected:hover {
|
||||
background-color: color-mix(in srgb, var(--primary) 14%, transparent) !important;
|
||||
}
|
||||
|
||||
@supports (height: 100dvh) {
|
||||
:root {
|
||||
--dbx-viewport-height: min(100vh, 100dvh);
|
||||
|
|
@ -211,12 +297,27 @@
|
|||
--chart-5: rgb(38 38 38);
|
||||
--sidebar: rgb(25 25 28);
|
||||
--sidebar-foreground: rgb(208 208 213);
|
||||
--sidebar-primary: rgb(20 71 230);
|
||||
--sidebar-primary-foreground: rgb(234 235 239);
|
||||
--sidebar-primary: rgb(208 208 214);
|
||||
--sidebar-primary-foreground: rgb(19 20 22);
|
||||
--sidebar-accent: rgb(44 44 48);
|
||||
--sidebar-accent-foreground: rgb(221 221 226);
|
||||
--sidebar-border: rgb(110 110 114 / 0.28);
|
||||
--sidebar-ring: rgb(133 134 139);
|
||||
--success: rgb(74 222 128);
|
||||
--success-foreground: rgb(20 30 24);
|
||||
--success-bg: color-mix(in srgb, var(--success) 16%, transparent);
|
||||
--warning: rgb(251 191 36);
|
||||
--warning-foreground: rgb(40 32 12);
|
||||
--warning-bg: color-mix(in srgb, var(--warning) 16%, transparent);
|
||||
--info: rgb(96 165 250);
|
||||
--info-foreground: rgb(18 28 46);
|
||||
--info-bg: color-mix(in srgb, var(--info) 16%, transparent);
|
||||
--dbx-chrome: rgb(27 27 30);
|
||||
--dbx-chrome-muted: rgb(32 32 36);
|
||||
--dbx-content: rgb(19 20 22);
|
||||
--dbx-editor-toolbar: rgb(25 25 28);
|
||||
--dbx-gutter: rgb(23 23 25);
|
||||
--dbx-sidebar-header: rgb(25 25 28);
|
||||
--dbx-window-top-border: rgb(255 255 255 / 0.18);
|
||||
}
|
||||
|
||||
|
|
@ -1215,6 +1316,21 @@ html.theme-claude.dark {
|
|||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--success: oklch(0.62 0.17 150);
|
||||
--success-foreground: oklch(0.97 0.02 150);
|
||||
--success-bg: color-mix(in oklch, var(--success) 12%, transparent);
|
||||
--warning: oklch(0.7 0.15 70);
|
||||
--warning-foreground: oklch(0.98 0.02 85);
|
||||
--warning-bg: color-mix(in oklch, var(--warning) 14%, transparent);
|
||||
--info: oklch(0.55 0.18 250);
|
||||
--info-foreground: oklch(0.97 0.02 250);
|
||||
--info-bg: color-mix(in oklch, var(--info) 12%, transparent);
|
||||
--dbx-chrome: oklch(0.97 0 0);
|
||||
--dbx-chrome-muted: oklch(0.95 0 0);
|
||||
--dbx-content: oklch(1 0 0);
|
||||
--dbx-editor-toolbar: oklch(0.985 0 0);
|
||||
--dbx-gutter: oklch(0.965 0 0);
|
||||
--dbx-sidebar-header: oklch(0.985 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -1243,12 +1359,27 @@ html.theme-claude.dark {
|
|||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.215 0.005 285);
|
||||
--sidebar-foreground: oklch(0.86 0.006 285);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.94 0.006 285);
|
||||
--sidebar-primary: oklch(0.86 0.008 285);
|
||||
--sidebar-primary-foreground: oklch(0.19 0.004 285);
|
||||
--sidebar-accent: oklch(0.295 0.006 285);
|
||||
--sidebar-accent-foreground: oklch(0.9 0.006 285);
|
||||
--sidebar-border: oklch(0.54 0.006 285 / 28%);
|
||||
--sidebar-ring: oklch(0.62 0.008 285);
|
||||
--success: oklch(0.78 0.16 150);
|
||||
--success-foreground: oklch(0.22 0.03 150);
|
||||
--success-bg: color-mix(in oklch, var(--success) 16%, transparent);
|
||||
--warning: oklch(0.82 0.15 85);
|
||||
--warning-foreground: oklch(0.28 0.05 85);
|
||||
--warning-bg: color-mix(in oklch, var(--warning) 16%, transparent);
|
||||
--info: oklch(0.75 0.12 250);
|
||||
--info-foreground: oklch(0.25 0.04 250);
|
||||
--info-bg: color-mix(in oklch, var(--info) 16%, transparent);
|
||||
--dbx-chrome: oklch(0.225 0.005 285);
|
||||
--dbx-chrome-muted: oklch(0.25 0.006 285);
|
||||
--dbx-content: oklch(0.19 0.004 285);
|
||||
--dbx-editor-toolbar: oklch(0.215 0.005 285);
|
||||
--dbx-gutter: oklch(0.205 0.004 285);
|
||||
--dbx-sidebar-header: oklch(0.215 0.005 285);
|
||||
}
|
||||
|
||||
html.theme-soft {
|
||||
|
|
@ -1899,46 +2030,40 @@ body.dbx-table-reference-dragging * {
|
|||
cursor: row-resize;
|
||||
}
|
||||
.splitpanes__splitter:hover {
|
||||
background: rgb(39 132 213) !important;
|
||||
background: oklch(0.6 0.15 250) !important;
|
||||
background: var(--ring) !important;
|
||||
}
|
||||
|
||||
/* Panel resize handles */
|
||||
.app-panel-gutter {
|
||||
background: rgb(243 243 243);
|
||||
background: oklch(0.965 0 0);
|
||||
}
|
||||
.dark .app-panel-gutter {
|
||||
background: rgb(23 23 25);
|
||||
background: oklch(0.205 0.004 285);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-panel-gutter {
|
||||
background: var(--dbx-gutter);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-toolbar,
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-tab-bar {
|
||||
.dark .app-panel-gutter {
|
||||
background: var(--dbx-gutter);
|
||||
}
|
||||
.app-toolbar,
|
||||
.app-tab-bar {
|
||||
border-color: var(--border);
|
||||
background: var(--dbx-chrome);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-sidebar-panel {
|
||||
.app-sidebar-panel {
|
||||
color: var(--sidebar-foreground);
|
||||
background: var(--sidebar);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .app-sidebar-panel {
|
||||
.app-layout-classic > .app-sidebar-panel {
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-sidebar-toolbar,
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .connection-tree-search,
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .sticky-database-header {
|
||||
.app-sidebar-toolbar,
|
||||
.connection-tree-search,
|
||||
.sticky-database-header {
|
||||
border-color: var(--sidebar-border);
|
||||
background: var(--dbx-sidebar-header);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-editor-toolbar {
|
||||
.app-editor-toolbar {
|
||||
border-color: var(--border);
|
||||
background: var(--dbx-editor-toolbar);
|
||||
}
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .min-w-0,
|
||||
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .flex-1 {
|
||||
.app-layout-classic > .min-w-0,
|
||||
.app-layout-classic > .flex-1 {
|
||||
background: var(--dbx-content);
|
||||
}
|
||||
html.theme-vscode .app-tab-scroll.wrap-mode .app-tab-pill[data-active-tab="false"] {
|
||||
|
|
@ -1957,8 +2082,7 @@ html.theme-vscode .app-tab-scroll.wrap-mode .app-tab-pill[data-active-tab="false
|
|||
}
|
||||
.app-layout-classic .panel-resize-handle:hover,
|
||||
.app-layout-classic .panel-resize-handle:active {
|
||||
background: rgb(39 132 213);
|
||||
background: oklch(0.6 0.15 250);
|
||||
background: var(--ring);
|
||||
}
|
||||
|
||||
.panel-resize-handle {
|
||||
|
|
|
|||
|
|
@ -36,15 +36,16 @@ test("keeps appearance section spacing and help icons aligned without stacked ma
|
|||
assert.match(settingsDialogSource, /<div class="flex min-w-0 items-center gap-1">\s*<Label class="min-w-0 whitespace-normal leading-tight">\{\{ t\("settings\.dataGridFontFamily"\) \}\}<\/Label>/);
|
||||
});
|
||||
|
||||
test("matches the result grid font selector styling with date and time selectors", () => {
|
||||
test("matches the result grid font selector styling with appearance form controls", () => {
|
||||
const selectorStart = settingsDialogSource.indexOf(`:model-value="editTableFontFamily"`);
|
||||
const selectorEnd = settingsDialogSource.indexOf(`</SearchableSelect>`, selectorStart);
|
||||
const selectorSource = settingsDialogSource.slice(selectorStart, selectorEnd);
|
||||
|
||||
assert.ok(selectorStart >= 0);
|
||||
assert.ok(selectorEnd > selectorStart);
|
||||
assert.match(selectorSource, /trigger-variant="outline"/);
|
||||
assert.match(selectorSource, /trigger-class="h-9 w-full max-w-none justify-between"/);
|
||||
// SearchableSelect defaults to outline; appearance fonts share the h-8 control chrome class.
|
||||
assert.match(selectorSource, /:trigger-class="appearanceFontSearchTriggerClass"/);
|
||||
assert.match(settingsDialogSource, /const fontSearchTriggerClass =\s*"h-8 w-full max-w-none justify-between/);
|
||||
});
|
||||
|
||||
test("uses a table font label in view options without changing the settings label", () => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ test("unused header width keeps the result background", () => {
|
|||
const style = descriptor.styles.map((block) => block.content).join("\n");
|
||||
|
||||
assert.match(style, /\.data-grid-header-shell\s*\{[^}]*background-color:\s*var\(--background\)/s);
|
||||
assert.match(style, /\.data-grid-header-cell\s*\{[^}]*background-color:\s*rgb\(239, 239, 239\)/s);
|
||||
assert.match(style, /\.data-grid-header-cell\s*\{[^}]*background-color:\s*color-mix\(in srgb, var\(--muted\) 88%, var\(--background\)\)/s);
|
||||
assert.doesNotMatch(style, /\.data-grid-header-shell\s*,\s*\.data-grid-header-cell/);
|
||||
assert.doesNotMatch(style, /data-grid--dark\s+\.data-grid-header-shell/);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import assert from "node:assert/strict";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { test } from "vitest";
|
||||
|
||||
test("data grid selection outline uses ring/primary tokens instead of flat border", () => {
|
||||
const source = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
|
||||
assert.match(source, /--data-grid-cell-selected-border:\s*color-mix\(in srgb, var\(--ring\) 55%, var\(--primary\)\)/);
|
||||
assert.doesNotMatch(source, /"--data-grid-cell-selected-border":\s*"var\(--border\)"/);
|
||||
assert.doesNotMatch(source, /"--data-grid-cell-selected-bg":\s*"var\(--accent\)"/);
|
||||
});
|
||||
Loading…
Reference in New Issue