@app-studio/web 0.9.83 → 0.9.85

package/docs/components/Resizable.mdx

@@ -25,7 +25,7 @@ export const DefaultResizable = () => {
     >
       <Resizable>
         <Resizable.Panel id="panel1" defaultSize="30%">
-          <View padding="16px" height="100%" backgroundColor="color.blue.50">
+          <View padding="16px" height="100%" backgroundColor="color-blue.50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 1
             </Text>
@@ -36,7 +36,7 @@ export const DefaultResizable = () => {
         <Resizable.Handle id="handle1" withVisualIndicator />
 
         <Resizable.Panel id="panel2" defaultSize="40%">
-          <View padding="16px" height="100%" backgroundColor="color.green.50">
+          <View padding="16px" height="100%" backgroundColor="color-green.50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 2
             </Text>
@@ -47,7 +47,7 @@ export const DefaultResizable = () => {
         <Resizable.Handle id="handle2" withVisualIndicator />
 
         <Resizable.Panel id="panel3" defaultSize="30%">
-          <View padding="16px" height="100%" backgroundColor="color.purple.50">
+          <View padding="16px" height="100%" backgroundColor="color-purple.50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 3
             </Text>
@@ -93,7 +93,7 @@ export const CollapsibleResizable = () => {
           minSize={100}
           maxSize={300}
         >
-          <View padding="16px" height="100%" backgroundColor="color.blue.50">
+          <View padding="16px" height="100%" backgroundColor="color-blue.50">
             <Text fontWeight="bold" marginBottom="8px">
               Collapsible Panel
             </Text>
@@ -107,7 +107,7 @@ export const CollapsibleResizable = () => {
         <Resizable.Handle id="handle1" withVisualIndicator withCollapseButton />
 
         <Resizable.Panel id="panel2" defaultSize="50%">
-          <View padding="16px" height="100%" backgroundColor="color.green.50">
+          <View padding="16px" height="100%" backgroundColor="color-green.50">
             <Text fontWeight="bold" marginBottom="8px">
               Main Panel
             </Text>
@@ -131,7 +131,7 @@ export const CollapsibleResizable = () => {
           collapsible={true}
           defaultCollapsed={true}
         >
-          <View padding="16px" height="100%" backgroundColor="color.purple.50">
+          <View padding="16px" height="100%" backgroundColor="color-purple.50">
             <Text fontWeight="bold" marginBottom="8px">
               Initially Collapsed Panel
             </Text>

package/docs/components/Selector.mdx

@@ -47,9 +47,9 @@ export const ComplexitySelector = () => (
   <Selector
     label="Complexity"
     options={[
-      { label: 'Low', value: 'Low', color: 'color.emerald.500' },
-      { label: 'Medium', value: 'Medium', color: 'color.amber.500' },
-      { label: 'High', value: 'High', color: 'color.red.500' },
+      { label: 'Low', value: 'Low', color: 'color-emerald-500' },
+      { label: 'Medium', value: 'Medium', color: 'color-amber-500' },
+      { label: 'High', value: 'High', color: 'color-red-500' },
     ]}
   />
 );
@@ -66,7 +66,7 @@ export const CustomStyleSelector = () => (
   <Selector
     label="Custom Styled"
     views={{
-      container: { backgroundColor: 'color.gray.50' },
+      container: { backgroundColor: 'color-gray.50' },
       item: { fontSize: '14px', fontStyle: 'italic' }
     }}
     options={[

package/docs/components/Sidebar.mdx

@@ -64,12 +64,12 @@ export const DefaultSidebar = () => {
             </Vertical>
           </Sidebar.Content>
           <Sidebar.Footer>
-            <Text size="sm" color="color.gray.500">
+            <Text size="sm" color="color-gray-500">
               © 2023 App Studio
             </Text>
           </Sidebar.Footer>
         </Sidebar>
-        <View flex="1" padding="16px" backgroundColor="color.gray.50">
+        <View flex="1" padding="16px" backgroundColor="color-gray.50">
           <Text fontWeight="bold" size="xl" marginBottom="16px">
             Main Content
           </Text>

package/docs/components/Slider.mdx

@@ -68,7 +68,7 @@ export const StepValuesDemo = () => {
 
       <Horizontal justifyContent="space-between" width="100%">
         {stepValues.map((step) => (
-          <Text key={step} fontSize={12} color="color.blueGray.500">
+          <Text key={step} fontSize={12} color="color-blueGray-500">
             {step}
           </Text>
         ))}
@@ -98,19 +98,19 @@ export const PricingTiersDemo = () => {
         showValue
         views={{
           track: {
-            backgroundColor: 'color.green.100',
+            backgroundColor: 'color-green-100',
             height: 8,
           },
           progress: {
-            backgroundColor: 'color.green.500',
+            backgroundColor: 'color-green-500',
           },
           thumb: {
-            backgroundColor: 'color.white',
-            border: '2px solid color.green.500',
+            backgroundColor: 'color-white',
+            border: '2px solid color-green-500',
           },
           valueLabel: {
-            backgroundColor: 'color.green.500',
-            color: 'color.white',
+            backgroundColor: 'color-green-500',
+            color: 'color-white',
             padding: '2px 8px',
             borderRadius: 4,
             fontWeight: 600,
@@ -118,7 +118,7 @@ export const PricingTiersDemo = () => {
           stepMarks: {
             width: 6,
             height: 6,
-            backgroundColor: 'color.green.700',
+            backgroundColor: 'color-green-700',
           },
         }}
       />
@@ -128,7 +128,7 @@ export const PricingTiersDemo = () => {
           <Text
             key={price}
             fontSize={12}
-            color="color.green.700"
+            color="color-green-700"
             fontWeight={500}
           >
             ${price}
@@ -136,7 +136,7 @@ export const PricingTiersDemo = () => {
         ))}
       </Horizontal>
 
-      <Text fontSize={14} color="color.blueGray.600" textAlign="center">
+      <Text fontSize={14} color="color-blueGray-600" textAlign="center">
         Selected Plan: ${value}/month
       </Text>
     </Vertical>

package/docs/components/StatusIndicator.mdx

@@ -154,7 +154,7 @@ export const OrderStatus = () => (
     <Vertical gap={15}>
       <Text fontSize={18} fontWeight="bold">Order #12345</Text>
       <StatusIndicator status="success" label="Delivered" />
-      <Text fontSize={14} color="color.coolGray.500">
+      <Text fontSize={14} color="color-coolGray-500">
         Your order was delivered on March 15, 2024
       </Text>
     </Vertical>
@@ -242,12 +242,12 @@ export const PaymentStatus = () => (
       <Horizontal justifyContent="space-between" alignItems="center">
         <Vertical gap={5}>
           <Text fontSize={16} fontWeight="bold">Payment to Acme Corp</Text>
-          <Text fontSize={14} color="color.coolGray.500">$1,234.56</Text>
+          <Text fontSize={14} color="color-coolGray-500">$1,234.56</Text>
         </Vertical>
         <StatusIndicator status="success" label="Paid" />
       </Horizontal>
       
-      <Text fontSize={14} color="color.coolGray.500">
+      <Text fontSize={14} color="color-coolGray-500">
         Transaction ID: TXN-2024-03-15-001
       </Text>
     </Vertical>
@@ -283,7 +283,7 @@ export const ServerStatusDashboard = () => {
               <Horizontal justifyContent="space-between" alignItems="center">
                 <Vertical gap={5}>
                   <Text fontWeight="bold">{server.name}</Text>
-                  <Text fontSize={14} color="color.coolGray.500">
+                  <Text fontSize={14} color="color-coolGray-500">
                     Uptime: {server.uptime}
                   </Text>
                 </Vertical>
@@ -342,7 +342,7 @@ export const NotificationStatus = () => {
           <StatusIndicator status={notification.status} />
           <Vertical gap={2}>
             <Text>{notification.message}</Text>
-            <Text fontSize={12} color="color.coolGray.500">{notification.time}</Text>
+            <Text fontSize={12} color="color-coolGray-500">{notification.time}</Text>
           </Vertical>
         </Horizontal>
       ))}

package/docs/components/Switch.mdx

@@ -38,7 +38,7 @@ import React from 'react';
 import { Switch } from '@app-studio/web';
 
 export const ColorSwitch = () => (
-  <Switch name="name" colorScheme="theme.primary" isChecked />
+  <Switch name="name" colorScheme="theme-primary" isChecked />
 );
 
 ```

package/docs/components/TagInput.mdx

@@ -25,7 +25,7 @@ export const DefaultTagInput = () => {
         onTagsChange={setTags}
         helperText="Add relevant tags for your content"
       />
-      <Text fontSize={14} color="color.gray.600">
+      <Text fontSize={14} color="color-gray-600">
         Current tags: {Array.isArray(tags) ? tags.join(', ') : 'None'}
       </Text>
     </Vertical>
@@ -347,16 +347,16 @@ export const StyledTagInput = () => {
       shadow={{ boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px' }}
       views={{
         inputContainer: {
-          borderColor: 'theme.primary',
+          borderColor: 'theme-primary',
           borderWidth: '2px',
-          backgroundColor: 'color.blue.50',
+          backgroundColor: 'color-blue.50',
         },
         tag: {
-          backgroundColor: 'theme.primary',
-          borderColor: 'theme.primary',
+          backgroundColor: 'theme-primary',
+          borderColor: 'theme-primary',
         },
         tagText: {
-          color: 'color.white',
+          color: 'color-white',
         },
         tagRemove: {
           _hover: {
@@ -364,7 +364,7 @@ export const StyledTagInput = () => {
           },
         },
         label: {
-          color: 'theme.primary',
+          color: 'theme-primary',
           fontWeight: 'bold',
         },
       }}
@@ -396,7 +396,7 @@ export const CallbackTagInput = () => {
         onTagRemove={(tag, index) => setLastAction(`Removed: ${tag} at index ${index}`)}
         variant="outline"
       />
-      <Text fontSize={14} color="color.gray.600">
+      <Text fontSize={14} color="color-gray-600">
         Last action: {lastAction || 'None'}
       </Text>
     </Vertical>

package/docs/components/Text.mdx

@@ -49,7 +49,7 @@ import { Vertical, Text } from "@app-studio/web";
 “**_isStriked_**” marks up a text to indicate that it is no longer valid.
 
 ```tsx
-<Text color="theme.secondary" isStriked>
+<Text color="theme-secondary" isStriked>
   Some text here
 </Text>
 ```

package/docs/components/TextArea.mdx

@@ -31,11 +31,11 @@ import { TextArea } from '@app-studio/web';
 export const ColorArea = () => {
   return (
     <Vertical gap={10}>
-      <TextArea name="surname" label="Surname" colorScheme="theme.secondary" />
+      <TextArea name="surname" label="Surname" colorScheme="theme-secondary" />
       <TextArea
         name="name"
         label="Name"
-        colorScheme="theme.primary"
+        colorScheme="theme-primary"
         variant="outline"
       />
     </Vertical>

package/docs/components/TextField.mdx

@@ -117,11 +117,11 @@ import { TextField } from '@app-studio/web';
 export const ColorSchemeDemo = () => {
   return (
     <Vertical gap={10} width="300px">
-      <TextField name="surname" label="Surname" colorScheme="theme.secondary" />
+      <TextField name="surname" label="Surname" colorScheme="theme-secondary" />
       <TextField
         name="name"
         label="Name"
-        colorScheme="theme.primary"
+        colorScheme="theme-primary"
         variant="outline"
       />
     </Vertical>

package/docs/components/Title.mdx

@@ -47,7 +47,7 @@ Highlight specific words within the title text.
 
 - **highlightText:** `string | string[]` - Text to match and highlight.
 - **highlightStyle:** `HighlightStyle` - Visual style (`background`, `gradient`, `underline`, `glow`, `outline`).
-- **highlightColor:** `string` - Primary highlight color.
+- **highlightColor:** `string` - Primary highlight color-
 - **highlightSecondaryColor:** `string` - Secondary color for gradients.
 
 ```tsx

package/docs/components/Vertical.mdx

@@ -17,9 +17,9 @@ import { View, Text } from '@app-studio/web';
 
 export const BasicVertical = () => (
   <Vertical>
-    <View height={50} backgroundColor="theme.primary" />
-    <View height={50} backgroundColor="theme.secondary" />
-    <View height={50} backgroundColor="theme.warning" />
+    <View height={50} backgroundColor="theme-primary" />
+    <View height={50} backgroundColor="theme-secondary" />
+    <View height={50} backgroundColor="theme-warning" />
   </Vertical>
 );
 ```
@@ -32,13 +32,13 @@ import { View, Text } from '@app-studio/web';
 
 export const VerticalWithGap = () => (
   <Vertical gap={16}>
-    <View padding={16} backgroundColor="color.blue.100" borderRadius={8}>
+    <View padding={16} backgroundColor="color-blue-100" borderRadius={8}>
       <Text>First Item</Text>
     </View>
-    <View padding={16} backgroundColor="color.green.100" borderRadius={8}>
+    <View padding={16} backgroundColor="color-green-100" borderRadius={8}>
       <Text>Second Item</Text>
     </View>
-    <View padding={16} backgroundColor="color.purple.100" borderRadius={8}>
+    <View padding={16} backgroundColor="color-purple-100" borderRadius={8}>
       <Text>Third Item</Text>
     </View>
   </Vertical>
@@ -56,33 +56,33 @@ export const VerticalAlignment = () => (
     {/* Left aligned (default) */}
     <Vertical alignItems="flex-start" gap={8}>
       <Text fontWeight="bold">Left Aligned</Text>
-      <View width={100} height={40} backgroundColor="color.red.200" />
-      <View width={150} height={40} backgroundColor="color.red.300" />
-      <View width={80} height={40} backgroundColor="color.red.400" />
+      <View width={100} height={40} backgroundColor="color-red-200" />
+      <View width={150} height={40} backgroundColor="color-red-300" />
+      <View width={80} height={40} backgroundColor="color-red-400" />
     </Vertical>
 
     {/* Center aligned */}
     <Vertical alignItems="center" gap={8}>
       <Text fontWeight="bold">Center Aligned</Text>
-      <View width={100} height={40} backgroundColor="color.blue.200" />
-      <View width={150} height={40} backgroundColor="color.blue.300" />
-      <View width={80} height={40} backgroundColor="color.blue.400" />
+      <View width={100} height={40} backgroundColor="color-blue-200" />
+      <View width={150} height={40} backgroundColor="color-blue-300" />
+      <View width={80} height={40} backgroundColor="color-blue-400" />
     </Vertical>
 
     {/* Right aligned */}
     <Vertical alignItems="flex-end" gap={8}>
       <Text fontWeight="bold">Right Aligned</Text>
-      <View width={100} height={40} backgroundColor="color.green.200" />
-      <View width={150} height={40} backgroundColor="color.green.300" />
-      <View width={80} height={40} backgroundColor="color.green.400" />
+      <View width={100} height={40} backgroundColor="color-green-200" />
+      <View width={150} height={40} backgroundColor="color-green-300" />
+      <View width={80} height={40} backgroundColor="color-green-400" />
     </Vertical>
 
     {/* Stretched */}
     <Vertical alignItems="stretch" gap={8} width={200}>
       <Text fontWeight="bold">Stretched</Text>
-      <View height={40} backgroundColor="color.purple.200" />
-      <View height={40} backgroundColor="color.purple.300" />
-      <View height={40} backgroundColor="color.purple.400" />
+      <View height={40} backgroundColor="color-purple-200" />
+      <View height={40} backgroundColor="color-purple-300" />
+      <View height={40} backgroundColor="color-purple-400" />
     </Vertical>
   </Vertical>
 );
@@ -97,38 +97,38 @@ import { View, Text } from '@app-studio/web';
 export const VerticalJustification = () => (
   <Vertical gap={20}>
     {/* Start justified (default) */}
-    <View height={200} border="1px solid" borderColor="color.gray.300">
+    <View height={200} border="1px solid" borderColor="color-gray-300">
       <Vertical justifyContent="flex-start" height="100%">
         <Text>Start Justified</Text>
-        <View width={100} height={30} backgroundColor="color.red.300" />
-        <View width={100} height={30} backgroundColor="color.red.400" />
+        <View width={100} height={30} backgroundColor="color-red-300" />
+        <View width={100} height={30} backgroundColor="color-red-400" />
       </Vertical>
     </View>
 
     {/* Center justified */}
-    <View height={200} border="1px solid" borderColor="color.gray.300">
+    <View height={200} border="1px solid" borderColor="color-gray-300">
       <Vertical justifyContent="center" height="100%">
         <Text>Center Justified</Text>
-        <View width={100} height={30} backgroundColor="color.blue.300" />
-        <View width={100} height={30} backgroundColor="color.blue.400" />
+        <View width={100} height={30} backgroundColor="color-blue-300" />
+        <View width={100} height={30} backgroundColor="color-blue-400" />
       </Vertical>
     </View>
 
     {/* End justified */}
-    <View height={200} border="1px solid" borderColor="color.gray.300">
+    <View height={200} border="1px solid" borderColor="color-gray-300">
       <Vertical justifyContent="flex-end" height="100%">
         <Text>End Justified</Text>
-        <View width={100} height={30} backgroundColor="color.green.300" />
-        <View width={100} height={30} backgroundColor="color.green.400" />
+        <View width={100} height={30} backgroundColor="color-green-300" />
+        <View width={100} height={30} backgroundColor="color-green-400" />
       </Vertical>
     </View>
 
     {/* Space between */}
-    <View height={200} border="1px solid" borderColor="color.gray.300">
+    <View height={200} border="1px solid" borderColor="color-gray-300">
       <Vertical justifyContent="space-between" height="100%">
         <Text>Space Between</Text>
-        <View width={100} height={30} backgroundColor="color.purple.300" />
-        <View width={100} height={30} backgroundColor="color.purple.400" />
+        <View width={100} height={30} backgroundColor="color-purple-300" />
+        <View width={100} height={30} backgroundColor="color-purple-400" />
       </Vertical>
     </View>
   </Vertical>
@@ -177,7 +177,7 @@ export const FormLayout = () => (
         label="I agree to the terms and conditions"
       />
 
-      <Button variant="filled" colorScheme="theme.primary">
+      <Button variant="filled" colorScheme="theme-primary">
         Send Message
       </Button>
     </Vertical>
@@ -196,12 +196,12 @@ export const NavigationMenu = () => (
   <Vertical
     width={250}
     height="100vh"
-    backgroundColor="color.gray.900"
+    backgroundColor="color-gray-900"
     padding={16}
     gap={8}
   >
     <Text
-      color="color.white"
+      color="color-white"
       fontSize={20}
       fontWeight="bold"
       marginBottom={24}
@@ -221,18 +221,18 @@ export const NavigationMenu = () => (
           gap={12}
           padding={12}
           borderRadius={8}
-          backgroundColor={item.active ? 'color.blue.600' : 'transparent'}
+          backgroundColor={item.active ? 'color-blue-600' : 'transparent'}
           cursor="pointer"
           _hover={{
-            backgroundColor: item.active ? 'color.blue.600' : 'color.gray.800'
+            backgroundColor: item.active ? 'color-blue-600' : 'color-gray-800'
           }}
         >
           <item.icon
             widthHeight={20}
-            color={item.active ? 'color.white' : 'color.gray.300'}
+            color={item.active ? 'color-white' : 'color-gray-300'}
           />
           <Text
-            color={item.active ? 'color.white' : 'color.gray.300'}
+            color={item.active ? 'color-white' : 'color-gray-300'}
             fontWeight={item.active ? 'medium' : 'normal'}
           >
             {item.label}
@@ -249,10 +249,10 @@ export const NavigationMenu = () => (
       padding={12}
       borderRadius={8}
       cursor="pointer"
-      _hover={{ backgroundColor: 'color.gray.800' }}
+      _hover={{ backgroundColor: 'color-gray-800' }}
     >
-      <LogoutIcon widthHeight={20} color="color.gray.300" />
-      <Text color="color.gray.300">Logout</Text>
+      <LogoutIcon widthHeight={20} color="color-gray-300" />
+      <Text color="color-gray-300">Logout</Text>
     </Horizontal>
   </Vertical>
 );
@@ -272,15 +272,15 @@ export const CardLayout = () => (
       <View
         key={item}
         border="1px solid"
-        borderColor="color.gray.200"
+        borderColor="color-gray-200"
         borderRadius={12}
         overflow="hidden"
-        backgroundColor="color.white"
+        backgroundColor="color-white"
         boxShadow="0 2px 8px rgba(0,0,0,0.1)"
       >
         <View
           height={200}
-          backgroundColor="color.blue.100"
+          backgroundColor="color-blue-100"
           backgroundImage={`url(https://picsum.photos/400/200?random=${item})`}
           backgroundSize="cover"
           backgroundPosition="center"
@@ -291,7 +291,7 @@ export const CardLayout = () => (
             <Text fontSize={20} fontWeight="bold">
               Article Title {item}
             </Text>
-            <Text color="color.gray.600" >
+            <Text color="color-gray-600" >
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </Text>
@@ -300,14 +300,14 @@ export const CardLayout = () => (
           <Horizontal justifyContent="space-between" alignItems="center">
             <Horizontal gap={16}>
               <Horizontal alignItems="center" gap={4}>
-                <StarIcon widthHeight={16} color="color.yellow.500" />
-                <Text fontSize={14} color="color.gray.600">4.5</Text>
+                <StarIcon widthHeight={16} color="color-yellow-500" />
+                <Text fontSize={14} color="color-gray-600">4.5</Text>
               </Horizontal>
               <Horizontal alignItems="center" gap={4}>
-                <HeartIcon widthHeight={16} color="color.red.500" />
-                <Text fontSize={14} color="color.gray.600">24</Text>
+                <HeartIcon widthHeight={16} color="color-red-500" />
+                <Text fontSize={14} color="color-gray-600">24</Text>
               </Horizontal>
-              <ShareIcon widthHeight={16} color="color.gray.400" />
+              <ShareIcon widthHeight={16} color="color-gray-400" />
             </Horizontal>
 
             <Button variant="outline" size="sm">
@@ -356,17 +356,17 @@ export const ResponsiveVertical = () => (
     <View
       width={{ mobile: '100%', tablet: '80%', desktop: '60%' }}
       height={100}
-      backgroundColor="color.blue.200"
+      backgroundColor="color-blue-200"
     />
     <View
       width={{ mobile: '100%', tablet: '80%', desktop: '60%' }}
       height={100}
-      backgroundColor="color.green.200"
+      backgroundColor="color-green-200"
     />
     <View
       width={{ mobile: '100%', tablet: '80%', desktop: '60%' }}
       height={100}
-      backgroundColor="color.purple.200"
+      backgroundColor="color-purple-200"
     />
   </Vertical>
 );
@@ -385,9 +385,9 @@ export const StickyHeaderLayout = () => (
     {/* Sticky Header */}
     <View
       padding={16}
-      backgroundColor="color.white"
+      backgroundColor="color-white"
       borderBottom="1px solid"
-      borderColor="color.gray.200"
+      borderColor="color-gray-200"
       position="sticky"
       top={0}
       zIndex={10}
@@ -403,7 +403,7 @@ export const StickyHeaderLayout = () => (
         <View
           key={i}
           padding={16}
-          backgroundColor="color.gray.50"
+          backgroundColor="color-gray.50"
           borderRadius={8}
         >
           <Text>Content Item {i + 1}</Text>
@@ -425,7 +425,7 @@ export const SplitLayout = () => (
     {/* Sidebar */}
     <Vertical
       width={250}
-      backgroundColor="color.gray.100"
+      backgroundColor="color-gray-100"
       padding={16}
       gap={8}
     >
@@ -444,9 +444,9 @@ export const SplitLayout = () => (
       </Text>
       <View
         flex={1}
-        backgroundColor="color.white"
+        backgroundColor="color-white"
         border="1px solid"
-        borderColor="color.gray.200"
+        borderColor="color-gray-200"
         borderRadius={8}
         padding={24}
       >
@@ -498,10 +498,10 @@ export const SplitLayout = () => (
 <Vertical gap={16}>
   {features.map((feature) => (
     <Horizontal key={feature.id} gap={12} alignItems="flex-start">
-      <CheckIcon widthHeight={20} color="color.green.500" />
+      <CheckIcon widthHeight={20} color="color-green-500" />
       <Vertical gap={4}>
         <Text fontWeight="medium">{feature.title}</Text>
-        <Text color="color.gray.600">{feature.description}</Text>
+        <Text color="color-gray-600">{feature.description}</Text>
       </Vertical>
     </Horizontal>
   ))}
@@ -518,21 +518,21 @@ export const SplitLayout = () => (
           width={12}
           height={12}
           borderRadius="50%"
-          backgroundColor="color.blue.500"
+          backgroundColor="color-blue-500"
         />
         {index < timelineItems.length - 1 && (
           <View
             width={2}
             height={40}
-            backgroundColor="color.gray.300"
+            backgroundColor="color-gray-300"
             marginTop={8}
           />
         )}
       </Vertical>
       <Vertical gap={4} flex={1}>
         <Text fontWeight="medium">{item.title}</Text>
-        <Text color="color.gray.600">{item.description}</Text>
-        <Text fontSize={12} color="color.gray.500">{item.date}</Text>
+        <Text color="color-gray-600">{item.description}</Text>
+        <Text fontSize={12} color="color-gray-500">{item.date}</Text>
       </Vertical>
     </Horizontal>
   ))}