From ae976943840eeaa0807fbf32c304b1448359c386 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 13 Mar 2025 11:04:50 +0000
Subject: [PATCH] Fix stories

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/src/components/Tabs/parts.tsx      |  5 +-
 .../src/components/Text/Text.stories.tsx      | 68 +++++++++----------
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 7f074f9188..3d02683cef 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -31,10 +31,7 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
           <Text
             variant="subtitle"
             weight="bold"
-            {...rest}
-            style={{
-              color: state.selected ? 'var(--primary)' : 'var(--secondary)',
-            }}
+            color={state.selected ? 'primary' : 'secondary'}
           >
             {children}
           </Text>
diff --git a/packages/canon/src/components/Text/Text.stories.tsx b/packages/canon/src/components/Text/Text.stories.tsx
index 547b637619..9cf2a73f6e 100644
--- a/packages/canon/src/components/Text/Text.stories.tsx
+++ b/packages/canon/src/components/Text/Text.stories.tsx
@@ -39,51 +39,49 @@ export const Default: Story = {
 };
 
 export const AllVariants: Story = {
-  render: () => (
-    <Flex gap="4">
-      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="body" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="caption" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="label" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
+  args: {
+    ...Default.args,
+  },
+  render: args => (
+    <Flex gap="4" direction="column">
+      <Text variant="subtitle" {...args} />
+      <Text variant="body" {...args} />
+      <Text variant="caption" {...args} />
+      <Text variant="label" {...args} />
     </Flex>
   ),
 };
 
 export const AllWeights: Story = {
-  render: () => (
-    <Flex gap="4">
-      <Text weight="regular" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text weight="bold" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
+  args: {
+    ...Default.args,
+  },
+  render: args => (
+    <Flex gap="4" direction="column">
+      <Text weight="regular" {...args} />
+      <Text weight="bold" {...args} />
+    </Flex>
+  ),
+};
+
+export const AllColors: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: args => (
+    <Flex gap="4" direction="column">
+      <Text color="primary" {...args} />
+      <Text color="secondary" {...args} />
+      <Text color="danger" {...args} />
+      <Text color="warning" {...args} />
+      <Text color="success" {...args} />
     </Flex>
   ),
 };
 
 export const Responsive: Story = {
   args: {
+    ...Default.args,
     variant: {
       xs: 'label',
       md: 'body',
@@ -93,7 +91,7 @@ export const Responsive: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Flex>
+    <Flex gap="4" direction="column">
       <Text>Subtitle</Text>
       <Text variant="subtitle" style={{ maxWidth: '600px' }}>
         A man looks at a painting in a museum and says, “Brothers and sisters I