Fix (web): Update the style of segmented controls and add metallic texture gradients (#9591)

### What problem does this PR solve?

Fix (web): Update the style of segmented controls and add metallic
texture gradients #3221
-Modified the selected state style of Segmented components, adding
metallic texture gradient and lower border
-Added a metallic gradient background image in tailwind.diag.js
-Added the -- metallic variable in tailwind.css to define metallic
texture colors

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/tailwind.css

@@ -90,6 +90,7 @@
 
     --input-border: rgba(22, 22, 24, 0.2);
 
+    --metallic: #46464a;
     /* design colors */
 
     --bg-base: #f6f6f7;
@@ -230,6 +231,7 @@
 
     --input-border: rgba(255, 255, 255, 0.2);
 
+    --metallic: #fafafa;
     /* design colors */
 
     --bg-base: #161618;