From bb65782d0801916ffd639ae9d55f2e96f8224e0c Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Wed, 5 Nov 2025 14:06:26 +0100
Subject: [PATCH] :tada: Add sidebar css variables (#7645)

* :tada: Add sidebar css variables

* :tada: Explain more in depth the grid structure
---
 frontend/src/app/main/constants.cljs          |  10 +-
 frontend/src/app/main/ui/ds/_sizes.scss       |   1 -
 frontend/src/app/main/ui/viewer/comments.scss |   2 +-
 frontend/src/app/main/ui/viewer/inspect.cljs  |   7 +-
 frontend/src/app/main/ui/viewer/inspect.scss  |   9 +-
 .../workspace/colorpicker/color_tokens.cljs   |   2 +-
 .../src/app/main/ui/workspace/main_menu.scss  |   4 +-
 .../src/app/main/ui/workspace/palette.cljs    |   5 +-
 .../src/app/main/ui/workspace/sidebar.cljs    |  24 ++---
 .../src/app/main/ui/workspace/sidebar.scss    |  15 ++-
 .../ui/workspace/sidebar/common/sidebar.scss  | 101 ++++++++++++++++++
 .../app/main/ui/workspace/sidebar/layers.scss |   4 +-
 .../sidebar/options/drawing/frame.scss        |   5 +-
 .../sidebar/options/menus/align.scss          |   5 +-
 .../workspace/sidebar/options/menus/blur.scss |   9 +-
 .../workspace/sidebar/options/menus/bool.scss |   5 +-
 .../options/menus/color_selection.scss        |   5 +-
 .../sidebar/options/menus/component.scss      |  10 +-
 .../sidebar/options/menus/exports.scss        |   9 +-
 .../workspace/sidebar/options/menus/fill.scss |   5 +-
 .../sidebar/options/menus/frame_grid.scss     |   9 +-
 .../sidebar/options/menus/grid_cell.scss      |   5 +-
 .../sidebar/options/menus/layer.scss          |   5 +-
 .../options/menus/layout_container.scss       |  56 ++--------
 .../sidebar/options/menus/layout_item.scss    |  45 ++------
 .../sidebar/options/menus/measures.scss       |  27 +----
 .../sidebar/options/menus/shadow.scss         |   5 +-
 .../sidebar/options/menus/stroke.scss         |   5 +-
 .../workspace/sidebar/options/menus/text.scss |   5 +-
 .../sidebar/options/menus/typography.scss     |  10 +-
 .../sidebar/options/rows/shadow_row.scss      |   9 +-
 .../sidebar/options/rows/stroke_row.scss      |   5 +-
 .../main/ui/workspace/sidebar/sitemap.scss    |   2 +-
 33 files changed, 205 insertions(+), 220 deletions(-)
 create mode 100644 frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss

diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs
index 6495764c39..42db97febe 100644
--- a/frontend/src/app/main/constants.cljs
+++ b/frontend/src/app/main/constants.cljs
@@ -15,8 +15,14 @@
 (def grid-x-axis 10)
 (def grid-y-axis 10)
 
-(def sidebar-default-width 318)
-(def sidebar-default-max-width 768)
+;; Before changing these values also check:
+;; frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss
+
+(def right-sidebar-default-width 318)
+(def right-sidebar-default-max-width 768)
+
+(def left-sidebar-default-width 318)
+(def left-sidebar-default-max-width 500)
 
 (def page-metadata
   "Default data for page metadata."
diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index e92d399007..067bd0b416 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/frontend/src/app/main/ui/ds/_sizes.scss
@@ -28,7 +28,6 @@ $sz-200: px2rem(200);
 $sz-224: px2rem(224);
 $sz-252: px2rem(252);
 $sz-284: px2rem(284);
-$sz-318: px2rem(318);
 $sz-352: px2rem(352);
 $sz-364: px2rem(364);
 $sz-384: px2rem(384);
diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss
index f567027f33..fa9ef1daf8 100644
--- a/frontend/src/app/main/ui/viewer/comments.scss
+++ b/frontend/src/app/main/ui/viewer/comments.scss
@@ -104,7 +104,7 @@
   position: absolute;
   right: 0;
   top: deprecated.$s-44;
-  width: deprecated.$s-276;
+  width: var(--right-sidebar-width);
   height: calc(100vh - deprecated.$s-48);
   z-index: deprecated.$z-index-10;
   background-color: var(--panel-background-color);
diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs
index 36a9f83239..9040f7cdf7 100644
--- a/frontend/src/app/main/ui/viewer/inspect.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect.cljs
@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.main.constants :refer [right-sidebar-default-width right-sidebar-default-max-width]]
    [app.main.data.viewer :as dv]
    [app.main.store :as st]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
@@ -70,7 +71,7 @@
         {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move]
          set-right-size :set-size
          right-size :size}
