From 5b97fb9408f80ad96e25a0335aeb9ddb51481635 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 7 Sep 2026 14:37:40 +0200
Subject: [PATCH] :recycle: Migrate editable-select to DS icon* and design
 tokens (#11500)

* :recycle: Migrate editable-select to DS icon* and design tokens

The dropdown toggle and selected-item tick used the deprecated
app.main.ui.icons component and the SCSS relied on refactor/
placeholders and aliased design tokens.

Replace both icon usages with the DS icon* component (arrow-down
instead of a rotated arrow, tick unchanged, both at DS size "s"),
and rework editable_select.scss to depend only on DS modules:
placeholders inlined, aliases resolved to their terminal --color-*
tokens, sizes/spacing/borders mapped to DS tokens, logical
properties used where they preserve behavior, and per-state colors
driven by component-local CSS custom properties (fed through
currentColor for the icons, since DS icon* strokes default to
currentColor).

AI-assisted-by: claude-sonnet-5

* :recycle: Migrate frame_grid to the DS and unify its options dropdown

Refactors frame_grid.scss off the deprecated refactor/ styling system
onto DS tokens (borders, sizes, spacing, typography), and replaces the
remaining deprecated-icon usages (gap-horizontal, grid-margin) with
the DS icon* component.

Unifies the square/column/row "reset to default" toggle+panel, which
had drifted into two inconsistent, duplicated implementations, into
two shared components (default-options-toggle*, default-options-
dropdown*) built on the existing dropdown component, with proper
menu/menuitem roles and Enter/Space keyboard activation.

Along the way, fixes several regressions the migration surfaced:
- .show-more-options lost its border width when converted to a
  CSS-variable-driven color.
- the reset-to-default toggle was enabled while its own options were
  disabled instead of the other way around.
- numeric inputs in .height/.gutter/.margin lost their explicit width,
  letting them fall back to the browser's intrinsic input width and
  overflow the sidebar.
- a leftover CSS override was forcing the docked dropdown-select's
  icon to render fully transparent.

Also fixes editable-select's is-selected check, which compared a
stringified option value against a non-stringified current-value and
so could never match, silently hiding the selected-item checkmark.

AI-assisted-by: claude-sonnet-5

* :recycle: Migrate frame_grid's numeric inputs to the DS component

Replaces the deprecated app.main.ui.components.numeric-input with the
DS numeric-input* across .grid-size, .height, .gutter and .margin,
using its built-in :icon/:text-icon slots (via input-field*) instead
of rendering a separate icon element beside the input.

The gutter/margin icons previously rotated 90deg via CSS to indicate
row vs column orientation; DS ships dedicated icon-ids for both axes
(gap-horizontal/gap-vertical, margin-top-bottom/margin-left-right),
so the icon itself now swaps per grid type instead of being rotated.
The height row's "H"/"W" text label is now the matching DS
character-h/character-w icon rather than literal text.

AI-assisted-by: claude-sonnet-5

* :recycle: Flatten unnecessary nesting in frame_grid.scss

CSS Modules already scope every class to this file, so nesting
purely to dodge cross-file name collisions is dead weight now.
Rewrite the nested rules as flat top-level selectors, dropping
ancestor-wrapper prefixes wherever the target class is already
unique in the file and keeping them only where they still do real
work (winning a same-node specificity fight against another
component's own class).

Also drop --show-options-icon-color: it was assigned across every
state but never actually read anywhere, so it did nothing.

AI-assisted-by: claude-sonnet-5
---
 .../main/ui/components/editable_select.cljs   |  14 +-
 .../main/ui/components/editable_select.scss   | 175 +++---
 .../sidebar/options/menus/frame_grid.cljs     | 151 +++--
 .../sidebar/options/menus/frame_grid.scss     | 561 +++++++++++-------
 4 files changed, 557 insertions(+), 344 deletions(-)

diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs
index 470f95025c..3c9474a98f 100644
--- a/frontend/src/app/main/ui/components/editable_select.cljs
+++ b/frontend/src/app/main/ui/components/editable_select.cljs
@@ -13,7 +13,7 @@
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.numeric-input :as deprecated-input]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [app.util.timers :as timers]
@@ -182,7 +182,10 @@
 
      [:span {:class (stl/css :dropdown-button)
              :on-click toggle-dropdown}
-      deprecated-icon/arrow]
+      [:> icon* {:icon-id i/arrow-down
+                 :size "m"
+                 :aria-hidden true
+                 :class (stl/css :dropdown-icon)}]]
 
      [:& dropdown {:show (or is-open? false)
                    :on-close close-dropdown}
@@ -196,9 +199,12 @@
              [:li
               {:key (str element-id "-" index)
                :class (stl/css-case :dropdown-element true
-                                    :is-selected (= (dm/str value) current-value))
+                                    :is-selected (= (dm/str value) (dm/str current-value)))
                :data-value value
                :on-click select-item}
               [:span {:class (stl/css :label)} label]
               [:span {:class (stl/css :check-icon)}
-               deprecated-icon/tick]])))]]]))
+               [:> icon* {:icon-id i/tick
+                          :aria-hidden true
+                          :size "s"
+                          :class (stl/css :check-tick)}]]])))]]]))
diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss
index 490e549c0a..7257ee14f2 100644
--- a/frontend/src/app/main/ui/components/editable_select.scss
+++ b/frontend/src/app/main/ui/components/editable_select.scss
@@ -4,87 +4,126 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-// FIXME: we need this import for %asset-element
-@use "refactor/basic-rules.scss" as deprecated;
 @use "ds/_borders.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/_utils.scss" as *;
 @use "ds/spacing.scss" as *;
