From 7c58477382883026b65ca770f31b87ff153654f8 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:20:13 +0200
Subject: [PATCH] feat: tweak properties panel styling (#9322)

---
 .../components/ColorPicker/ColorPicker.scss   | 36 ++++++++++---------
 packages/excalidraw/components/Range.scss     |  2 +-
 packages/excalidraw/css/styles.scss           | 12 +++++--
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 39e1845c3..bcb39281d 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -15,7 +15,7 @@
 
   .color-picker-container {
     display: grid;
-    grid-template-columns: 1fr 20px 1.625rem;
+    grid-template-columns: 1fr 8px 1.625rem;
     padding: 0.25rem 0px;
     align-items: center;
 
@@ -30,13 +30,14 @@
   }
 
   .color-picker__button {
-    --radius: 0.25rem;
+    --radius: 6px;
+    --size: 1.375rem;
 
     padding: 0;
-    margin: 0;
-    width: 1.35rem;
-    height: 1.35rem;
-    border: 1px solid var(--color-gray-30);
+    margin: 1px;
+    width: var(--size);
+    height: var(--size);
+    border: 0;
     border-radius: var(--radius);
     filter: var(--theme-filter);
     background-color: var(--swatch-color);
@@ -45,16 +46,16 @@
     font-family: inherit;
     box-sizing: border-box;
 
-    &:hover {
+    &:hover:not(.active) {
       &::after {
         content: "";
         position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        box-shadow: 0 0 0 1px var(--color-gray-30);
-        border-radius: calc(var(--radius) + 1px);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: 0 0 0 1px var(--swatch-color);
+        border-radius: var(--radius);
         filter: var(--theme-filter);
       }
     }
@@ -62,10 +63,11 @@
     &.active {
       .color-picker__button-outline {
         position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
+        --offset: -1px;
+        top: var(--offset);
+        left: var(--offset);
+        right: var(--offset);
+        bottom: var(--offset);
         box-shadow: 0 0 0 1px var(--color-primary-darkest);
         z-index: 1; // due hover state so this has preference
         border-radius: calc(var(--radius) + 1px);
diff --git a/packages/excalidraw/components/Range.scss b/packages/excalidraw/components/Range.scss
index 01cb91689..8dcc705fe 100644
--- a/packages/excalidraw/components/Range.scss
+++ b/packages/excalidraw/components/Range.scss
@@ -6,7 +6,7 @@
   .range-wrapper {
     position: relative;
     padding-top: 10px;
-    padding-bottom: 30px;
+    padding-bottom: 25px;
   }
 
   .range-input {
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 6f1d9cd48..33f9b4df0 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * {
     .buttonList {
       flex-wrap: wrap;
       display: flex;
-      column-gap: 0.5rem;
+      column-gap: 0.375rem;
       row-gap: 0.5rem;
 
       label {
@@ -386,10 +386,16 @@ body.excalidraw-cursor-resize * {
 
   .App-menu__left {
     overflow-y: auto;
-    padding: 0.75rem;
-    width: 12.5rem;
+    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
+    width: 11.875rem;
     box-sizing: border-box;
     position: absolute;
+
+    .buttonList label,
+    .buttonList button,
+    .buttonList .zIndexButton {
+      --button-bg: transparent;
+    }
   }
 
   .dropdown-select {