tamagui first button commit

packages/core/package.json

@@ -17,6 +17,7 @@
     "clean": "rm -rf dist types node_modules .turbo"
   },
   "dependencies": {
+    "@rocket.chat/fuselage-tokens": "workspace:~",
     "@shopify/flash-list": "^1.6.3",
     "@supabase/supabase-js": "^2.38.4",
     "@tamagui/animations-react-native": "1.75.9",

packages/core/src/Button.tsx

@@ -0,0 +1,80 @@
+import {
+  SizeTokens,
+  createStyledContext,
+  styled,
+  withStaticProperties,
+} from '@tamagui/web'
+
+
+import { Focusable } from './Focusable'
+import { SizableText } from './SizableText'
+import React from 'react'
+
+
+export const ButtonContext = createStyledContext({
+  size: '$lg' as SizeTokens,
+  small: false,
+  fontScale: '$hero',
+})
+
+export const ButtonFrame = styled(Focusable, {
+
+  tag: 'button',
+
+  name: 'Button',
+
+  context: ButtonContext,
+
+  alignItems: 'center',
+
+  borderRadius: '$default',
+
+  flexDirection: 'row',
+
+  variants: {
+
+    size: {
+
+      '...size': (name, { tokens }) => ({
+        paddingInline: name === '$sm' ? tokens.size['$sm'] : tokens.size['$lg'],
+        paddingBlock: name === '$sm' ? tokens.size['$sm'] : tokens.size['$md'],
+      })
+    }
+  }
+
+})
+
+export const ButtonText = styled(SizableText, {
+  name: 'ButtonText',
+  context: ButtonContext,
+  userSelect: 'none',
+  fontScale: '$p2m',
+  variants: {
+    small: {
+      true: {
+        fontScale: '$c2',
+      }
+    }
+  }
+})
+
+
+const ButtonComponent = ButtonFrame.styleable<{
+  small?: boolean
+}>(function Button(
+  {children, small, ...props},
+  ref
+) {
+  return <ButtonFrame {
+    ...props} ref={ref}>
+    <ButtonText small={small} >{children}</ButtonText>
+    </ButtonFrame>
+})
+
+
+export const Button = withStaticProperties(ButtonComponent, {
+
+  Props: ButtonContext.Provider,
+
+  Text: ButtonText,
+})

packages/core/src/Focusable.tsx

@@ -0,0 +1,253 @@
+import {
+  Stack,
+  styled,
+} from '@tamagui/web'
+
+
+export const Focusable = styled(Stack, {
+
+
+  name: 'Focusable',
+
+  acceptsClassName: true,
+  userSelect: 'none',
+  cursor: 'pointer',
+
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  alignItems: 'center',
+  flexDirection: 'row',
+  pressStyle: {
+    transform: `translateY(1px);`
+  },
+  focusStyle: {
+    shadowColor: '0 0 0 2px var(--rcx-button-primary-focus-shadow-color, var(--rcx-color-shadow-highlight, var(--rcx-color-blue-200, #D1EBFE)))',
+  },
+
+  variants: {
+
+    primary: (value, { props }) => {
+      switch (true) {
+        case value && !props.disabled: {
+          return {
+
+            backgroundColor: "$backgroundPrimaryDefault",
+            borderColor: "$primary_default",
+            color: "$fontOnPrimary",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundPrimaryHover",
+              borderColor: "$primary_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundPrimaryPress",
+              borderColor: "$primary_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundPrimaryFocus",
+              borderColor: "$primary_focus",
+            },
+          }
+        }
+        case value && props.disabled: {
+          return {
+            backgroundColor: "$backgroundPrimaryDisabled",
+            borderColor: "$primary_disabled",
+            color: "$fontOnPrimaryDisabled",
+          }
+        }
+      }
+
+    },
+
+    secondary: (value, { props }) => {
+      switch (true) {
+        case value && !props.disabled: {
+          return {
+
+            backgroundColor: "$backgroundSecondaryDefault",
+            borderColor: "$secondary_default",
+            color: "$fontOnSecondary",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundSecondaryHover",
+              borderColor: "$secondary_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundSecondaryPress",
+              borderColor: "$secondary_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundSecondaryFocus",
+              borderColor: "$secondary_focus",
+            },
+          }
+        }
+        case value && props.disabled: {
+          return {
+            backgroundColor: "$backgroundSecondaryDisabled",
+            borderColor: "$secondary_disabled",
+            color: "$fontOnSecondaryDisabled",
+          }
+        }
+      }
+    },
+    danger: (value, { props }) => {
+      switch (true) {
+        case value && !props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundDangerDefault",
+            borderColor: "$danger_default",
+            color: "$fontOnDanger",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundDangerHover",
+              borderColor: "$danger_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundDangerPress",
+              borderColor: "$danger_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundDangerFocus",
+              borderColor: "$danger_focus",
+            },
+          }
+        }
+        case value && props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundSecondaryDangerDefault",
+            borderColor: "$secondary_danger_default",
+            color: "$on_secondary_danger",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundSecondaryDangerHover",
+              borderColor: "$secondary_danger_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundSecondaryDangerPress",
+              borderColor: "$secondary_danger_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundSecondaryDangerFocus",
+              borderColor: "$secondary_danger_focus",
+            },
+          }
+        }
+      }
+    },
+    warning: (value, { props }) => {
+      switch (true) {
+        case value && !props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundWarningDefault",
+            borderColor: "$warning_default",
+            color: "$fontOnWarning",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundWarningHover",
+              borderColor: "$warning_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundWarningPress",
+              borderColor: "$warning_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundWarningFocus",
+              borderColor: "$warning_focus",
+            },
+          }
+        }
+        case value && props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundSecondaryWarningDefault",
+            borderColor: "$secondary_warning_default",
+            color: "$on_secondary_warning",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundSecondaryWarningHover",
+              borderColor: "$secondary_warning_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundSecondaryWarningPress",
+              borderColor: "$secondary_warning_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundSecondaryWarningFocus",
+              borderColor: "$secondary_warning_focus",
+            },
+          }
+        }
+      }
+    },
+    success: (value, { props }) => {
+      switch (true) {
+        case value && !props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundSuccessDefault",
+            borderColor: "$success_default",
+            color: "$fontOnSuccess",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundSuccessHover",
+              borderColor: "$success_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundSuccessPress",
+              borderColor: "$success_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundSuccessFocus",
+              borderColor: "$success_focus",
+            },
+          }
+        }
+        case value && props.secondary: {
+          return {
+
+            backgroundColor: "$backgroundSecondarySuccessDefault",
+            borderColor: "$secondary_success_default",
+            color: "$on_secondary_success",
+
+            hoverStyle: {
+              backgroundColor: "$backgroundSecondarySuccessHover",
+              borderColor: "$secondary_success_hover",
+            },
+
+            pressStyle: {
+              backgroundColor: "$backgroundSecondarySuccessPress",
+              borderColor: "$secondary_success_press",
+            },
+            focusStyle: {
+              backgroundColor: "$backgroundSecondarySuccessFocus",
+              borderColor: "$secondary_success_focus",
+            },
+          }
+        }
+      }
+    },
+
+    disabled: {
+      true: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        disabled: true,
+        focusable: undefined,
+      }
+    }
+  } as const,
+})

packages/core/src/SizableText.tsx

@@ -0,0 +1,17 @@
+import { styled, Text } from "@tamagui/core";
+
+export const SizableText = styled(Text, {
+  name: 'SizableText',
+  fontFamily: '$body',
+
+  variants: {
+    fontScale: {
+      ":string": (value) => ({
+          fontSize: value,
+          lineHeight: value,
+          fontWeight: value,
+          letterSpacing: value,
+        }),
+    }
+  } as const
+})

packages/core/src/index.tsx

@@ -1,3 +1,5 @@
 export { config } from './tamagui.config'
 export * from '@tamagui/core'
 export * from './MyComponent'
+export * from './Button'
+//