From cd9ea58650e4b48765e6551875f2ac64dca89981 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 30 Jan 2025 00:12:36 -0500
Subject: [PATCH] Updating text color values to match new names

---
 .storybook/preview.tsx                        |  6 ++---
 src/components/Breadcrumbs/Breadcrumbs.tsx    |  6 ++---
 src/components/Card/Card.stories.tsx          | 16 ++++++-------
 .../Collapsible/Collapsible.stories.tsx       |  4 ++--
 src/components/Collapsible/Collapsible.tsx    |  2 +-
 src/components/Field/Field.tsx                |  4 ++--
 src/components/FileInput/FileInput.tsx        |  2 +-
 .../GradientAvatar/GradientAvatar.stories.tsx |  2 +-
 src/components/Modal/Modal.stories.tsx        |  8 +++----
 src/components/Scroll/Scroll.stories.tsx      |  4 ++--
 .../StopClickPropagation.stories.tsx          |  2 +-
 .../TabbedNav/TabbedNav.stories.tsx           |  2 +-
 src/components/Tabs/Tabs.stories.tsx          |  2 +-
 src/components/Text/Text.stories.tsx          | 16 ++++++-------
 .../ThemeProvider/ThemeProvider.stories.tsx   | 16 ++++++-------
 src/components/Toast/Toast.tsx                |  4 ++--
 src/components/TokenImage/TokenImage.tsx      |  2 +-
 src/components/Tooltip/Tooltip.tsx            |  2 +-
 src/tokens/color.ts                           | 24 +++++++++----------
 19 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 1892022c..af1e80b3 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -8,9 +8,9 @@ import docsTheme from './theme'
 import './tailwind.css'
 
 const CUSTOM_THEME = {
-  text100: 'rgba(255, 255, 255, 1)',
-  text80: 'rgba(200, 200, 255, 1)',
-  text50: 'rgba(150, 150, 200, 1)',
+  textPrimary: 'rgba(255, 255, 255, 1)',
+  textSecondary: 'rgba(200, 200, 255, 1)',
+  textMuted: 'rgba(150, 150, 200, 1)',
   backgroundPrimary: 'pink',
   backgroundSecondary: 'navy',
 }
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 352e47e0..c31efc2b 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -58,7 +58,7 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
   const { path, active, renderLink = defaultRenderLink } = props
 
   return active ? (
-    <Text variant="small" fontWeight="medium" color="text100" nowrap capitalize>
+    <Text variant="small" fontWeight="medium" color="primary" nowrap capitalize>
       {path.label}
     </Text>
   ) : (
@@ -68,7 +68,7 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
         <Text
           variant="small"
           fontWeight="medium"
-          color="text50"
+          color="muted"
           nowrap
           capitalize
           className="hover:opacity-80"
@@ -76,7 +76,7 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
           {path.label}
         </Text>
       )}
