@hero-design/rn 8.108.0 → 8.108.2

package/lib/index.js

@@ -6710,14 +6710,174 @@ var getSkeletonTheme = function getSkeletonTheme(theme) {
   };
 };
 
+var DISABLED_UNSELECTED_TRACK_OPACITY = 0.1;
+var DISABLED_SELECTED_TRACK_OPACITY = 1;
+var UNSELECTED_TRACK_OPACITY = 0.1;
+
+var isIOS = reactNative.Platform.OS === 'ios';
+var isAndroid = reactNative.Platform.OS === 'android';
+function pick(keys, obj) {
+  return keys.filter(function (key) {
+    return key in obj;
+  }).reduce(function (result, cur) {
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
+  }, {});
+}
+function omit(keys, obj) {
+  var result = obj;
+  keys.forEach(function (key) {
+    delete result[key];
+  });
+  return result;
+}
+function hexToRgba(hex, a) {
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof a !== 'number') {
+    throw new Error('hexToRgba: hex must be a string and alpha must be a number');
+  }
+  if (a < 0 || a > 1) {
+    throw new Error('hexToRgba: alpha must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('hexToRgba: hex must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : cleanHex;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
+  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+}
+/**
+ * Dim a hex color by blending it with a surface color
+ * @param hex - The hex color to dim (3 or 6 characters, with or without #)
+ * @param surface - The surface color to blend with.
+ * @param amount - The amount of dimming (0 = original color, 1 = fully surface color)
+ * @returns The dimmed hex color
+ */
+var DEFAULT_DIM_AMOUNT = 0.6;
+function dimHex(hex, surface) {
+  var amount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_DIM_AMOUNT;
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof surface !== 'string' || typeof amount !== 'number') {
+    throw new Error('dimHex: hex and surface must be strings and amount must be a number');
+  }
+  if (amount < 0 || amount > 1) {
+    throw new Error('dimHex: amount must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  var cleanSurface = surface.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('dimHex: hex must be a valid 3 or 6 character hex color');
+  }
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanSurface)) {
+    throw new Error('dimHex: surface must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char2) {
+    return _char2 + _char2;
+  }).join('') : cleanHex;
+  var normalizedSurface = cleanSurface.length === 3 ? cleanSurface.split('').map(function (_char3) {
+    return _char3 + _char3;
+  }).join('') : cleanSurface;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
+  var sr = parseInt(normalizedSurface.substring(0, 2), 16);
+  var sg = parseInt(normalizedSurface.substring(2, 4), 16);
+  var sb = parseInt(normalizedSurface.substring(4, 6), 16);
+  // Linear interpolation between colors
+  var lerp = function lerp(c, s) {
+    return Math.round(c * (1 - amount) + s * amount);
+  };
+  var rr = lerp(r, sr).toString(16).padStart(2, '0');
+  var gg = lerp(g, sg).toString(16).padStart(2, '0');
+  var bb = lerp(b, sb).toString(16).padStart(2, '0');
+  return "#".concat(rr).concat(gg).concat(bb);
+}
+var _deepCompareValue = function deepCompareValue(a, b) {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
+    return false;
+  }
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+  // If types don't match, they can't be equal
+  if (_typeof$1(a) !== _typeof$1(b)) return false;
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every(function (val, index) {
+      return _deepCompareValue(val, b[index]);
+    });
+  }
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  // Handle object comparison
+  if (_typeof$1(a) === 'object' && _typeof$1(b) === 'object') {
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return keysB.includes(key) && _deepCompareValue(a[key], b[key]);
+    });
+  }
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
+var useKeyboard = function useKeyboard() {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isKeyboardVisible = _useState2[0],
+    setKeyboardVisible = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyboardHeight = _useState4[0],
+    setKeyboardHeight = _useState4[1];
+  React.useEffect(function () {
+    var keyboardWillShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
+};
+var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
+  return string.replace(/-([a-z0-9])/g, function (_, _char4) {
+    return /[a-z]/.test(_char4) ? _char4.toUpperCase() : _char4;
+  });
+};
+
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
-    minimumTrackTint: theme.colors.primary,
-    thumbTint: theme.colors.primary,
-    maximumTrackTint: theme.colors.highlightedSurface,
-    trackBackground: theme.colors.highlightedSurface,
-    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
-    disabledTrackBackground: theme.colors.neutralGlobalSurface
+    // Unselected track colors
+    unselectedTrack: hexToRgba(theme.colors.overlayGlobalSurface, UNSELECTED_TRACK_OPACITY),
+    disabledUnselectedTrack: dimHex(theme.colors.overlayGlobalSurface, theme.colors.defaultGlobalSurface),
+    // Selected track colors
+    selectedTrack: theme.colors.primary,
+    disabledSelectedTrack: dimHex(theme.colors.primary, theme.colors.defaultGlobalSurface),
+    // Thumb/marker colors
+    thumb: theme.colors.primary,
+    disabledThumb: dimHex(theme.colors.primary, theme.colors.defaultGlobalSurface)
   };
   var shadows = {
     marker: theme.shadows["default"]
@@ -9442,98 +9602,6 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var isIOS = reactNative.Platform.OS === 'ios';
-var isAndroid = reactNative.Platform.OS === 'android';
-function pick(keys, obj) {
-  return keys.filter(function (key) {
-    return key in obj;
-  }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
-  }, {});
-}
-function omit(keys, obj) {
-  var result = obj;
-  keys.forEach(function (key) {
-    delete result[key];
-  });
-  return result;
-}
-function hexToRgba(hex, a) {
-  var arrBuff = new ArrayBuffer(4);
-  var vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  var arrByte = new Uint8Array(arrBuff);
-  var _arrByte = _slicedToArray(arrByte, 3),
-    r = _arrByte[0],
-    g = _arrByte[1],
-    b = _arrByte[2];
-  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
-}
-var _deepCompareValue = function deepCompareValue(a, b) {
-  // Handle strict equality first (handles primitives, null, undefined)
-  if (a === b) return true;
-  // Special handling for NaN (NaN !== NaN in JS)
-  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
-    return false;
-  }
-  // If either is null or undefined (but they are not strictly equal), return false
-  if (a == null || b == null) return false;
-  // If types don't match, they can't be equal
-  if (_typeof$1(a) !== _typeof$1(b)) return false;
-  // Handle array comparison
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    return a.every(function (val, index) {
-      return _deepCompareValue(val, b[index]);
-    });
-  }
-  // If one is array and the other isn't, return false
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-  // Handle object comparison
-  if (_typeof$1(a) === 'object' && _typeof$1(b) === 'object') {
-    var keysA = Object.keys(a);
-    var keysB = Object.keys(b);
-    if (keysA.length !== keysB.length) return false;
-    return keysA.every(function (key) {
-      return keysB.includes(key) && _deepCompareValue(a[key], b[key]);
-    });
-  }
-  // If none of the above conditions matched, they're not equal
-  return false;
-};
-var useKeyboard = function useKeyboard() {
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isKeyboardVisible = _useState2[0],
-    setKeyboardVisible = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    keyboardHeight = _useState4[0],
-    setKeyboardHeight = _useState4[1];
-  React.useEffect(function () {
-    var keyboardWillShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardWillHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardWillShowListener.remove();
-      keyboardWillHideListener.remove();
-    };
-  }, []);
-  return {
-    isKeyboardVisible: isKeyboardVisible,
-    keyboardHeight: keyboardHeight
-  };
-};
-var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
-  return string.replace(/-([a-z0-9])/g, function (_, _char) {
-    return /[a-z]/.test(_char) ? _char.toUpperCase() : _char;
-  });
-};
-
 var colors = {
   backgroundColor: {
     property: 'backgroundColor',
@@ -23864,7 +23932,6 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
-  var theme = useTheme();
   var fabRef = React.useRef(null);
   var animatedValue = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React__namespace.default.useImperativeHandle(ref, function () {
@@ -23943,13 +24010,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1
-  // This FAB is moved up a bit compared to the original FAB,
-  // set marginBottom to negative value to compensate for it
-  , {
-    style: {
-      marginBottom: -theme.space.xxsmall
-    },
+  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -25312,6 +25373,10 @@ var Slider$2 = function Slider(_ref) {
     style = _ref.style,
     testID = _ref.testID;
   var theme = useTheme();
+  var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
+    selectedTrack = _theme$__hd__$slider$.selectedTrack,
+    thumb = _theme$__hd__$slider$.thumb,
+    unselectedTrack = _theme$__hd__$slider$.unselectedTrack;
   return /*#__PURE__*/React__namespace.default.createElement(RnSlider__default.default, {
     minimumValue: minimumValue,
     maximumValue: maximumValue,
@@ -25321,9 +25386,9 @@ var Slider$2 = function Slider(_ref) {
     onSlidingStart: onSlidingStart,
     onSlidingComplete: onSlidingComplete,
     disabled: disabled,
-    minimumTrackTintColor: theme.__hd__.slider.colors.minimumTrackTint,
-    thumbTintColor: theme.__hd__.slider.colors.thumbTint,
-    maximumTrackTintColor: theme.__hd__.slider.colors.maximumTrackTint,
+    minimumTrackTintColor: selectedTrack,
+    thumbTintColor: thumb,
+    maximumTrackTintColor: unselectedTrack,
     style: style,
     testID: testID
   });
@@ -25336,7 +25401,7 @@ var StyledMarker = index$c(reactNative.View)(function (_ref) {
     height: theme.__hd__.slider.sizes.markerHeight,
     width: theme.__hd__.slider.sizes.markerWidth,
     borderRadius: theme.__hd__.slider.radii.marker,
-    backgroundColor: themeDisabled ? theme.__hd__.slider.colors.disabledThumbTint : theme.__hd__.slider.colors.thumbTint
+    backgroundColor: themeDisabled ? theme.__hd__.slider.colors.disabledThumb : theme.__hd__.slider.colors.thumb
   }, theme.__hd__.slider.shadows.marker);
 });
 
@@ -25376,28 +25441,30 @@ var Slider$1 = function Slider(_ref) {
     return [(_value$start = value === null || value === void 0 ? void 0 : value.start) !== null && _value$start !== void 0 ? _value$start : minimumValue, (_value$end = value === null || value === void 0 ? void 0 : value.end) !== null && _value$end !== void 0 ? _value$end : maximumValue];
   }, [value === null || value === void 0 ? void 0 : value.start, value === null || value === void 0 ? void 0 : value.end, minimumValue, maximumValue]);
   var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
-    trackBackground = _theme$__hd__$slider$.trackBackground,
-    disabledTrackBackground = _theme$__hd__$slider$.disabledTrackBackground,
-    thumbTint = _theme$__hd__$slider$.thumbTint,
-    disabledThumbTint = _theme$__hd__$slider$.disabledThumbTint;
+    unselectedTrack = _theme$__hd__$slider$.unselectedTrack,
+    disabledUnselectedTrack = _theme$__hd__$slider$.disabledUnselectedTrack,
+    selectedTrack = _theme$__hd__$slider$.selectedTrack,
+    disabledSelectedTrack = _theme$__hd__$slider$.disabledSelectedTrack;
   var trackHeight = theme.__hd__.slider.sizes.trackHeight;
   // Define styles for disabled and enabled states
   var disabledStyles = {
     track: {
-      backgroundColor: disabledTrackBackground,
+      opacity: DISABLED_UNSELECTED_TRACK_OPACITY,
+      backgroundColor: disabledUnselectedTrack,
       height: trackHeight
     },
     selected: {
-      backgroundColor: disabledThumbTint
+      opacity: DISABLED_SELECTED_TRACK_OPACITY,
+      backgroundColor: disabledSelectedTrack
     }
   };
   var enabledStyles = {
     track: {
-      backgroundColor: trackBackground,
+      backgroundColor: unselectedTrack,
       height: trackHeight
     },
     selected: {
-      backgroundColor: thumbTint
+      backgroundColor: selectedTrack
     }
   };
   // Use styles based on the `disabled` state

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.108.0",
+  "version": "8.108.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1080,7 +1080,6 @@ exports[`ActionGroup has active true 1`] = `
               "flexDirection": "row",
               "height": 64,
               "justifyContent": "center",
-              "marginBottom": -2,
               "marginRight": 24,
               "marginTop": 24,
               "opacity": 1,

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,7 +1,11 @@
 import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Platform, Modal } from 'react-native';
+import { Animated, Modal, Platform } from 'react-native';
+import { useDeprecation } from '../../../utils/hooks';
+import Box from '../../Box';
 import type { IconName } from '../../Icon';
+import Portal from '../../Portal';
+import type { FABHandles } from '../FAB';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
@@ -12,11 +16,6 @@ import {
   StyledContainerInModal,
   StyledFAB,
 } from './StyledActionGroup';
-import Portal from '../../Portal';
-import Box from '../../Box';
-import type { FABHandles } from '../FAB';
-import { useDeprecation } from '../../../utils/hooks';
-import { useTheme } from '../../../theme';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -96,7 +95,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       headerTitle !== undefined
     );
 
-    const theme = useTheme();
     const fabRef = useRef<FABHandles>(null);
     const animatedValue = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
@@ -185,11 +183,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
 
             {active && (
               <StyledFAB
-                // This FAB is moved up a bit compared to the original FAB,
-                // set marginBottom to negative value to compensate for it
-                style={{
-                  marginBottom: -theme.space.xxsmall,
-                }}
                 key="fab-in-portal"
                 testID="fab-in-portal"
                 icon={fabIcon}

package/src/components/MapPin/__tests__/__snapshots__/Focussed.spec.tsx.snap

@@ -33,7 +33,7 @@ exports[`MapPin.Focussed renders icon correctly 1`] = `
           [
             {
               "fontSize": 42,
-              "textShadowColor": "rgba(0,0,0,0.28)",
+              "textShadowColor": "rgba(0,31,35,0.28)",
               "textShadowOffset": {
                 "height": 4,
                 "width": 0,

package/src/components/Slider/RangeSlider.tsx

@@ -5,6 +5,10 @@ import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 import { useTheme } from '../../theme';
 import { StyledMarker } from './StyledRangeSlider';
+import {
+  DISABLED_UNSELECTED_TRACK_OPACITY,
+  DISABLED_SELECTED_TRACK_OPACITY,
+} from './constants';
 
 export type SliderRangeValue = {
   start: number;
@@ -92,10 +96,10 @@ const Slider = ({
   }, [value?.start, value?.end, minimumValue, maximumValue]);
 
   const {
-    trackBackground,
-    disabledTrackBackground,
-    thumbTint,
-    disabledThumbTint,
+    unselectedTrack,
+    disabledUnselectedTrack,
+    selectedTrack,
+    disabledSelectedTrack,
   } = theme.__hd__.slider.colors;
 
   const { trackHeight } = theme.__hd__.slider.sizes;
@@ -103,21 +107,23 @@ const Slider = ({
   // Define styles for disabled and enabled states
   const disabledStyles = {
     track: {
-      backgroundColor: disabledTrackBackground,
+      opacity: DISABLED_UNSELECTED_TRACK_OPACITY,
+      backgroundColor: disabledUnselectedTrack,
       height: trackHeight,
     },
     selected: {
-      backgroundColor: disabledThumbTint,
+      opacity: DISABLED_SELECTED_TRACK_OPACITY,
+      backgroundColor: disabledSelectedTrack,
     },
   };
 
   const enabledStyles = {
     track: {
-      backgroundColor: trackBackground,
+      backgroundColor: unselectedTrack,
       height: trackHeight,
     },
     selected: {
-      backgroundColor: thumbTint,
+      backgroundColor: selectedTrack,
     },
   };
 

package/src/components/Slider/SingleSlider.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import RnSlider from '@react-native-community/slider';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
 
@@ -67,6 +67,8 @@ const Slider = ({
 }: SingleSliderProps) => {
   const theme = useTheme();
 
+  const { selectedTrack, thumb, unselectedTrack } = theme.__hd__.slider.colors;
+
   return (
     <RnSlider
       minimumValue={minimumValue}
@@ -77,9 +79,9 @@ const Slider = ({
       onSlidingStart={onSlidingStart}
       onSlidingComplete={onSlidingComplete}
       disabled={disabled}
-      minimumTrackTintColor={theme.__hd__.slider.colors.minimumTrackTint}
-      thumbTintColor={theme.__hd__.slider.colors.thumbTint}
-      maximumTrackTintColor={theme.__hd__.slider.colors.maximumTrackTint}
+      minimumTrackTintColor={selectedTrack}
+      thumbTintColor={thumb}
+      maximumTrackTintColor={unselectedTrack}
       style={style}
       testID={testID}
     />

package/src/components/Slider/StyledRangeSlider.tsx

@@ -7,8 +7,8 @@ const StyledMarker = styled(View)<{ themeDisabled: boolean }>(
     width: theme.__hd__.slider.sizes.markerWidth,
     borderRadius: theme.__hd__.slider.radii.marker,
     backgroundColor: themeDisabled
-      ? theme.__hd__.slider.colors.disabledThumbTint
-      : theme.__hd__.slider.colors.thumbTint,
+      ? theme.__hd__.slider.colors.disabledThumb
+      : theme.__hd__.slider.colors.thumb,
     ...theme.__hd__.slider.shadows.marker,
   })
 );

package/src/components/Slider/__tests__/RangeSlider.spec.tsx

@@ -29,7 +29,9 @@ describe('Slider.Range', () => {
       '#401960'
     );
 
-    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#ece8ef');
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe(
+      'rgba(0,0,0,0.1)'
+    );
 
     // verify prop
     expect(nativeComponent).toHaveProp('sliderLength', 100);
@@ -63,10 +65,10 @@ describe('Slider.Range', () => {
     const nativeComponent = getByTestId('native-multi-slider');
 
     expect(nativeComponent.props['selectedStyle'].backgroundColor).toBe(
-      '#bfc1c5'
+      '#b3a3bf'
     );
 
-    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#f6f6f7');
+    expect(nativeComponent.props['trackStyle'].backgroundColor).toBe('#999999');
   });
 
   it('trigger options', () => {
@@ -101,7 +103,7 @@ describe('StyledMarker', () => {
   it.each`
     themeDisabled | expectedBackgroundColor
     ${false}      | ${'#401960'}
-    ${true}       | ${'#bfc1c5'}
+    ${true}       | ${'#b3a3bf'}
   `(
     'renders correctly when disabled is $themeDisabled',
     ({ themeDisabled, expectedBackgroundColor }) => {

package/src/components/Slider/__tests__/__snapshots__/RangeSlider.spec.tsx.snap

@@ -36,7 +36,7 @@ exports[`Slider.Range renders correctly by default 1`] = `
       testID="native-multi-slider"
       trackStyle={
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": "rgba(0,0,0,0.1)",
           "height": 4,
         }
       }
@@ -100,7 +100,8 @@ exports[`Slider.Range renders correctly when disabled is $disabled 1`] = `
       onValuesChangeStart={[Function]}
       selectedStyle={
         {
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#b3a3bf",
+          "opacity": 1,
         }
       }
       sliderLength={0}
@@ -108,8 +109,9 @@ exports[`Slider.Range renders correctly when disabled is $disabled 1`] = `
       testID="native-multi-slider"
       trackStyle={
         {
-          "backgroundColor": "#f6f6f7",
+          "backgroundColor": "#999999",
           "height": 4,
+          "opacity": 0.1,
         }
       }
       values={
@@ -209,7 +211,7 @@ exports[`StyledMarker renders correctly when disabled is true 1`] = `
     style={
       [
         {
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#b3a3bf",
           "borderRadius": 999,
           "elevation": 6,
           "height": 24,

package/src/components/Slider/__tests__/__snapshots__/SingleSlider.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`Slider renders correctly by default 1`] = `
 >
   <Slider
     disabled={false}
-    maximumTrackTintColor="#ece8ef"
+    maximumTrackTintColor="rgba(0,0,0,0.1)"
     maximumValue={1}
     minimumTrackTintColor="#401960"
     minimumValue={0}
@@ -51,7 +51,7 @@ exports[`Slider renders correctly when disabled 1`] = `
 >
   <Slider
     disabled={true}
-    maximumTrackTintColor="#ece8ef"
+    maximumTrackTintColor="rgba(0,0,0,0.1)"
     maximumValue={1}
     minimumTrackTintColor="#401960"
     minimumValue={0}
@@ -92,7 +92,7 @@ exports[`Slider renders correctly with props 1`] = `
 >
   <Slider
     disabled={false}
-    maximumTrackTintColor="#ece8ef"
+    maximumTrackTintColor="rgba(0,0,0,0.1)"
     maximumValue={2}
     minimumTrackTintColor="#401960"
     minimumValue={-1}

package/src/components/Slider/constants.ts

@@ -0,0 +1,3 @@
+export const DISABLED_UNSELECTED_TRACK_OPACITY = 0.1;
+export const DISABLED_SELECTED_TRACK_OPACITY = 1;
+export const UNSELECTED_TRACK_OPACITY = 0.1;

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1281,12 +1281,12 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
-        "disabledThumbTint": "#bfc1c5",
-        "disabledTrackBackground": "#f6f6f7",
-        "maximumTrackTint": "#ece8ef",
-        "minimumTrackTint": "#401960",
-        "thumbTint": "#401960",
-        "trackBackground": "#ece8ef",
+        "disabledSelectedTrack": "#b3a3bf",
+        "disabledThumb": "#b3a3bf",
+        "disabledUnselectedTrack": "#999999",
+        "selectedTrack": "#401960",
+        "thumb": "#401960",
+        "unselectedTrack": "rgba(0,0,0,0.1)",
       },
       "radii": {
         "marker": 999,