@hero-design/rn 8.108.1 → 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,110 +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) {
-  // 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, ")");
-}
-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 (_, _char2) {
-    return /[a-z]/.test(_char2) ? _char2.toUpperCase() : _char2;
-  });
-};
-
 var colors = {
   backgroundColor: {
     property: 'backgroundColor',
@@ -25317,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,
@@ -25326,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
   });
@@ -25341,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);
 });
 
@@ -25381,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.1",
+  "version": "8.108.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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,

package/src/theme/components/slider.ts

@@ -1,13 +1,32 @@
+import { UNSELECTED_TRACK_OPACITY } from '../../components/Slider/constants';
+import { dimHex, hexToRgba } from '../../utils/helpers';
 import type { GlobalTheme } from '../global';
 
 const getSliderTheme = (theme: GlobalTheme) => {
   const 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
+    ),
   };
 
   const shadows = {