+@use "ds/typography.scss" as *;
 
 .editable-select {
-  @extend %asset-element;
+  @include use-typography("body-small");
+
+  --editable-select-background-color: var(--color-background-tertiary);
 
   margin: 0;
-  border: $b-1 solid var(--input-border-color);
+  border: $b-1 solid var(--color-background-tertiary);
   position: relative;
   display: flex;
-  height: $sz-32;
-  width: 100%;
+  align-items: center;
+  inline-size: 100%;
+  block-size: $sz-32;
   padding: var(--sp-s);
   border-radius: $br-8;
   cursor: pointer;
+  background-color: var(--editable-select-background-color);
+  color: var(--color-foreground-primary);
 
-  .dropdown-button {
-    display: flex;
-    place-content: center;
-
-    svg {
-      @extend %button-icon-small;
-
-      transform: rotate(90deg);
-      stroke: var(--icon-foreground);
-    }
-  }
-
-  .custom-select-dropdown {
-    @extend %dropdown-wrapper;
-
-    width: max-content;
-    max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token
-    .separator {
-      margin: 0;
-      height: $sz-12;
-    }
-
-    .dropdown-element {
-      @extend %dropdown-element-base;
-
-      color: var(--menu-foreground-color-rest);
-
-      .label {
-        flex-grow: 1;
-        width: 100%;
-      }
-
-      .check-icon {
-        display: flex;
-        place-content: center;
-
-        svg {
-          @extend %button-icon-small;
-
-          visibility: hidden;
-          stroke: var(--icon-foreground);
-        }
-      }
-
-      &.is-selected {
-        color: var(--menu-foreground-color);
-
-        .check-icon svg {
-          stroke: var(--menu-foreground-color);
-          visibility: visible;
-        }
-      }
-
-      &:hover {
-        background-color: var(--menu-background-color-hover);
-        color: var(--menu-foreground-color-hover);
-
-        .check-icon svg {
-          stroke: var(--menu-foreground-color-hover);
-        }
-      }
-    }
+  &:hover {
+    --editable-select-background-color: var(--color-background-quaternary);
   }
 }
+
+.dropdown-button {
+  display: flex;
+  place-content: center;
+}
+
+.dropdown-icon {
+  color: var(--color-foreground-secondary);
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  inset-block-start: $sz-32;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  min-inline-size: px2rem(70);
+  max-block-size: px2rem(320); // TODO: when this gets addressed in the DS, use a token
+  padding: var(--sp-xxs);
+  margin: 0;
+  margin-block-start: px2rem(1);
+  border: $b-2 solid var(--color-background-quaternary);
+  border-radius: $br-8;
+  z-index: var(--z-index-dropdown);
+  overflow: hidden auto;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
+  box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
+}
+
+.separator {
+  margin: 0;
+  block-size: $sz-12;
+}
+
+.dropdown-element {
+  --dropdown-element-color: var(--color-foreground-secondary);
+  --dropdown-element-icon-color: var(--color-foreground-secondary);
+
+  display: flex;
+  align-items: center;
+  gap: var(--sp-s);
+  block-size: $sz-32;
+  padding-block: 0;
+  padding-inline: var(--sp-s);
+  border-radius: $br-6;
+  cursor: pointer;
+  color: var(--dropdown-element-color);
+
+  @include use-typography("body-small");
+
+  &.is-selected {
+    --dropdown-element-color: var(--color-foreground-primary);
+    --dropdown-element-icon-color: var(--color-foreground-primary);
+
+    .check-tick {
+      visibility: visible;
+    }
+  }
+
+  &:hover {
+    --dropdown-element-color: var(--color-foreground-primary);
+    --dropdown-element-icon-color: var(--color-foreground-primary);
+
+    background-color: var(--color-background-quaternary);
+  }
+}
+
+.label,
+.check-icon {
+  display: block;
+  max-inline-size: 99%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label {
+  flex-grow: 1;
+  inline-size: 100%;
+}
+
+.check-icon {
+  display: flex;
+  place-content: center;
+}
+
+.check-tick {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: none;
+  stroke-width: 1.33px;
+  visibility: hidden;
+  color: var(--dropdown-element-icon-color);
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index 608a25c537..ea4857a40a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -12,16 +12,18 @@
    [app.main.data.workspace.grid :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options*]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
@@ -33,6 +35,49 @@
    :separator
    18 12 10 8 6 4 3 2])
 
+(mf/defc default-options-toggle*
+  "Toggle button that opens the reset/save-as-default menu for a grid's
+   params. Shared by the square, column and row grid-type layouts, each of
+   which places it at a different point in their own layout."
+  [{:keys [show disabled on-toggle]}]
+  [:button {:class (stl/css-case :show-more-options true
+                                 :selected show)
+            :on-click on-toggle
+            :disabled disabled}
+   [:> icon* {:icon-id i/menu
+              :size "m"
+              :aria-hidden true
+              :class (stl/css :show-options-icon)}]])
+
+(mf/defc default-options-dropdown*
+  "Dropdown menu with the reset/save-as-default options for a grid's params.
+   Shared by the square, column and row grid-type layouts, each of which
+   places it at a different point in their own layout (its `:class` controls
+   the panel's positioning, which differs per layout)."
+  [{:keys [class show on-close on-use-default on-set-as-default]}]
+  (let [handle-key-down
+        (fn [action]
+          (fn [event]
+            (when (or (kbd/enter? event) (kbd/space? event))
+              (dom/prevent-default event)
+              (action))))]
+    [:& dropdown {:show show
+                  :on-close on-close}
+     [:ul {:class class
+           :role "menu"}
+      [:li {:class (stl/css :option-btn)
+            :role "menuitem"
+            :tab-index 0
+            :on-click on-use-default
+            :on-key-down (handle-key-down on-use-default)}
+       (tr "workspace.options.grid.params.use-default")]
+      [:li {:class (stl/css :option-btn)
+            :role "menuitem"
+            :tab-index 0
+            :on-click on-set-as-default
+            :on-key-down (handle-key-down on-set-as-default)}
+       (tr "workspace.options.grid.params.set-default")]]]))
+
 (mf/defc grid-options*
   {::mf/wrap [mf/memo]}
   [{:keys [shape-id index grid frame-width frame-height default-grid-params]}]
@@ -151,7 +196,10 @@
        [:button {:class (stl/css-case :show-options true
                                       :selected open?)
                  :on-click toggle-advanced-options}
-        deprecated-icon/menu]
+        [:> icon* {:icon-id i/menu
+                   :size "m"
+                   :aria-hidden true
+                   :class (stl/css :show-options-icon)}]]
        [:div {:class (stl/css :type-select-wrapper)}
         [:& select
          {:class (stl/css :grid-type-select)
@@ -163,11 +211,10 @@
        (if (= type :square)
          [:div {:class (stl/css :grid-size)
                 :title (tr "workspace.options.size")}
-          [:> deprecated-input/numeric-input* {:min 0.01
-                                               :value (or (:size params) "")
-                                               :no-validate true
-                                               :class (stl/css :numeric-input)
-                                               :on-change (handle-change :params :size)}]]
+          [:> numeric-input* {:min 0.01
+                              :value (or (:size params) "")
+                              :inner-class (stl/css :numeric-input)
+                              :on-change (handle-change :params :size)}]]
 
          [:div {:class (stl/css :editable-select-wrapper)}
           [:& editable-select {:value (:size params)
@@ -204,22 +251,14 @@
                             :origin :guides
                             :on-change handle-change-color
                             :on-detach handle-detach-color}]
-            [:button {:class (stl/css-case :show-more-options true
-                                           :selected show-more-options?)
-                      :on-click toggle-more-options}
-             deprecated-icon/menu]]
-           (when show-more-options?
-             [:div {:class (stl/css :second-row)}
-              [:button {:class (stl/css-case :btn-options true
-                                             :disabled is-default)
-                        :disabled is-default
-                        :on-click handle-use-default}
-               [:span (tr "workspace.options.grid.params.use-default")]]
-              [:button {:class (stl/css-case :btn-options true
-                                             :disabled is-default)
-                        :disabled is-default
-                        :on-click handle-set-as-default}
-               [:span (tr "workspace.options.grid.params.set-default")]]])])
+            [:> default-options-toggle* {:show show-more-options?
+                                         :disabled is-default
+                                         :on-toggle toggle-more-options}]]
+           [:> default-options-dropdown* {:class (stl/css :second-row)
+                                          :show show-more-options?
+                                          :on-close close-more-options
+                                          :on-use-default handle-use-default
+                                          :on-set-as-default handle-set-as-default}]])
 
         (when (or (= :column type) (= :row type))
           [:div {:class (stl/css :column-row)}
@@ -252,49 +291,39 @@
                    :title (if (= :row type)
                             (tr "workspace.options.grid.params.height")
                             (tr "workspace.options.grid.params.width"))}
-             [:span {:class (stl/css :icon-text)}
-              (if (= :row type)
-                "H"
-                "W")]
-             [:> deprecated-input/numeric-input* {:placeholder "Auto"
-                                                  :on-change handle-change-item-length
-                                                  :is-nillable true
-                                                  :class (stl/css :numeric-input)
-                                                  :value (or (:item-length params) "")}]]
+             [:> numeric-input* {:placeholder "Auto"
+                                 :on-change handle-change-item-length
+                                 :nillable true
+                                 :icon (if (= :row type) i/character-h i/character-w)
+                                 :inner-class (stl/css :numeric-input)
+                                 :value (or (:item-length params) "")}]]
 
             [:div {:class (stl/css :gutter)
                    :title (tr "workspace.options.grid.params.gutter")}
-             [:span {:class (stl/css-case :icon true
-                                          :rotated (= type :row))}
-              deprecated-icon/gap-horizontal]
-             [:> deprecated-input/numeric-input* {:placeholder "0"
-                                                  :on-change (handle-change :params :gutter)
-                                                  :is-nillable true
-                                                  :class (stl/css :numeric-input)
-                                                  :value (or (:gutter params) 0)}]]
+             [:> numeric-input* {:placeholder "0"
+                                 :on-change (handle-change :params :gutter)
+                                 :nillable true
+                                 :icon (if (= type :row) i/gap-vertical i/gap-horizontal)
+                                 :inner-class (stl/css :numeric-input)
+                                 :value (or (:gutter params) 0)}]]
 
             [:div {:class (stl/css :margin)
                    :title (tr "workspace.options.grid.params.margin")}
-             [:span {:class (stl/css-case :icon true
-                                          :rotated (= type :column))}
-              deprecated-icon/grid-margin]
-             [:> deprecated-input/numeric-input* {:placeholder "0"
-                                                  :on-change (handle-change :params :margin)
-                                                  :is-nillable true
-                                                  :class (stl/css :numeric-input)
-                                                  :value (or (:margin params) 0)}]]
+             [:> numeric-input* {:placeholder "0"
+                                 :on-change (handle-change :params :margin)
+                                 :nillable true
+                                 :icon (if (= type :column) i/margin-left-right i/margin-top-bottom)
+                                 :inner-class (stl/css :numeric-input)
+                                 :value (or (:margin params) 0)}]]
 
