fix missed variables

gsoft-inc · Oct 12, 2023 · 8862f6e · 8862f6e
1 parent 03d19c4
commit 8862f6e
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>