From 20d680229168b111564033aef87b71fbe88d71fd Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Fri, 21 Aug 2026 10:42:56 +0200
Subject: [PATCH] [color-picker] redesign

---
 semcore/color-picker/src/ColorPicker.tsx      | 25 +++---
 semcore/color-picker/src/PaletteManager.tsx   | 90 +++++++++----------
 semcore/color-picker/src/components/Item.tsx  |  4 +-
 .../src/style/color-picker.shadow.css         | 56 ++++++------
 .../style/design-tokens/design-tokens.json    |  9 +-
 5 files changed, 96 insertions(+), 88 deletions(-)

diff --git a/semcore/color-picker/src/ColorPicker.tsx b/semcore/color-picker/src/ColorPicker.tsx
index 2a32d80e61..2841a7f6e9 100644
--- a/semcore/color-picker/src/ColorPicker.tsx
+++ b/semcore/color-picker/src/ColorPicker.tsx
@@ -15,17 +15,17 @@ import { localizedMessages } from './translations/__intergalactic-dynamic-locale
 
 const defaultColors = [
   null,
-  '#008ff8', // --blue-400
-  '#00c192', // --green-300
-  '#c695ff', // --violet-300
-  '#fdc23c', // --yellow-200
-  '#ff8786', // --red-300
-  '#8ecdff', // --blue-200
-  '#f67cf2', // --pink-300
-  '#66c030', // --salad-300
-  '#006dca', // --blue-500
-  '#59ddaa', // --green-200
-  '#ab6cfe', // --violet-400
+  '--blue-400',
+  '--green-300',
+  '--violet-300',
+  '--yellow-200',
+  '--red-300',
+  '--blue-200',
+  '--pink-300',
+  '--salad-300',
+  '--blue-500',
+  '--green-200',
+  '--violet-400',
 ];
 
 class ColorPickerRoot extends Component<
@@ -158,11 +158,12 @@ const DefaultTrigger = React.forwardRef(function (
   const { styles, value } = props;
   const SDefaultTrigger = Root;
   const STriggerCircle = Flex;
+  const SChevronDownM = ChevronDownM;
 
   return sstyled(styles)(
     <SDefaultTrigger render={Box} tag='button' tabIndex={0} ref={ref}>
       <STriggerCircle justifyContent='center' alignItems='center' data-value={value} />
-      <ChevronDownM tabIndex={undefined} color='gray-800' />
+      <SChevronDownM tabIndex={undefined} />
     </SDefaultTrigger>,
   );
 });
