Updating text color values to match new names

0xsequence · Jan 30, 2025 · cd9ea58 · cd9ea58
1 parent 77a4c23
commit cd9ea58
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 62 deletions.
diff --git 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
@@ -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,15 +68,15 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
         <Text
           variant="small"
           fontWeight="medium"
-          color="text50"
+          color="muted"
           nowrap
           capitalize
           className="hover:opacity-80"
         >
           {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,50 +12,50 @@ 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!',
   },
 }
 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
@@ -25,15 +25,15 @@ 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>
 
       <div id="app1">
         <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
@@ -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
@@ -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
@@ -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} />