-            [:button {:class (stl/css-case :show-more-options true
-                                           :selected show-more-options?)
-                      :on-click toggle-more-options
-                      :disabled is-default}
-             deprecated-icon/menu]
-            (when show-more-options?
-              [:div {:class (stl/css :more-options)}
-               [:button {:class (stl/css :option-btn)
-                         :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
-               [:button {:class (stl/css :option-btn)
-                         :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]))
+            [:> default-options-toggle* {:show show-more-options?
+                                         :disabled is-default
+                                         :on-toggle toggle-more-options}]
+            [:> default-options-dropdown* {:class (stl/css :more-options)
+                                           :show show-more-options?
+                                           :on-close close-more-options
+                                           :on-use-default handle-use-default
+                                           :on-set-as-default handle-set-as-default}]]])])]))
 
 (defn- check-frame-grid-props
   [old-props new-props]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
index 8f97f4dc42..ba80378e2a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
@@ -4,9 +4,24 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/z-index.scss" as *;
+@use "ds/spacing.scss" as *;
+@use "ds/typography.scss" as *;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
+// Shared by every disabled-looking control in the .hidden state below.
+@mixin hidden-control {
+  cursor: default;
+  pointer-events: none;
+  box-sizing: border-box;
+  color: var(--color-foreground-secondary);
+  stroke: var(--color-foreground-secondary);
+  background-color: transparent;
+}
+
 .element-set {
   @include sidebar.option-grid-structure;
 }
@@ -16,15 +31,17 @@
 }
 
 .title-spacing-board-grid {
-  padding-left: deprecated.$s-2;
+  padding-inline-start: var(--sp-xxs);
   margin: 0;
 }
 
 .element-set-content {
-  @include deprecated.flex-column;
-
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
   grid-column: span 8;
-  margin: deprecated.$s-4 0 deprecated.$s-8 0;
+  margin-block: var(--sp-xs) var(--sp-s);
+  margin-inline: 0;
 }
 
 .grid-title {
@@ -35,266 +52,388 @@
   grid-column: span 6;
   display: flex;
   align-items: center;
-  gap: deprecated.$s-1;
-  border-radius: deprecated.$br-8;
-  background-color: var(--input-details-color);
+  gap: px2rem(1);
+  border-radius: $br-8;
+  background-color: var(--color-background-primary);
+}
 
