@tamagui/themes 1.36.6 → 1.37.0

package/dist/esm/generated-new.js

@@ -2200,7 +2200,6 @@ 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%)",
@@ -2237,28 +2236,45 @@ const light_Checkbox = {
   borderColorPress: "hsl(0, 0%, 89.5%)",
   placeholderColor: "hsl(0, 0%, 89.5%)"
 };
-const light_SliderTrackActive = light_Checkbox;
 const light_Switch = light_Checkbox;
 const light_TooltipContent = light_Checkbox;
+const light_SliderTrack = light_Checkbox;
 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, 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%)"
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(0, 0%, 42.5%)",
+  backgroundFocus: "hsl(0, 0%, 50.3%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "#fff",
+  colorHover: "#f9f9f9",
+  colorPress: "#fff",
+  colorFocus: "#f9f9f9",
+  colorTransparent: "#fff",
+  borderColor: "hsl(0, 0%, 50.3%)",
+  borderColorHover: "hsl(0, 0%, 56.1%)",
+  borderColorFocus: "hsl(0, 0%, 42.5%)",
+  borderColorPress: "hsl(0, 0%, 50.3%)",
+  placeholderColor: "#f9f9f9"
+};
+const light_SliderTrackActive = {
+  background: "hsl(0, 0%, 56.1%)",
+  backgroundHover: "hsl(0, 0%, 81.0%)",
+  backgroundPress: "hsl(0, 0%, 89.5%)",
+  backgroundFocus: "hsl(0, 0%, 92.0%)",
+  backgroundStrong: "hsl(0, 0%, 50.3%)",
+  backgroundTransparent: "hsl(0, 0%, 42.5%)",
+  color: "#fff",
+  colorHover: "#f9f9f9",
+  colorPress: "#fff",
+  colorFocus: "#f9f9f9",
+  colorTransparent: "#f9f9f9",
+  borderColor: "hsl(0, 0%, 92.0%)",
+  borderColorHover: "hsl(0, 0%, 94.0%)",
+  borderColorFocus: "hsl(0, 0%, 89.5%)",
+  borderColorPress: "hsl(0, 0%, 92.0%)",
+  placeholderColor: "hsl(0, 0%, 92.0%)"
 };
-const dark_red_SwitchThumb = light_SwitchThumb;
 const light_SliderThumb = {
   background: "hsl(0, 0%, 42.5%)",
   backgroundHover: "hsl(0, 0%, 50.3%)",
@@ -2349,7 +2365,6 @@ 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",
@@ -2386,9 +2401,9 @@ const dark_Checkbox = {
   borderColorPress: "#424242",
   placeholderColor: "#424242"
 };
-const dark_SliderTrackActive = dark_Checkbox;
 const dark_Switch = dark_Checkbox;
 const dark_TooltipContent = dark_Checkbox;
+const dark_SliderTrack = dark_Checkbox;
 const dark_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -2407,6 +2422,24 @@ const dark_SwitchThumb = {
   borderColorPress: "#626262",
   placeholderColor: "#151515"
 };
+const dark_SliderTrackActive = {
+  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_SliderThumb = {
   background: "#a5a5a5",
   backgroundHover: "#626262",
@@ -2485,7 +2518,6 @@ 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%)",
@@ -2522,33 +2554,45 @@ const light_orange_Checkbox = {
   borderColorPress: "hsl(25, 100%, 82.8%)",
   placeholderColor: "hsl(24, 94.5%, 64.3%)"
 };
-const light_orange_SliderTrackActive = light_orange_Checkbox;
 const light_orange_Switch = light_orange_Checkbox;
 const light_orange_TooltipContent = light_orange_Checkbox;
+const light_orange_SliderTrack = light_orange_Checkbox;
 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%)",
+  backgroundPress: "hsl(15, 60.0%, 17.0%)",
+  backgroundFocus: "hsl(24, 100%, 37.0%)",
   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(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%)"
+  color: "hsl(24, 70.0%, 99.0%)",
+  colorHover: "hsl(24, 83.3%, 97.6%)",
+  colorPress: "hsl(24, 70.0%, 99.0%)",
+  colorFocus: "hsl(24, 83.3%, 97.6%)",
+  colorTransparent: "hsl(24, 70.0%, 99.0%)",
+  borderColor: "hsl(15, 60.0%, 17.0%)",
+  borderColorHover: "hsl(24, 100%, 37.0%)",
+  borderColorFocus: "hsl(15, 60.0%, 17.0%)",
+  borderColorPress: "hsl(15, 60.0%, 17.0%)",
+  placeholderColor: "hsl(24, 83.3%, 97.6%)"
+};
+const light_orange_SliderTrackActive = {
+  background: "hsl(24, 100%, 46.5%)",
+  backgroundHover: "hsl(24, 94.0%, 50.0%)",
+  backgroundPress: "hsl(24, 94.5%, 64.3%)",
+  backgroundFocus: "hsl(25, 100%, 82.8%)",
+  backgroundStrong: "hsl(24, 100%, 37.0%)",
+  backgroundTransparent: "hsl(15, 60.0%, 17.0%)",
+  color: "hsl(24, 70.0%, 99.0%)",
+  colorHover: "hsl(24, 83.3%, 97.6%)",
+  colorPress: "hsl(24, 70.0%, 99.0%)",
+  colorFocus: "hsl(24, 83.3%, 97.6%)",
+  colorTransparent: "hsl(24, 83.3%, 97.6%)",
+  borderColor: "hsl(24, 94.5%, 64.3%)",
+  borderColorHover: "hsl(25, 100%, 82.8%)",
+  borderColorFocus: "hsl(24, 94.5%, 64.3%)",
+  borderColorPress: "hsl(24, 94.5%, 64.3%)",
+  placeholderColor: "hsl(25, 100%, 82.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_SliderThumb = {
   background: "hsl(15, 60.0%, 17.0%)",
   backgroundHover: "hsl(24, 100%, 37.0%)",
@@ -2627,7 +2671,6 @@ 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%)",
@@ -2664,9 +2707,45 @@ const light_yellow_Checkbox = {
   borderColorPress: "hsl(50, 89.4%, 76.1%)",
   placeholderColor: "hsl(48, 100%, 46.1%)"
 };
