Merge pull request #7099 from Sage/FE-7009-switch-dark-hint-text

fix(switch): fixes the invalid design token when using hint text on dark backgrounds

src/components/switch/switch.stories.tsx

@@ -387,3 +387,20 @@ export const NewValidationInlineWithDarkModeAndError: Story = () => {
 };
 NewValidationInlineWithDarkModeAndError.storyName =
   "New Validation - Inline with dark background support and error";
+
+export const NewValidationInlineWithDarkModeAndHint: Story = () => {
+  return (
+    <Box m={2} padding={3} backgroundColor="#000000">
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch (error state)"
+          labelInline
+          isDarkBackground
+          labelHelp="Hint text to show on the Switch"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineWithDarkModeAndHint.storyName =
+  "New Validation - Inline with dark background support and hint text";

src/components/switch/switch.style.ts

@@ -67,7 +67,7 @@ export const StyledHintText = styled.div<StyledHintTextProps>`
   max-width: 160px;
   ${({ isDarkBackground }) => css`
     color: ${isDarkBackground
-      ? "var(--colorsUtilityYang065)"
+      ? "var(--colorsUtilityYang080)"
       : "var(--colorsUtilityYin055)"};
   `}
 `;