From 8862f6e2dc11fba1cb3ea72b8fd3cf2a6a466b75 Mon Sep 17 00:00:00 2001
From: Alexandre Asselin <alexandre.asselin@gsoft.com>
Date: Thu, 12 Oct 2023 12:44:04 -0400
Subject: [PATCH] fix missed variables

---
 docs/features/style-props/StyleProps.stories.mdx            | 2 +-
 .../components/src/badge/tests/chromatic/BadgeUtils.tsx     | 4 ++--
 packages/components/src/card/docs/Card.stories.mdx          | 6 +++---
 packages/components/src/dot/src/Dot.tsx                     | 3 +--
 .../src/illustration/docs/Illustration.stories.mdx          | 6 +++---
 packages/components/src/modal/docs/Modal.stories.mdx        | 2 +-
 packages/components/src/tile/docs/Tile.stories.mdx          | 2 +-
 7 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/docs/features/style-props/StyleProps.stories.mdx b/docs/features/style-props/StyleProps.stories.mdx
index 741dff5f2..872603afc 100644
--- a/docs/features/style-props/StyleProps.stories.mdx
+++ b/docs/features/style-props/StyleProps.stories.mdx
@@ -53,7 +53,7 @@ Inspired by [Styled System](https://styled-system.com/), Orbiter's style props a
 To help achieve a consistent user interface, Orbiter style props are based on scales and values defined in a customizable [theme](?path=/docs/theming--page).
 
 <Preview>
-    <Div width="30rem" backgroundColor="surface-weak" padding={160} borderRadius={2} maxWidth="100%">
+    <Div width="30rem" backgroundColor="primary-weak" padding={160} borderRadius={2} maxWidth="100%">
         <Paragraph fontSize={4}>Lost in space.</Paragraph>
     </Div>
 </Preview>
diff --git a/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx b/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx
index 2d5137132..131df320c 100644
--- a/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx
+++ b/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx
@@ -9,7 +9,7 @@ export function SquareBadge({ children, ...rest }: BadgeUtilsProps) {
     return (
         <Badge {...rest}>
             {children}
-            <Div backgroundColor="surface-weak" width={400} height={400} />
+            <Div backgroundColor="primary-weak" width={400} height={400} />
         </Badge>
     );
 }
@@ -21,7 +21,7 @@ export function CircleBadge({ children, ...rest }: BadgeUtilsProps) {
             overlap="circle"
         >
             {children}
-            <Div backgroundColor="surface-weak" borderRadius="100px" width={400} height={400} />
+            <Div backgroundColor="primary-weak" borderRadius="100px" width={400} height={400} />
         </Badge>
     );
 }
diff --git a/packages/components/src/card/docs/Card.stories.mdx b/packages/components/src/card/docs/Card.stories.mdx
index 95a9d9b37..171bb3438 100644
--- a/packages/components/src/card/docs/Card.stories.mdx
+++ b/packages/components/src/card/docs/Card.stories.mdx
@@ -88,7 +88,7 @@ Or an [illustration](?path=/docs/illustration--horizontal):
 <Preview scope={{ Planet }}>
     <Story name="illustration">
         <Card >
-            <Illustration backgroundColor="surface-weak">
+            <Illustration backgroundColor="primary-weak">
                 <Image src={Planet} alt="Planet over another one" width="100px" />
             </Illustration>
             <Heading>NASA Headquarters</Heading>
@@ -164,7 +164,7 @@ A card can render horizontally.
 <Preview scope={{ Planet }}>
     <Story name="orientation">
         <Card orientation="horizontal">
-            <Illustration backgroundColor="surface-weak">
+            <Illustration backgroundColor="primary-weak">
                 <Image src={Planet} alt="Planet over another one" />
             </Illustration>
             <Heading>NASA</Heading>
@@ -250,7 +250,7 @@ A card can take the width of its container.
 <Preview scope={{ Planet }}>
     <Story name="fluid">
         <Card fluid orientation="horizontal">