-const light_yellow_SliderTrackActive = light_yellow_Checkbox;
 const light_yellow_Switch = light_yellow_Checkbox;
 const light_yellow_TooltipContent = light_yellow_Checkbox;
+const light_yellow_SliderTrack = light_yellow_Checkbox;
+const light_yellow_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(40, 55.0%, 13.5%)",
+  backgroundFocus: "hsl(42, 100%, 29.0%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "hsl(60, 54.0%, 98.5%)",
+  colorHover: "hsl(52, 100%, 95.5%)",
+  colorPress: "hsl(60, 54.0%, 98.5%)",
+  colorFocus: "hsl(52, 100%, 95.5%)",
+  colorTransparent: "hsl(60, 54.0%, 98.5%)",
+  borderColor: "hsl(40, 55.0%, 13.5%)",
+  borderColorHover: "hsl(42, 100%, 29.0%)",
+  borderColorFocus: "hsl(40, 55.0%, 13.5%)",
+  borderColorPress: "hsl(40, 55.0%, 13.5%)",
+  placeholderColor: "hsl(52, 100%, 95.5%)"
+};
+const light_yellow_SliderTrackActive = {
+  background: "hsl(50, 100%, 48.5%)",
+  backgroundHover: "hsl(53, 92.0%, 50.0%)",
+  backgroundPress: "hsl(48, 100%, 46.1%)",
+  backgroundFocus: "hsl(50, 89.4%, 76.1%)",
+  backgroundStrong: "hsl(42, 100%, 29.0%)",
+  backgroundTransparent: "hsl(40, 55.0%, 13.5%)",
+  color: "hsl(60, 54.0%, 98.5%)",
+  colorHover: "hsl(52, 100%, 95.5%)",
+  colorPress: "hsl(60, 54.0%, 98.5%)",
+  colorFocus: "hsl(52, 100%, 95.5%)",
+  colorTransparent: "hsl(52, 100%, 95.5%)",
+  borderColor: "hsl(48, 100%, 46.1%)",
+  borderColorHover: "hsl(50, 89.4%, 76.1%)",
+  borderColorFocus: "hsl(48, 100%, 46.1%)",
+  borderColorPress: "hsl(48, 100%, 46.1%)",
+  placeholderColor: "hsl(50, 89.4%, 76.1%)"
+};
 const light_yellow_SliderThumb = {
   background: "hsl(40, 55.0%, 13.5%)",
   backgroundHover: "hsl(42, 100%, 29.0%)",
@@ -2745,7 +2824,6 @@ 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%)",
@@ -2782,9 +2860,45 @@ const light_green_Checkbox = {
   borderColorPress: "hsl(143, 40.3%, 79.0%)",
   placeholderColor: "hsl(151, 40.2%, 54.1%)"
 };
