diff --git a/memhub/apps/web/src/EmbeddingSwitchExperience.tsx b/memhub/apps/web/src/EmbeddingSwitchExperience.tsx
index 1391c72..2032d22 100644
--- a/memhub/apps/web/src/EmbeddingSwitchExperience.tsx
+++ b/memhub/apps/web/src/EmbeddingSwitchExperience.tsx
@@ -3,7 +3,7 @@ import type {
EmbeddingSwitchJob,
EmbeddingSwitchPlan,
} from "@one-memory/contracts";
-import { ChevronDown, CircleAlert, Search, X } from "lucide-react";
+import { ChevronDown, CircleAlert, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { deleteRetiredEmbeddingSpace } from "./api";
import { R6Button } from "./R6Controls";
@@ -81,10 +81,13 @@ export function EmbeddingSwitchConfirmDialog({
}, []);
return (
-
+
) : null}
diff --git a/memhub/apps/web/src/embedding-switch.css b/memhub/apps/web/src/embedding-switch.css
index 6fb2333..d49e5cd 100644
--- a/memhub/apps/web/src/embedding-switch.css
+++ b/memhub/apps/web/src/embedding-switch.css
@@ -1,44 +1,21 @@
-.embedding-switch-dialog-layer {
- position: fixed;
- inset: 0;
+.r6-settings-dialog-layer.embedding-switch-dialog-layer {
z-index: 120;
- display: grid;
- place-items: center;
- padding: 24px;
- background: rgb(24 31 36 / 28%);
- backdrop-filter: blur(10px);
}
-.embedding-switch-dialog {
+.r6-settings-dialog.embedding-switch-dialog {
box-sizing: border-box;
- width: min(600px, 100%);
+ width: min(600px, calc(100vw - 40px));
max-height: calc(100vh - 48px);
overflow: auto;
- padding: 28px;
- border: 1px solid #d7dfe5;
- border-radius: 14px;
- background: #fff;
- color: #26343e;
+ color: var(--r6-text);
}
.embedding-switch-dialog > header {
display: flex;
- gap: 14px;
align-items: flex-start;
}
-.embedding-switch-dialog-icon {
- display: grid;
- width: 36px;
- height: 36px;
- flex: 0 0 auto;
- place-items: center;
- border-radius: 9px;
- background: #edf2f5;
- color: #425b6c;
-}
-
-.embedding-switch-dialog h2 {
+.r6-settings-dialog.embedding-switch-dialog h2 {
margin: 0 0 6px;
font-size: 20px;
line-height: 28px;
@@ -47,30 +24,30 @@
.embedding-switch-safety p,
.embedding-switch-dialog header p {
margin: 0;
- color: #61717d;
+ color: var(--r6-muted);
font-size: 13px;
- line-height: 21px;
+ line-height: 22px;
}
.embedding-switch-impact {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 1px;
margin: 22px 0;
- overflow: hidden;
- border: 1px solid #dce3e8;
- border-radius: 10px;
- background: #dce3e8;
+ border-block: 1px solid var(--bd);
}
.embedding-switch-impact > div {
- padding: 14px 16px;
- background: #f8fafb;
+ padding: 14px 16px 14px 0;
+}
+
+.embedding-switch-impact > div + div {
+ padding-left: 16px;
+ border-left: 1px solid var(--bd);
}
.embedding-switch-impact dt,
.embedding-switch-details dt {
- color: #71808b;
+ color: var(--meta-reading);
font-size: 12px;
line-height: 18px;
}
@@ -78,9 +55,10 @@
.embedding-switch-impact dd,
.embedding-switch-details dd {
margin: 3px 0 0;
- color: #26343e;
+ color: var(--r6-text);
font-size: 14px;
font-weight: 600;
+ font-variant-numeric: tabular-nums;
line-height: 21px;
}
@@ -89,8 +67,7 @@
grid-template-columns: 170px minmax(0, 1fr);
gap: 10px 18px;
padding: 18px 0;
- border-top: 1px solid #e2e7eb;
- border-bottom: 1px solid #e2e7eb;
+ border-bottom: 1px solid var(--bd);
}
.embedding-switch-safety strong {
@@ -107,11 +84,16 @@
align-items: center;
gap: 6px;
min-height: 32px;
- color: #526773;
+ color: var(--r6-muted);
font-size: 13px;
cursor: pointer;
}
+.embedding-switch-details summary:focus-visible {
+ outline: 2px solid var(--r6-focus);
+ outline-offset: 2px;
+}
+
.embedding-switch-alert svg {
flex: 0 0 auto;
margin-top: 2px;
@@ -127,8 +109,9 @@
gap: 14px 24px;
margin: 12px 0 0;
padding: 16px;
- border-radius: 9px;
- background: #f6f8f9;
+ border-top: 1px solid var(--bd);
+ border-radius: 0;
+ background: transparent;
}
.embedding-switch-alert {
@@ -138,13 +121,14 @@
margin-top: 16px;
padding: 11px 12px;
border-radius: 8px;
- background: #fff3f1;
- color: #873f38;
+ border: 1px solid var(--dg-bd);
+ background: var(--dg-bg);
+ color: var(--dg);
font-size: 13px;
line-height: 20px;
}
-.embedding-switch-dialog footer {
+.r6-settings-dialog.embedding-switch-dialog footer {
display: flex;
justify-content: flex-end;
gap: 10px;
@@ -155,13 +139,13 @@
.embedding-switch-outcome {
box-sizing: border-box;
display: flex;
- min-height: 58px;
+ min-height: 50px;
align-items: center;
gap: 16px;
- padding: 11px 18px;
- border-bottom: 1px solid #d9e1e6;
- background: #f8fafb;
- color: #2f424f;
+ padding: 9px 18px;
+ border-bottom: 0.5px solid var(--bd);
+ background: var(--panel);
+ color: var(--tx);
}
.embedding-switch-strip-copy,
@@ -174,13 +158,15 @@
.embedding-switch-strip strong,
.embedding-switch-outcome strong {
font-size: 13px;
+ font-weight: 600;
line-height: 19px;
}
.embedding-switch-strip span,
.embedding-switch-outcome span {
- color: #667782;
+ color: var(--tx2);
font-size: 12px;
+ font-variant-numeric: tabular-nums;
line-height: 18px;
}
@@ -189,24 +175,24 @@
flex: 1;
overflow: hidden;
border-radius: 999px;
- background: #dce4e8;
+ background: var(--bd);
}
.embedding-switch-progress > span {
display: block;
height: 100%;
border-radius: inherit;
- background: #557c93;
- transition: width 180ms ease-out;
+ background: var(--ac);
+ transition: width var(--motion-state) var(--motion-enter);
}
.embedding-switch-outcome {
justify-content: space-between;
- background: #f3f8f5;
+ background: var(--ok-bg);
}
.embedding-switch-outcome.is-error {
- background: #fff7f5;
+ background: var(--dg-bg);
}
.embedding-switch-outcome-actions {
@@ -218,28 +204,16 @@
.embedding-switch-cleanup-error {
margin: 0;
padding: 8px 18px;
- border-bottom: 1px solid #ecd8d4;
- background: #fff7f5;
- color: #873f38;
+ border-bottom: 0.5px solid var(--dg-bd);
+ background: var(--dg-bg);
+ color: var(--dg);
font-size: 12px;
line-height: 18px;
}
-.embedding-switch-outcome button:not(.r6-button) {
- display: grid;
- width: 32px;
- height: 32px;
- padding: 0;
- place-items: center;
- border: 0;
- border-radius: 7px;
- background: transparent;
- color: #60717c;
- cursor: pointer;
-}
-
-.embedding-switch-outcome button:not(.r6-button):hover {
- background: #e8eef1;
+.embedding-switch-outcome-actions > .r6-button:last-child {
+ width: 36px;
+ padding-inline: 0;
}
@media (max-width: 700px) {
@@ -259,6 +233,16 @@
grid-template-columns: 1fr;
}
+ .embedding-switch-impact > div {
+ padding: 12px 0;
+ }
+
+ .embedding-switch-impact > div + div {
+ padding-left: 0;
+ border-top: 1px solid var(--bd);
+ border-left: 0;
+ }
+
.embedding-switch-safety,
.embedding-switch-details dl {
grid-template-columns: 1fr;
@@ -281,3 +265,7 @@
transition: none;
}
}
+
+[data-native-reduce-motion="true"] .embedding-switch-progress > span {
+ transition: none;
+}
diff --git a/memhub/apps/web/src/r6-controls.css b/memhub/apps/web/src/r6-controls.css
index 58c5bce..dba7e3c 100644
--- a/memhub/apps/web/src/r6-controls.css
+++ b/memhub/apps/web/src/r6-controls.css
@@ -11,6 +11,41 @@
--r6-fast: 140ms;
}
+.r6-settings-dialog-layer {
+ position: fixed;
+ inset: 0;
+ z-index: 100;
+ display: grid;
+ place-items: center;
+ background: rgb(46 66 82 / 18%);
+ backdrop-filter: blur(8px);
+}
+
+.r6-settings-dialog {
+ width: min(420px, calc(100vw - 40px));
+ padding: 28px;
+ border: 1px solid white;
+ border-radius: 16px;
+ background: #f3f7f9;
+ box-shadow: 0 24px 64px rgb(38 59 74 / 18%);
+}
+
+.r6-settings-dialog h2 {
+ margin: 0 0 10px;
+ font-size: 20px;
+}
+
+.r6-settings-dialog p {
+ margin: 0 0 24px;
+ color: #63707b;
+}
+
+.r6-settings-dialog footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+}
+
button.r6-button {
position: relative;
display: inline-flex;
@@ -318,6 +353,18 @@ button.r6-switch:focus-visible,
[data-native-reduce-motion="true"] .r6-button-spinner {
animation: none;
}
+
+@media (prefers-reduced-transparency: reduce) {
+ .r6-settings-dialog-layer {
+ background: rgb(46 66 82 / 28%);
+ backdrop-filter: none;
+ }
+}
+
+[data-native-reduce-transparency="true"] .r6-settings-dialog-layer {
+ background: rgb(46 66 82 / 28%);
+ backdrop-filter: none;
+}
[data-native-reduce-motion="true"]
:is(.r6-button, .r6-switch-track, .r6-switch-thumb) {
transition: none;
diff --git a/memhub/apps/web/src/r6-settings.css b/memhub/apps/web/src/r6-settings.css
index f8c258c..c6a476e 100644
--- a/memhub/apps/web/src/r6-settings.css
+++ b/memhub/apps/web/src/r6-settings.css
@@ -579,36 +579,6 @@
background: rgb(158 178 194 / 22%);
color: #0f6e56;
}
-.r6-settings-dialog-layer {
- position: fixed;
- inset: 0;
- z-index: 100;
- display: grid;
- place-items: center;
- background: rgb(46 66 82 / 18%);
- backdrop-filter: blur(8px);
-}
-.r6-settings-dialog {
- width: min(420px, calc(100vw - 40px));
- padding: 28px;
- border: 1px solid white;
- border-radius: 16px;
- background: #f3f7f9;
- box-shadow: 0 24px 64px rgb(38 59 74 / 18%);
-}
-.r6-settings-dialog h2 {
- margin: 0 0 10px;
- font-size: 20px;
-}
-.r6-settings-dialog p {
- margin: 0 0 24px;
- color: #63707b;
-}
-.r6-settings-dialog footer {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
-}
.r6-settings .r6-model-maintenance {
margin-top: 24px;
}
@@ -757,13 +727,42 @@
box-sizing: border-box;
width: 100%;
min-width: 0;
- min-height: 54px;
- border: 1px solid #c0ccd5;
+ min-height: 44px;
+ border: 1px solid var(--r6-control-edge);
border-radius: 8px;
- background: #f0f5f6;
- color: #262a2e;
- font-size: 15px;
- padding: 14px 16px;
+ background: #fff;
+ color: var(--r6-text);
+ font-size: 14px;
+ padding: 10px 13px;
+}
+.r6-settings .model-form .om-option-menu-button {
+ height: 44px;
+ min-height: 44px;
+ padding: 0 42px 0 13px;
+ border-color: var(--r6-control-edge);
+ background: #fff;
+ color: var(--r6-text);
+ font-size: 14px;
+}
+.r6-settings .model-form .om-option-menu-button::after {
+ top: 16px;
+ right: 16px;
+}
+.r6-settings .model-form .om-option-menu-button[aria-expanded="true"] {
+ border-color: #7892a6;
+ box-shadow: 0 0 0 3px rgb(85 124 147 / 12%);
+}
+.r6-settings .model-form input:not([type="checkbox"]):hover,
+.r6-settings .model-form select:hover,
+.r6-settings .model-form .om-option-menu-button:hover:not(:disabled) {
+ border-color: #aabcc8;
+ background: #fff;
+}
+.r6-settings .model-form input:not([type="checkbox"]):focus-visible,
+.r6-settings .model-form select:focus-visible,
+.r6-settings .model-form .om-option-menu-button:focus-visible {
+ outline: 2px solid var(--r6-focus);
+ outline-offset: 2px;
}
.r6-settings .model-advanced {
grid-column: 1 / -1;