-  .show-options {
-    @extend %button-secondary;
+.show-options {
+  --show-options-background-color: var(--color-background-tertiary);
+  --show-options-border-color: var(--color-background-tertiary);
+  --show-options-color: var(--color-foreground-secondary);
 
-    height: deprecated.$s-32;
-    width: deprecated.$s-28;
-    border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
-    box-sizing: border-box;
-    border: deprecated.$s-1 solid var(--input-border-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: $sz-28;
+  border-radius: $br-8 0 0 $br-8;
+  box-sizing: border-box;
+  border: $b-1 solid var(--show-options-border-color);
+  background-color: var(--show-options-background-color);
+  color: var(--show-options-color);
 
-    svg {
-      @extend %button-icon;
-    }
+  &:focus-visible {
+    outline: none;
 
-    &.selected {
-      @extend %button-icon-selected;
-    }
+    --show-options-border-color: var(--color-accent-primary);
   }
 
-  .type-select-wrapper {
-    flex-grow: 1;
-    width: deprecated.$s-96;
-    padding: 0;
-    border-radius: 0;
-    height: deprecated.$s-32;
+  &:hover {
+    --show-options-background-color: var(--color-background-quaternary);
+    --show-options-border-color: var(--color-background-quaternary);
+    --show-options-color: var(--color-accent-primary);
 
-    .grid-type-select {
-      border-radius: 0;
-      height: 100%;
-      box-sizing: border-box;
-      border: deprecated.$s-1 solid var(--input-border-color);
-
-      &:hover {
-        border: deprecated.$s-1 solid var(--input-border-color-hover);
-      }
-    }
+    text-decoration: none;
   }
 
-  .grid-size {
-    @extend %asset-element;
+  &:active {
+    outline: none;
 
-    width: deprecated.$s-60;
-    margin: 0;
-    padding: 0;
-    padding-left: deprecated.$s-8;
-    border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-
-    .numeric-input {
-      @extend %input-base;
-      @include deprecated.body-small-typography;
-    }
+    --show-options-background-color: var(--color-background-secondary);
+    --show-options-border-color: var(--color-background-quaternary);
+    --show-options-color: var(--color-accent-primary);
   }
 
-  .editable-select-wrapper {
-    @extend %asset-element;
+  &[disabled],
+  &:disabled {
+    --show-options-background-color: var(--color-background-quaternary);
+    --show-options-border-color: var(--color-background-quaternary);
+    --show-options-color: var(--color-foreground-disabled);
 
-    width: deprecated.$s-60;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-
-    .column-select {
-      height: deprecated.$s-32;
-      border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-      box-sizing: border-box;
-      border: deprecated.$s-1 solid var(--input-border-color);
-
-      .numeric-input {
-        @extend %input-base;
-        @include deprecated.body-small-typography;
-
-        margin: 0;
-        padding: 0;
-      }
-
-      span {
-        @include deprecated.flex-center;
-
-        svg {
-          @extend %button-icon;
-        }
-      }
-    }
+    cursor: unset;
   }
 
-  &.hidden {
-    .show-options {
-      @include deprecated.hidden-element;
+  &.selected {
+    outline: none;
 
-      border: deprecated.$s-1 solid var(--input-border-color-disabled);
-    }
-
-    .type-select-wrapper,
-    .editable-select-wrapper {
-      @include deprecated.hidden-element;
-
-      .column-select,
-      .grid-type-select {
-        @include deprecated.hidden-element;
-
-        border: deprecated.$s-1 solid var(--input-border-color-disabled);
-      }
-
-      .column-select {
-        @include deprecated.hidden-element;
-
-        border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-
-        .numeric-input {
-          @include deprecated.hidden-element;
-        }
-      }
-    }
-
-    .grid-size {
-      @include deprecated.hidden-element;
-
-      border: deprecated.$s-1 solid var(--input-border-color-disabled);
-
-      .icon {
-        stroke: var(--input-foreground-color-disabled);
-      }
-
-      .numeric-input {
-        color: var(--input-foreground-color-disabled);
-      }
-    }
-
-    .actions {
-      .hidden-btn,
-      .lock-btn {
-        background-color: transparent;
-
-        svg {
-          stroke: var(--input-foreground-color-disabled);
-        }
-      }
-    }
+    --show-options-background-color: var(--color-background-quaternary);
+    --show-options-border-color: var(--color-background-quaternary);
+    --show-options-color: var(--color-accent-primary);
   }
 }
 
-.actions {
-  @include deprecated.flex-row;
+.type-select-wrapper {
+  flex-grow: 1;
+  inline-size: $sz-96;
+  padding: 0;
+  border-radius: 0;
+  block-size: $sz-32;
+}
 
+.type-select-wrapper .grid-type-select {
+  --grid-type-select-border-color: var(--color-background-tertiary);
+
+  border-radius: 0;
+  block-size: 100%;
+  box-sizing: border-box;
+  border: $b-1 solid var(--grid-type-select-border-color);
+
+  &:hover {
+    --grid-type-select-border-color: var(--color-background-quaternary);
+  }
+}
+
+.grid-size {
+  @include use-typography("body-small");
+
+  display: flex;
+  align-items: center;
+  block-size: $sz-32;
+  inline-size: px2rem(60);
+  margin: 0;
+  padding: 0;
+  padding-inline-start: var(--sp-s);
+  border-radius: 0 $br-8 $br-8 0;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
+
+  &:hover {
+    background-color: var(--color-background-quaternary);
+    color: var(--color-foreground-primary);
+  }
+}
+
+.grid-size .numeric-input {
+  --input-height: #{$sz-28};
+
+  flex-grow: 1;
+}
+
+.editable-select-wrapper {
+  inline-size: px2rem(60);
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.editable-select-wrapper .column-select {
+  block-size: $sz-32;
+  border-radius: 0 $br-8 $br-8 0;
+  box-sizing: border-box;
+  border: $b-1 solid var(--color-background-tertiary);
+}
+
+.column-select .numeric-input {
+  @include use-typography("body-small");
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  outline: none;
+  display: block;
+  max-inline-size: 99%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  block-size: $sz-28;
+  inline-size: 100%;
+  flex-grow: 1;
+  border-radius: $br-8;
+  color: var(--color-foreground-primary);
+
+  &[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.hidden .show-options {
+  @include hidden-control;
+
+  border: $b-1 solid var(--color-background-quaternary);
+}
+
+.hidden .type-select-wrapper,
+.hidden .editable-select-wrapper {
+  @include hidden-control;
+}
+
+.hidden .column-select,
+.hidden .grid-type-select {
+  @include hidden-control;
+
+  border: $b-1 solid var(--color-background-quaternary);
+}
+
+.hidden .column-select {
+  border-radius: 0 $br-8 $br-8 0;
+}
+
+.hidden .column-select .numeric-input {
+  @include hidden-control;
+}
+
+.hidden .grid-size {
+  @include hidden-control;
+
+  border: $b-1 solid var(--color-background-quaternary);
+}
+
+.hidden .grid-size .numeric-input {
+  --input-fg-color: var(--color-foreground-secondary);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-xs);
   grid-column: span 2;
 }
 
 .grid-advanced-options {
-  @include deprecated.flex-column;
-
-  margin-top: deprecated.$s-4;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+  margin-block-start: var(--sp-xs);
 }
 
 .column-row,
 .square-row {
-  @include deprecated.flex-column;
-
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
   position: relative;
 }
 
 .advanced-row {
   position: relative;
   display: flex;
-  gap: deprecated.$s-4;
+  gap: var(--sp-xs);
+}
 
-  .orientation-select-wrapper {
-    width: deprecated.$s-92;
-    padding: 0;
+.orientation-select-wrapper {
+  inline-size: px2rem(92);
+  padding: 0;
+}
+
+.color-wrapper {
+  inline-size: px2rem(156);
+}
+
+.show-more-options {
+  --show-more-options-background-color: transparent;
+  --show-more-options-border-color: transparent;
+  --show-more-options-color: var(--color-foreground-secondary);
+
+  background: none;
+  cursor: pointer;
+  display: grid;
+  place-content: center;
+  block-size: $sz-32;
+  inline-size: $sz-32;
+  border-radius: $br-8;
+  background-color: var(--show-more-options-background-color);
+  border: $b-2 solid var(--show-more-options-border-color);
+  color: var(--show-more-options-color);
+
+  &:focus-visible {
+    outline: none;
+    border: $b-1 solid var(--color-accent-primary);
+
+    --show-more-options-background-color: var(--color-background-tertiary);
+    --show-more-options-color: var(--color-foreground-primary);
   }
 
-  .color-wrapper {
-    width: deprecated.$s-156;
+  &:hover {
+    --show-more-options-background-color: var(--color-background-quaternary);
+    --show-more-options-border-color: var(--color-background-quaternary);
+    --show-more-options-color: var(--color-accent-primary);
   }
 
-  .show-more-options {
-    @extend %button-tertiary;
+  &:active {
+    outline: none;
 
-    height: deprecated.$s-32;
-    width: deprecated.$s-32;
-
-    svg {
-      @extend %button-icon;
-    }
-
-    &.selected {
-      @extend %button-icon-selected;
-    }
+    --show-more-options-background-color: var(--color-background-secondary);
+    --show-more-options-border-color: transparent;
+    --show-more-options-color: var(--color-accent-primary);
   }
 
-  .height {
-    @extend %input-element;
-    @include deprecated.body-small-typography;
+  &[disabled],
+  &:disabled {
+    --show-more-options-color: var(--color-foreground-disabled);
 
-    .icon-text {
-      padding-top: deprecated.$s-1;
-    }
+    cursor: unset;
+    pointer-events: none;
   }
 
-  .gutter,
-  .margin {
-    @extend %input-element;
-    @include deprecated.body-small-typography;
+  &.selected {
+    outline: none;
 
-    .icon {
-      &.rotated svg {
-        transform: rotate(90deg);
-      }
-    }
+    --show-more-options-background-color: var(--color-background-quaternary);
+    --show-more-options-border-color: var(--color-background-quaternary);
+    --show-more-options-color: var(--color-accent-primary);
+  }
+}
+
+.show-more-options svg {
+  stroke: var(--show-more-options-color);
+}
+
+.height,
+.gutter,
+.margin {
+  --grid-param-input-color: var(--color-foreground-secondary);
+  --grid-param-input-background-color: var(--color-background-tertiary);
+  --grid-param-input-border-color: var(--color-background-tertiary);
+
+  @include use-typography("body-small");
+
+  display: flex;
+  align-items: center;
+  block-size: $sz-32;
+  border-radius: $br-8;
+  background-color: var(--grid-param-input-background-color);
+  border: $b-1 solid var(--grid-param-input-border-color);
+  color: var(--grid-param-input-color);
+
+  &:hover {
+    --grid-param-input-color: var(--color-foreground-primary);
+    --grid-param-input-background-color: var(--color-background-quaternary);
+    --grid-param-input-border-color: var(--color-background-quaternary);
   }
 
-  .more-options {
-    @include deprecated.menu-shadow;
-    @include deprecated.flex-column;
+  &:active,
+  &:focus,
+  &:focus-within {
+    --grid-param-input-color: var(--color-foreground-primary);
+    --grid-param-input-background-color: var(--color-background-primary);
+    --grid-param-input-border-color: var(--color-accent-primary);
+  }
 
-    position: absolute;
-    top: calc(deprecated.$s-2 + deprecated.$s-28);
-    right: 0;
-    width: deprecated.$s-156;
-    max-height: deprecated.$s-300;
-    padding: deprecated.$s-2;
-    margin: 0 0 deprecated.$s-40 0;
-    margin-top: deprecated.$s-4;
-    border-radius: deprecated.$br-8;
-    z-index: deprecated.$z-index-4;
-    overflow-y: auto;
-    background-color: var(--menu-background-color);
+  &:focus,
+  &:focus-within {
+    --grid-param-input-background-color: var(--color-background-tertiary);
+  }
+}
 
-    .option-btn {
-      @include deprecated.button-style;
+.height .numeric-input,
+.gutter .numeric-input,
+.margin .numeric-input {
+  --input-height: #{$sz-28};
 
-      display: flex;
-      align-items: center;
-      height: deprecated.$s-32;
-      padding: 0 deprecated.$s-8;
-      border-radius: deprecated.$br-6;
-      color: var(--menu-foreground-color);
+  flex-grow: 1;
+  margin-block: var(--sp-xxs);
+  margin-inline: 0;
+  padding-inline-start: $sz-6;
+}
 
-      &:hover {
-        background-color: var(--menu-background-color-hover);
-        color: var(--menu-foreground-color-hover);
-      }
-    }
+.more-options {
+  box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+  position: absolute;
+  inset-block-start: calc(var(--sp-xxs) + $sz-28);
+  inset-inline-end: 0;
+  inline-size: px2rem(156);
+  max-block-size: px2rem(300); // TODO: when this gets addressed in the DS, use a token
+  padding: var(--sp-xxs);
+  margin-block: var(--sp-xs) $sz-40;
+  margin-inline: 0;
+  border-radius: $br-8;
+  z-index: var(--z-index-dropdown);
+  overflow-y: auto;
+  background-color: var(--color-background-tertiary);
+}
+
+.option-btn {
+  @include use-typography("body-small");
+
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  block-size: $sz-32;
+  padding-inline: var(--sp-s);
+  border-radius: $br-6;
+  color: var(--color-foreground-primary);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-background-quaternary);
+    color: var(--color-foreground-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
   }
 }
 
 .second-row {
-  @extend %dropdown-wrapper;
-
-  left: unset;
-  right: 0;
-  width: deprecated.$s-108;
-
-  .btn-options {
-    @include deprecated.button-style;
-    @extend %dropdown-element-base;
-
-    width: 100%;
-  }
+  box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
+  position: absolute;
+  inset-block-start: $sz-32;
+  inset-inline-start: unset;
+  inset-inline-end: 0;
+  inline-size: px2rem(108);
+  max-block-size: var(--menu-max-height, px2rem(300));
+  padding: var(--sp-xxs);
+  margin: 0;
+  margin-block-start: px2rem(1);
+  border-radius: $br-8;
+  z-index: var(--z-index-dropdown);
+  overflow: hidden auto;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-foreground-primary);
 }