-const light_green_SliderTrackActive = light_green_Checkbox;
 const light_green_Switch = light_green_Checkbox;
 const light_green_TooltipContent = light_green_Checkbox;
+const light_green_SliderTrack = light_green_Checkbox;
+const light_green_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(155, 40.0%, 14.0%)",
+  backgroundFocus: "hsl(153, 67.0%, 28.5%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "hsl(136, 50.0%, 98.9%)",
+  colorHover: "hsl(138, 62.5%, 96.9%)",
+  colorPress: "hsl(136, 50.0%, 98.9%)",
+  colorFocus: "hsl(138, 62.5%, 96.9%)",
+  colorTransparent: "hsl(136, 50.0%, 98.9%)",
+  borderColor: "hsl(155, 40.0%, 14.0%)",
+  borderColorHover: "hsl(153, 67.0%, 28.5%)",
+  borderColorFocus: "hsl(155, 40.0%, 14.0%)",
+  borderColorPress: "hsl(155, 40.0%, 14.0%)",
+  placeholderColor: "hsl(138, 62.5%, 96.9%)"
+};
+const light_green_SliderTrackActive = {
+  background: "hsl(152, 57.5%, 37.6%)",
+  backgroundHover: "hsl(151, 55.0%, 41.5%)",
+  backgroundPress: "hsl(151, 40.2%, 54.1%)",
+  backgroundFocus: "hsl(143, 40.3%, 79.0%)",
+  backgroundStrong: "hsl(153, 67.0%, 28.5%)",
+  backgroundTransparent: "hsl(155, 40.0%, 14.0%)",
+  color: "hsl(136, 50.0%, 98.9%)",
+  colorHover: "hsl(138, 62.5%, 96.9%)",
+  colorPress: "hsl(136, 50.0%, 98.9%)",
+  colorFocus: "hsl(138, 62.5%, 96.9%)",
+  colorTransparent: "hsl(138, 62.5%, 96.9%)",
+  borderColor: "hsl(151, 40.2%, 54.1%)",
+  borderColorHover: "hsl(143, 40.3%, 79.0%)",
+  borderColorFocus: "hsl(151, 40.2%, 54.1%)",
+  borderColorPress: "hsl(151, 40.2%, 54.1%)",
+  placeholderColor: "hsl(143, 40.3%, 79.0%)"
+};
 const light_green_SliderThumb = {
   background: "hsl(155, 40.0%, 14.0%)",
   backgroundHover: "hsl(153, 67.0%, 28.5%)",
@@ -2863,7 +2977,6 @@ 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%)",
@@ -2900,9 +3013,45 @@ const light_blue_Checkbox = {
   borderColorPress: "hsl(209, 81.2%, 84.5%)",
   placeholderColor: "hsl(206, 81.9%, 65.3%)"
 };
-const light_blue_SliderTrackActive = light_blue_Checkbox;
 const light_blue_Switch = light_blue_Checkbox;
 const light_blue_TooltipContent = light_blue_Checkbox;
