chore: adjust green color to match accesibility requirements (#1673)

* chore: adjust green color to match accesibility requirements * chore: changeset * chore: e2e fix * chore: e2e fix
commercetools · May 12, 2023 · 27758e8 · 27758e8
1 parent 36a4557
commit 27758e8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/.changeset/wild-dolls-rush.md b/.changeset/wild-dolls-rush.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-learning': patch
+---
+
+Change the green color of "passed" course status to match accessibility requirements
diff --git a/cypress/e2e/docs-smoke-test/learn-api/e2e.const.ts b/cypress/e2e/docs-smoke-test/learn-api/e2e.const.ts
@@ -28,6 +28,6 @@ export const EDITOR_TEST_USER_PASSWORD = 'Qwerty123!';
 
 // FEEDBACK
 export const WRONG_ANSWER_COLOR = 'rgb(230, 0, 80)';
-export const CORRECT_ANSWER_COLOR = 'rgb(0, 204, 180)';
+export const CORRECT_ANSWER_COLOR = 'rgb(0, 128, 113)';
 export const WRONG_ANSWER_TEXT = 'Your answer is incorrect.';
 export const CORRECT_ANSWER_TEXT = 'Your answer is correct.';
diff --git a/packages/gatsby-theme-learning/src/components/quiz-form.tsx b/packages/gatsby-theme-learning/src/components/quiz-form.tsx
@@ -24,6 +24,7 @@ import type {
 } from './quiz';
 import { OUTCOME_INCORRECT } from './quiz';
 import type { SubmissionAttempt } from './quiz.types';
+import { designTokens } from '@commercetools-uikit/design-system';
 
 const RENDER_TYPE_SINGLE: QuestionRenderType = 'singleOption';
 
@@ -40,7 +41,10 @@ const SelectionContainer = styled.div`
 `;
 
 const QuestionFeedbackMessage = styled.div<QuizOutcome>`
-  color: ${(props) => (props.outcome === 'correct' ? '#00ccb4' : '#e60050')};
+  color: ${(props) =>
+    props.outcome === 'correct'
+      ? designTokens.colorPrimary25
+      : designTokens.colorError};
 `;
 
 const QuestionFeedbackPlaceholder = styled.div`
@@ -51,7 +55,10 @@ const QuizFeedbackMessageArea = styled.div<QuizOutcome>`
   margin: 16px 8px 16px 8px;
   p {
     font-weight: bold;
-    color: ${(props) => (props.outcome === 'correct' ? '#00ccb4' : '#e60050')};
+    color: ${(props) =>
+      props.outcome === 'correct'
+        ? designTokens.colorPrimary25
+        : designTokens.colorError};
   }
 `;
 

diff --git a/packages/gatsby-theme-learning/src/components/quiz.tsx b/packages/gatsby-theme-learning/src/components/quiz.tsx
@@ -1,6 +1,9 @@
 import { useState, useEffect, useCallback, useContext } from 'react';
 import styled from '@emotion/styled';
-import { customProperties } from '@commercetools-uikit/design-system';
+import {
+  customProperties,
+  designTokens,
+} from '@commercetools-uikit/design-system';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import { LoginButton } from '@commercetools-docs/gatsby-theme-sso-ui-kit';
@@ -30,9 +33,9 @@ const QuizWrapper = styled.div<QuizOutcome>`
   border-left-color: ${({ outcome }) => {
     switch (outcome) {
       case OUTCOME_CORRECT:
-        return '#00ccb4';
+        return designTokens.colorPrimary25;
       case OUTCOME_INCORRECT:
-        return '#e60050';
+        return designTokens.colorError;
       default:
         return customProperties.colorInfo;
     }