@tamagui/demos 2.0.0-1768586279389 → 2.0.0-1768696252732

package/src/TextDemo.tsx

@@ -1,18 +1,9 @@
-import React from 'react'
-import { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'
+import { Paragraph, SizableText, YStack } from 'tamagui'
 
 export function TextDemo() {
   return (
     <YStack gap="$2" items="center">
       <SizableText size="$3">SizableText</SizableText>
-      <XStack gap="$4">
-        <SizableText theme="alt1" size="$3">
-          alt1
-        </SizableText>
-        <SizableText theme="alt2" size="$3">
-          alt2
-        </SizableText>
-      </XStack>
       <Paragraph size="$2" fontWeight="800">
         Paragraph
       </Paragraph>

package/src/ToggleGroupDemo.tsx

@@ -2,12 +2,13 @@ import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'
 import type { SizeTokens } from 'tamagui'
 import { Label, styled, ToggleGroup, XStack, YStack } from 'tamagui'
 
-// Example using styled() to define toggledStyle
-const GreenItem = styled(ToggleGroup.Item, {
-  color: '$green8',
+// Example using styled() to define toggledStyle and hoverStyle
+const StyledItem = styled(ToggleGroup.Item, {
+  hoverStyle: {
+    backgroundColor: '$color5',
+  },
   toggledStyle: {
-    backgroundColor: '$green9',
-    color: '$yellow9',
+    backgroundColor: '$color6',
   },
 })
 
@@ -52,21 +53,16 @@ function ToggleGroupComponent(props: {
         disableDeactivation={props.type === 'single' ? true : undefined}
       >
         {/* Using styled() component */}
-        <GreenItem
-          value="left"
-          aria-label="Left aligned"
-          focusStyle={{ background: '$color12' }}
-        >
+        <StyledItem value="left" aria-label="Left aligned">
           <AlignLeft />
-        </GreenItem>
+        </StyledItem>
 
         {/* Using inline toggledStyle prop */}
         <ToggleGroup.Item
           value="center"
           aria-label="Center aligned"
-          color="$blue8"
-          toggledStyle={{ backgroundColor: '$blue9', color: '$green9' }}
-          focusStyle={{ background: '$color12' }}
+          hoverStyle={{ backgroundColor: '$color5' }}
+          toggledStyle={{ backgroundColor: '$color6' }}
         >
           <AlignCenter />
         </ToggleGroup.Item>
@@ -75,9 +71,8 @@ function ToggleGroupComponent(props: {
         <ToggleGroup.Item
           value="right"
           aria-label="Right aligned"
-          color="$red8"
-          toggledStyle={{ backgroundColor: '$red9', color: '$blue9' }}
-          focusStyle={{ background: '$color12' }}
+          hoverStyle={{ backgroundColor: '$color5' }}
+          toggledStyle={{ backgroundColor: '$color6' }}
         >
           <AlignRight />
         </ToggleGroup.Item>