fix(react-color-picker): ColorSlider hue gradient (#33785)

Author: ValentinaKozlova

change/@fluentui-react-color-picker-preview-2abc108d-eef7-4643-a438-344c86e23cb9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: design changes for ColorPicker",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorAreaStyles.styles.ts

@@ -37,8 +37,9 @@ const useRootStyles = makeResetStyles({
   alignItems: 'start',
   justifyItems: 'start',
   [thumbSizeVar]: '20px',
-  minWidth: '200px',
-  minHeight: '200px',
+  minWidth: '300px',
+  minHeight: '300px',
+  boxSizing: 'border-box',
   [innerThumbRadiusVar]: '6px',
 });
 

packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSliderStyles.styles.ts

@@ -24,17 +24,13 @@ const thumbPositionVar = `--fui-Slider__thumb--position`;
 
 const hueBackground = `linear-gradient(${[
   `var(${colorSliderCSSVars.sliderDirectionVar})`,
-  'red 0',
-  '#f09 10%',
-  '#cd00ff 20%',
-  '#3200ff 30%',
-  '#06f 40%',
-  '#00fffd 50%',
-  '#0f6 60%',
-  '#35ff00 70%',
-  '#cdff00 80%',
-  '#f90 90%',
-  'red 100%',
+  'red',
+  'fuchsia',
+  'blue',
+  'aqua',
+  'lime',
+  'yellow',
+  'red',
 ].join(',')})`;
 
 /**