fix(react-color-picker): design of thumb

microsoft · Dec 23, 2024 · 1835946 · 1835946
1 parent e09d638
commit 1835946
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/.../react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts b/.../react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts
@@ -54,7 +54,7 @@ const useThumbStyles = makeStyles({
     outlineStyle: 'none',
     forcedColorAdjust: 'none',
     borderRadius: tokens.borderRadiusCircular,
-    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
+    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .18) ${tokens.colorNeutralBackground1} inset`,
     backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
     transform: 'translate(-50%, 50%)',
     [`${thumbPositionXVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorAreaCSSVars.areaXProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
@@ -67,7 +67,7 @@ const useThumbStyles = makeStyles({
       borderRadius: tokens.borderRadiusCircular,
       boxSizing: 'border-box',
       content: "''",
-      border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,
+      border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1Pressed}`,
     },
   },
   focusIndicator: createFocusOutlineStyle({