-            <Illustration backgroundColor="surface-weak" width={1280}>
+            <Illustration backgroundColor="primary-weak" width={1280}>
                 <Image src={Planet} alt="Planet over another one" />
             </Illustration>
             <Heading>NASA</Heading>
diff --git a/packages/components/src/dot/src/Dot.tsx b/packages/components/src/dot/src/Dot.tsx
index 89171d519..47ac7a4da 100644
--- a/packages/components/src/dot/src/Dot.tsx
+++ b/packages/components/src/dot/src/Dot.tsx
@@ -20,9 +20,8 @@ function useColor(color: string) {
                 return color;
             } else if (color.startsWith("--")) {
                 return `var(${color})`;
+            // This logic should be reworked and not imported as is in Hopper. Accessing the Mapping directly feels weird.
             } else if (!isNil(BackgroundColorMapping[color])) {
-                console.log("AA", color, BackgroundColorMapping[color]);
-
                 return BackgroundColorMapping[color];
             }
 
diff --git a/packages/components/src/illustration/docs/Illustration.stories.mdx b/packages/components/src/illustration/docs/Illustration.stories.mdx
index a0bff1486..d940c8986 100644
--- a/packages/components/src/illustration/docs/Illustration.stories.mdx
+++ b/packages/components/src/illustration/docs/Illustration.stories.mdx
@@ -26,7 +26,7 @@ An illustration renders horizontally by default.
 
 <Preview scope={{ Planet }}>
     <Story name="default">
-        <Illustration backgroundColor="surface-weak" height="12rem" padding={160}>
+        <Illustration backgroundColor="primary-weak" height="12rem" padding={160}>
             <Image src={Planet} stroke="primary-icon" />
         </Illustration>
     </Story>
@@ -38,7 +38,7 @@ An illustration can render vertically.
 
 <Preview scope={{ Planet }} height="30rem">
     <Story name="vertical">
-        <Illustration orientation="vertical" backgroundColor="surface-weak" width="12rem" padding={160}>
+        <Illustration orientation="vertical" backgroundColor="primary-weak" width="12rem" padding={160}>
             <Image src={Planet} alt="Planet over another planet" />
         </Illustration>
     </Story>
@@ -50,7 +50,7 @@ An illustration can have a `rounded` shape.
 
 <Preview scope={{ Planet }}>
     <Story name="shape">
-        <Illustration shape="rounded" backgroundColor="surface-weak">
+        <Illustration shape="rounded" backgroundColor="primary-weak">
             <Image src={Planet} alt="Planet over another planet" />
         </Illustration>
     </Story>
diff --git a/packages/components/src/modal/docs/Modal.stories.mdx b/packages/components/src/modal/docs/Modal.stories.mdx
index d893ac0cb..59abc7365 100644
--- a/packages/components/src/modal/docs/Modal.stories.mdx
+++ b/packages/components/src/modal/docs/Modal.stories.mdx
@@ -97,7 +97,7 @@ Or an [illustration](?path=/docs/illustration--horizontal). Prefer 1:1 ratio for
         <ModalTrigger>
             <Button variant="secondary">Open</Button>
             <Modal>
-                <Illustration backgroundColor="surface-weak">
+                <Illustration backgroundColor="primary-weak">
                     <Image src={Planet} alt="Planet Logo" />
                 </Illustration>
                 <Heading>Cloud City</Heading>
diff --git a/packages/components/src/tile/docs/Tile.stories.mdx b/packages/components/src/tile/docs/Tile.stories.mdx
index 94a2a9aac..2628adb22 100644
--- a/packages/components/src/tile/docs/Tile.stories.mdx
+++ b/packages/components/src/tile/docs/Tile.stories.mdx
@@ -69,7 +69,7 @@ Or an [illustration](?path=/docs/illustration--horizontal) with a background col
 <Preview scope={{ Planet }} width="20rem">
     <Story name="illustration">
         <Tile>
-            <Illustration backgroundColor="surface-weak">
+            <Illustration backgroundColor="primary-weak">
                 <Image src={Planet} width="100px" alt="Planet" />
             </Illustration>
             <Heading>Buy a ticket</Heading>