From 95219a33b30495746c658ffc28816f1b02e669ff Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 13 Feb 2024 12:52:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-desk)=20change=20the=20text=20?=
 =?UTF-8?q?color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The text color from the mockup is not blue but
a dark grey. This commit changes the base color of
the Text component to match the mockup.
---
 src/frontend/apps/desk/cunningham.ts                        | 1 +
 src/frontend/apps/desk/src/components/Text.tsx              | 2 +-
 src/frontend/apps/desk/src/cunningham/cunningham-tokens.css | 1 +
 src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts  | 1 +
 src/frontend/apps/desk/src/features/header/Header.tsx       | 6 ++++--
 .../apps/desk/src/features/language/LanguagePicker.tsx      | 2 +-
 6 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts
index aab556c..b0fcf56 100644
--- a/src/frontend/apps/desk/cunningham.ts
+++ b/src/frontend/apps/desk/cunningham.ts
@@ -196,6 +196,7 @@ const config = {
           'secondary-700': '#3b2424',
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
+          'greyscale-text': '#303C4B',
           'greyscale-000': '#cecece',
           'greyscale-100': '#f6f6f6',
           'greyscale-200': '#eeeeee',
diff --git a/src/frontend/apps/desk/src/components/Text.tsx b/src/frontend/apps/desk/src/components/Text.tsx
index 4500892..b2a335a 100644
--- a/src/frontend/apps/desk/src/components/Text.tsx
+++ b/src/frontend/apps/desk/src/components/Text.tsx
@@ -55,7 +55,7 @@ export const Text = ({
   return (
     <TextStyled
       as="span"
-      $theme="primary"
+      $theme="greyscale"
       $variation="text"
       {...props}
     ></TextStyled>
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
index 2377c78..114355a 100644
--- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
@@ -334,6 +334,7 @@
   --c--theme--colors--secondary-700: #3b2424;
   --c--theme--colors--secondary-800: #341f1f;
   --c--theme--colors--secondary-900: #2b1919;
+  --c--theme--colors--greyscale-text: #303c4b;
   --c--theme--colors--greyscale-000: #cecece;
   --c--theme--colors--greyscale-100: #f6f6f6;
   --c--theme--colors--greyscale-200: #eee;
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
index 3e9ee6d..bbe7e35 100644
--- a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
@@ -342,6 +342,7 @@ export const tokens = {
           'secondary-700': '#3b2424',
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
+          'greyscale-text': '#303C4B',
           'greyscale-000': '#cecece',
           'greyscale-100': '#f6f6f6',
           'greyscale-200': '#eeeeee',
diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 964d09b..45ad791 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -57,7 +57,7 @@ export const Header = () => {
             />
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconDesk} alt={t('Desk Logo')} />
-              <Text className="m-0" as="h2">
+              <Text className="m-0" as="h2" $theme="primary">
                 {t('Desk')}
               </Text>
             </Box>
@@ -79,7 +79,9 @@ export const Header = () => {
           </Box>
           <Box $direction="row">
             <Box $direction="row" $align="center" $gap="1rem">
-              <Text $weight="bold">John Doe</Text>
+              <Text $weight="bold" $theme="primary">
+                John Doe
+              </Text>
               <Image
                 width={58}
                 height={58}
diff --git a/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx b/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx
index 4efc3a5..990cd77 100644
--- a/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx
@@ -49,7 +49,7 @@ export const LanguagePicker = () => {
           $align="center"
         >
           <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text>{lang.toUpperCase()}</Text>
+          <Text $theme="primary">{lang.toUpperCase()}</Text>
         </Box>
       ),
     }));