@threadlabs/looma 0.5.2 → 0.6.0-rc.1

package/vue/UiEditorMentionMenu.vue

@@ -218,9 +218,9 @@ onBeforeUnmount(() => {
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
 
@@ -228,25 +228,25 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  color: var(--ui-text-secondary, #4b5563);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  color: var(--ui-text-secondary);
+  border-bottom: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
 
 .hint {
   overflow: hidden;
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-normal, 400);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-normal);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .list {
   max-height: 280px;
-  padding: var(--ui-space-1, 4px) 0;
+  padding: var(--ui-space-1) 0;
   margin: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -257,8 +257,8 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   min-height: 44px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
-  gap: var(--ui-space-3, 12px);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  gap: var(--ui-space-3);
   cursor: pointer;
 }
 
@@ -273,11 +273,11 @@ onBeforeUnmount(() => {
   width: 32px;
   height: 32px;
   flex: 0 0 auto;
-  color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+  color: var(--ui-accent-active, var(--ui-accent-solid));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
   border-radius: 999px;
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
 
 .body {
@@ -294,26 +294,26 @@ onBeforeUnmount(() => {
 }
 
 .label {
-  color: var(--ui-text-primary, #111827);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
 }
 
 .detail,
 .loading {
-  color: var(--ui-text-muted, #6b7280);
-  font-size: var(--ui-font-size-xs, 0.75rem);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
 }
 
 .loading {
   min-height: 44px;
-  padding: var(--ui-space-3, 12px);
+  padding: var(--ui-space-3);
 }
 
 @media (max-width: 767px) {
   [data-component~="ui-editor-mention-menu"] {
     border-bottom: 0;
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
   }
 
   .list {

package/vue/UiEditorSlashMenu.vue

@@ -191,9 +191,9 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-slash-menu"] {
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   overflow: hidden;
   display: flex;
@@ -202,7 +202,7 @@ onBeforeUnmount(() => {
 
 @media (max-width: 767px) {
   [data-component~="ui-editor-slash-menu"] {
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
     border-bottom: none;
   }
 }
@@ -210,12 +210,12 @@ onBeforeUnmount(() => {
 .header {
   display: none;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
-  padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-semibold, 600);
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-bottom: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -227,12 +227,12 @@ onBeforeUnmount(() => {
 }
 
 .header-query {
-  background: var(--ui-surface-hover, #f3f4f6);
-  border-radius: var(--ui-radius-sm, 4px);
+  background: var(--ui-surface-hover);
+  border-radius: var(--ui-radius-sm);
   padding: 0.1em 0.4em;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-accent, #3b82f6);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-accent);
   text-transform: none;
   letter-spacing: 0;
 }
@@ -240,7 +240,7 @@ onBeforeUnmount(() => {
 .list {
   list-style: none;
   margin: 0;
-  padding: var(--ui-space-1, 4px) 0;
+  padding: var(--ui-space-1) 0;
   overflow-y: auto;
   max-height: 280px;
   overscroll-behavior: contain;
@@ -249,15 +249,15 @@ onBeforeUnmount(() => {
 @media (max-width: 767px) {
   .list {
     max-height: calc(60dvh - 80px);
-    padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
+    padding: var(--ui-space-1) 0 var(--ui-space-2);
   }
 }
 
 .item {
   display: flex;
   align-items: center;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
   min-height: 44px;
   cursor: pointer;
   transition: background-color 120ms ease;
@@ -273,21 +273,21 @@ onBeforeUnmount(() => {
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-bold, 700);
-  color: var(--ui-text-secondary, #4b5563);
+  background: var(--ui-surface-hover);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-bold);
+  color: var(--ui-text-secondary);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   flex-shrink: 0;
   line-height: 1;
 }
 
 .item.active .icon {
-  background: var(--ui-accent, #3b82f6);
-  border-color: var(--ui-accent, #3b82f6);
-  color: var(--ui-accent-contrast, #fff);
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+  color: var(--ui-accent-contrast);
 }
 
 .icon {
@@ -303,17 +303,17 @@ onBeforeUnmount(() => {
 }
 
 .title {
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
-  color: var(--ui-text, #111827);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+  color: var(--ui-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .description {
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -321,10 +321,10 @@ onBeforeUnmount(() => {
 
 .footer {
   display: none;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border-top: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-top: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
 }
 
 @media (min-width: 768px) {
@@ -339,11 +339,11 @@ onBeforeUnmount(() => {
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: 10px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
+  background: var(--ui-surface-hover);
+  border: 1px solid var(--ui-border);
   border-radius: 3px;
   padding: 0 3px;
-  color: var(--ui-text-secondary, #4b5563);
+  color: var(--ui-text-secondary);
 }
 
 [data-component~="ui-editor-slash-menu"][hidden] {

package/vue/UiEditorTableContextMenu.vue

@@ -251,10 +251,10 @@ onBeforeUnmount(() => {
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
-  padding: var(--ui-space-1-5, 6px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-lg, 10px);
+  padding: var(--ui-space-2);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
   flex-direction: column;
@@ -273,17 +273,17 @@ onBeforeUnmount(() => {
 [data-component~="ui-editor-table-context-menu"] button {
   display: flex;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
+  gap: var(--ui-space-2);
   width: 100%;
   text-align: left;
   min-height: 32px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-2) var(--ui-space-2);
   border: none;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
   background: none;
-  font-size: var(--ui-font-size-sm, 0.875rem);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
-  color: var(--ui-text, #111);
+  color: var(--ui-text);
 }
 
 [data-component~="ui-editor-table-context-menu"] button {
@@ -292,7 +292,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-context-menu"] button:hover:not(:disabled) {
-  background: var(--ui-surface-hover, #f3f4f6);
+  background: var(--ui-surface-hover);
 }
 
 [data-component~="ui-editor-table-context-menu"] button.selected {
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-context-menu"] button.danger {
-  color: var(--ui-danger, #dc2626);
+  color: var(--ui-danger);
 }
 
 .swatches {
@@ -312,7 +312,7 @@ onBeforeUnmount(() => {
 .swatch-button {
   display: inline-flex;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
+  gap: var(--ui-space-2);
 }
 
 .swatch {
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {
   width: 1rem;
   height: 1rem;
   border-radius: 999px;
-  border: 1px solid var(--ui-border, #d1d5db);
+  border: 1px solid var(--ui-border);
   background: var(--ui-editor-table-context-swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
@@ -332,11 +332,11 @@ onBeforeUnmount(() => {
     linear-gradient(
       135deg,
       transparent calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% + 1px),
+      var(--ui-text-muted) calc(50% - 1px),
+      var(--ui-text-muted) calc(50% + 1px),
       transparent calc(50% + 1px)
     ),
-    var(--ui-surface, #fff);
+    var(--ui-surface);
 }
 
 .swatch-label {
@@ -345,18 +345,18 @@ onBeforeUnmount(() => {
 }
 
 .heading {
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--ui-text-muted, #6b7280);
+  color: var(--ui-text-muted);
 }
 
 .sep {
   height: 1px;
-  background: var(--ui-border, #e5e7eb);
-  margin: var(--ui-space-1, 4px) 0;
+  background: var(--ui-border);
+  margin: var(--ui-space-1) 0;
 }
 
 [data-component~="ui-editor-table-context-menu"][hidden] {

package/vue/UiEditorTableOverlay.vue

@@ -418,10 +418,10 @@ onBeforeUnmount(() => {
   width: 24px;
   height: 24px;
   padding: 0;
-  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
-  border-radius: var(--ui-radius-round, 999px);
-  background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
-  color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
+  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border-radius: var(--ui-radius-round);
+  background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
+  color: var(--ui-affordance-near-color, var(--ui-text-secondary));
   font: inherit;
   font-size: 16px;
   line-height: 1;
@@ -429,20 +429,18 @@ onBeforeUnmount(() => {
   opacity: 0;
   scale: 0.72;
   transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: auto;
   cursor: pointer;
 }
 
 .handle {
   --ui-icon-size: 14px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
 }
 
 .handle[data-ui-proximity="near"],
@@ -454,16 +452,16 @@ onBeforeUnmount(() => {
 
 .control.active .handle,
 .handle:focus-visible {
-  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  color: var(--ui-text-on-accent, #fff);
+  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  color: var(--ui-text-on-accent);
   box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
 }
 
 .handle:focus-visible,
 .selector:focus-visible,
 .cell-menu:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, #5b55d6);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
@@ -491,10 +489,9 @@ onBeforeUnmount(() => {
 
 .line {
   position: absolute;
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   opacity: 0;
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .control.row .line {
@@ -513,13 +510,12 @@ onBeforeUnmount(() => {
 
 .guide {
   position: absolute;
-  width: var(--ui-affordance-guide-size, 4px);
-  height: var(--ui-affordance-guide-size, 4px);
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  width: var(--ui-affordance-guide-size);
+  height: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .control.row .guide {
@@ -544,17 +540,16 @@ onBeforeUnmount(() => {
   left: 50%;
   width: max-content;
   max-width: 14rem;
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
-  background: var(--ui-text-primary, #1a1a1a);
-  color: var(--ui-surface-elevated, #fff);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-medium, 500);
-  line-height: var(--ui-line-height-md, 1.4);
+  padding: var(--ui-space-1) var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-text-primary);
+  color: var(--ui-surface-elevated);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-md);
   opacity: 0;
   transform: translateX(-50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
 
@@ -580,41 +575,37 @@ onBeforeUnmount(() => {
   padding: 0;
   border: 1px solid transparent;
   background: transparent;
-  color: var(--ui-text-secondary, #5c5c5c);
+  color: var(--ui-text-secondary);
   box-shadow: none;
   pointer-events: auto;
   cursor: pointer;
   transition:
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .selector:hover,
 .cell-menu:hover {
-  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
-  color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
+  background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
   box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
 
 .selector {
-  border-radius: var(--ui-radius-round, 999px);
+  border-radius: var(--ui-radius-round);
 }
 
 .selector::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
   transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
 
@@ -623,12 +614,12 @@ onBeforeUnmount(() => {
   width: 14px;
   height: 14px;
   --ui-icon-size: 14px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
   opacity: 0;
   transform: scale(0.72);
   transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .selector:hover::before,
@@ -680,13 +671,13 @@ onBeforeUnmount(() => {
 .cell-menu {
   width: 24px;
   height: 24px;
-  border-radius: var(--ui-radius-1, 4px);
-  background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
+  border-radius: var(--ui-radius-sm);
+  background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
 }
 
 .cell-menu {
   --ui-icon-size: 15px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
 }
 
 [data-component~="ui-editor-table-overlay"][hidden] {