-      <Text variant="small" fontWeight="medium" color="text50">
+      <Text variant="small" fontWeight="medium" color="muted">
         {' / '}
       </Text>
     </>
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
index befdd6cb..c7d340de 100644
--- a/src/components/Card/Card.stories.tsx
+++ b/src/components/Card/Card.stories.tsx
@@ -16,10 +16,10 @@ export const Default: Story = {
     children: (
       <>
         <div className="flex flex-col">
-          <Text variant="large" color="text100">
+          <Text variant="large" color="primary">
             Card
           </Text>
-          <Text variant="normal" color="text50">
+          <Text variant="normal" color="muted">
             Description
           </Text>
         </div>
@@ -34,10 +34,10 @@ export const Clickable: Story = {
     children: (
       <>
         <div className="flex flex-col text-left">
-          <Text variant="large" color="text100">
+          <Text variant="large" color="primary">
             Card
           </Text>
-          <Text variant="normal" color="text50">
+          <Text variant="normal" color="muted">
             Description
           </Text>
         </div>
@@ -52,10 +52,10 @@ export const Disabled: Story = {
     children: (
       <>
         <div className="flex flex-col text-left">
-          <Text variant="large" color="text100">
+          <Text variant="large" color="primary">
             Card
           </Text>
-          <Text variant="normal" color="text50">
+          <Text variant="normal" color="muted">
             Description
           </Text>
         </div>
@@ -69,10 +69,10 @@ export const Outlined: Story = {
     children: (
       <>
         <div className="flex flex-col">
-          <Text variant="large" color="text100">
+          <Text variant="large" color="primary">
             Card
           </Text>
-          <Text variant="normal" color="text50">
+          <Text variant="normal" color="muted">
             Description
           </Text>
         </div>
diff --git a/src/components/Collapsible/Collapsible.stories.tsx b/src/components/Collapsible/Collapsible.stories.tsx
index 4c023d63..68c85517 100644
--- a/src/components/Collapsible/Collapsible.stories.tsx
+++ b/src/components/Collapsible/Collapsible.stories.tsx
@@ -26,7 +26,7 @@ const CollapsibleStory = () => {
       onOpenChange={open => setIsOpen(open)}
     >
       {[1, 2, 3, 4, 5].map(x => (
-        <Text variant="normal" color="text80" key={x} asChild>
+        <Text variant="normal" color="secondary" key={x} asChild>
           <p>Item {x}</p>
         </Text>
       ))}
@@ -38,7 +38,7 @@ export const Default: Story = {
   args: {
     label: 'My Heading',
     children: [1, 2, 3, 4, 5].map(x => (
-      <Text variant="normal" color="text80" key={x} asChild>
+      <Text variant="normal" color="secondary" key={x} asChild>
         <p>Item {x}</p>
       </Text>
     )),
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
index e70ee481..c1e55703 100644
--- a/src/components/Collapsible/Collapsible.tsx
+++ b/src/components/Collapsible/Collapsible.tsx
@@ -57,7 +57,7 @@ export const Collapsible = (props: CollapsibleProps) => {
         transition={{ ease: 'easeOut', duration: 0.3 }}
       >
         <CollapsiblePrimitive.Trigger className="flex items-center bg-transparent p-4 w-full cursor-pointer select-none rounded-md border-none appearance-none h-[64px] focus:outline-hidden">
-          <Text variant="normal" fontWeight="bold" color="text80" asChild>
+          <Text variant="normal" fontWeight="bold" color="secondary" asChild>
             <div>{label}</div>
           </Text>
           <motion.div
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
index 425fe7dc..ddea8ce7 100644
--- a/src/components/Field/Field.tsx
+++ b/src/components/Field/Field.tsx
@@ -46,7 +46,7 @@ export const Field = (props: FieldProps) => {
         {label && (
           <Text
             variant="small"
-            color="text100"
+            color="primary"
             hidden={labelLocation === 'hidden'}
           >
             {label}
@@ -56,7 +56,7 @@ export const Field = (props: FieldProps) => {
         {description && (
           <Text
             variant="small"
-            color="text50"
+            color="muted"
             hidden={labelLocation === 'hidden'}
           >
             {description}
diff --git a/src/components/FileInput/FileInput.tsx b/src/components/FileInput/FileInput.tsx
index 41cf756e..7127f7c0 100644
--- a/src/components/FileInput/FileInput.tsx
+++ b/src/components/FileInput/FileInput.tsx
@@ -105,7 +105,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
             {fileData ? (
               <div className="flex flex-row gap-2 items-center min-w-0">
                 <Text ellipsis>{fileData.name}</Text>
-                <Text color="text50" variant="xsmall" nowrap>
+                <Text color="muted" variant="xsmall" nowrap>
                   {fileData.size.toFixed(2)} kb
                 </Text>
               </div>
diff --git a/src/components/GradientAvatar/GradientAvatar.stories.tsx b/src/components/GradientAvatar/GradientAvatar.stories.tsx
index e7a9f581..d822a543 100644
--- a/src/components/GradientAvatar/GradientAvatar.stories.tsx
+++ b/src/components/GradientAvatar/GradientAvatar.stories.tsx
@@ -61,7 +61,7 @@ for (let row = 0; row < ROWS; row++) {
 export const Multiple = () => {
   return (
     <>
-      <Text variant="normal" color="text100" fontWeight="bold" asChild>
+      <Text variant="normal" color="primary" fontWeight="bold" asChild>
         <div>SVG</div>
       </Text>
 
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index ed8537cd..b9e82853 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -33,10 +33,10 @@ export const Default: Story = {
     children: (
       <div className="flex flex-col justify-between h-full p-4">
         <div>
-          <Text variant="medium" color="text100" asChild>
+          <Text variant="medium" color="primary" asChild>
             <h1>New Dapp</h1>
           </Text>
-          <Text variant="normal" color="text50" asChild>
+          <Text variant="normal" color="muted" asChild>
             <p>You can always change these settings later.</p>
           </Text>
         </div>
@@ -67,10 +67,10 @@ export const CustomAnimation: Story = {
     children: (
       <div className="flex flex-col justify-between h-full p-4">
         <div>
-          <Text variant="medium" color="text100" asChild>
+          <Text variant="medium" color="primary" asChild>
             <h1>New Dapp</h1>
           </Text>
-          <Text variant="normal" color="text50" asChild>
+          <Text variant="normal" color="muted" asChild>
             <p>
               Custom Open & Close Animated Modal. You can always change these
               settings later.
diff --git a/src/components/Scroll/Scroll.stories.tsx b/src/components/Scroll/Scroll.stories.tsx
index 092ee3bb..a69bce36 100644
--- a/src/components/Scroll/Scroll.stories.tsx
+++ b/src/components/Scroll/Scroll.stories.tsx
@@ -63,7 +63,7 @@ export const VerticalScroll: Story = {
       <div className="p-4 flex flex-col gap-4 items-center">
         {ALPHABET.map(letter => (
           <div key={letter}>
-            <Text color="text100" variant="xlarge">
+            <Text color="primary" variant="xlarge">
               {letter}
             </Text>
           </div>
@@ -82,7 +82,7 @@ export const HorizontalScroll: Story = {
       <div className="p-4 gap-4 items-center h-full w-max">
         {ALPHABET.map(letter => (
           <div key={letter}>
-            <Text color="text100" variant="xlarge">
+            <Text color="primary" variant="xlarge">
               {letter}
             </Text>
           </div>
diff --git a/src/components/StopClickPropagation/StopClickPropagation.stories.tsx b/src/components/StopClickPropagation/StopClickPropagation.stories.tsx
index c3d109ed..03d8d66f 100644
--- a/src/components/StopClickPropagation/StopClickPropagation.stories.tsx
+++ b/src/components/StopClickPropagation/StopClickPropagation.stories.tsx
@@ -20,7 +20,7 @@ const StoryWrapper: StoryFn<typeof StopClickPropagation> = () => {
       onClick={() => console.log('Container Clicked!!')}
     >
       <div>
-        <Text variant="normal" color="text80">
+        <Text variant="normal" color="secondary">
           This container here has a click action. The button on the right also
           has a click action. Since the button is wrapped in a
           StopClickPropagation component, the click-through is prevented.
diff --git a/src/components/TabbedNav/TabbedNav.stories.tsx b/src/components/TabbedNav/TabbedNav.stories.tsx
index 6040a50a..c3b36831 100644
--- a/src/components/TabbedNav/TabbedNav.stories.tsx
+++ b/src/components/TabbedNav/TabbedNav.stories.tsx
@@ -80,7 +80,7 @@ const StoryWrapper: StoryFn<typeof TabbedNav> = args => {
       </div>
 
       <div className="bg-background-secondary p-4 rounded-xl">
-        <Text variant="normal" color="text80">
+        <Text variant="normal" color="secondary">
           {value} content
         </Text>
       </div>
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index d029bef5..56dc0ac1 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Tabs>
 
 const Content = ({ children }: any) => (
   <Card className="mt-4">
-    <Text variant="normal" color="text80">
+    <Text variant="normal" color="secondary">
       {children}
     </Text>
   </Card>
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index 28e53912..6d76de76 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -12,28 +12,28 @@ type Story = StoryObj<typeof Text>
 export const Heading1: Story = {
   args: {
     variant: 'xlarge',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
 export const Heading2: Story = {
   args: {
     variant: 'large',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
 export const Heading3: Story = {
   args: {
     variant: 'medium',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
 export const Bold: Story = {
   args: {
     variant: 'normal',
-    color: 'text100',
+    color: 'primary',
     fontWeight: 'bold',
     children: 'Hello, world!',
   },
@@ -41,21 +41,21 @@ export const Bold: Story = {
 export const BodyLarge: Story = {
   args: {
     variant: 'large',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
 export const Body: Story = {
   args: {
     variant: 'normal',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
 export const TextAsChild: Story = {
   args: {
     variant: 'normal',
-    color: 'text100',
+    color: 'primary',
     children: (
       <>
         <Text fontWeight="bold" color="positive">
@@ -69,7 +69,7 @@ export const TextAsChild: Story = {
 export const Code: Story = {
   args: {
     variant: 'code',
-    color: 'text100',
+    color: 'primary',
     children: 'Hello, world!',
   },
 }
diff --git a/src/components/ThemeProvider/ThemeProvider.stories.tsx b/src/components/ThemeProvider/ThemeProvider.stories.tsx
index ec731db2..dfee756a 100644
--- a/src/components/ThemeProvider/ThemeProvider.stories.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => {
 export const Nested = () => {
   return (
     <Card>
-      <Text variant="normal" color="text100" fontWeight="bold">
+      <Text variant="normal" color="primary" fontWeight="bold">
         Root Application
       </Text>
 
@@ -33,7 +33,7 @@ export const Nested = () => {
         <ThemeProvider root="#app1" scope="application1" theme="light">
           <Card className="bg-background-primary mt-4">
             <Collapsible label="Nested Application 1">
-              <Text variant="normal" color="text100">
+              <Text variant="normal" color="primary">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                 enim ad minim veniam, quis nostrud exercitation ullamco laboris
@@ -51,7 +51,7 @@ export const Nested = () => {
                 <ThemeProvider root="#app2" scope="application2" theme="dark">
                   <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 2 (Dark)">
-                      <Text variant="normal" color="text100">
+                      <Text variant="normal" color="primary">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore
                         magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -76,16 +76,16 @@ export const Nested = () => {
                   root="#app3"
                   scope="application3"
                   theme={{
-                    text100: 'rgba(255, 255, 255, 1)',
-                    text80: 'rgba(200, 200, 255, 1)',
-                    text50: 'rgba(150, 150, 200, 1)',
+                    textPrimary: 'rgba(255, 255, 255, 1)',
+                    textSecondary: 'rgba(200, 200, 255, 1)',
+                    textMuted: 'rgba(150, 150, 200, 1)',
                     backgroundPrimary: 'pink',
                     backgroundSecondary: 'navy',
                   }}
                 >
                   <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 3 (Custom Theme)">
-                      <Text variant="normal" color="text100">
+                      <Text variant="normal" color="primary">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore
                         magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -109,7 +109,7 @@ export const Nested = () => {
                 >
                   <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 4 (Prefers Color Scheme)">
-                      <Text variant="normal" color="text100">
+                      <Text variant="normal" color="primary">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore
                         magna aliqua. Ut enim ad minim veniam, quis nostrud
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 6d2f3bf2..7d1413d3 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -138,7 +138,7 @@ export const Toast = (props: ToastProps) => {
                   <Text
                     variant="normal"
                     fontWeight="bold"
-                    color="text80"
+                    color="secondary"
                     asChild
                   >
                     <div>{title}</div>
@@ -150,7 +150,7 @@ export const Toast = (props: ToastProps) => {
                 <Text
                   variant="normal"
                   fontWeight="medium"
-                  color="text50"
+                  color="muted"
                   asChild
                 >
                   <div>{description}</div>
diff --git a/src/components/TokenImage/TokenImage.tsx b/src/components/TokenImage/TokenImage.tsx
index 91574836..289ea5ab 100644
--- a/src/components/TokenImage/TokenImage.tsx
+++ b/src/components/TokenImage/TokenImage.tsx
@@ -75,7 +75,7 @@ export const TokenImage = memo((props: TokenImageProps) => {
           )}
           variant="inherit"
           fontWeight="medium"
-          color="text50"
+          color="muted"
           uppercase
         >
           {symbol?.replace(/\s/, '').slice(0, 4)}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 2a3e5f04..72b0e8f8 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -38,7 +38,7 @@ export const Tooltip = (props: PropsWithChildren<TooltipProps>) => {
           sideOffset={vOffset}
           alignOffset={hOffset}
         >
-          <Text variant="small" fontWeight="medium" color="text80">
+          <Text variant="small" fontWeight="medium" color="secondary">
             {message}
           </Text>
           <TooltipPrimitive.Arrow offset={12} width={10} height={5} />
diff --git a/src/tokens/color.ts b/src/tokens/color.ts
index 9abe6b98..e0ac59f7 100644
--- a/src/tokens/color.ts
+++ b/src/tokens/color.ts
@@ -15,10 +15,10 @@ export interface ColorTokens {
   warning: string
 
   // Text colors
-  text100: string
-  text80: string
-  text50: string
-  textInverse100: string
+  textPrimary: string
+  textSecondary: string
+  textMuted: string
+  textInverse: string
 
   // Background colors
   backgroundPrimary: string
@@ -70,10 +70,10 @@ const defaultColors = {
 const dark: ColorTokens = {
   ...defaultColors,
 
-  text100: 'rgba(255, 255, 255, 1)',
-  text80: 'rgba(255, 255, 255, 0.8)',
-  text50: 'rgba(255, 255, 255, 0.5)',
-  textInverse100: 'rgba(0, 0, 0, 1)',
+  textPrimary: 'rgba(255, 255, 255, 1)',
+  textSecondary: 'rgba(255, 255, 255, 0.8)',
+  textMuted: 'rgba(255, 255, 255, 0.5)',
+  textInverse: 'rgba(0, 0, 0, 1)',
 
   backgroundPrimary: 'rgba(0, 0, 0, 1)',
   backgroundSecondary: 'rgba(255, 255, 255, 0.1)',
@@ -96,10 +96,10 @@ const dark: ColorTokens = {
 const light: ColorTokens = {
   ...defaultColors,
 
-  text100: 'rgba(0, 0, 0, 1)',
-  text80: 'rgba(0, 0, 0, 0.8)',
-  text50: 'rgba(0, 0, 0, 0.5)',
-  textInverse100: 'rgba(255, 255, 255, 1)',
+  textPrimary: 'rgba(0, 0, 0, 1)',
+  textSecondary: 'rgba(0, 0, 0, 0.8)',
+  textMuted: 'rgba(0, 0, 0, 0.5)',
+  textInverse: 'rgba(255, 255, 255, 1)',
 
   backgroundPrimary: 'rgba(244, 244, 244, 1)',
   backgroundSecondary: 'rgba(0, 0, 0, 0.1)',