fix(react-color picker) Thumb design (#33743)

ValentinaKozlova · dmytrokirpa · web-flow · commit 678529c67e1a · 2025-01-30T15:47:19.000+01:00
Co-authored-by: Dmytro Kirpa &lt;kirpadv@gmail.com&gt;
diff --git a/change/@fluentui-react-color-picker-preview-66c948a0-e330-4f71-a4f0-d9d7cf4ed771.json b/change/@fluentui-react-color-picker-preview-66c948a0-e330-4f71-a4f0-d9d7cf4ed771.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: thumb design for ColorPicker - partner's ask",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "v.kozlova13@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx
@@ -30,7 +30,7 @@ describe('AlphaSlider', () => {
       <div>
         <div
           class="fui-ColorSlider fui-AlphaSlider"
-          style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: transparent; --fui-AlphaSlider__rail--color: hsl(0 100%, 50%);"
+          style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: hsla(0 100%, 50%, 1); --fui-AlphaSlider__rail--color: hsl(0 100%, 50%);"
         >
           <input
             class="fui-ColorSlider__input fui-AlphaSlider__input"
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts
@@ -44,7 +44,7 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
   const rootVariables = {
     [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,
     [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-    [alphaSliderCSSVars.thumbColorVar]: `transparent`,
+    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,
     [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,
   };
 
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderStyles.styles.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderStyles.styles.ts
@@ -42,8 +42,11 @@ const useStyles = makeStyles({
  */
 const useThumbStyles = makeStyles({
   thumb: {
-    backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,
+    backgroundColor: tokens.colorNeutralBackground1,
     [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${alphaSliderCSSVars.sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
+    '::before': {
+      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,
+    },
   },
   horizontal: {
     transform: 'translateX(-50%)',
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx
@@ -15,7 +15,7 @@ describe('ColorArea', () => {
       <div>
         <div
           class="fui-ColorArea"
-          style="--fui-AreaX--progress: 100%; --fui-AreaY--progress: 50%; --fui-Area__thumb--color: transparent; --fui-Area--main-color: hsl(324, 100%, 50%);"
+          style="--fui-AreaX--progress: 100%; --fui-AreaY--progress: 50%; --fui-Area__thumb--color: rgb(128, 0, 76); --fui-Area--main-color: hsl(324, 100%, 50%);"
         >
           <div
             class="fui-ColorArea__thumb"
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { tinycolor } from '@ctrl/tinycolor';
 import { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';
 import type { ColorAreaProps, ColorAreaState } from './ColorArea.types';
 import type { HsvColor } from '../../types/color';
@@ -153,7 +154,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   const rootVariables = {
     [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,
     [colorAreaCSSVars.areaYProgressVar]: `${value}%`,
-    [colorAreaCSSVars.thumbColorVar]: 'transparent',
+    [colorAreaCSSVars.thumbColorVar]: tinycolor(hsvColor).toRgbString(),
     [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,
   };
   const state: ColorAreaState = {
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts
@@ -54,7 +54,8 @@ const useThumbStyles = makeStyles({
     outlineStyle: 'none',
     forcedColorAdjust: 'none',
     borderRadius: tokens.borderRadiusCircular,
-    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .18) ${tokens.colorNeutralBackground1} inset`,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,
+    boxShadow: tokens.shadow4,
     backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
     transform: 'translate(-50%, 50%)',
     [`${thumbPositionXVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorAreaCSSVars.areaXProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
@@ -67,7 +68,7 @@ const useThumbStyles = makeStyles({
       borderRadius: tokens.borderRadiusCircular,
       boxSizing: 'border-box',
       content: "''",
-      border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1Pressed}`,
+      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,
     },
   },
   focusIndicator: createFocusOutlineStyle({
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderStyles.styles.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderStyles.styles.ts
@@ -129,19 +129,17 @@ const useThumbStyles = makeStyles({
     outlineStyle: 'none',
     forcedColorAdjust: 'none',
     borderRadius: tokens.borderRadiusCircular,
-    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .18) ${tokens.colorNeutralBackground1} inset`,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,
+    boxShadow: tokens.shadow4,
     backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,
     [`${thumbPositionVar}`]: `clamp(var(${innerThumbRadiusVar}), var(${colorSliderCSSVars.sliderProgressVar}), calc(100% - var(${innerThumbRadiusVar})))`,
     '::before': {
       position: 'absolute',
-      top: '0px',
-      left: '0px',
-      bottom: '0px',
-      right: '0px',
+      inset: '0px',
       borderRadius: tokens.borderRadiusCircular,
       boxSizing: 'border-box',
       content: "''",
-      border: `calc(var(${thumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1Pressed}`,
+      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,
     },
   },
   horizontal: {

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ describe('AlphaSlider', () => {`
`30`	`30`	`<div>`
`31`	`31`	`<div`
`32`	`32`	`class="fui-ColorSlider fui-AlphaSlider"`
`33`		`- style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: transparent; --fui-AlphaSlider__rail--color: hsl(0 100%, 50%);"`
	`33`	`+ style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: hsla(0 100%, 50%, 1); --fui-AlphaSlider__rail--color: hsl(0 100%, 50%);"`
`34`	`34`	`>`
`35`	`35`	`<input`
`36`	`36`	`class="fui-ColorSlider__input fui-AlphaSlider__input"`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ describe('ColorArea', () => {`
`15`	`15`	`<div>`
`16`	`16`	`<div`
`17`	`17`	`class="fui-ColorArea"`
`18`		`- style="--fui-AreaX--progress: 100%; --fui-AreaY--progress: 50%; --fui-Area__thumb--color: transparent; --fui-Area--main-color: hsl(324, 100%, 50%);"`
	`18`	`+ style="--fui-AreaX--progress: 100%; --fui-AreaY--progress: 50%; --fui-Area__thumb--color: rgb(128, 0, 76); --fui-Area--main-color: hsl(324, 100%, 50%);"`
`19`	`19`	`>`
`20`	`20`	`<div`
`21`	`21`	`class="fui-ColorArea__thumb"`