@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -10,7 +10,7 @@
       type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
     >Where the @ was typed, in viewport coordinates.</prop>
     <state name="visible" :value="false"></state>
-    <state name="rows" :value="[]"></state>
+    <state name="rows" type="list(object({ id: string, label: string, detail?: string, initials: string }))" :value="[]"></state>
     <state name="searching" :value="false"></state>
     <state name="active" :value="0"></state>
     <state name="prefix" :value="'ui-editor-mention-menu'"></state>
@@ -47,9 +47,9 @@
       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));
     }
 
@@ -57,25 +57,25 @@
       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;
@@ -86,8 +86,8 @@
       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;
     }
 
@@ -102,11 +102,11 @@
       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 {
@@ -123,26 +123,26 @@
     }
 
     .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) {
       :host {
         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/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -35,9 +35,9 @@
     }
 
     :host {
-      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;
@@ -46,7 +46,7 @@
 
     @media (max-width: 767px) {
       :host {
-        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;
       }
     }
@@ -54,12 +54,12 @@
     .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;
     }
@@ -71,12 +71,12 @@
     }
 
     .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;
     }
@@ -84,7 +84,7 @@
     .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;
@@ -93,15 +93,15 @@
     @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;
@@ -117,21 +117,21 @@
       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 {
@@ -147,17 +147,17 @@
     }
 
     .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;
@@ -165,10 +165,10 @@
 
     .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) {
@@ -183,11 +183,11 @@
       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);
     }
 
     :host[hidden] {

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -7,8 +7,12 @@
       name="actions"
       type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
     >The complete set of commands the current selection permits.</prop>
-    <state name="swatches" :value="[]"></state>
-    <state name="sections" :value="[]"></state>
+    <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean })) | null" :value="[]"></state>
+    <state
+      name="sections"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      :value="[]"
+    ></state>
     <event
       name="action"
       type="object({ action: align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
@@ -49,10 +53,10 @@
       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;
@@ -71,17 +75,17 @@
     :host 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);
     }
 
     :host button {
@@ -90,7 +94,7 @@
     }
 
     :host button:hover:not(:disabled) {
-      background: var(--ui-surface-hover, #f3f4f6);
+      background: var(--ui-surface-hover);
     }
 
     :host button.selected {
@@ -98,7 +102,7 @@
     }
 
     :host button.danger {
-      color: var(--ui-danger, #dc2626);
+      color: var(--ui-danger);
     }
 
     .swatches {
@@ -110,7 +114,7 @@
     .swatch-button {
       display: inline-flex;
       align-items: center;
-      gap: var(--ui-space-2, 8px);
+      gap: var(--ui-space-2);
     }
 
     .swatch {
@@ -118,7 +122,7 @@
       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;
@@ -130,11 +134,11 @@
         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 {
@@ -143,18 +147,18 @@
     }
 
     .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;
     }
 
     :host[hidden] {

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -6,10 +6,26 @@
       name="geometry"
       type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null"
     >The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>
-    <state name="rows" :value="[]"></state>
-    <state name="cols" :value="[]"></state>
-    <state name="hovered" :value="null"></state>
-    <state name="active" :value="null"></state>
+    <state
+      name="rows"
+      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      :value="[]"
+    ></state>
+    <state
+      name="cols"
+      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      :value="[]"
+    ></state>
+    <state
+      name="hovered"
+      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null"
+      :value="null"
+    ></state>
+    <state
+      name="active"
+      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null"
+      :value="null"
+    ></state>
     <state name="activeKey" :value="''"></state>
     <event
       name="action"
@@ -153,10 +169,10 @@
       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;
@@ -164,18 +180,18 @@
       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"],
@@ -187,16 +203,16 @@
 
     .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;
     }
 
@@ -224,9 +240,9 @@
 
     .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 {
@@ -245,12 +261,12 @@
 
     .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 {
@@ -275,16 +291,16 @@
       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;
     }
 
@@ -310,37 +326,37 @@
       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;
     }
 
@@ -349,12 +365,12 @@
       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,
@@ -406,13 +422,13 @@
     .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;
     }
 
     :host[hidden] {