@tamagui/demos 2.0.0-1768636514428 → 2.0.0-1768696252732

package/src/ColorsDemo.tsx

@@ -1,49 +1,74 @@
-import type { Variable } from '@tamagui/core'
 import {
-  H2,
-  Paragraph,
-  Separator,
-  Square,
-  XStack,
-  YStack,
-  getTokens,
-  getVariableValue,
-} from 'tamagui'
+  blue,
+  blueDark,
+  gray,
+  grayDark,
+  green,
+  greenDark,
+  red,
+  redDark,
+  yellow,
+  yellowDark,
+} from '@tamagui/colors'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from 'tamagui'
 
-const colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']
+const colorGroups = ['gray', 'blue', 'green', 'yellow', 'red'] as const
 
-export function ColorsDemo() {
-  const colors = getTokens({ prefixed: false }).color
-  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]
+const lightColors = {
+  gray,
+  blue,
+  green,
+  yellow,
+  red,
+}
+
+const darkColors = {
+  gray: grayDark,
+  blue: blueDark,
+  green: greenDark,
+  yellow: yellowDark,
+  red: redDark,
+}
 
+export function ColorsDemo() {
   return (
     <YStack mt="$4" gap="$8">
-      <ColorsRow title="Light" colors={colorsLight} />
+      <ColorsRow title="Light" colorSets={lightColors} />
       <Separator />
-      <ColorsRow title="Dark" colors={colorsDark} />
+      <ColorsRow title="Dark" colorSets={darkColors} />
     </YStack>
   )
 }
 
-function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
+type ColorSet = Record<string, string>
+
+function ColorsRow({
+  title,
+  colorSets,
+}: {
+  title: string
+  colorSets: Record<(typeof colorGroups)[number], ColorSet>
+}) {
   return (
     <YStack gap="$4" $sm={{ gap: '$2' }}>
       <H2 size="$2">{title}</H2>
 
       <XStack gap="$4" self="center">
         <YStack gap="$4" $sm={{ gap: '$2' }} self="center">
-          {colors.map((group, index) => {
+          {colorGroups.map((groupName) => {
+            const colorSet = colorSets[groupName]
+            const colors = Object.values(colorSet)
             return (
-              <XStack gap="$2" key={index}>
-                {group.map((color) => {
+              <XStack gap="$2" key={groupName}>
+                {colors.map((color, index) => {
                   return (
                     <Square
-                      key={`${color.key}${index}`}
+                      key={`${groupName}${index}`}
                       rounded="$2"
                       size="$4"
                       height="$4"
                       borderWidth={1}
-                      bg={getVariableValue(color)}
+                      bg={color as any}
                       borderColor="$color7"
                       $sm={{
                         size: '$2',
@@ -106,19 +131,3 @@ function ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {
     </YStack>
   )
 }
-
-function getColors(colors: Record<string, Variable> | undefined, dark = false) {
-  if (!colors) {
-    console.warn(`⚠️ no colors?`, colors)
-    return []
-  }
-  return colorGroups.map((group) => {
-    return Object.keys(colors)
-      .filter(
-        (color) =>
-          color.startsWith(group) &&
-          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))
-      )
-      .map((key) => colors[key])
-  })
-}

package/src/ContextMenuDemo.tsx

@@ -19,7 +19,7 @@ export function ContextMenuDemo() {
     <ContextMenu allowFlip native={native} placement="bottom-start" offset={14}>
       <ContextMenu.Trigger asChild>
         <Text text="center" select={null}>
-          Right Click or longPress
+          Right Click or Long Press
         </Text>
       </ContextMenu.Trigger>
 

package/src/RadioGroupUnstyledDemo.tsx

@@ -6,7 +6,7 @@ const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'
 
 const RadioGroupItemFrame = styled(YStack, {
   name: RADIO_GROUP_ITEM_NAME,
-  tag: 'button',
+  render: 'button',
 
   rounded: 1000,
   bg: '$background',

package/src/SelectDemo.tsx

@@ -100,7 +100,7 @@ export function SelectDemoContents(
           borderWidth={1}
           borderColor="$borderColor"
         >
-          <Select.Indicator transition="select" />
+          <Select.Indicator transition="quick" />
           <Select.Group>
             <Select.Label fontWeight="bold">Fruits</Select.Label>
             {/* for longer lists memoizing these is useful */}

package/src/TabsHeadlessDemo.tsx

@@ -20,7 +20,7 @@ export const TabsFrame = styled(SizableStack, {
 
 export const TabFrame = styled(ThemeableStack, {
   name: 'TabsTrigger',
-  tag: 'button',
+  render: 'button',
   cursor: 'pointer',
   variants: {
     size: {

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>