💄(app-desk) change the text color

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

@@ -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',

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>

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;

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',

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}

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>
       ),
     }));