diff --git a/semcore/color-picker/src/PaletteManager.tsx b/semcore/color-picker/src/PaletteManager.tsx
index b79eb9f93a..07c2296fc8 100644
--- a/semcore/color-picker/src/PaletteManager.tsx
+++ b/semcore/color-picker/src/PaletteManager.tsx
@@ -117,7 +117,7 @@ class PaletteManagerRoot extends Component<
 
     return sstyled(styles)(
       <>
-        <Divider mt={3} mb={3} />
+        <Divider />
         {Children.origin
           ? (
               <Children />
@@ -242,52 +242,48 @@ class InputColor extends Component<
     return sstyled(styles)(
       <SPaletteManager>
         <SItemColor data-value={valueColor} />
-        <SInputContainer>
-          <span aria-hidden='true'>#</span>
-          <SInput>
-            <Input ml={1} w={135} state={state} size={size} onKeyDown={this.handlekeyDown}>
-              <SInputValue
-                render={Input.Value}
-                placeholder='FFFFFF'
-                aria-label={getI18nText('colorField')}
-                onChange={this.handlerChange}
-                maxLength={7}
-                onFocus={onFocus}
-                onBlur={onBlur}
-              />
-              <SConfirmColor
-                aria-hidden='true'
-                aria-label={getI18nText('colorFieldConfirm')}
-                // @ts-expect-error our runtime can override props via `use:`, but its not available in types
-                use:tabIndex={-1}
-                tag={ButtonLink}
-                onClick={this.handlerAdd}
-                mt={1}
-                p={0}
-                hidden={!focus}
-              >
-                <ButtonLink.Addon p={0}>
-                  <CheckM color='green-300' />
-                </ButtonLink.Addon>
-              </SConfirmColor>
-              <SClearConfirm
-                aria-hidden='true'
-                aria-label={getI18nText('colorFieldClear')}
-                // @ts-expect-error our runtime can override props via `use:`, but its not available in types
-                use:tabIndex={-1}
-                tag={ButtonLink}
-                onClick={this.handlerCancel}
-                mt={1}
-                px={2}
-                hidden={!focus}
-              >
-                <ButtonLink.Addon p={0}>
-                  <CloseM color='gray-300' />
-                </ButtonLink.Addon>
-              </SClearConfirm>
-            </Input>
-          </SInput>
-        </SInputContainer>
+        <span aria-hidden='true'>#</span>
+        <Input state={state} size={size} onKeyDown={this.handlekeyDown}>
+          <SInputValue
+            render={Input.Value}
+            placeholder='FFFFFF'
+            aria-label={getI18nText('colorField')}
+            onChange={this.handlerChange}
+            maxLength={7}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+          <SConfirmColor
+            aria-hidden='true'
+            aria-label={getI18nText('colorFieldConfirm')}
+            // @ts-expect-error our runtime can override props via `use:`, but its not available in types
+            use:tabIndex={-1}
+            tag={ButtonLink}
+            onClick={this.handlerAdd}
+            mt={1}
+            p={0}
+            hidden={!focus}
+          >
+            <ButtonLink.Addon p={0}>
+              <CheckM color='green-300' />
+            </ButtonLink.Addon>
+          </SConfirmColor>
+          <SClearConfirm
+            aria-hidden='true'
+            aria-label={getI18nText('colorFieldClear')}
+            // @ts-expect-error our runtime can override props via `use:`, but its not available in types
+            use:tabIndex={-1}
+            tag={ButtonLink}
+            onClick={this.handlerCancel}
+            mt={1}
+            px={2}
+            hidden={!focus}
+          >
+            <ButtonLink.Addon p={0}>
+              <CloseM color='gray-300' />
+            </ButtonLink.Addon>
+          </SClearConfirm>
+        </Input>
       </SPaletteManager>,
     );
   }
diff --git a/semcore/color-picker/src/components/Item.tsx b/semcore/color-picker/src/components/Item.tsx
index a05bdb98b6..179ace0f1f 100644
--- a/semcore/color-picker/src/components/Item.tsx
+++ b/semcore/color-picker/src/components/Item.tsx
@@ -47,9 +47,7 @@ export default function Item(props: ItemAsProps) {
       <SItemContainer
         render={Box}
         interaction={interaction}
-        selected={selected}
-        value={value}
-        displayLabel={displayLabel}
+        use:value={value?.startsWith('--') ? `var(${value})` : value}
         role='option'
         aria-selected={selected}
         ref={triggerRef}
diff --git a/semcore/color-picker/src/style/color-picker.shadow.css b/semcore/color-picker/src/style/color-picker.shadow.css
index 11efc8b36b..71fa6cd829 100644
--- a/semcore/color-picker/src/style/color-picker.shadow.css
+++ b/semcore/color-picker/src/style/color-picker.shadow.css
@@ -1,6 +1,10 @@
 SColorPickerPopper {
-  max-width: calc(var(--intergalactic-spacing-4x, 16px) * 2 + 28px * 6 + 4px * 6);
-  padding: var(--intergalactic-spacing-4x, 16px);
+  max-width: calc(var(--intergalactic-form-control-m, 32px) * 6 + var(--intergalactic-spacing-content-gap-xsmall, 2px) * 5 + var(--intergalactic-spacing-content-padding-large, 16px) * 2 + 2px);
+  padding: var(--intergalactic-spacing-content-padding-large, 16px);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
 }
 
 SItemContainer {
@@ -8,15 +12,16 @@ SItemContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: var(--intergalactic-form-control-m, 32px);
+  height: var(--intergalactic-form-control-m, 32px);
   border-radius: 50%;
   border: 1px solid transparent;
   outline-color: transparent;
   cursor: pointer;
+  box-sizing: border-box;
 
   &:hover {
-    border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+    border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
   &::after {
@@ -25,7 +30,6 @@ SItemContainer {
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    box-shadow: inset 0px 0px 1px var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
     background: var(--value);
   }
 }
@@ -67,21 +71,17 @@ SColorsContainer, SColors {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--intergalactic-spacing-1x, 4px);
-}
+  gap: var(--intergalactic-spacing-content-gap-xsmall, 2px);
 
-SPaletteManager {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: var(--intergalactic-spacing-3x, 12px);
-  /* disable-tokens-validator */
-  margin-left: calc(var(--intergalactic-spacing-1x, 4px) - 1px);
+  &:empty {
+    display: none;
+  }
 }
 
-SInputContainer {
+SPaletteManager {
   display: flex;
   align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
 }
 
 SPlusButton {
@@ -107,6 +107,7 @@ SDefaultTrigger {
   align-items: center;
   outline-color: transparent;
   cursor: pointer;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   border: 0;
   background: transparent;
   padding: 0;
@@ -114,13 +115,12 @@ SDefaultTrigger {
 
 STriggerCircle {
   position: relative;
-  width: 16px;
-  height: 16px;
-  /* disable-tokens-validator */
-  margin-right: calc(var(--intergalactic-spacing-1x, 4px) + 1px);
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   background-color: var(--data-value);
   border: 1px solid transparent;
+  box-sizing: content-box;
 }
 
 STriggerCircle:not([data-value]) {
@@ -133,12 +133,15 @@ STriggerCircle:not([data-value]) {
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 1px;
-    height: 16px;
-    background: #E0E1E9;
-    z-index: 1;
+    height: 20px;
+    background: var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
   }
 }
 
+SChevronDownM {
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899))
+}
+
 SCloseIcon {
   position: absolute;
   top: 0px;
@@ -163,11 +166,14 @@ SLabel {
 }
 
 SItemColor {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border-radius: 50%;
   border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
   background: var(--data-value);
+  box-sizing: border-box;
+  margin: 5px;
+  flex-shrink: 0;
 }
 
 SConfirmColor[hidden],
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index aeb7d6200a..9b2cf7f4eb 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -485,6 +485,7 @@
       "base-trigger",
       "bulk-textarea",
       "button",
+      "color-picker",
       "counter",
       "d3-chart",
       "date-picker",
@@ -2983,6 +2984,7 @@
       "bulk-textarea",
       "card",
       "checkbox",
+      "color-picker",
       "d3-chart",
       "data-table",
       "date-picker",
@@ -3384,6 +3386,7 @@
     "description": "Large padding for content inside controls and surfaces.",
     "components": [
       "bulk-textarea",
+      "color-picker",
       "feature-popover",
       "notice-bubble"
     ]
@@ -3417,7 +3420,9 @@
     "name": "--intergalactic-spacing-content-gap-xsmall",
     "value": "2px",
     "description": "Extra small gap between content elements inside controls, rows, or columns.",
-    "components": []
+    "components": [
+      "color-picker"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-small",
@@ -3442,6 +3447,7 @@
       "base-trigger",
       "button",
       "checkbox",
+      "color-picker",
       "dropdown",
       "dropdown-menu",
       "input",
@@ -3471,6 +3477,7 @@
     "value": "12px",
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
+      "color-picker",
       "notice-bubble",
       "pagination"
     ]