@idealyst/components 1.0.83 → 1.0.84

package/src/examples/TextExamples.tsx

@@ -1,28 +1,27 @@
-import React from 'react';
 import { Screen, View, Text } from '../index';
 
 export const TextExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Text Examples
       </Text>
-      
+
       {/* Text Sizes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
+        <Text size="md" weight="semibold">Sizes</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="small">Small text - Lorem ipsum dolor sit amet</Text>
-          <Text size="medium">Medium text - Lorem ipsum dolor sit amet</Text>
-          <Text size="large">Large text - Lorem ipsum dolor sit amet</Text>
-          <Text size="xlarge">Extra large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="sm">Small text - Lorem ipsum dolor sit amet</Text>
+          <Text size="md">Medium text - Lorem ipsum dolor sit amet</Text>
+          <Text size="lg">Large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="xl">Extra large text - Lorem ipsum dolor sit amet</Text>
         </View>
       </View>
 
       {/* Text Weights */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Weights</Text>
+        <Text size="md" weight="semibold">Weights</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Text weight="light">Light weight text</Text>
           <Text weight="normal">Normal weight text</Text>
@@ -32,35 +31,35 @@ export const TextExamples = () => {
         </View>
       </View>
 
-      {/* Text Colors */}
+      {/* Semantic Text Colors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Color Variants</Text>
+        <Text size="md" weight="semibold">Semantic Text Colors</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="primary">Primary color text</Text>
-          <Text color="secondary">Secondary color text</Text>
-          <Text color="blue">Blue color text</Text>
-          <Text color="green">Green color text</Text>
-          <Text color="red">Red color text</Text>
-          <Text color="orange">Orange color text</Text>
+          <Text color="primary">Primary text - Main text color</Text>
+          <Text color="secondary">Secondary text - Subdued text</Text>
+          <Text color="tertiary">Tertiary text - More subdued text</Text>
         </View>
       </View>
 
-      {/* Text Color Shades */}
+      {/* Inverse Text Colors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Color Shades</Text>
+        <Text size="md" weight="semibold">Inverse Text Colors (on dark backgrounds)</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="blue.300">Blue 300 text</Text>
-          <Text color="blue.500">Blue 500 text</Text>
-          <Text color="blue.700">Blue 700 text</Text>
-          <Text color="red.200">Red 200 text</Text>
-          <Text color="red.600">Red 600 text</Text>
-          <Text color="red.900">Red 900 text</Text>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse">Inverse (of primary) - Light text on dark background</Text>
+          </View>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse-secondary">Inverse secondary (90% opacity)</Text>
+          </View>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse-tertiary">Inverse tertiary (70% opacity)</Text>
+          </View>
         </View>
       </View>
 
       {/* Text Alignment */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Alignment</Text>
+        <Text size="md" weight="semibold">Alignment</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Text align="left">Left aligned text</Text>
           <Text align="center">Center aligned text</Text>
@@ -70,17 +69,14 @@ export const TextExamples = () => {
 
       {/* Combined Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Combined Examples</Text>
+        <Text size="md" weight="semibold">Combined Examples</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="large" weight="bold" color="primary" align="center">
+          <Text size="lg" weight="bold" color="primary" align="center">
             Large Bold Primary Centered
           </Text>
-          <Text size="small" weight="light" color="secondary" align="right">
+          <Text size="sm" weight="light" color="secondary" align="right">
             Small Light Secondary Right
           </Text>
-          <Text size="medium" weight="semibold" color="green">
-            Medium Semibold Green
-          </Text>
         </View>
       </View>
     </View>

package/src/examples/ThemeExtensionExamples.tsx

@@ -5,13 +5,13 @@ export const ThemeExtensionExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="lg">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           Extended Theme Test
         </Text>
         
         {/* Extended Colors */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Extended Colors</Text>
+          <Text size="md" weight="semibold">Extended Colors</Text>
                      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
              <Badge color={"orange" as any}>Orange</Badge>
              <Badge color={"teal" as any}>Teal</Badge>
@@ -31,7 +31,7 @@ export const ThemeExtensionExamples = () => {
 
         {/* Extended Intents */}
                           <View spacing="md">
-           <Text size="medium" weight="semibold">Extended Intents</Text>
+           <Text size="md" weight="semibold">Extended Intents</Text>
            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
              <Button intent={"accent" as any}>Accent Button</Button>
              <Button intent={"feature" as any}>Feature Button</Button>
@@ -39,21 +39,21 @@ export const ThemeExtensionExamples = () => {
            </View>
            
            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-             <Button intent={"accent" as any} variant="outlined">Accent Outlined</Button>
-             <Button intent={"feature" as any} variant="outlined">Feature Outlined</Button>
-             <Button intent={"highlight" as any} variant="outlined">Highlight Outlined</Button>
+             <Button intent={"accent" as any} type="outlined">Accent Outlined</Button>
+             <Button intent={"feature" as any} type="outlined">Feature Outlined</Button>
+             <Button intent={"highlight" as any} type="outlined">Highlight Outlined</Button>
            </View>
          </View>
 
          {/* Mixed Usage */}
          <View spacing="md">
-           <Text size="medium" weight="semibold">Mixed Extended Usage</Text>
+           <Text size="md" weight="semibold">Mixed Extended Usage</Text>
            
            <Card>
              <View spacing="sm">
                <Text color={"orange" as any} weight="bold">Orange Card Header</Text>
                <Text color="secondary">This card uses extended orange color for the header</Text>
-               <Button intent={"accent" as any} size="small">Accent Action</Button>
+               <Button intent={"accent" as any} size="sm">Accent Action</Button>
              </View>
            </Card>
            
@@ -61,14 +61,14 @@ export const ThemeExtensionExamples = () => {
              <View spacing="sm">
                <Text color={"teal" as any} weight="bold">Teal Card Header</Text>
                <Text color="secondary">This card uses extended teal color for the header</Text>
-               <Button intent={"feature" as any} size="small">Feature Action</Button>
+               <Button intent={"feature" as any} size="sm">Feature Action</Button>
              </View>
            </Card>
          </View>
 
          {/* Form with Extended Colors */}
          <View spacing="md">
-           <Text size="medium" weight="semibold">Form with Extended Styling</Text>
+           <Text size="md" weight="semibold">Form with Extended Styling</Text>
            
            <Input 
              placeholder="Input with accent intent" 

package/src/examples/TooltipExamples.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Screen, View, Text, Button } from '@idealyst/components';
+import Tooltip from '../Tooltip';
+
+export const TooltipExamples: React.FC = () => {
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Tooltip Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Tooltip</Text>
+        <Tooltip content="This is a tooltip">
+          <Button type="outlined">Hover over me</Button>
+        </Tooltip>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Placements</Text>
+        <View spacing="sm" style={{ alignItems: 'center' }}>
+          <Tooltip content="Top tooltip" placement="top">
+            <Button type="outlined">Top</Button>
+          </Tooltip>
+          <View style={{ flexDirection: 'row', gap: 16 }}>
+            <Tooltip content="Left tooltip" placement="left">
+              <Button type="outlined">Left</Button>
+            </Tooltip>
+            <Tooltip content="Right tooltip" placement="right">
+              <Button type="outlined">Right</Button>
+            </Tooltip>
+          </View>
+          <Tooltip content="Bottom tooltip" placement="bottom">
+            <Button type="outlined">Bottom</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Small tooltip" size="sm">
+            <Button type="outlined" size="sm">Small</Button>
+          </Tooltip>
+          <Tooltip content="Medium tooltip" size="md">
+            <Button type="outlined" size="md">Medium</Button>
+          </Tooltip>
+          <Tooltip content="Large tooltip" size="lg">
+            <Button type="outlined" size="lg">Large</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Primary tooltip" intent="primary">
+            <Button type="contained" intent="primary">Primary</Button>
+          </Tooltip>
+          <Tooltip content="Success tooltip" intent="success">
+            <Button type="contained" intent="success">Success</Button>
+          </Tooltip>
+          <Tooltip content="Warning tooltip" intent="warning">
+            <Button type="contained" intent="warning">Warning</Button>
+          </Tooltip>
+          <Tooltip content="Error tooltip" intent="error">
+            <Button type="contained" intent="error">Error</Button>
+          </Tooltip>
+          <Tooltip content="Neutral tooltip" intent="neutral">
+            <Button type="contained" intent="neutral">Neutral</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Delay</Text>
+        <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
+          <Tooltip content="Instant (0ms)" delay={0}>
+            <Button type="outlined">No Delay</Button>
+          </Tooltip>
+          <Tooltip content="Quick (200ms)" delay={200}>
+            <Button type="outlined">Default</Button>
+          </Tooltip>
+          <Tooltip content="Slow (1000ms)" delay={1000}>
+            <Button type="outlined">Slow</Button>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Long Content</Text>
+        <Tooltip content="This is a longer tooltip that demonstrates how the component handles multi-line content automatically">
+          <Button type="outlined">Hover for long text</Button>
+        </Tooltip>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">On Text</Text>
+        <View>
+          <Tooltip content="Additional information">
+            <Text style={{ textDecorationLine: 'underline' }}>
+              Hover over this text
+            </Text>
+          </Tooltip>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rich Content</Text>
+        <Tooltip
+          content={
+            <View spacing="xs">
+              <Text weight="bold">Rich Tooltip</Text>
+              <Text>With multiple lines</Text>
+              <Text>and formatting</Text>
+            </View>
+          }
+        >
+          <Button type="outlined">Rich Content</Button>
+        </Tooltip>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TooltipExamples;

package/src/examples/VideoExamples.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import Video from '../Video';
+
+export const VideoExamples: React.FC = () => {
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Video Examples</Text>
+
+      <View spacing="sm" style={{ padding: 12, backgroundColor: '#fff3cd', borderRadius: 8 }}>
+        <Text size="sm" weight="semibold">Note:</Text>
+        <Text size="sm">
+          On React Native, this component requires react-native-video to be installed.
+          The examples below use sample videos from the web.
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Video with Controls</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Video with Poster</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+          poster="https://picsum.photos/800/450"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Autoplay & Loop</Text>
+        <Text size="sm" color="secondary">
+          Video plays automatically and loops continuously
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          autoPlay={true}
+          loop={true}
+          muted={true}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Fixed Size</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
+          width={640}
+          height={360}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Rounded Corners</Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          borderRadius={16}
+          controls={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Different Aspect Ratios</Text>
+        <View spacing="sm">
+          <Text size="sm" weight="medium">16:9 (Widescreen)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+            width="100%"
+            aspectRatio={16 / 9}
+            controls={true}
+          />
+
+          <Text size="sm" weight="medium">4:3 (Standard)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
+            width="100%"
+            aspectRatio={4 / 3}
+            controls={true}
+          />
+
+          <Text size="sm" weight="medium">1:1 (Square)</Text>
+          <Video
+            source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
+            width={300}
+            aspectRatio={1}
+            controls={true}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Without Controls</Text>
+        <Text size="sm" color="secondary">
+          Video with controls disabled
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={false}
+          autoPlay={true}
+          loop={true}
+          muted={true}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Event Handlers</Text>
+        <Text size="sm" color="secondary">
+          Check console for video events (onLoad, onPlay, onPause, onEnd)
+        </Text>
+        <Video
+          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4"
+          width="100%"
+          aspectRatio={16 / 9}
+          controls={true}
+          onLoad={() => console.log('Video loaded')}
+          onPlay={() => console.log('Video playing')}
+          onPause={() => console.log('Video paused')}
+          onEnd={() => console.log('Video ended')}
+          onProgress={(progress) => console.log('Progress:', progress)}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default VideoExamples;

package/src/examples/ViewExamples.tsx

@@ -1,107 +1,115 @@
-import React from 'react';
 import { Screen, View, Text } from '../index';
 
 export const ViewExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         View Examples
       </Text>
-      
+
       {/* Spacing Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Spacing Variants</Text>
-        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View spacing="none" background="surface" border="thin">
-            <Text size="small">None</Text>
+        <Text size="md" weight="semibold">Spacing Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+          <View spacing="none" background="secondary" border="thin">
+            <Text size="sm">None</Text>
           </View>
-          <View spacing="xs" background="surface" border="thin">
-            <Text size="small">XS</Text>
+          <View spacing="xs" background="secondary" border="thin">
+            <Text size="sm">XS</Text>
           </View>
-          <View spacing="sm" background="surface" border="thin">
-            <Text size="small">SM</Text>
+          <View spacing="sm" background="secondary" border="thin">
+            <Text size="sm">SM</Text>
           </View>
-          <View spacing="md" background="surface" border="thin">
-            <Text size="small">MD</Text>
+          <View spacing="md" background="secondary" border="thin">
+            <Text size="sm">MD</Text>
           </View>
-          <View spacing="lg" background="surface" border="thin">
-            <Text size="small">LG</Text>
+          <View spacing="lg" background="secondary" border="thin">
+            <Text size="sm">LG</Text>
           </View>
-          <View spacing="xl" background="surface" border="thin">
-            <Text size="small">XL</Text>
+          <View spacing="xl" background="secondary" border="thin">
+            <Text size="sm">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Background Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Background Variants</Text>
+        <Text size="md" weight="semibold">Background Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View background="transparent" border="thin" spacing="sm">
-            <Text size="small">Transparent</Text>
+          <View background="transparent" border="thin" spacing="sm" radius="sm">
+            <Text size="sm" color="primary">Transparent</Text>
+          </View>
+          <View background="primary" spacing="sm" radius="sm">
+            <Text size="sm" color="primary">Primary</Text>
           </View>
-          <View background="surface" spacing="sm">
-            <Text size="small">Surface</Text>
+          <View background="secondary" spacing="sm" radius="sm">
+            <Text size="sm" color="secondary">Secondary</Text>
           </View>
-          <View background="primary" spacing="sm">
-            <Text size="small" color="primary">Primary</Text>
+          <View background="tertiary" spacing="sm" radius="sm">
+            <Text size="sm" color="tertiary">Tertiary</Text>
           </View>
-          <View background="secondary" spacing="sm">
-            <Text size="small" color="secondary">Secondary</Text>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse">Inverse (of primary)</Text>
+          </View>
+          <View background="inverse-secondary" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse-secondary">Inverse Secondary</Text>
+          </View>
+          <View background="inverse-tertiary" spacing="sm" radius="sm">
+            <Text size="sm" color="inverse-tertiary">Inverse Tertiary</Text>
           </View>
         </View>
       </View>
 
       {/* Border Radius Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Border Radius</Text>
+        <Text size="md" weight="semibold">Border Radius</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View radius="none" background="surface" spacing="sm" border="thin">
-            <Text size="small">None</Text>
+          <View radius="none" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">None</Text>
           </View>
-          <View radius="xs" background="surface" spacing="sm" border="thin">
-            <Text size="small">XS</Text>
+          <View radius="xs" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">XS</Text>
           </View>
-          <View radius="sm" background="surface" spacing="sm" border="thin">
-            <Text size="small">SM</Text>
+          <View radius="sm" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">SM</Text>
           </View>
-          <View radius="md" background="surface" spacing="sm" border="thin">
-            <Text size="small">MD</Text>
+          <View radius="md" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">MD</Text>
           </View>
-          <View radius="lg" background="surface" spacing="sm" border="thin">
-            <Text size="small">LG</Text>
+          <View radius="lg" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">LG</Text>
           </View>
-          <View radius="xl" background="surface" spacing="sm" border="thin">
-            <Text size="small">XL</Text>
+          <View radius="xl" background="inverse" spacing="sm">
+            <Text size="sm" color="inverse">XL</Text>
           </View>
         </View>
       </View>
 
       {/* Border Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Border Variants</Text>
+        <Text size="md" weight="semibold">Border Variants</Text>
         <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-          <View border="none" background="surface" spacing="sm" radius="sm">
-            <Text size="small">None</Text>
+          <View border="none" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">None</Text>
           </View>
-          <View border="thin" background="surface" spacing="sm" radius="sm">
-            <Text size="small">Thin</Text>
+          <View border="thin" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">Thin</Text>
           </View>
-          <View border="thick" background="surface" spacing="sm" radius="sm">
-            <Text size="small">Thick</Text>
+          <View border="thick" background="secondary" spacing="sm" radius="sm">
+            <Text size="sm">Thick</Text>
           </View>
         </View>
       </View>
 
       {/* Layout Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Layout Examples</Text>
+        <Text size="md" weight="semibold">Layout Examples</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <View 
-            background="surface" 
-            spacing="md" 
-            radius="md" 
+          <View
+            background="secondary"
+            spacing="md"
+            radius="md"
             border="thin"
             style={{ flexDirection: 'row', justifyContent: 'space-between' }}
           >
@@ -109,11 +117,11 @@ export const ViewExamples = () => {
             <Text>Center</Text>
             <Text>Right</Text>
           </View>
-          
-          <View 
-            background="surface" 
-            spacing="md" 
-            radius="md" 
+
+          <View
+            background="secondary"
+            spacing="md"
+            radius="md"
             border="thin"
             style={{ flexDirection: 'column', alignItems: 'center' }}
           >