+const light_blue_SliderTrack = light_blue_Checkbox;
+const light_blue_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(211, 100%, 15.0%)",
+  backgroundFocus: "hsl(211, 100%, 43.2%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "hsl(206, 100%, 99.2%)",
+  colorHover: "hsl(210, 100%, 98.0%)",
+  colorPress: "hsl(206, 100%, 99.2%)",
+  colorFocus: "hsl(210, 100%, 98.0%)",
+  colorTransparent: "hsl(206, 100%, 99.2%)",
+  borderColor: "hsl(211, 100%, 15.0%)",
+  borderColorHover: "hsl(211, 100%, 43.2%)",
+  borderColorFocus: "hsl(211, 100%, 15.0%)",
+  borderColorPress: "hsl(211, 100%, 15.0%)",
+  placeholderColor: "hsl(210, 100%, 98.0%)"
+};
+const light_blue_SliderTrackActive = {
+  background: "hsl(208, 100%, 47.3%)",
+  backgroundHover: "hsl(206, 100%, 50.0%)",
+  backgroundPress: "hsl(206, 81.9%, 65.3%)",
+  backgroundFocus: "hsl(209, 81.2%, 84.5%)",
+  backgroundStrong: "hsl(211, 100%, 43.2%)",
+  backgroundTransparent: "hsl(211, 100%, 15.0%)",
+  color: "hsl(206, 100%, 99.2%)",
+  colorHover: "hsl(210, 100%, 98.0%)",
+  colorPress: "hsl(206, 100%, 99.2%)",
+  colorFocus: "hsl(210, 100%, 98.0%)",
+  colorTransparent: "hsl(210, 100%, 98.0%)",
+  borderColor: "hsl(206, 81.9%, 65.3%)",
+  borderColorHover: "hsl(209, 81.2%, 84.5%)",
+  borderColorFocus: "hsl(206, 81.9%, 65.3%)",
+  borderColorPress: "hsl(206, 81.9%, 65.3%)",
+  placeholderColor: "hsl(209, 81.2%, 84.5%)"
+};
 const light_blue_SliderThumb = {
   background: "hsl(211, 100%, 15.0%)",
   backgroundHover: "hsl(211, 100%, 43.2%)",
@@ -2981,7 +3130,6 @@ 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%)",
@@ -3018,9 +3166,45 @@ const light_purple_Checkbox = {
   borderColorPress: "hsl(274, 65.4%, 87.8%)",
   placeholderColor: "hsl(272, 60.0%, 73.5%)"
 };
-const light_purple_SliderTrackActive = light_purple_Checkbox;
 const light_purple_Switch = light_purple_Checkbox;
 const light_purple_TooltipContent = light_purple_Checkbox;
+const light_purple_SliderTrack = light_purple_Checkbox;
+const light_purple_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(272, 66.0%, 16.0%)",
+  backgroundFocus: "hsl(272, 50.0%, 45.8%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "hsl(280, 65.0%, 99.4%)",
+  colorHover: "hsl(276, 100%, 99.0%)",
+  colorPress: "hsl(280, 65.0%, 99.4%)",
+  colorFocus: "hsl(276, 100%, 99.0%)",
+  colorTransparent: "hsl(280, 65.0%, 99.4%)",
+  borderColor: "hsl(272, 66.0%, 16.0%)",
+  borderColorHover: "hsl(272, 50.0%, 45.8%)",
+  borderColorFocus: "hsl(272, 66.0%, 16.0%)",
+  borderColorPress: "hsl(272, 66.0%, 16.0%)",
+  placeholderColor: "hsl(276, 100%, 99.0%)"
+};
+const light_purple_SliderTrackActive = {
+  background: "hsl(272, 46.8%, 50.3%)",
+  backgroundHover: "hsl(272, 51.0%, 54.0%)",
+  backgroundPress: "hsl(272, 60.0%, 73.5%)",
+  backgroundFocus: "hsl(274, 65.4%, 87.8%)",
+  backgroundStrong: "hsl(272, 50.0%, 45.8%)",
+  backgroundTransparent: "hsl(272, 66.0%, 16.0%)",
+  color: "hsl(280, 65.0%, 99.4%)",
+  colorHover: "hsl(276, 100%, 99.0%)",
+  colorPress: "hsl(280, 65.0%, 99.4%)",
+  colorFocus: "hsl(276, 100%, 99.0%)",
+  colorTransparent: "hsl(276, 100%, 99.0%)",
+  borderColor: "hsl(272, 60.0%, 73.5%)",
+  borderColorHover: "hsl(274, 65.4%, 87.8%)",
+  borderColorFocus: "hsl(272, 60.0%, 73.5%)",
+  borderColorPress: "hsl(272, 60.0%, 73.5%)",
+  placeholderColor: "hsl(274, 65.4%, 87.8%)"
+};
 const light_purple_SliderThumb = {
   background: "hsl(272, 66.0%, 16.0%)",
   backgroundHover: "hsl(272, 50.0%, 45.8%)",
@@ -3099,7 +3283,6 @@ 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%)",
@@ -3136,9 +3319,45 @@ const light_pink_Checkbox = {
   borderColorPress: "hsl(323, 66.3%, 86.6%)",
   placeholderColor: "hsl(323, 60.3%, 72.4%)"
 };