-        (use-resize-hook :code 276 276 768 :x true :right)
+        (use-resize-hook :code right-sidebar-default-width right-sidebar-default-width right-sidebar-default-max-width :x true :right)
 
         handle-change-section
         (mf/use-callback
@@ -81,7 +82,7 @@
         (mf/use-callback
          (mf/deps right-size)
          (fn []
-           (set-right-size (if (> right-size 276) 276 768))))]
+           (set-right-size (if (> right-size right-sidebar-default-width) right-sidebar-default-width right-sidebar-default-max-width))))]
 
     (mf/use-effect on-mount)
 
@@ -106,7 +107,7 @@
                                  :not-expand (not can-be-expanded?)
                                  :expanded can-be-expanded?)
 
-            :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
+            :style #js {"--right-sidebar-width" (when can-be-expanded? (dm/str right-size "px"))}}
       (when can-be-expanded?
         [:div {:class (stl/css :resize-area)
                :on-pointer-down on-pointer-down
diff --git a/frontend/src/app/main/ui/viewer/inspect.scss b/frontend/src/app/main/ui/viewer/inspect.scss
index 2752ffe4b3..0ed6152256 100644
--- a/frontend/src/app/main/ui/viewer/inspect.scss
+++ b/frontend/src/app/main/ui/viewer/inspect.scss
@@ -6,9 +6,6 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 
-$width-settings-bar: deprecated.$s-276;
-$width-settings-bar-max: deprecated.$s-500;
-
 .inspect-svg-wrapper {
   @include deprecated.flexCenter;
   position: relative;
@@ -32,18 +29,18 @@ $width-settings-bar-max: deprecated.$s-500;
 .sidebar-container {
   position: relative;
   align-self: flex-start;
-  width: $width-settings-bar;
+  width: var(--right-sidebar-width);
 
   background-color: var(--panel-background-color);
   border-top: deprecated.$s-1 solid var(--search-bar-input-border-color);
 }
 
 .not-expand {
-  max-width: $width-settings-bar;
+  max-width: var(--right-sidebar-width);
 }
 
 .expanded {
-  width: var(--width, $width-settings-bar);
+  width: var(--right-sidebar-width, var(--right-sidebar-width));
 }
 
 .resize-area {
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
index 30721b2dfe..fb04f920da 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs
@@ -156,7 +156,7 @@
                        (let [{:keys [modal title]} (get dwta/token-properties :color)
                              window-size (dom/get-window-size)
                              left-sidebar (dom/get-element "left-sidebar-aside")
-                             x-size (dom/get-data left-sidebar "size")
+                             x-size (dom/get-data left-sidebar "left-sidebar-width")
                              modal-height 392
                              x (- (int x-size) 30)
                              y (- (/ (:height window-size) 2) (/ modal-height 2))]
diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss
index d47def9ad2..7deccc70ed 100644
--- a/frontend/src/app/main/ui/workspace/main_menu.scss
+++ b/frontend/src/app/main/ui/workspace/main_menu.scss
@@ -9,7 +9,7 @@
 .menu {
   @extend .menu-dropdown;
   top: deprecated.$s-48;
-  left: calc(var(--width, deprecated.$s-256) - deprecated.$s-16);
+  left: calc(var(--right-sidebar-width, deprecated.$s-256) - deprecated.$s-16);
   width: deprecated.$s-192;
   margin: 0;
 }
@@ -61,7 +61,7 @@
 
 .sub-menu {
   @extend .menu-dropdown;
-  left: calc(var(--width, deprecated.$s-256) + deprecated.$s-180);
+  left: calc(var(--right-sidebar-width, deprecated.$s-256) + deprecated.$s-180);
   width: deprecated.$s-192;
   min-width: calc(deprecated.$s-272 - deprecated.$s-2);
   width: 110%;
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index d5ad41b724..43f7b5e4e4 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.uuid :as uuid]
+   [app.main.constants :refer [left-sidebar-default-width]]
    [app.main.data.event :as ev]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.colors :as mdc]
@@ -37,10 +38,10 @@
 
 (defn calculate-palette-padding [rulers?]
   (let [left-sidebar           (dom/get-element "left-sidebar-aside")
-        left-sidebar-size      (-> (dom/get-data left-sidebar "size")
+        left-sidebar-size      (-> (dom/get-data left-sidebar "left-sidebar-width")
                                    (d/parse-integer))
         rulers-width           (if rulers? 22 0)
-        min-left-sidebar-width 318
+        min-left-sidebar-width left-sidebar-default-width
         left-padding           4
         calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 3289e18bb9..a9733567d7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -9,7 +9,7 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.types.tokens-lib :as ctob]
-   [app.main.constants :refer [sidebar-default-width sidebar-default-max-width]]
+   [app.main.constants :refer [right-sidebar-default-width right-sidebar-default-max-width left-sidebar-default-max-width left-sidebar-default-width]]
    [app.main.data.common :as dcm]
    [app.main.data.event :as ev]
    [app.main.data.style-dictionary :as sd]
@@ -119,7 +119,7 @@
          on-pointer-move :on-pointer-move
          parent-ref :parent-ref
          width :size}
-        (use-resize-hook :left-sidebar 318 318 500 :x false :left)
+        (use-resize-hook :left-sidebar left-sidebar-default-width left-sidebar-default-width left-sidebar-default-max-width :x false :left)
 
         on-tab-change
         (mf/use-fn
@@ -161,9 +161,9 @@
      [:aside {:ref parent-ref
               :id "left-sidebar-aside"
               :data-testid "left-sidebar"
-              :data-size (str width)
+              :data-left-sidebar-width (str width)
               :class aside-class
-              :style {:--width (dm/str width "px")}}
+              :style {:--left-sidebar-width (dm/str width "px")}}
 
       [:> left-header*
        {:file file
@@ -284,7 +284,7 @@
          on-pointer-move :on-pointer-move
          set-width :set-size
          width :size}
-        (use-resize-hook :code sidebar-default-width sidebar-default-width sidebar-default-max-width :x true :right)
+        (use-resize-hook :code right-sidebar-default-width right-sidebar-default-width right-sidebar-default-max-width :x true :right)
 
         on-change-section
         (mf/use-fn #(reset! current-section* %))
@@ -293,9 +293,9 @@
         (mf/use-fn
          (mf/deps width set-width)
          (fn []
-           (set-width (if (> width sidebar-default-width)
-                        sidebar-default-width
-                        sidebar-default-max-width))))
+           (set-width (if (> width right-sidebar-default-width)
+                        right-sidebar-default-width
+                        right-sidebar-default-max-width))))
 
         active-tokens-by-type
         (mf/with-memo [active-tokens]
@@ -306,14 +306,14 @@
       [:aside
        {:class (stl/css-case :right-settings-bar true
                              :not-expand (not can-be-expanded?)
-                             :expanded (> width sidebar-default-width))
+                             :expanded (> width right-sidebar-default-width))
 
         :id "right-sidebar-aside"
         :data-testid "right-sidebar"
         :data-size (str width)
-        :style {:--width (if can-be-expanded?
-                           (dm/str width "px")
-                           (dm/str sidebar-default-width "px"))}}
+        :style {:--right-sidebar-width (if can-be-expanded?
+                                         (dm/str width "px")
+                                         (dm/str right-sidebar-default-width "px"))}}
 
        (when can-be-expanded?
          [:div {:class (stl/css :resize-area)
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index cfb357eedd..3c6871e784 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -7,9 +7,6 @@
 @use "ds/_sizes.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 
-$width-settings-bar: $sz-318;
-$width-settings-bar-max: $sz-500;
-
 .left-settings-bar {
   display: grid;
   grid-template-areas:
@@ -19,9 +16,9 @@ $width-settings-bar-max: $sz-500;
   grid-template-columns: 1fr 0;
   position: relative;
   grid-area: left-sidebar;
-  min-width: $width-settings-bar;
-  max-width: $width-settings-bar-max;
-  width: var(--width, $width-settings-bar);
+  min-width: var(--left-sidebar-width);
+  max-width: var(--left-sidebar-width-max);
+  width: var(--right-sidebar-width);
   background-color: var(--panel-background-color);
   height: 100vh;
   max-height: 100vh;
@@ -65,14 +62,14 @@ $width-settings-bar-max: $sz-500;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   height: 100vh;
-  width: $width-settings-bar;
+  width: var(--right-sidebar-width);
   background-color: var(--panel-background-color);
   z-index: deprecated.$z-index-1;
   &.not-expand {
-    max-width: $width-settings-bar;
+    max-width: var(--right-sidebar-width);
   }
   &.expanded {
-    width: var(--width, $width-settings-bar);
+    width: var(--right-sidebar-width, var(--right-sidebar-width));
   }
 
   .settings-bar-inside {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss
new file mode 100644
index 0000000000..b5a372a431
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/sidebar/common/sidebar.scss
@@ -0,0 +1,101 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "ds/_sizes.scss" as *;
+@use "ds/spacing.scss" as *;
+@use "ds/_utils.scss" as *;
+
+// ============================================================
+// SIDEBAR & GRID CONFIGURATION
+// ============================================================
+//
+//  - We need to mantain these values in sync with the constants defined in
+//    frontend/src/app/main/constants.cljs
+//
+// ============================================================
+// DIMENSIONS
+// ============================================================
+//
+// Left sidebar
+$left-sidebar-width: px2rem(318);
+$left-sidebar-width-max: $sz-500;
+
+// Right sidebar
+$right-sidebar-width: px2rem(318);
+$right-sidebar-width-max: px2rem(768);
+
+// ============================================================
+// GRID SYSTEM (used inside right sidebar)
+// ============================================================
+//
+// We use a 8-column grid with fixed column width and spacing.
+// Useful for consistent layout alignment across components.
+//
+
+$column-width: $sz-32; // width of each grid column
+$column-gap: var(--sp-xs); // spacing between columns
+$column-number: 8; // total number of columns
+
+//      |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
+//   -> 8 columns (32px each) + 7 gaps (4px each) = 284px
+
+// Derived widths
+$options-width: calc(#{$column-width} * #{$column-number} + #{$column-gap} * calc(#{$column-number} - 1));
+$seven-column-width: calc(
+  #{$column-width} * calc(#{$column-number} - 1) + #{$column-gap} * calc(#{$column-number} - 2)
+);
+
+// ------------------------------------------------------------
+// Grid mixin — applies the standard structure to any container
+// ------------------------------------------------------------
+@mixin option-grid-structure {
+  display: grid;
+  grid-template-columns: repeat(#{$column-number}, #{$column-width});
+  column-gap: #{$column-gap};
+}
+
+// ============================================================
+// LAYOUT LOGIC — CALCULATED ELEMENTS
+// ============================================================
+//
+// This section defines special cases where elements don’t
+// perfectly fit the standard grid rhythm.
+//
+// Example: Two input blocks + one button inside an 8-column grid.
+//
+// Visual explanation:
+//   |----|_____________________________________________|-----|---|
+//   -> 284px options-width + 2*12px paddings + 10px scrollbar gutter
+//
+//        |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
+//   -> 8 columns (32px each) + 7 gaps (4px each) = 284px
+//
+//   But one block (grid-exception-input) doesn’t fit perfectly:
+//        |__________________|-|__________________|-|___|
+//
+// We calculate the width of that grid-exception-input as:
+//
+//   - 3.5 columns of base grid width
+//   - + 3 inter-column gaps
+//   - − half a gap (because it’s visually shared with the next block)
+
+$grid-exception-input-width: calc(#{$sz-32} * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
+
+// ============================================================
+// CSS VARIABLES (exposed for runtime use)
+// ============================================================
+//
+// Make sidebar and layout values accessible to JS/CSS consumers.
+
+:root {
+  --left-sidebar-width: #{$left-sidebar-width};
+  --left-sidebar-width-max: #{$left-sidebar-width-max};
+  --right-sidebar-width: #{$right-sidebar-width};
+  --right-sidebar-width-max: #{$right-sidebar-width-max};
+  --7-columns-dropdown-width: #{$seven-column-width};
+  --options-width: #{$options-width};
+  --grid-exception-input-width: #{$grid-exception-input-width};
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 1aa4b9845a..89818cf9c5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -207,13 +207,13 @@
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--calculated-height));
-  width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
+  width: calc(var(--left-sidebar-width) + var(--depth) * var(--layer-indentation-size));
   overflow-x: auto;
   overflow-y: overlay;
   scrollbar-gutter: stable;
 
   .element-list {
-    width: var(--width);
+    width: var(--left-sidebar-width);
     display: grid;
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
index c435bfae64..d66e5de852 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.scss
@@ -5,12 +5,11 @@
 // Copyright (c) KALEIDOS INC
 
 @use "ds/_sizes.scss" as *;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .presets {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   grid-column: 1 / -1;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
index 17a8224454..6535f728b4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .align-options {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   height: deprecated.$s-32;
 }
 .align-group-horizontal,
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
index 9c2e5733d7..e15a50c83e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
@@ -27,9 +26,7 @@
 }
 
 .first-row {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 
   .blur-info {
     grid-column: span 6;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
index ab0f18d00e..ef69c2dd4e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .boolean-options {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   height: var(--sp-xxxl);
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
index 46f0793a15..7519bcb568 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index 35a499746a..553a786e57 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -9,7 +9,7 @@
 @use "ds/_utils.scss" as *;
 @use "ds/spacing.scss" as *;
 @use "ds/typography.scss" as t;
-
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 @use "refactor/common-refactor.scss" as deprecated;
 
 .annotation {
@@ -446,9 +446,7 @@
 }
 
 .component-section {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .component-title {
@@ -651,9 +649,7 @@
 }
 
 .variant-property-container {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .variant-property-name-wrapper {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
index 2d6cc25313..f98f85753b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
@@ -22,9 +21,7 @@
 }
 
 .element-set-content {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .multiple-exports {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
index 82e182b54d..28a159b4de 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
@@ -8,11 +8,10 @@
 @use "ds/_borders.scss" as *;
 @use "ds/typography.scss" as t;
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .fill-section {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .fill-title {
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 e7caff9882..51b82c5434 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
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
@@ -28,9 +27,7 @@
 }
 
 .grid-title {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: deprecated.$s-4;
+  @include sidebar.option-grid-structure;
 }
 
 .option-row {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
index 5264a1e757..5b61b4dabf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .grid-cell-menu-container {
   @include deprecated.flexColumn;
@@ -13,9 +14,7 @@
 }
 
 .grid-cell-menu {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .grid-cell-menu-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
index fb0ad3dcf5..45591f7f59 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set-content {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   height: deprecated.$s-32;
   margin-bottom: deprecated.$s-8;
   .select {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
index d53e012245..13d04e9446 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -12,11 +12,10 @@
 @use "ds/spacing.scss" as *;
 @use "ds/mixins.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
@@ -42,9 +41,7 @@
 }
 
 .flex-layout-menu {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   margin-block-end: var(--sp-s);
 }
 
@@ -93,26 +90,10 @@
 }
 
 .forth-row {
-  /*
-    This element do not match the 8 column grid of sidebar
-
-   |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|  -> 8 column grid, (--sp-xxxl) width each
-
-   |__________________|-|__________________|-|___|  -> 2 inputs blocks + 1 button.
-
-    We need to calculate the total width of each input block:
-    - 3.5 columns of the the base grid (--sp-xxxl)
-    - plus 3 inter-column gaps (3 * --sp-xs)
-    - minus half a gap (--sp-xs / 2) because the last spacing is shared
-      with the next block, keeping the overall visual rhythm consistent.
-  */
-
-  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
-
   display: grid;
   grid-template-columns:
-    var(--input-width) /* first input block */
-    var(--input-width) /* second input block */
+    var(--grid-exception-input-width) /* first input block */
+    var(--grid-exception-input-width) /* second input block */
     var(--sp-xxxl); /* action button */
   gap: var(--sp-xs);
   grid-column: 1 / -1;
@@ -184,9 +165,7 @@
 }
 
 .grid-layout-menu {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .edit-grid-wrapper,
@@ -439,26 +418,10 @@
 
 .gap-row,
 .padding-row {
-  /*
-    This element do not match the 8 column grid of sidebar
-
-   |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|  -> 8 column grid, (--sp-xxxl) width each
-
-   |__________________|-|__________________|-|___|  -> 2 inputs blocks + 1 button.
-
-    We need to calculate the total width of each input block:
-    - 3.5 columns of the the base grid (--sp-xxxl)
-    - plus 3 inter-column gaps (3 * --sp-xs)
-    - minus half a gap (--sp-xs / 2) because the last spacing is shared
-      with the next block, keeping the overall visual rhythm consistent.
-  */
-
-  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
-
   display: grid;
   grid-template-columns:
-    var(--input-width) /* first input block */
-    var(--input-width) /* second input block */
+    var(--grid-exception-input-width) /* first input block */
+    var(--grid-exception-input-width) /* second input block */
     var(--sp-xxxl); /* action button */
   gap: var(--sp-xs);
 }
@@ -470,7 +433,6 @@
   align-items: center;
 }
 
-// TODO: Add a proper variable to this sizing
 .numeric-input-measures {
-  --dropdown-width: 247px;
+  --dropdown-width: var(--7-columns-dropdown-width);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
index 80276a4d2e..1efa2c4f2f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
   margin: 0;
@@ -19,9 +20,7 @@
 }
 
 .flex-element-menu {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .behaviour-menu {
@@ -62,26 +61,10 @@
 }
 
 .margin-row {
-  /* 
-    This element do not match the 8 column grid of sidebar
-
-   |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|  -> 8 column grid, (--sp-xxxl) width each
-
-   |__________________|-|__________________|-|___|  -> 2 inputs blocks + 1 button.
-
-    We need to calculate the total width of each input block:
-    - 3.5 columns of the the base grid (--sp-xxxl)
-    - plus 3 inter-column gaps (3 * --sp-xs)
-    - minus half a gap (--sp-xs / 2) because the last spacing is shared
-      with the next block, keeping the overall visual rhythm consistent.
-  */
-
-  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
-
   display: grid;
   grid-template-columns:
-    var(--input-width) /* first input block */
-    var(--input-width) /* second input block */
+    var(--grid-exception-input-width) /* first input block */
+    var(--grid-exception-input-width) /* second input block */
     var(--sp-xxxl); /* action button */
   gap: var(--sp-xs);
 }
@@ -150,26 +133,10 @@
 }
 
 .advanced-options {
-  /* 
-    This element do not match the 8 column grid of sidebar
-
-   |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|  -> 8 column grid, (--sp-xxxl) width each
-
-   |__________________|-|__________________|-|___|  -> 2 inputs blocks + 1 button.
-
-    We need to calculate the total width of each input block:
-    - 3.5 columns of the the base grid (--sp-xxxl)
-    - plus 3 inter-column gaps (3 * --sp-xs)
-    - minus half a gap (--sp-xs / 2) because the last spacing is shared
-      with the next block, keeping the overall visual rhythm consistent.
-  */
-
-  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
-
   display: grid;
   grid-template-columns:
-    var(--input-width) /* first input block */
-    var(--input-width) /* second input block */
+    var(--grid-exception-input-width) /* first input block */
+    var(--grid-exception-input-width) /* second input block */
     var(--sp-xxxl); /* action button */
   gap: var(--sp-xs);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 7c7323532b..ffc4822ef0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -5,37 +5,20 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  /* 
-    This element do not match the 8 column grid of sidebar
-
-   |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|  -> 8 column grid, (--sp-xxxl) width each
-
-   |__________________|-|__________________|-|___|  -> 2 inputs blocks + 1 button.
-
-    We need to calculate the total width of each input block:
-    - 3.5 columns of the the base grid (--sp-xxxl)
-    - plus 3 inter-column gaps (3 * --sp-xs)
-    - minus half a gap (--sp-xs / 2) because the last spacing is shared
-      with the next block, keeping the overall visual rhythm consistent.
-  */
-
-  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));
-
   display: grid;
   grid-template-columns:
-    var(--input-width) /* first input block */
-    var(--input-width) /* second input block */
+    var(--grid-exception-input-width) /* first input block */
+    var(--grid-exception-input-width) /* second input block */
     var(--sp-xxxl); /* action button */
   gap: var(--sp-xs);
   margin-bottom: var(--sp-s);
 }
 
 .presets {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
   grid-column: 1 / -1;
 }
 
@@ -207,5 +190,5 @@
 
 // TODO: Add a proper variable to this sizing
 .numeric-input-measures {
-  --dropdown-width: 247px;
+  --dropdown-width: var(--7-columns-dropdown-width);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
index bc922763ca..4e2453ff6d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
@@ -7,11 +7,10 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/_borders.scss" as *;
 @use "ds/typography.scss" as t;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .shadow-section {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .shadow-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
index e85f576b45..874beac840 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
@@ -7,11 +7,10 @@
 @use "ds/_sizes.scss" as *;
 @use "ds/_borders.scss" as *;
 @use "ds/typography.scss" as t;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .stroke-section {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .stroke-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
index 6090b4a2ed..aa97d0ee32 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
@@ -5,11 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .element-set {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  column-gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .element-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 75be0b665d..506fb58b34 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -6,8 +6,6 @@
 
 @use "refactor/common-refactor.scss" as deprecated;
 
-$width-settings-bar: deprecated.$s-276;
-
 .typography-entry {
   display: flex;
   flex-direction: row;
@@ -204,12 +202,12 @@ $width-settings-bar: deprecated.$s-276;
     display: grid;
     grid-template-columns: 50% 50%;
     height: deprecated.$s-32;
-    --calcualted-width: calc(var(--width) - deprecated.$s-48);
+    --calculated-width: calc(var(--right-sidebar-width) - deprecated.$s-48);
     padding-left: deprecated.$s-2;
     .info-label {
       @include deprecated.bodySmallTypography;
       @include deprecated.textEllipsis;
-      width: calc(var(--calcualted-width) / 2);
+      width: calc(var(--calculated-width) / 2);
       padding-top: deprecated.$s-8;
       color: var(--assets-item-name-foreground-color);
     }
@@ -217,7 +215,7 @@ $width-settings-bar: deprecated.$s-276;
       @include deprecated.bodySmallTypography;
       @include deprecated.textEllipsis;
       padding-top: deprecated.$s-8;
-      width: calc(var(--calcualted-width) / 2);
+      width: calc(var(--calculated-width) / 2);
       color: var(--assets-item-name-foreground-color-hover);
     }
   }
@@ -250,7 +248,7 @@ $width-settings-bar: deprecated.$s-276;
 
 .text-options {
   @include deprecated.flexColumn;
-  max-width: calc(var(--width, $width-settings-bar) - deprecated.$s-16);
+  max-width: var(--options-width);
 
   &:not(.text-options-full-size) {
     position: relative;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
index 79c9b5b0f4..f13404d03e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
@@ -9,6 +9,7 @@
 @use "ds/_borders.scss" as *;
 @use "ds/_utils.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .shadow-element {
   display: flex;
@@ -30,9 +31,7 @@
 }
 
 .shadow-basic {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .shadow-basic-info {
@@ -67,9 +66,7 @@
 }
 
 .shadow-advanced {
-  display: grid;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
+  @include sidebar.option-grid-structure;
 }
 
 .shadow-advanced-row {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
index 1d2fe1198a..525809cc33 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -6,6 +6,7 @@
 
 @use "ds/typography.scss" as t;
 @use "refactor/common-refactor.scss" as deprecated;
+@use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .stroke-data {
   display: flex;
@@ -30,10 +31,8 @@
 }
 
 .stroke-options {
-  display: grid;
+  @include sidebar.option-grid-structure;
   align-items: center;
-  grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: var(--sp-xs);
 }
 
 .stroke-width-input {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 4817c90cd9..086af118e8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -38,7 +38,7 @@
   display: flex;
   flex-direction: column;
   height: calc(-38px + var(--height, deprecated.$s-200));
-  width: var(--width);
+  width: var(--left-sidebar-width);
   overflow-x: hidden;
   overflow-y: overlay;
   scrollbar-gutter: stable;