fix: RangeSlider & Slider properly display on inverted themes (#1853)

Luke Bowerman · web-flow · commit 54c4ab01291e · 2021-02-03T10:57:42.000-08:00
diff --git a/packages/components/src/Form/Inputs/RangeSlider/RangeSlider.tsx b/packages/components/src/Form/Inputs/RangeSlider/RangeSlider.tsx
@@ -428,8 +428,7 @@ interface ThumbLabelProps extends TypographyProps {
 }
 
 const ThumbLabel = styled.div<ThumbLabelProps>`
-  background: ${({ theme, focus }) =>
-    focus ? theme.colors.keyAccent : `rgba(255, 255, 255, 0.8)`};
+  background: ${({ theme, focus }) => focus && theme.colors.keyAccent};
   border-radius: 1rem;
   color: ${({ theme: { colors }, disabled }) =>
     disabled ? colors.neutral : colors.key};
diff --git a/packages/components/src/Form/Inputs/Slider/Slider.tsx b/packages/components/src/Form/Inputs/Slider/Slider.tsx
@@ -248,8 +248,7 @@ interface SliderValueProps extends SliderInputProps {
 }
 
 const SliderValue = styled.div<SliderValueProps>`
-  background: ${({ theme, isFocused }) =>
-    isFocused ? theme.colors.keyAccent : theme.colors.keyText};
+  background: ${({ theme, isFocused }) => isFocused && theme.colors.keyAccent};
   border-radius: 1rem;
   color: ${({ theme: { colors }, disabled }) =>
     disabled ? colors.neutral : colors.key};

Original file line number	Diff line number	Diff line change
`@@ -428,8 +428,7 @@ interface ThumbLabelProps extends TypographyProps {`
`428`	`428`	`}`
`429`	`429`
`430`	`430`	const ThumbLabel = styled.div<ThumbLabelProps>`
`431`		`- background: ${({ theme, focus }) =>`
`432`		- focus ? theme.colors.keyAccent : `rgba(255, 255, 255, 0.8)`};
	`431`	`+ background: ${({ theme, focus }) => focus && theme.colors.keyAccent};`
`433`	`432`	`border-radius: 1rem;`
`434`	`433`	`color: ${({ theme: { colors }, disabled }) =>`
`435`	`434`	`disabled ? colors.neutral : colors.key};`
Original file line number	Diff line number	Diff line change
`@@ -248,8 +248,7 @@ interface SliderValueProps extends SliderInputProps {`
`248`	`248`	`}`
`249`	`249`
`250`	`250`	const SliderValue = styled.div<SliderValueProps>`
`251`		`- background: ${({ theme, isFocused }) =>`
`252`		`- isFocused ? theme.colors.keyAccent : theme.colors.keyText};`
	`251`	`+ background: ${({ theme, isFocused }) => isFocused && theme.colors.keyAccent};`
`253`	`252`	`border-radius: 1rem;`
`254`	`253`	`color: ${({ theme: { colors }, disabled }) =>`
`255`	`254`	`disabled ? colors.neutral : colors.key};`