-const light_pink_SliderTrackActive = light_pink_Checkbox;
 const light_pink_Switch = light_pink_Checkbox;
 const light_pink_TooltipContent = light_pink_Checkbox;
+const light_pink_SliderTrack = light_pink_Checkbox;
+const light_pink_SwitchThumb = {
+  background: "hsl(0, 0%, 9.0%)",
+  backgroundHover: "hsl(0, 0%, 9.0%)",
+  backgroundPress: "hsl(320, 70.0%, 13.5%)",
+  backgroundFocus: "hsl(322, 75.0%, 46.0%)",
+  backgroundStrong: "hsl(0, 0%, 9.0%)",
+  backgroundTransparent: "hsl(0, 0%, 9.0%)",
+  color: "hsl(322, 100%, 99.4%)",
+  colorHover: "hsl(323, 100%, 98.4%)",
+  colorPress: "hsl(322, 100%, 99.4%)",
+  colorFocus: "hsl(323, 100%, 98.4%)",
+  colorTransparent: "hsl(322, 100%, 99.4%)",
+  borderColor: "hsl(320, 70.0%, 13.5%)",
+  borderColorHover: "hsl(322, 75.0%, 46.0%)",
+  borderColorFocus: "hsl(320, 70.0%, 13.5%)",
+  borderColorPress: "hsl(320, 70.0%, 13.5%)",
+  placeholderColor: "hsl(323, 100%, 98.4%)"
+};
+const light_pink_SliderTrackActive = {
+  background: "hsl(322, 63.9%, 50.7%)",
+  backgroundHover: "hsl(322, 65.0%, 54.5%)",
+  backgroundPress: "hsl(323, 60.3%, 72.4%)",
+  backgroundFocus: "hsl(323, 66.3%, 86.6%)",
+  backgroundStrong: "hsl(322, 75.0%, 46.0%)",
+  backgroundTransparent: "hsl(320, 70.0%, 13.5%)",
+  color: "hsl(322, 100%, 99.4%)",
+  colorHover: "hsl(323, 100%, 98.4%)",
+  colorPress: "hsl(322, 100%, 99.4%)",
+  colorFocus: "hsl(323, 100%, 98.4%)",
+  colorTransparent: "hsl(323, 100%, 98.4%)",
+  borderColor: "hsl(323, 60.3%, 72.4%)",
+  borderColorHover: "hsl(323, 66.3%, 86.6%)",
+  borderColorFocus: "hsl(323, 60.3%, 72.4%)",
+  borderColorPress: "hsl(323, 60.3%, 72.4%)",
+  placeholderColor: "hsl(323, 66.3%, 86.6%)"
+};
 const light_pink_SliderThumb = {
   background: "hsl(320, 70.0%, 13.5%)",
   backgroundHover: "hsl(322, 75.0%, 46.0%)",
@@ -3217,7 +3436,6 @@ 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%)",
@@ -3254,9 +3472,45 @@ const light_red_Checkbox = {
   borderColorPress: "hsl(360, 81.7%, 87.8%)",
   placeholderColor: "hsl(359, 69.5%, 74.3%)"
 };
-const light_red_SliderTrackActive = light_red_Checkbox;
 const light_red_Switch = light_red_Checkbox;
 const light_red_TooltipContent = light_red_Checkbox;
