feat(Input): Update colors for error message, icon and border in dark…

… mode. (#1501) Co-authored-by: Nikita Orliak <[email protected]>
cengage · Oct 24, 2024 · 360cf8d · 360cf8d · github-actions · Oct 24, 2024
1 parent 6a9e274
commit 360cf8d
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 14 deletions.
diff --git a/.changeset/feat-input-error-state-update-colors.md b/.changeset/feat-input-error-state-update-colors.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(Input): Update colors for error message, icon and border in dark mode.
diff --git a/packages/dropzone/src/components/dropzone/Dropzone.tsx b/packages/dropzone/src/components/dropzone/Dropzone.tsx
@@ -149,7 +149,7 @@ const Container = styled(Flex)<
       ? `0px`
       : dragState === 'dragReject' || dragState === 'error'
       ? isInverse
-        ? `1px dashed ${theme.colors.danger200}`
+        ? `1px dashed ${theme.colors.danger300}`
         : `1px dashed ${theme.colors.danger}`
       : dragState === 'dragActive'
       ? `1px dashed ${theme.colors.primary}`

diff --git a/packages/dropzone/src/components/dropzone/Preview.tsx b/packages/dropzone/src/components/dropzone/Preview.tsx
@@ -106,7 +106,7 @@ const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`
   border-color: ${({ file, theme, isInverse }) =>
     file.errors
       ? isInverse
-        ? theme.colors.danger200
+        ? theme.colors.danger300
         : theme.colors.danger
       : theme.colors.neutral300};
   border-width: 1px;
@@ -286,7 +286,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
               {file.errors ? (
                 <ErrorIcon
                   color={
-                    isInverse ? theme.colors.danger200 : theme.colors.danger
+                    isInverse ? theme.colors.danger300 : theme.colors.danger
                   }
                   size={24}
                 />

diff --git a/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js b/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js
@@ -236,7 +236,7 @@ describe('Checkbox', () => {
     );
 
     const span = container.querySelector('span');
-    expect(span).toHaveStyleRule('border-color', magma.colors.danger200);
+    expect(span).toHaveStyleRule('border-color', magma.colors.danger300);
     expect(span).toHaveStyleRule('color', magma.colors.neutral100);
   });
 

diff --git a/packages/react-magma-dom/src/components/Input/Input.test.js b/packages/react-magma-dom/src/components/Input/Input.test.js
@@ -134,16 +134,17 @@ describe('Input', () => {
   it('should render an inverse input with a correctly styled error message', () => {
     const labelText = 'test label';
     const testMessage = 'Test error message';
-    const { getByTestId, getByLabelText } = render(
+    const { getByTestId, getByLabelText, getByRole } = render(
       <Input errorMessage={testMessage} isInverse labelText={labelText} />
     );
 
     const input = getByLabelText(labelText).parentElement;
     const errorMessage = getByTestId('inputMessage');
+    const errorIcon = getByRole('img').firstChild;
 
-    expect(input).toHaveStyleRule('border-color', magma.colors.danger200);
-
+    expect(input).toHaveStyleRule('border-color', magma.colors.danger300);
     expect(errorMessage).toHaveStyleRule('color', magma.colors.danger200);
+    expect(errorIcon).toHaveAttribute('fill', magma.colors.danger300);
   });
 
   it('should render an input with a right-aligned icon by default', () => {

diff --git a/packages/react-magma-dom/src/components/Input/InputMessage.tsx b/packages/react-magma-dom/src/components/Input/InputMessage.tsx
@@ -80,7 +80,10 @@ export const InputMessage: React.FunctionComponent<InputMessageProps> = ({
       >
         {hasError && (
           <IconWrapper aria-label="Error" role="img" theme={theme}>
-            <ErrorIcon size={theme.iconSizes.small} />
+            <ErrorIcon
+              size={theme.iconSizes.small}
+              color={isInverse ? theme.colors.danger300 : undefined}
+            />
           </IconWrapper>
         )}
         <div>{children}</div>

diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx
@@ -204,7 +204,7 @@ export const inputWrapperStyles = (props: InputWrapperStylesProps) => css`
   ${props.hasError &&
   css`
     border-color: ${props.isInverse
-      ? props.theme.colors.danger200
+      ? props.theme.colors.danger300
       : props.theme.colors.danger};
   `}
 

diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js
@@ -113,7 +113,7 @@ describe('NativeSelect', () => {
 
     expect(getByTestId(testId).parentElement).toHaveStyleRule(
       'border',
-      `1px solid ${magma.colors.danger200}`
+      `1px solid ${magma.colors.danger300}`
     );
 
     expect(getByText(errorMessage)).toBeInTheDocument();

diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx
@@ -58,7 +58,7 @@ const StyledNativeSelectWrapper = styled.div<{
 function borderColors(props) {
   if (props.isInverse) {
     if (props.hasError) {
-      return props.theme.colors.danger200;
+      return props.theme.colors.danger300;
     }
     if (props.disabled) {
       return transparentize(0.85, props.theme.colors.neutral100);

diff --git a/packages/react-magma-dom/src/components/Radio/Radio.test.js b/packages/react-magma-dom/src/components/Radio/Radio.test.js
@@ -313,7 +313,7 @@ describe('Radio', () => {
 
     expect(span).toHaveStyleRule(
       'box-shadow',
-      `0 0 0 2px ${magma.colors.danger200}`
+      `0 0 0 2px ${magma.colors.danger300}`
     );
   });
 

diff --git a/packages/react-magma-dom/src/components/Radio/index.tsx b/packages/react-magma-dom/src/components/Radio/index.tsx
@@ -96,7 +96,7 @@ function buildRadioIconColor(props) {
 export function buildErrorBorder(props) {
   if (props.hasError) {
     if (props.isInverse) {
-      return `0 0 0 2px ${props.theme.colors.danger200}`;
+      return `0 0 0 2px ${props.theme.colors.danger300}`;
     }
     return `0 0 0 2px ${props.theme.colors.danger}`;
   }

diff --git a/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx b/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx
@@ -48,7 +48,7 @@ export function buildDisplayInputActiveBackground(props) {
 export function buildDisplayInputBorderColor(props) {
   if (props.hasError) {
     if (props.isInverse) {
-      return props.theme.colors.danger200;
+      return props.theme.colors.danger300;
     }
     return props.theme.colors.danger;
   }