chore: use correct colors for self-learning quiz wrapper (#2044)

commercetools · Jul 29, 2024 · 711806e · 711806e
1 parent f9a0f73
commit 711806e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/.changeset/lazy-rice-tie.md b/.changeset/lazy-rice-tie.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-docs/ui-kit': patch
+---
+
+Use correct colors for self learning quiz fail and default state
diff --git a/cypress/e2e/self-learning-smoke-test/e2e.const.ts b/cypress/e2e/self-learning-smoke-test/e2e.const.ts
@@ -33,6 +33,6 @@ export const EDITOR_TEST_USER_PASSWORD = 'Qwerty123!';
 
 // FEEDBACK
 export const WRONG_ANSWER_COLOR = 'rgb(218, 85, 78)';
-export const CORRECT_ANSWER_COLOR = 'rgb(8, 94, 58)';
+export const CORRECT_ANSWER_COLOR = 'rgb(23, 176, 105)';
 export const WRONG_ANSWER_TEXT = 'Your answer is incorrect.';
 export const CORRECT_ANSWER_TEXT = 'Your answer is correct.';
diff --git a/packages/gatsby-theme-docs/src/modules/self-learning/components/quiz.tsx b/packages/gatsby-theme-docs/src/modules/self-learning/components/quiz.tsx
@@ -1,9 +1,8 @@
 import { useState, useEffect, useCallback, useContext } from 'react';
 import styled from '@emotion/styled';
-import {
-  customProperties,
-  designTokens,
-} from '@commercetools-uikit/design-system';
+import { customProperties } from '@commercetools-uikit/design-system';
+import { designSystem } from '@commercetools-docs/ui-kit';
+
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import LoginButton from '../../sso/components/login-button';
@@ -32,11 +31,11 @@ const QuizWrapper = styled.div<QuizOutcome>`
   border-left-color: ${({ outcome }) => {
     switch (outcome) {
       case OUTCOME_CORRECT:
-        return designTokens.colorSuccess25;
+        return designSystem.colors.light.selfLearningQuizSuccess;
       case OUTCOME_INCORRECT:
-        return designTokens.colorError;
+        return designSystem.colors.light.selfLearningQuizError;
       default:
-        return customProperties.colorInfo;
+        return designSystem.colors.light.selfLearningQuizDefault;
     }
   }};
 `;

diff --git a/packages/ui-kit/src/design-system.ts b/packages/ui-kit/src/design-system.ts
@@ -26,6 +26,9 @@ export type ThemeColorTokens = {
   // Surfaces are used for backgrounds
   selfLearningLoginButton: string;
   selfLearningLoginButtonHover: string;
+  selfLearningQuizSuccess: string;
+  selfLearningQuizError: string;
+  selfLearningQuizDefault: string;
   surfacePrimary: string;
   surfaceSecondary1: string;
   surfaceSecondary2: string;
@@ -110,6 +113,9 @@ export const colors: ThemeColors = {
     // Surfaces are used for backgrounds
     selfLearningLoginButton: designTokens.colorPrimary,
     selfLearningLoginButtonHover: designTokens.colorPrimary40,
+    selfLearningQuizDefault: designTokens.colorPrimary,
+    selfLearningQuizError: designTokens.colorError,
+    selfLearningQuizSuccess: designTokens.colorSuccess,
     surfacePrimary: designTokens.colorSurface,
     surfaceSecondary1: designTokens.colorNeutral95,
     surfaceSecondary2: designTokens.colorNeutral90,