+const light_red_SliderTrack = light_red_Checkbox;
+const light_red_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(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_red_SliderTrackActive = {
+  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_red_SliderThumb = {
   background: "hsl(354, 50.0%, 14.6%)",
   backgroundHover: "hsl(358, 65.0%, 48.7%)",
@@ -3317,7 +3571,6 @@ 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%)",
@@ -3354,9 +3607,9 @@ const dark_orange_Checkbox = {
   borderColorPress: "hsl(25, 100%, 29.0%)",
   placeholderColor: "hsl(25, 100%, 29.0%)"
 };
-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 = dark_orange_Checkbox;
 const dark_orange_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3375,6 +3628,24 @@ const dark_orange_SwitchThumb = {
   borderColorPress: "hsl(24, 100%, 62.2%)",
   placeholderColor: "hsl(28, 100%, 8.4%)"
 };
+const dark_orange_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(24, 97.0%, 93.2%)",
   backgroundHover: "hsl(24, 100%, 62.2%)",
@@ -3435,7 +3706,6 @@ 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%)",
@@ -3472,9 +3742,9 @@ const dark_yellow_Checkbox = {
   borderColorPress: "hsl(50, 100%, 22.0%)",
   placeholderColor: "hsl(50, 100%, 22.0%)"
 };
-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 = dark_yellow_Checkbox;
 const dark_yellow_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3493,6 +3763,24 @@ const dark_yellow_SwitchThumb = {
   borderColorPress: "hsl(48, 100%, 47.0%)",
   placeholderColor: "hsl(46, 100%, 6.7%)"
 };
+const dark_yellow_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(53, 100%, 91.0%)",
   backgroundHover: "hsl(48, 100%, 47.0%)",
@@ -3553,7 +3841,6 @@ 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%)",
@@ -3590,9 +3877,9 @@ const dark_green_Checkbox = {
   borderColorPress: "hsl(151, 51.7%, 28.4%)",
   placeholderColor: "hsl(151, 51.7%, 28.4%)"
 };
-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 = dark_green_Checkbox;
 const dark_green_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3611,6 +3898,24 @@ const dark_green_SwitchThumb = {
   borderColorPress: "hsl(151, 50.0%, 53.2%)",
   placeholderColor: "hsl(155, 44.2%, 8.4%)"
 };
+const dark_green_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(137, 72.0%, 94.0%)",
   backgroundHover: "hsl(151, 50.0%, 53.2%)",
@@ -3671,7 +3976,6 @@ 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%)",
@@ -3708,9 +4012,9 @@ const dark_blue_Checkbox = {
   borderColorPress: "hsl(211, 89.7%, 34.1%)",
   placeholderColor: "hsl(211, 89.7%, 34.1%)"
 };
-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 = dark_blue_Checkbox;
 const dark_blue_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3729,6 +4033,24 @@ const dark_blue_SwitchThumb = {
   borderColorPress: "hsl(210, 100%, 66.1%)",
   placeholderColor: "hsl(216, 50.0%, 11.8%)"
 };
+const dark_blue_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(206, 98.0%, 95.8%)",
   backgroundHover: "hsl(210, 100%, 66.1%)",
@@ -3789,7 +4111,6 @@ 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%)",
@@ -3826,9 +4147,9 @@ const dark_purple_Checkbox = {
   borderColorPress: "hsl(272, 52.1%, 45.9%)",
   placeholderColor: "hsl(272, 52.1%, 45.9%)"
 };
-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 = dark_purple_Checkbox;
 const dark_purple_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3847,6 +4168,24 @@ const dark_purple_SwitchThumb = {
   borderColorPress: "hsl(275, 80.0%, 71.0%)",
   placeholderColor: "hsl(283, 30.0%, 11.8%)"
 };
+const dark_purple_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(279, 75.0%, 95.7%)",
   backgroundHover: "hsl(275, 80.0%, 71.0%)",
@@ -3907,7 +4246,6 @@ 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%)",
@@ -3944,9 +4282,9 @@ const dark_pink_Checkbox = {
   borderColorPress: "hsl(322, 74.9%, 37.5%)",
   placeholderColor: "hsl(322, 74.9%, 37.5%)"
 };
-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 = dark_pink_Checkbox;
 const dark_pink_SwitchThumb = {
   background: "#fff",
   backgroundHover: "#fff",
@@ -3965,6 +4303,24 @@ const dark_pink_SwitchThumb = {
   borderColorPress: "hsl(325, 90.0%, 66.4%)",
   placeholderColor: "hsl(319, 32.2%, 11.6%)"
 };
+const dark_pink_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(322, 90.0%, 95.8%)",
   backgroundHover: "hsl(325, 90.0%, 66.4%)",
@@ -4025,7 +4381,6 @@ 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%)",
@@ -4062,9 +4417,45 @@ const dark_red_Checkbox = {
   borderColorPress: "hsl(358, 65.0%, 40.4%)",
   placeholderColor: "hsl(358, 65.0%, 40.4%)"
 };
-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 = dark_red_Checkbox;
+const dark_red_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, 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_SliderTrackActive = {
+  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_SliderThumb = {
   background: "hsl(351, 89.0%, 96.0%)",
   backgroundHover: "hsl(358, 100%, 69.5%)",