@tamagui/themes 1.31.4 → 1.32.1

package/dist/esm/generated-new.js

@@ -2179,7 +2179,6 @@ const light_ListItem = {
   borderColorPress: "hsl(0, 0%, 95.1%)",
   placeholderColor: "hsl(0, 0%, 50.3%)"
 };
-const light_SliderTrack = light_ListItem;
 const light_Card = {
   background: "hsl(0, 0%, 97.3%)",
   backgroundHover: "hsl(0, 0%, 95.1%)",
@@ -2201,6 +2200,7 @@ const light_Card = {
 const light_DrawerFrame = light_Card;
 const light_Progress = light_Card;
 const light_TooltipArrow = light_Card;
+const light_SliderTrack = light_Card;
 const light_Button = {
   background: "hsl(0, 0%, 95.1%)",
   backgroundHover: "hsl(0, 0%, 94.0%)",
@@ -2240,26 +2240,26 @@ const light_Checkbox = {
 const light_SliderTrackActive = light_Checkbox;
 const light_Switch = light_Checkbox;
 const light_TooltipContent = light_Checkbox;
-const light_SliderThumb = {
-  background: "hsl(358, 100%, 69.5%)",
-  backgroundHover: "hsl(358, 85.3%, 64.0%)",
-  backgroundPress: "hsl(358, 75.0%, 59.0%)",
-  backgroundFocus: "hsl(358, 65.0%, 40.4%)",
-  backgroundStrong: "hsl(351, 89.0%, 96.0%)",
+const light_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(351, 89.0%, 96.0%)",
+  backgroundFocus: "hsl(358, 100%, 69.5%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(353, 23.0%, 9.8%)",
   colorHover: "hsl(357, 34.4%, 12.0%)",
   colorPress: "hsl(353, 23.0%, 9.8%)",
   colorFocus: "hsl(357, 34.4%, 12.0%)",
   colorTransparent: "hsl(353, 23.0%, 9.8%)",
-  borderColor: "hsl(358, 65.0%, 40.4%)",
-  borderColorHover: "hsl(356, 55.2%, 25.9%)",
-  borderColorFocus: "hsl(358, 75.0%, 59.0%)",
-  borderColorPress: "hsl(358, 65.0%, 40.4%)",
-  placeholderColor: "hsl(356, 51.1%, 21.9%)"
+  borderColor: "hsl(358, 100%, 69.5%)",
+  borderColorHover: "hsl(358, 85.3%, 64.0%)",
+  borderColorFocus: "hsl(351, 89.0%, 96.0%)",
+  borderColorPress: "hsl(358, 100%, 69.5%)",
+  placeholderColor: "hsl(357, 34.4%, 12.0%)"
 };
-const dark_red_SliderThumb = light_SliderThumb;
-const light_Tooltip = {
+const dark_red_SwitchThumb = light_SwitchThumb;
+const light_SliderThumb = {
   background: "hsl(0, 0%, 42.5%)",
   backgroundHover: "hsl(0, 0%, 50.3%)",
   backgroundPress: "hsl(0, 0%, 56.1%)",
@@ -2277,26 +2277,8 @@ const light_Tooltip = {
   borderColorPress: "hsl(0, 0%, 81.0%)",
   placeholderColor: "hsl(0, 0%, 95.1%)"
 };
-const light_ProgressIndicator = light_Tooltip;
-const light_SwitchThumb = {
-  background: "hsl(358, 85.3%, 64.0%)",
-  backgroundHover: "hsl(358, 75.0%, 59.0%)",
-  backgroundPress: "hsl(358, 65.0%, 40.4%)",
-  backgroundFocus: "hsl(356, 55.2%, 25.9%)",
-  backgroundStrong: "hsl(358, 100%, 69.5%)",
-  backgroundTransparent: "hsl(351, 89.0%, 96.0%)",
-  color: "hsl(353, 23.0%, 9.8%)",
-  colorHover: "hsl(357, 34.4%, 12.0%)",
-  colorPress: "hsl(353, 23.0%, 9.8%)",
-  colorFocus: "hsl(357, 34.4%, 12.0%)",
-  colorTransparent: "hsl(357, 34.4%, 12.0%)",
-  borderColor: "hsl(356, 55.2%, 25.9%)",
-  borderColorHover: "hsl(356, 51.1%, 21.9%)",
-  borderColorFocus: "hsl(358, 65.0%, 40.4%)",
-  borderColorPress: "hsl(356, 55.2%, 25.9%)",
-  placeholderColor: "hsl(356, 55.2%, 25.9%)"
-};
-const dark_red_SwitchThumb = light_SwitchThumb;
+const light_Tooltip = light_SliderThumb;
+const light_ProgressIndicator = light_SliderThumb;
 const light_Input = {
   background: "#fff",
   backgroundHover: "#f9f9f9",
@@ -2367,6 +2349,7 @@ const dark_Card = {
 const dark_DrawerFrame = dark_Card;
 const dark_Progress = dark_Card;
 const dark_TooltipArrow = dark_Card;
+const dark_SliderTrack = dark_Card;
 const dark_Button = {
   background: "#232323",
   backgroundHover: "#282828",
@@ -2406,43 +2389,25 @@ const dark_Checkbox = {
 const dark_SliderTrackActive = dark_Checkbox;
 const dark_Switch = dark_Checkbox;
 const dark_TooltipContent = dark_Checkbox;
-const dark_SliderTrack = {
-  background: "#050505",
-  backgroundHover: "#151515",
-  backgroundPress: "#191919",
-  backgroundFocus: "#232323",
-  backgroundStrong: "#050505",
-  backgroundTransparent: "#050505",
-  color: "#fff",
-  colorHover: "#a5a5a5",
-  colorPress: "#fff",
-  colorFocus: "#a5a5a5",
-  colorTransparent: "#fff",
-  borderColor: "#232323",
-  borderColorHover: "#282828",
-  borderColorFocus: "#191919",
-  borderColorPress: "#232323",
-  placeholderColor: "#626262"
-};
-const dark_SliderThumb = {
-  background: "#626262",
-  backgroundHover: "#545454",
-  backgroundPress: "#494949",
-  backgroundFocus: "#424242",
-  backgroundStrong: "#a5a5a5",
+const dark_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "#a5a5a5",
+  backgroundFocus: "#626262",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "#050505",
   colorHover: "#151515",
   colorPress: "#050505",
   colorFocus: "#151515",
   colorTransparent: "#050505",
-  borderColor: "#424242",
-  borderColorHover: "#323232",
-  borderColorFocus: "#494949",
-  borderColorPress: "#424242",
-  placeholderColor: "#282828"
+  borderColor: "#626262",
+  borderColorHover: "#545454",
+  borderColorFocus: "#a5a5a5",
+  borderColorPress: "#626262",
+  placeholderColor: "#151515"
 };
-const dark_Tooltip = {
+const dark_SliderThumb = {
   background: "#a5a5a5",
   backgroundHover: "#626262",
   backgroundPress: "#545454",
@@ -2460,25 +2425,8 @@ const dark_Tooltip = {
   borderColorPress: "#494949",
   placeholderColor: "#232323"
 };
-const dark_ProgressIndicator = dark_Tooltip;
-const dark_SwitchThumb = {
-  background: "#545454",
-  backgroundHover: "#494949",
-  backgroundPress: "#424242",
-  backgroundFocus: "#323232",
-  backgroundStrong: "#626262",
-  backgroundTransparent: "#a5a5a5",
-  color: "#050505",
-  colorHover: "#151515",
-  colorPress: "#050505",
-  colorFocus: "#151515",
-  colorTransparent: "#151515",
-  borderColor: "#323232",
-  borderColorHover: "#282828",
-  borderColorFocus: "#424242",
-  borderColorPress: "#323232",
-  placeholderColor: "#323232"
-};
+const dark_Tooltip = dark_SliderThumb;
+const dark_ProgressIndicator = dark_SliderThumb;
 const dark_Input = {
   background: "#151515",
   backgroundHover: "#191919",
@@ -2516,7 +2464,6 @@ const light_orange_ListItem = {
   borderColorPress: "hsl(24, 100%, 95.3%)",
   placeholderColor: "hsl(24, 100%, 37.0%)"
 };
-const light_orange_SliderTrack = light_orange_ListItem;
 const light_orange_Card = {
   background: "hsl(24, 100%, 95.3%)",
   backgroundHover: "hsl(25, 100%, 92.2%)",
@@ -2538,6 +2485,7 @@ const light_orange_Card = {
 const light_orange_DrawerFrame = light_orange_Card;
 const light_orange_Progress = light_orange_Card;
 const light_orange_TooltipArrow = light_orange_Card;
+const light_orange_SliderTrack = light_orange_Card;
 const light_orange_Button = {
   background: "hsl(25, 100%, 92.2%)",
   backgroundHover: "hsl(25, 100%, 88.2%)",
@@ -2577,31 +2525,31 @@ const light_orange_Checkbox = {
 const light_orange_SliderTrackActive = light_orange_Checkbox;
 const light_orange_Switch = light_orange_Checkbox;
 const light_orange_TooltipContent = light_orange_Checkbox;
-const light_orange_SliderThumb = {
-  background: "hsl(358, 65.0%, 48.7%)",
-  backgroundHover: "hsl(358, 69.4%, 55.2%)",
-  backgroundPress: "hsl(358, 75.0%, 59.0%)",
-  backgroundFocus: "hsl(359, 69.5%, 74.3%)",
-  backgroundStrong: "hsl(354, 50.0%, 14.6%)",
+const light_orange_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(354, 50.0%, 14.6%)",
+  backgroundFocus: "hsl(358, 65.0%, 48.7%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
   backgroundTransparent: "hsl(0, 0%, 9.0%)",
   color: "hsl(359, 100%, 99.4%)",
   colorHover: "hsl(359, 100%, 98.6%)",
   colorPress: "hsl(359, 100%, 99.4%)",
   colorFocus: "hsl(359, 100%, 98.6%)",
   colorTransparent: "hsl(359, 100%, 99.4%)",
-  borderColor: "hsl(358, 75.0%, 59.0%)",
-  borderColorHover: "hsl(359, 69.5%, 74.3%)",
-  borderColorFocus: "hsl(358, 75.0%, 59.0%)",
-  borderColorPress: "hsl(358, 75.0%, 59.0%)",
-  placeholderColor: "hsl(360, 90.2%, 91.9%)"
-};
-const light_yellow_SliderThumb = light_orange_SliderThumb;
-const light_green_SliderThumb = light_orange_SliderThumb;
-const light_blue_SliderThumb = light_orange_SliderThumb;
-const light_purple_SliderThumb = light_orange_SliderThumb;
-const light_pink_SliderThumb = light_orange_SliderThumb;
-const light_red_SliderThumb = light_orange_SliderThumb;
-const light_orange_Tooltip = {
+  borderColor: "hsl(354, 50.0%, 14.6%)",
+  borderColorHover: "hsl(358, 65.0%, 48.7%)",
+  borderColorFocus: "hsl(354, 50.0%, 14.6%)",
+  borderColorPress: "hsl(354, 50.0%, 14.6%)",
+  placeholderColor: "hsl(359, 100%, 98.6%)"
+};
+const light_yellow_SwitchThumb = light_orange_SwitchThumb;
+const light_green_SwitchThumb = light_orange_SwitchThumb;
+const light_blue_SwitchThumb = light_orange_SwitchThumb;
+const light_purple_SwitchThumb = light_orange_SwitchThumb;
+const light_pink_SwitchThumb = light_orange_SwitchThumb;
+const light_red_SwitchThumb = light_orange_SwitchThumb;
+const light_orange_SliderThumb = {
   background: "hsl(15, 60.0%, 17.0%)",
   backgroundHover: "hsl(24, 100%, 37.0%)",
   backgroundPress: "hsl(24, 100%, 46.5%)",
@@ -2619,31 +2567,8 @@ const light_orange_Tooltip = {
   borderColorPress: "hsl(24, 100%, 46.5%)",
   placeholderColor: "hsl(25, 100%, 92.2%)"
 };
-const light_orange_ProgressIndicator = light_orange_Tooltip;
-const light_orange_SwitchThumb = {
-  background: "hsl(358, 69.4%, 55.2%)",
-  backgroundHover: "hsl(358, 75.0%, 59.0%)",
-  backgroundPress: "hsl(359, 69.5%, 74.3%)",
-  backgroundFocus: "hsl(360, 81.7%, 87.8%)",
-  backgroundStrong: "hsl(358, 65.0%, 48.7%)",
-  backgroundTransparent: "hsl(354, 50.0%, 14.6%)",
-  color: "hsl(359, 100%, 99.4%)",
-  colorHover: "hsl(359, 100%, 98.6%)",
-  colorPress: "hsl(359, 100%, 99.4%)",
-  colorFocus: "hsl(359, 100%, 98.6%)",
-  colorTransparent: "hsl(359, 100%, 98.6%)",
-  borderColor: "hsl(359, 69.5%, 74.3%)",
-  borderColorHover: "hsl(360, 81.7%, 87.8%)",
-  borderColorFocus: "hsl(359, 69.5%, 74.3%)",
-  borderColorPress: "hsl(359, 69.5%, 74.3%)",
-  placeholderColor: "hsl(360, 81.7%, 87.8%)"
-};
-const light_yellow_SwitchThumb = light_orange_SwitchThumb;
-const light_green_SwitchThumb = light_orange_SwitchThumb;
-const light_blue_SwitchThumb = light_orange_SwitchThumb;
-const light_purple_SwitchThumb = light_orange_SwitchThumb;
-const light_pink_SwitchThumb = light_orange_SwitchThumb;
-const light_red_SwitchThumb = light_orange_SwitchThumb;
+const light_orange_Tooltip = light_orange_SliderThumb;
+const light_orange_ProgressIndicator = light_orange_SliderThumb;
 const light_orange_Input = {
   background: "hsl(24, 70.0%, 99.0%)",
   backgroundHover: "hsl(24, 83.3%, 97.6%)",
@@ -2681,7 +2606,6 @@ const light_yellow_ListItem = {
   borderColorPress: "hsl(55, 100%, 90.9%)",
   placeholderColor: "hsl(42, 100%, 29.0%)"
 };
-const light_yellow_SliderTrack = light_yellow_ListItem;
 const light_yellow_Card = {
   background: "hsl(55, 100%, 90.9%)",
   backgroundHover: "hsl(54, 100%, 86.6%)",
@@ -2703,6 +2627,7 @@ const light_yellow_Card = {
 const light_yellow_DrawerFrame = light_yellow_Card;
 const light_yellow_Progress = light_yellow_Card;
 const light_yellow_TooltipArrow = light_yellow_Card;
+const light_yellow_SliderTrack = light_yellow_Card;
 const light_yellow_Button = {
   background: "hsl(54, 100%, 86.6%)",
   backgroundHover: "hsl(52, 97.9%, 82.0%)",
@@ -2742,7 +2667,7 @@ const light_yellow_Checkbox = {
 const light_yellow_SliderTrackActive = light_yellow_Checkbox;
 const light_yellow_Switch = light_yellow_Checkbox;
 const light_yellow_TooltipContent = light_yellow_Checkbox;
-const light_yellow_Tooltip = {
+const light_yellow_SliderThumb = {
   background: "hsl(40, 55.0%, 13.5%)",
   backgroundHover: "hsl(42, 100%, 29.0%)",
   backgroundPress: "hsl(50, 100%, 48.5%)",
@@ -2760,7 +2685,8 @@ const light_yellow_Tooltip = {
   borderColorPress: "hsl(50, 100%, 48.5%)",
   placeholderColor: "hsl(54, 100%, 86.6%)"
 };
-const light_yellow_ProgressIndicator = light_yellow_Tooltip;
+const light_yellow_Tooltip = light_yellow_SliderThumb;
+const light_yellow_ProgressIndicator = light_yellow_SliderThumb;
 const light_yellow_Input = {
   background: "hsl(60, 54.0%, 98.5%)",
   backgroundHover: "hsl(52, 100%, 95.5%)",
@@ -2798,7 +2724,6 @@ const light_green_ListItem = {
   borderColorPress: "hsl(139, 55.2%, 94.5%)",
   placeholderColor: "hsl(153, 67.0%, 28.5%)"
 };
-const light_green_SliderTrack = light_green_ListItem;
 const light_green_Card = {
   background: "hsl(139, 55.2%, 94.5%)",
   backgroundHover: "hsl(140, 48.7%, 91.0%)",
@@ -2820,6 +2745,7 @@ const light_green_Card = {
 const light_green_DrawerFrame = light_green_Card;
 const light_green_Progress = light_green_Card;
 const light_green_TooltipArrow = light_green_Card;
+const light_green_SliderTrack = light_green_Card;
 const light_green_Button = {
   background: "hsl(140, 48.7%, 91.0%)",
   backgroundHover: "hsl(141, 43.7%, 86.0%)",
@@ -2859,7 +2785,7 @@ const light_green_Checkbox = {
 const light_green_SliderTrackActive = light_green_Checkbox;
 const light_green_Switch = light_green_Checkbox;
 const light_green_TooltipContent = light_green_Checkbox;
-const light_green_Tooltip = {
+const light_green_SliderThumb = {
   background: "hsl(155, 40.0%, 14.0%)",
   backgroundHover: "hsl(153, 67.0%, 28.5%)",
   backgroundPress: "hsl(152, 57.5%, 37.6%)",
@@ -2877,7 +2803,8 @@ const light_green_Tooltip = {
   borderColorPress: "hsl(152, 57.5%, 37.6%)",
   placeholderColor: "hsl(140, 48.7%, 91.0%)"
 };
-const light_green_ProgressIndicator = light_green_Tooltip;
+const light_green_Tooltip = light_green_SliderThumb;
+const light_green_ProgressIndicator = light_green_SliderThumb;
 const light_green_Input = {
   background: "hsl(136, 50.0%, 98.9%)",
   backgroundHover: "hsl(138, 62.5%, 96.9%)",
@@ -2915,7 +2842,6 @@ const light_blue_ListItem = {
   borderColorPress: "hsl(209, 100%, 96.5%)",
   placeholderColor: "hsl(211, 100%, 43.2%)"
 };
-const light_blue_SliderTrack = light_blue_ListItem;
 const light_blue_Card = {
   background: "hsl(209, 100%, 96.5%)",
   backgroundHover: "hsl(210, 98.8%, 94.0%)",
@@ -2937,6 +2863,7 @@ const light_blue_Card = {
 const light_blue_DrawerFrame = light_blue_Card;
 const light_blue_Progress = light_blue_Card;
 const light_blue_TooltipArrow = light_blue_Card;
+const light_blue_SliderTrack = light_blue_Card;
 const light_blue_Button = {
   background: "hsl(210, 98.8%, 94.0%)",
   backgroundHover: "hsl(209, 95.0%, 90.1%)",
@@ -2976,7 +2903,7 @@ const light_blue_Checkbox = {
 const light_blue_SliderTrackActive = light_blue_Checkbox;
 const light_blue_Switch = light_blue_Checkbox;
 const light_blue_TooltipContent = light_blue_Checkbox;
-const light_blue_Tooltip = {
+const light_blue_SliderThumb = {
   background: "hsl(211, 100%, 15.0%)",
   backgroundHover: "hsl(211, 100%, 43.2%)",
   backgroundPress: "hsl(208, 100%, 47.3%)",
@@ -2994,7 +2921,8 @@ const light_blue_Tooltip = {
   borderColorPress: "hsl(208, 100%, 47.3%)",
   placeholderColor: "hsl(210, 98.8%, 94.0%)"
 };
-const light_blue_ProgressIndicator = light_blue_Tooltip;
+const light_blue_Tooltip = light_blue_SliderThumb;
+const light_blue_ProgressIndicator = light_blue_SliderThumb;
 const light_blue_Input = {
   background: "hsl(206, 100%, 99.2%)",
   backgroundHover: "hsl(210, 100%, 98.0%)",
@@ -3032,7 +2960,6 @@ const light_purple_ListItem = {
   borderColorPress: "hsl(276, 83.1%, 97.0%)",
   placeholderColor: "hsl(272, 50.0%, 45.8%)"
 };
-const light_purple_SliderTrack = light_purple_ListItem;
 const light_purple_Card = {
   background: "hsl(276, 83.1%, 97.0%)",
   backgroundHover: "hsl(275, 76.4%, 94.7%)",
@@ -3054,6 +2981,7 @@ const light_purple_Card = {
 const light_purple_DrawerFrame = light_purple_Card;
 const light_purple_Progress = light_purple_Card;
 const light_purple_TooltipArrow = light_purple_Card;
+const light_purple_SliderTrack = light_purple_Card;
 const light_purple_Button = {
   background: "hsl(275, 76.4%, 94.7%)",
   backgroundHover: "hsl(275, 70.8%, 91.8%)",
@@ -3093,7 +3021,7 @@ const light_purple_Checkbox = {
 const light_purple_SliderTrackActive = light_purple_Checkbox;
 const light_purple_Switch = light_purple_Checkbox;
 const light_purple_TooltipContent = light_purple_Checkbox;
-const light_purple_Tooltip = {
+const light_purple_SliderThumb = {
   background: "hsl(272, 66.0%, 16.0%)",
   backgroundHover: "hsl(272, 50.0%, 45.8%)",
   backgroundPress: "hsl(272, 46.8%, 50.3%)",
@@ -3111,7 +3039,8 @@ const light_purple_Tooltip = {
   borderColorPress: "hsl(272, 46.8%, 50.3%)",
   placeholderColor: "hsl(275, 76.4%, 94.7%)"
 };
-const light_purple_ProgressIndicator = light_purple_Tooltip;
+const light_purple_Tooltip = light_purple_SliderThumb;
+const light_purple_ProgressIndicator = light_purple_SliderThumb;
 const light_purple_Input = {
   background: "hsl(280, 65.0%, 99.4%)",
   backgroundHover: "hsl(276, 100%, 99.0%)",
@@ -3149,7 +3078,6 @@ const light_pink_ListItem = {
   borderColorPress: "hsl(323, 86.3%, 96.5%)",
   placeholderColor: "hsl(322, 75.0%, 46.0%)"
 };
-const light_pink_SliderTrack = light_pink_ListItem;
 const light_pink_Card = {
   background: "hsl(323, 86.3%, 96.5%)",
   backgroundHover: "hsl(323, 78.7%, 94.2%)",
@@ -3171,6 +3099,7 @@ const light_pink_Card = {
 const light_pink_DrawerFrame = light_pink_Card;
 const light_pink_Progress = light_pink_Card;
 const light_pink_TooltipArrow = light_pink_Card;
+const light_pink_SliderTrack = light_pink_Card;
 const light_pink_Button = {
   background: "hsl(323, 78.7%, 94.2%)",
   backgroundHover: "hsl(323, 72.2%, 91.1%)",
@@ -3210,7 +3139,7 @@ const light_pink_Checkbox = {
 const light_pink_SliderTrackActive = light_pink_Checkbox;
 const light_pink_Switch = light_pink_Checkbox;
 const light_pink_TooltipContent = light_pink_Checkbox;
-const light_pink_Tooltip = {
+const light_pink_SliderThumb = {
   background: "hsl(320, 70.0%, 13.5%)",
   backgroundHover: "hsl(322, 75.0%, 46.0%)",
   backgroundPress: "hsl(322, 63.9%, 50.7%)",
@@ -3228,7 +3157,8 @@ const light_pink_Tooltip = {
   borderColorPress: "hsl(322, 63.9%, 50.7%)",
   placeholderColor: "hsl(323, 78.7%, 94.2%)"
 };
-const light_pink_ProgressIndicator = light_pink_Tooltip;
+const light_pink_Tooltip = light_pink_SliderThumb;
+const light_pink_ProgressIndicator = light_pink_SliderThumb;
 const light_pink_Input = {
   background: "hsl(322, 100%, 99.4%)",
   backgroundHover: "hsl(323, 100%, 98.4%)",
@@ -3266,7 +3196,6 @@ const light_red_ListItem = {
   borderColorPress: "hsl(360, 100%, 96.8%)",
   placeholderColor: "hsl(358, 65.0%, 48.7%)"
 };
-const light_red_SliderTrack = light_red_ListItem;
 const light_red_Card = {
   background: "hsl(360, 100%, 96.8%)",
   backgroundHover: "hsl(360, 97.9%, 94.8%)",
@@ -3288,6 +3217,7 @@ const light_red_Card = {
 const light_red_DrawerFrame = light_red_Card;
 const light_red_Progress = light_red_Card;
 const light_red_TooltipArrow = light_red_Card;
+const light_red_SliderTrack = light_red_Card;
 const light_red_Button = {
   background: "hsl(360, 97.9%, 94.8%)",
   backgroundHover: "hsl(360, 90.2%, 91.9%)",
@@ -3327,7 +3257,7 @@ const light_red_Checkbox = {
 const light_red_SliderTrackActive = light_red_Checkbox;
 const light_red_Switch = light_red_Checkbox;
 const light_red_TooltipContent = light_red_Checkbox;
-const light_red_Tooltip = {
+const light_red_SliderThumb = {
   background: "hsl(354, 50.0%, 14.6%)",
   backgroundHover: "hsl(358, 65.0%, 48.7%)",
   backgroundPress: "hsl(358, 69.4%, 55.2%)",
@@ -3345,7 +3275,8 @@ const light_red_Tooltip = {
   borderColorPress: "hsl(358, 69.4%, 55.2%)",
   placeholderColor: "hsl(360, 97.9%, 94.8%)"
 };
-const light_red_ProgressIndicator = light_red_Tooltip;
+const light_red_Tooltip = light_red_SliderThumb;
+const light_red_ProgressIndicator = light_red_SliderThumb;
 const light_red_Input = {
   background: "hsl(359, 100%, 99.4%)",
   backgroundHover: "hsl(359, 100%, 98.6%)",
@@ -3386,6 +3317,7 @@ const dark_orange_Card = {
 const dark_orange_DrawerFrame = dark_orange_Card;
 const dark_orange_Progress = dark_orange_Card;
 const dark_orange_TooltipArrow = dark_orange_Card;
+const dark_orange_SliderTrack = dark_orange_Card;
 const dark_orange_Button = {
   background: "hsl(25, 88.3%, 14.1%)",
   backgroundHover: "hsl(24, 87.6%, 16.6%)",
@@ -3425,43 +3357,25 @@ const dark_orange_Checkbox = {
 const dark_orange_SliderTrackActive = dark_orange_Checkbox;
 const dark_orange_Switch = dark_orange_Checkbox;
 const dark_orange_TooltipContent = dark_orange_Checkbox;
-const dark_orange_SliderTrack = {
-  background: "hsl(30, 70.0%, 7.2%)",
-  backgroundHover: "hsl(28, 100%, 8.4%)",
-  backgroundPress: "hsl(26, 91.1%, 11.6%)",
-  backgroundFocus: "hsl(25, 88.3%, 14.1%)",
-  backgroundStrong: "hsl(30, 70.0%, 7.2%)",
-  backgroundTransparent: "hsl(30, 70.0%, 7.2%)",
-  color: "#fff",
-  colorHover: "hsl(24, 97.0%, 93.2%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(24, 97.0%, 93.2%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(25, 88.3%, 14.1%)",
-  borderColorHover: "hsl(24, 87.6%, 16.6%)",
-  borderColorFocus: "hsl(26, 91.1%, 11.6%)",
-  borderColorPress: "hsl(25, 88.3%, 14.1%)",
-  placeholderColor: "hsl(24, 100%, 62.2%)"
-};
-const dark_orange_SliderThumb = {
-  background: "hsl(24, 100%, 62.2%)",
-  backgroundHover: "hsl(24, 100%, 58.5%)",
-  backgroundPress: "hsl(24, 94.0%, 50.0%)",
-  backgroundFocus: "hsl(25, 100%, 29.0%)",
-  backgroundStrong: "hsl(24, 97.0%, 93.2%)",
+const dark_orange_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(24, 97.0%, 93.2%)",
+  backgroundFocus: "hsl(24, 100%, 62.2%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(30, 70.0%, 7.2%)",
   colorHover: "hsl(28, 100%, 8.4%)",
   colorPress: "hsl(30, 70.0%, 7.2%)",
   colorFocus: "hsl(28, 100%, 8.4%)",
   colorTransparent: "hsl(30, 70.0%, 7.2%)",
-  borderColor: "hsl(25, 100%, 29.0%)",
-  borderColorHover: "hsl(24, 88.6%, 19.8%)",
-  borderColorFocus: "hsl(24, 94.0%, 50.0%)",
-  borderColorPress: "hsl(25, 100%, 29.0%)",
-  placeholderColor: "hsl(24, 87.6%, 16.6%)"
+  borderColor: "hsl(24, 100%, 62.2%)",
+  borderColorHover: "hsl(24, 100%, 58.5%)",
+  borderColorFocus: "hsl(24, 97.0%, 93.2%)",
+  borderColorPress: "hsl(24, 100%, 62.2%)",
+  placeholderColor: "hsl(28, 100%, 8.4%)"
 };
-const dark_orange_Tooltip = {
+const dark_orange_SliderThumb = {
   background: "hsl(24, 97.0%, 93.2%)",
   backgroundHover: "hsl(24, 100%, 62.2%)",
   backgroundPress: "hsl(24, 100%, 58.5%)",
@@ -3479,25 +3393,8 @@ const dark_orange_Tooltip = {
   borderColorPress: "hsl(24, 94.0%, 50.0%)",
   placeholderColor: "hsl(25, 88.3%, 14.1%)"
 };
-const dark_orange_ProgressIndicator = dark_orange_Tooltip;
-const dark_orange_SwitchThumb = {
-  background: "hsl(24, 100%, 58.5%)",
-  backgroundHover: "hsl(24, 94.0%, 50.0%)",
-  backgroundPress: "hsl(25, 100%, 29.0%)",
-  backgroundFocus: "hsl(24, 88.6%, 19.8%)",
-  backgroundStrong: "hsl(24, 100%, 62.2%)",
-  backgroundTransparent: "hsl(24, 97.0%, 93.2%)",
-  color: "hsl(30, 70.0%, 7.2%)",
-  colorHover: "hsl(28, 100%, 8.4%)",
-  colorPress: "hsl(30, 70.0%, 7.2%)",
-  colorFocus: "hsl(28, 100%, 8.4%)",
-  colorTransparent: "hsl(28, 100%, 8.4%)",
-  borderColor: "hsl(24, 88.6%, 19.8%)",
-  borderColorHover: "hsl(24, 87.6%, 16.6%)",
-  borderColorFocus: "hsl(25, 100%, 29.0%)",
-  borderColorPress: "hsl(24, 88.6%, 19.8%)",
-  placeholderColor: "hsl(24, 88.6%, 19.8%)"
-};
+const dark_orange_Tooltip = dark_orange_SliderThumb;
+const dark_orange_ProgressIndicator = dark_orange_SliderThumb;
 const dark_orange_Input = {
   background: "hsl(28, 100%, 8.4%)",
   backgroundHover: "hsl(26, 91.1%, 11.6%)",
@@ -3538,6 +3435,7 @@ const dark_yellow_Card = {
 const dark_yellow_DrawerFrame = dark_yellow_Card;
 const dark_yellow_Progress = dark_yellow_Card;
 const dark_yellow_TooltipArrow = dark_yellow_Card;
+const dark_yellow_SliderTrack = dark_yellow_Card;
 const dark_yellow_Button = {
   background: "hsl(45, 100%, 10.4%)",
   backgroundHover: "hsl(47, 100%, 12.1%)",
@@ -3577,43 +3475,25 @@ const dark_yellow_Checkbox = {
 const dark_yellow_SliderTrackActive = dark_yellow_Checkbox;
 const dark_yellow_Switch = dark_yellow_Checkbox;
 const dark_yellow_TooltipContent = dark_yellow_Checkbox;
-const dark_yellow_SliderTrack = {
-  background: "hsl(45, 100%, 5.5%)",
-  backgroundHover: "hsl(46, 100%, 6.7%)",
-  backgroundPress: "hsl(45, 100%, 8.7%)",
-  backgroundFocus: "hsl(45, 100%, 10.4%)",
-  backgroundStrong: "hsl(45, 100%, 5.5%)",
-  backgroundTransparent: "hsl(45, 100%, 5.5%)",
-  color: "#fff",
-  colorHover: "hsl(53, 100%, 91.0%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(53, 100%, 91.0%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(45, 100%, 10.4%)",
-  borderColorHover: "hsl(47, 100%, 12.1%)",
-  borderColorFocus: "hsl(45, 100%, 8.7%)",
-  borderColorPress: "hsl(45, 100%, 10.4%)",
-  placeholderColor: "hsl(48, 100%, 47.0%)"
-};
-const dark_yellow_SliderThumb = {
-  background: "hsl(48, 100%, 47.0%)",
-  backgroundHover: "hsl(54, 100%, 68.0%)",
-  backgroundPress: "hsl(53, 92.0%, 50.0%)",
-  backgroundFocus: "hsl(50, 100%, 22.0%)",
-  backgroundStrong: "hsl(53, 100%, 91.0%)",
+const dark_yellow_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(53, 100%, 91.0%)",
+  backgroundFocus: "hsl(48, 100%, 47.0%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(45, 100%, 5.5%)",
   colorHover: "hsl(46, 100%, 6.7%)",
   colorPress: "hsl(45, 100%, 5.5%)",
   colorFocus: "hsl(46, 100%, 6.7%)",
   colorTransparent: "hsl(45, 100%, 5.5%)",
-  borderColor: "hsl(50, 100%, 22.0%)",
-  borderColorHover: "hsl(49, 100%, 14.3%)",
-  borderColorFocus: "hsl(53, 92.0%, 50.0%)",
-  borderColorPress: "hsl(50, 100%, 22.0%)",
-  placeholderColor: "hsl(47, 100%, 12.1%)"
+  borderColor: "hsl(48, 100%, 47.0%)",
+  borderColorHover: "hsl(54, 100%, 68.0%)",
+  borderColorFocus: "hsl(53, 100%, 91.0%)",
+  borderColorPress: "hsl(48, 100%, 47.0%)",
+  placeholderColor: "hsl(46, 100%, 6.7%)"
 };
-const dark_yellow_Tooltip = {
+const dark_yellow_SliderThumb = {
   background: "hsl(53, 100%, 91.0%)",
   backgroundHover: "hsl(48, 100%, 47.0%)",
   backgroundPress: "hsl(54, 100%, 68.0%)",
@@ -3631,25 +3511,8 @@ const dark_yellow_Tooltip = {
   borderColorPress: "hsl(53, 92.0%, 50.0%)",
   placeholderColor: "hsl(45, 100%, 10.4%)"
 };
-const dark_yellow_ProgressIndicator = dark_yellow_Tooltip;
-const dark_yellow_SwitchThumb = {
-  background: "hsl(54, 100%, 68.0%)",
-  backgroundHover: "hsl(53, 92.0%, 50.0%)",
-  backgroundPress: "hsl(50, 100%, 22.0%)",
-  backgroundFocus: "hsl(49, 100%, 14.3%)",
-  backgroundStrong: "hsl(48, 100%, 47.0%)",
-  backgroundTransparent: "hsl(53, 100%, 91.0%)",
-  color: "hsl(45, 100%, 5.5%)",
-  colorHover: "hsl(46, 100%, 6.7%)",
-  colorPress: "hsl(45, 100%, 5.5%)",
-  colorFocus: "hsl(46, 100%, 6.7%)",
-  colorTransparent: "hsl(46, 100%, 6.7%)",
-  borderColor: "hsl(49, 100%, 14.3%)",
-  borderColorHover: "hsl(47, 100%, 12.1%)",
-  borderColorFocus: "hsl(50, 100%, 22.0%)",
-  borderColorPress: "hsl(49, 100%, 14.3%)",
-  placeholderColor: "hsl(49, 100%, 14.3%)"
-};
+const dark_yellow_Tooltip = dark_yellow_SliderThumb;
+const dark_yellow_ProgressIndicator = dark_yellow_SliderThumb;
 const dark_yellow_Input = {
   background: "hsl(46, 100%, 6.7%)",
   backgroundHover: "hsl(45, 100%, 8.7%)",
@@ -3690,6 +3553,7 @@ const dark_green_Card = {
 const dark_green_DrawerFrame = dark_green_Card;
 const dark_green_Progress = dark_green_Card;
 const dark_green_TooltipArrow = dark_green_Card;
+const dark_green_SliderTrack = dark_green_Card;
 const dark_green_Button = {
   background: "hsl(154, 48.4%, 12.9%)",
   backgroundHover: "hsl(154, 49.7%, 14.9%)",
@@ -3729,43 +3593,25 @@ const dark_green_Checkbox = {
 const dark_green_SliderTrackActive = dark_green_Checkbox;
 const dark_green_Switch = dark_green_Checkbox;
 const dark_green_TooltipContent = dark_green_Checkbox;
-const dark_green_SliderTrack = {
-  background: "hsl(146, 30.0%, 7.4%)",
-  backgroundHover: "hsl(155, 44.2%, 8.4%)",
-  backgroundPress: "hsl(155, 46.7%, 10.9%)",
-  backgroundFocus: "hsl(154, 48.4%, 12.9%)",
-  backgroundStrong: "hsl(146, 30.0%, 7.4%)",
-  backgroundTransparent: "hsl(146, 30.0%, 7.4%)",
-  color: "#fff",
-  colorHover: "hsl(137, 72.0%, 94.0%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(137, 72.0%, 94.0%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(154, 48.4%, 12.9%)",
-  borderColorHover: "hsl(154, 49.7%, 14.9%)",
-  borderColorFocus: "hsl(155, 46.7%, 10.9%)",
-  borderColorPress: "hsl(154, 48.4%, 12.9%)",
-  placeholderColor: "hsl(151, 50.0%, 53.2%)"
-};
-const dark_green_SliderThumb = {
-  background: "hsl(151, 50.0%, 53.2%)",
-  backgroundHover: "hsl(151, 49.3%, 46.5%)",
-  backgroundPress: "hsl(151, 55.0%, 41.5%)",
-  backgroundFocus: "hsl(151, 51.7%, 28.4%)",
-  backgroundStrong: "hsl(137, 72.0%, 94.0%)",
+const dark_green_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(137, 72.0%, 94.0%)",
+  backgroundFocus: "hsl(151, 50.0%, 53.2%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(146, 30.0%, 7.4%)",
   colorHover: "hsl(155, 44.2%, 8.4%)",
   colorPress: "hsl(146, 30.0%, 7.4%)",
   colorFocus: "hsl(155, 44.2%, 8.4%)",
   colorTransparent: "hsl(146, 30.0%, 7.4%)",
-  borderColor: "hsl(151, 51.7%, 28.4%)",
-  borderColorHover: "hsl(154, 50.9%, 17.6%)",
-  borderColorFocus: "hsl(151, 55.0%, 41.5%)",
-  borderColorPress: "hsl(151, 51.7%, 28.4%)",
-  placeholderColor: "hsl(154, 49.7%, 14.9%)"
+  borderColor: "hsl(151, 50.0%, 53.2%)",
+  borderColorHover: "hsl(151, 49.3%, 46.5%)",
+  borderColorFocus: "hsl(137, 72.0%, 94.0%)",
+  borderColorPress: "hsl(151, 50.0%, 53.2%)",
+  placeholderColor: "hsl(155, 44.2%, 8.4%)"
 };
-const dark_green_Tooltip = {
+const dark_green_SliderThumb = {
   background: "hsl(137, 72.0%, 94.0%)",
   backgroundHover: "hsl(151, 50.0%, 53.2%)",
   backgroundPress: "hsl(151, 49.3%, 46.5%)",
@@ -3783,25 +3629,8 @@ const dark_green_Tooltip = {
   borderColorPress: "hsl(151, 55.0%, 41.5%)",
   placeholderColor: "hsl(154, 48.4%, 12.9%)"
 };
-const dark_green_ProgressIndicator = dark_green_Tooltip;
-const dark_green_SwitchThumb = {
-  background: "hsl(151, 49.3%, 46.5%)",
-  backgroundHover: "hsl(151, 55.0%, 41.5%)",
-  backgroundPress: "hsl(151, 51.7%, 28.4%)",
-  backgroundFocus: "hsl(154, 50.9%, 17.6%)",
-  backgroundStrong: "hsl(151, 50.0%, 53.2%)",
-  backgroundTransparent: "hsl(137, 72.0%, 94.0%)",
-  color: "hsl(146, 30.0%, 7.4%)",
-  colorHover: "hsl(155, 44.2%, 8.4%)",
-  colorPress: "hsl(146, 30.0%, 7.4%)",
-  colorFocus: "hsl(155, 44.2%, 8.4%)",
-  colorTransparent: "hsl(155, 44.2%, 8.4%)",
-  borderColor: "hsl(154, 50.9%, 17.6%)",
-  borderColorHover: "hsl(154, 49.7%, 14.9%)",
-  borderColorFocus: "hsl(151, 51.7%, 28.4%)",
-  borderColorPress: "hsl(154, 50.9%, 17.6%)",
-  placeholderColor: "hsl(154, 50.9%, 17.6%)"
-};
+const dark_green_Tooltip = dark_green_SliderThumb;
+const dark_green_ProgressIndicator = dark_green_SliderThumb;
 const dark_green_Input = {
   background: "hsl(155, 44.2%, 8.4%)",
   backgroundHover: "hsl(155, 46.7%, 10.9%)",
@@ -3842,6 +3671,7 @@ const dark_blue_Card = {
 const dark_blue_DrawerFrame = dark_blue_Card;
 const dark_blue_Progress = dark_blue_Card;
 const dark_blue_TooltipArrow = dark_blue_Card;
+const dark_blue_SliderTrack = dark_blue_Card;
 const dark_blue_Button = {
   background: "hsl(214, 65.8%, 17.9%)",
   backgroundHover: "hsl(213, 71.2%, 20.2%)",
@@ -3881,43 +3711,25 @@ const dark_blue_Checkbox = {
 const dark_blue_SliderTrackActive = dark_blue_Checkbox;
 const dark_blue_Switch = dark_blue_Checkbox;
 const dark_blue_TooltipContent = dark_blue_Checkbox;
-const dark_blue_SliderTrack = {
-  background: "hsl(212, 35.0%, 9.2%)",
-  backgroundHover: "hsl(216, 50.0%, 11.8%)",
-  backgroundPress: "hsl(214, 59.4%, 15.3%)",
-  backgroundFocus: "hsl(214, 65.8%, 17.9%)",
-  backgroundStrong: "hsl(212, 35.0%, 9.2%)",
-  backgroundTransparent: "hsl(212, 35.0%, 9.2%)",
-  color: "#fff",
-  colorHover: "hsl(206, 98.0%, 95.8%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(206, 98.0%, 95.8%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(214, 65.8%, 17.9%)",
-  borderColorHover: "hsl(213, 71.2%, 20.2%)",
-  borderColorFocus: "hsl(214, 59.4%, 15.3%)",
-  borderColorPress: "hsl(214, 65.8%, 17.9%)",
-  placeholderColor: "hsl(210, 100%, 66.1%)"
-};
-const dark_blue_SliderThumb = {
-  background: "hsl(210, 100%, 66.1%)",
-  backgroundHover: "hsl(209, 100%, 60.6%)",
-  backgroundPress: "hsl(206, 100%, 50.0%)",
-  backgroundFocus: "hsl(211, 89.7%, 34.1%)",
-  backgroundStrong: "hsl(206, 98.0%, 95.8%)",
+const dark_blue_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(206, 98.0%, 95.8%)",
+  backgroundFocus: "hsl(210, 100%, 66.1%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(212, 35.0%, 9.2%)",
   colorHover: "hsl(216, 50.0%, 11.8%)",
   colorPress: "hsl(212, 35.0%, 9.2%)",
   colorFocus: "hsl(216, 50.0%, 11.8%)",
   colorTransparent: "hsl(212, 35.0%, 9.2%)",
-  borderColor: "hsl(211, 89.7%, 34.1%)",
-  borderColorHover: "hsl(212, 77.4%, 23.1%)",
-  borderColorFocus: "hsl(206, 100%, 50.0%)",
-  borderColorPress: "hsl(211, 89.7%, 34.1%)",
-  placeholderColor: "hsl(213, 71.2%, 20.2%)"
+  borderColor: "hsl(210, 100%, 66.1%)",
+  borderColorHover: "hsl(209, 100%, 60.6%)",
+  borderColorFocus: "hsl(206, 98.0%, 95.8%)",
+  borderColorPress: "hsl(210, 100%, 66.1%)",
+  placeholderColor: "hsl(216, 50.0%, 11.8%)"
 };
-const dark_blue_Tooltip = {
+const dark_blue_SliderThumb = {
   background: "hsl(206, 98.0%, 95.8%)",
   backgroundHover: "hsl(210, 100%, 66.1%)",
   backgroundPress: "hsl(209, 100%, 60.6%)",
@@ -3935,25 +3747,8 @@ const dark_blue_Tooltip = {
   borderColorPress: "hsl(206, 100%, 50.0%)",
   placeholderColor: "hsl(214, 65.8%, 17.9%)"
 };
-const dark_blue_ProgressIndicator = dark_blue_Tooltip;
-const dark_blue_SwitchThumb = {
-  background: "hsl(209, 100%, 60.6%)",
-  backgroundHover: "hsl(206, 100%, 50.0%)",
-  backgroundPress: "hsl(211, 89.7%, 34.1%)",
-  backgroundFocus: "hsl(212, 77.4%, 23.1%)",
-  backgroundStrong: "hsl(210, 100%, 66.1%)",
-  backgroundTransparent: "hsl(206, 98.0%, 95.8%)",
-  color: "hsl(212, 35.0%, 9.2%)",
-  colorHover: "hsl(216, 50.0%, 11.8%)",
-  colorPress: "hsl(212, 35.0%, 9.2%)",
-  colorFocus: "hsl(216, 50.0%, 11.8%)",
-  colorTransparent: "hsl(216, 50.0%, 11.8%)",
-  borderColor: "hsl(212, 77.4%, 23.1%)",
-  borderColorHover: "hsl(213, 71.2%, 20.2%)",
-  borderColorFocus: "hsl(211, 89.7%, 34.1%)",
-  borderColorPress: "hsl(212, 77.4%, 23.1%)",
-  placeholderColor: "hsl(212, 77.4%, 23.1%)"
-};
+const dark_blue_Tooltip = dark_blue_SliderThumb;
+const dark_blue_ProgressIndicator = dark_blue_SliderThumb;
 const dark_blue_Input = {
   background: "hsl(216, 50.0%, 11.8%)",
   backgroundHover: "hsl(214, 59.4%, 15.3%)",
@@ -3994,6 +3789,7 @@ const dark_purple_Card = {
 const dark_purple_DrawerFrame = dark_purple_Card;
 const dark_purple_Progress = dark_purple_Card;
 const dark_purple_TooltipArrow = dark_purple_Card;
+const dark_purple_SliderTrack = dark_purple_Card;
 const dark_purple_Button = {
   background: "hsl(280, 41.2%, 20.0%)",
   backgroundHover: "hsl(279, 43.8%, 23.3%)",
@@ -4033,43 +3829,25 @@ const dark_purple_Checkbox = {
 const dark_purple_SliderTrackActive = dark_purple_Checkbox;
 const dark_purple_Switch = dark_purple_Checkbox;
 const dark_purple_TooltipContent = dark_purple_Checkbox;
-const dark_purple_SliderTrack = {
-  background: "hsl(284, 20.0%, 9.6%)",
-  backgroundHover: "hsl(283, 30.0%, 11.8%)",
-  backgroundPress: "hsl(281, 37.5%, 16.5%)",
-  backgroundFocus: "hsl(280, 41.2%, 20.0%)",
-  backgroundStrong: "hsl(284, 20.0%, 9.6%)",
-  backgroundTransparent: "hsl(284, 20.0%, 9.6%)",
-  color: "#fff",
-  colorHover: "hsl(279, 75.0%, 95.7%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(279, 75.0%, 95.7%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(280, 41.2%, 20.0%)",
-  borderColorHover: "hsl(279, 43.8%, 23.3%)",
-  borderColorFocus: "hsl(281, 37.5%, 16.5%)",
-  borderColorPress: "hsl(280, 41.2%, 20.0%)",
-  placeholderColor: "hsl(275, 80.0%, 71.0%)"
-};
-const dark_purple_SliderThumb = {
-  background: "hsl(275, 80.0%, 71.0%)",
-  backgroundHover: "hsl(273, 57.3%, 59.1%)",
-  backgroundPress: "hsl(272, 51.0%, 54.0%)",
-  backgroundFocus: "hsl(272, 52.1%, 45.9%)",
-  backgroundStrong: "hsl(279, 75.0%, 95.7%)",
+const dark_purple_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(279, 75.0%, 95.7%)",
+  backgroundFocus: "hsl(275, 80.0%, 71.0%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(284, 20.0%, 9.6%)",
   colorHover: "hsl(283, 30.0%, 11.8%)",
   colorPress: "hsl(284, 20.0%, 9.6%)",
   colorFocus: "hsl(283, 30.0%, 11.8%)",
   colorTransparent: "hsl(284, 20.0%, 9.6%)",
-  borderColor: "hsl(272, 52.1%, 45.9%)",
-  borderColorHover: "hsl(277, 46.4%, 27.5%)",
-  borderColorFocus: "hsl(272, 51.0%, 54.0%)",
-  borderColorPress: "hsl(272, 52.1%, 45.9%)",
-  placeholderColor: "hsl(279, 43.8%, 23.3%)"
+  borderColor: "hsl(275, 80.0%, 71.0%)",
+  borderColorHover: "hsl(273, 57.3%, 59.1%)",
+  borderColorFocus: "hsl(279, 75.0%, 95.7%)",
+  borderColorPress: "hsl(275, 80.0%, 71.0%)",
+  placeholderColor: "hsl(283, 30.0%, 11.8%)"
 };
-const dark_purple_Tooltip = {
+const dark_purple_SliderThumb = {
   background: "hsl(279, 75.0%, 95.7%)",
   backgroundHover: "hsl(275, 80.0%, 71.0%)",
   backgroundPress: "hsl(273, 57.3%, 59.1%)",
@@ -4087,25 +3865,8 @@ const dark_purple_Tooltip = {
   borderColorPress: "hsl(272, 51.0%, 54.0%)",
   placeholderColor: "hsl(280, 41.2%, 20.0%)"
 };
-const dark_purple_ProgressIndicator = dark_purple_Tooltip;
-const dark_purple_SwitchThumb = {
-  background: "hsl(273, 57.3%, 59.1%)",
-  backgroundHover: "hsl(272, 51.0%, 54.0%)",
-  backgroundPress: "hsl(272, 52.1%, 45.9%)",
-  backgroundFocus: "hsl(277, 46.4%, 27.5%)",
-  backgroundStrong: "hsl(275, 80.0%, 71.0%)",
-  backgroundTransparent: "hsl(279, 75.0%, 95.7%)",
-  color: "hsl(284, 20.0%, 9.6%)",
-  colorHover: "hsl(283, 30.0%, 11.8%)",
-  colorPress: "hsl(284, 20.0%, 9.6%)",
-  colorFocus: "hsl(283, 30.0%, 11.8%)",
-  colorTransparent: "hsl(283, 30.0%, 11.8%)",
-  borderColor: "hsl(277, 46.4%, 27.5%)",
-  borderColorHover: "hsl(279, 43.8%, 23.3%)",
-  borderColorFocus: "hsl(272, 52.1%, 45.9%)",
-  borderColorPress: "hsl(277, 46.4%, 27.5%)",
-  placeholderColor: "hsl(277, 46.4%, 27.5%)"
-};
+const dark_purple_Tooltip = dark_purple_SliderThumb;
+const dark_purple_ProgressIndicator = dark_purple_SliderThumb;
 const dark_purple_Input = {
   background: "hsl(283, 30.0%, 11.8%)",
   backgroundHover: "hsl(281, 37.5%, 16.5%)",
@@ -4146,6 +3907,7 @@ const dark_pink_Card = {
 const dark_pink_DrawerFrame = dark_pink_Card;
 const dark_pink_Progress = dark_pink_Card;
 const dark_pink_TooltipArrow = dark_pink_Card;
+const dark_pink_SliderTrack = dark_pink_Card;
 const dark_pink_Button = {
   background: "hsl(320, 45.4%, 18.7%)",
   backgroundHover: "hsl(320, 49.0%, 21.1%)",
@@ -4185,43 +3947,25 @@ const dark_pink_Checkbox = {
 const dark_pink_SliderTrackActive = dark_pink_Checkbox;
 const dark_pink_Switch = dark_pink_Checkbox;
 const dark_pink_TooltipContent = dark_pink_Checkbox;
-const dark_pink_SliderTrack = {
-  background: "hsl(318, 25.0%, 9.6%)",
-  backgroundHover: "hsl(319, 32.2%, 11.6%)",
-  backgroundPress: "hsl(319, 41.0%, 16.0%)",
-  backgroundFocus: "hsl(320, 45.4%, 18.7%)",
-  backgroundStrong: "hsl(318, 25.0%, 9.6%)",
-  backgroundTransparent: "hsl(318, 25.0%, 9.6%)",
-  color: "#fff",
-  colorHover: "hsl(322, 90.0%, 95.8%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(322, 90.0%, 95.8%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(320, 45.4%, 18.7%)",
-  borderColorHover: "hsl(320, 49.0%, 21.1%)",
-  borderColorFocus: "hsl(319, 41.0%, 16.0%)",
-  borderColorPress: "hsl(320, 45.4%, 18.7%)",
-  placeholderColor: "hsl(325, 90.0%, 66.4%)"
-};
-const dark_pink_SliderThumb = {
-  background: "hsl(325, 90.0%, 66.4%)",
-  backgroundHover: "hsl(323, 72.8%, 59.2%)",
-  backgroundPress: "hsl(322, 65.0%, 54.5%)",
-  backgroundFocus: "hsl(322, 74.9%, 37.5%)",
-  backgroundStrong: "hsl(322, 90.0%, 95.8%)",
+const dark_pink_SwitchThumb = {
+  background: "#fff",
+  backgroundHover: "#fff",
+  backgroundPress: "hsl(322, 90.0%, 95.8%)",
+  backgroundFocus: "hsl(325, 90.0%, 66.4%)",
+  backgroundStrong: "#fff",
   backgroundTransparent: "#fff",
   color: "hsl(318, 25.0%, 9.6%)",
   colorHover: "hsl(319, 32.2%, 11.6%)",
   colorPress: "hsl(318, 25.0%, 9.6%)",
   colorFocus: "hsl(319, 32.2%, 11.6%)",
   colorTransparent: "hsl(318, 25.0%, 9.6%)",
-  borderColor: "hsl(322, 74.9%, 37.5%)",
-  borderColorHover: "hsl(321, 53.6%, 24.4%)",
-  borderColorFocus: "hsl(322, 65.0%, 54.5%)",
-  borderColorPress: "hsl(322, 74.9%, 37.5%)",
-  placeholderColor: "hsl(320, 49.0%, 21.1%)"
+  borderColor: "hsl(325, 90.0%, 66.4%)",
+  borderColorHover: "hsl(323, 72.8%, 59.2%)",
+  borderColorFocus: "hsl(322, 90.0%, 95.8%)",
+  borderColorPress: "hsl(325, 90.0%, 66.4%)",
+  placeholderColor: "hsl(319, 32.2%, 11.6%)"
 };
-const dark_pink_Tooltip = {
+const dark_pink_SliderThumb = {
   background: "hsl(322, 90.0%, 95.8%)",
   backgroundHover: "hsl(325, 90.0%, 66.4%)",
   backgroundPress: "hsl(323, 72.8%, 59.2%)",
@@ -4239,25 +3983,8 @@ const dark_pink_Tooltip = {
   borderColorPress: "hsl(322, 65.0%, 54.5%)",
   placeholderColor: "hsl(320, 45.4%, 18.7%)"
 };
-const dark_pink_ProgressIndicator = dark_pink_Tooltip;
-const dark_pink_SwitchThumb = {
-  background: "hsl(323, 72.8%, 59.2%)",
-  backgroundHover: "hsl(322, 65.0%, 54.5%)",
-  backgroundPress: "hsl(322, 74.9%, 37.5%)",
-  backgroundFocus: "hsl(321, 53.6%, 24.4%)",
-  backgroundStrong: "hsl(325, 90.0%, 66.4%)",
-  backgroundTransparent: "hsl(322, 90.0%, 95.8%)",
-  color: "hsl(318, 25.0%, 9.6%)",
-  colorHover: "hsl(319, 32.2%, 11.6%)",
-  colorPress: "hsl(318, 25.0%, 9.6%)",
-  colorFocus: "hsl(319, 32.2%, 11.6%)",
-  colorTransparent: "hsl(319, 32.2%, 11.6%)",
-  borderColor: "hsl(321, 53.6%, 24.4%)",
-  borderColorHover: "hsl(320, 49.0%, 21.1%)",
-  borderColorFocus: "hsl(322, 74.9%, 37.5%)",
-  borderColorPress: "hsl(321, 53.6%, 24.4%)",
-  placeholderColor: "hsl(321, 53.6%, 24.4%)"
-};
+const dark_pink_Tooltip = dark_pink_SliderThumb;
+const dark_pink_ProgressIndicator = dark_pink_SliderThumb;
 const dark_pink_Input = {
   background: "hsl(319, 32.2%, 11.6%)",
   backgroundHover: "hsl(319, 41.0%, 16.0%)",
@@ -4298,6 +4025,7 @@ const dark_red_Card = {
 const dark_red_DrawerFrame = dark_red_Card;
 const dark_red_Progress = dark_red_Card;
 const dark_red_TooltipArrow = dark_red_Card;
+const dark_red_SliderTrack = dark_red_Card;
 const dark_red_Button = {
   background: "hsl(356, 47.6%, 19.2%)",
   backgroundHover: "hsl(356, 51.1%, 21.9%)",
@@ -4337,25 +4065,7 @@ const dark_red_Checkbox = {
 const dark_red_SliderTrackActive = dark_red_Checkbox;
 const dark_red_Switch = dark_red_Checkbox;
 const dark_red_TooltipContent = dark_red_Checkbox;
-const dark_red_SliderTrack = {
-  background: "hsl(353, 23.0%, 9.8%)",
-  backgroundHover: "hsl(357, 34.4%, 12.0%)",
-  backgroundPress: "hsl(356, 43.4%, 16.4%)",
-  backgroundFocus: "hsl(356, 47.6%, 19.2%)",
-  backgroundStrong: "hsl(353, 23.0%, 9.8%)",
-  backgroundTransparent: "hsl(353, 23.0%, 9.8%)",
-  color: "#fff",
-  colorHover: "hsl(351, 89.0%, 96.0%)",
-  colorPress: "#fff",
-  colorFocus: "hsl(351, 89.0%, 96.0%)",
-  colorTransparent: "#fff",
-  borderColor: "hsl(356, 47.6%, 19.2%)",
-  borderColorHover: "hsl(356, 51.1%, 21.9%)",
-  borderColorFocus: "hsl(356, 43.4%, 16.4%)",
-  borderColorPress: "hsl(356, 47.6%, 19.2%)",
-  placeholderColor: "hsl(358, 100%, 69.5%)"
-};
-const dark_red_Tooltip = {
+const dark_red_SliderThumb = {
   background: "hsl(351, 89.0%, 96.0%)",
   backgroundHover: "hsl(358, 100%, 69.5%)",
   backgroundPress: "hsl(358, 85.3%, 64.0%)",
@@ -4373,7 +4083,8 @@ const dark_red_Tooltip = {
   borderColorPress: "hsl(358, 75.0%, 59.0%)",
   placeholderColor: "hsl(356, 47.6%, 19.2%)"
 };
-const dark_red_ProgressIndicator = dark_red_Tooltip;
+const dark_red_Tooltip = dark_red_SliderThumb;
+const dark_red_ProgressIndicator = dark_red_SliderThumb;
 const dark_red_Input = {
   background: "hsl(357, 34.4%, 12.0%)",
   backgroundHover: "hsl(356, 43.4%, 16.4%)",