feat: Enhance Button component with Tamagui integration

README.md

@@ -18,6 +18,8 @@
 | 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) |
+| 📦 [`fuselage-tamagui`](/packages/fuselage-tamagui) |  | [![npm](https://img.shields.io/npm/v/fuselage-tamagui?style=flat-square)](https://www.npmjs.com/package/fuselage-tamagui) | ![deps](https://img.shields.io/librariesio/release/npm/fuselage-tamagui?style=flat-square) |
+| 📦 [`@rocket.chat/fuselage-tamagui-tokens`](/packages/fuselage-tamagui-tokens) | Tamagui tokens for Fuselage, Rocket.Chat's | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tamagui-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tamagui-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tamagui-tokens?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) |
 | 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) |

package.json

@@ -30,6 +30,7 @@
     "@changesets/cli": "~2.29.4",
     "@eslint/js": "~9.29.0",
     "@rocket.chat/prettier-config": "workspace:~",
+    "@tamagui/get-button-sized": "~1.130.8",
     "eslint": "~9.29.0",
     "eslint-import-resolver-typescript": "~4.4.3",
     "eslint-plugin-import": "~2.31.0",
@@ -57,5 +58,13 @@
   "volta": {
     "node": "22.16.0",
     "yarn": "4.9.2"
+  },
+  "dependencies": {
+    "@rocket.chat/fuselage-tamagui-tokens": "workspace:~",
+    "@tamagui/animations-react-native": "~1.132.20",
+    "@tamagui/core": "~1.130.8",
+    "@tamagui/portal": "~1.130.8",
+    "@tamagui/stacks": "~1.130.8",
+    "tamagui": "~1.130.8"
   }
 }

packages/fuselage-tamagui-tokens/README.md

@@ -0,0 +1 @@
+# fuselage-tamagui-tokens

packages/fuselage-tamagui-tokens/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@rocket.chat/fuselage-tamagui-tokens",
+  "version": "0.33.2",
+  "description": "Tamagui tokens for Fuselage, Rocket.Chat's",
+  "homepage": "https://rocketchat.github.io/Rocket.Chat.Fuselage/",
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/fuselage.git",
+    "directory": "packages/fuselage-tamagui-tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/fuselage/issues"
+  },
+  "keywords": [
+    "design",
+    "tokens",
+    "fuselage",
+    "tamagui",
+    "rocket.chat"
+  ],
+  "main": "./src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "devDependencies": {
+    "build-design-tokens": "workspace:~",
+    "eslint": "~9.21.0",
+    "eslint-config-prettier": "~8.8.0",
+    "lint-all": "workspace:~",
+    "npm-run-all": "^4.1.5",
+    "postcss-scss": "~4.0.9",
+    "prettier": "~3.5.2",
+    "rimraf": "^3.0.2",
+    "style-dictionary": "~4.3.3",
+    "stylelint": "~16.14.1",
+    "stylelint-order": "~6.0.4",
+    "stylelint-prettier": "~5.0.3",
+    "stylelint-scss": "~6.11.1"
+  },
+  "dependencies": {
+    "@tamagui/core": "^1.125.22"
+  },
+  "peerDependencies": {
+    "@tamagui/core": "*"
+  }
+}

packages/fuselage-tamagui-tokens/src/index.ts

@@ -0,0 +1,202 @@
+import { createTamagui } from '@tamagui/core';
+import { badgeTokens } from './tokens/badge';
+import { buttonTokens } from './tokens/button';
+import { statusTokens } from './tokens/status';
+import { statusBulletTokens } from './tokens/status-bullet';
+import { surface } from './tokens/surface';
+import { shadow } from './tokens/shadow';
+import { stroke } from './tokens/stroke';
+import { font } from './tokens/font';
+import { colorTokens } from './tokens/colors';
+import { typographyTokens } from './tokens/typography';
+
+const { badge } = badgeTokens;
+
+// Helper function to remap surface tokens
+const reMapSurface = <K extends string, S extends { [key: string]: string }>(
+  prefix: K,
+  surface: S,
+): {
+  [I in keyof S as `${K}-${I extends string ? I : never}`]: S[I];
+} => {
+  return Object.keys(surface).reduce((acc, key) => {
+    acc[`${prefix}-${key}`] = surface[key];
+    return acc;
+  }, {} as any);
+};
+
+
+// Utility functions and configuration setup
+
+export const config = createTamagui({
+  defaultFont: 'body',
+  shouldAddPrefersColorThemes: true,
+  themeClassNameOnRoot: true,
+
+  tokens: {
+    size: {
+      0: 0,
+      1: 4,
+      2: 8,
+      3: 16,
+      4: 24,
+      5: 32,
+      6: 44,
+      7: 56,
+      8: 68,
+      9: 80,
+      10: 96,
+      true: 1,
+    },
+    space: {
+      0: 0,
+      1: 4,
+      2: 8,
+      3: 16,
+      4: 24,
+      5: 32,
+      6: 44,
+      7: 56,
+      8: 68,
+      9: 80,
+      10: 96,
+      true: 1,
+    },
+    zIndex: {
+      0: 0,
+      1: 100,
+      2: 200,
+      3: 300,
+      4: 400,
+      5: 500,
+      dropdown: 1000,
+      modal: 1300,
+      tooltip: 1500,
+    },
+    color: colorTokens,
+    radius: {
+      0: 0,
+      1: 4,
+      2: 8,
+      3: 12,
+      4: 16,
+      5: 20,
+      6: 24,
+      7: 28,
+      8: 32,
+      9: 36,
+      10: 40,
+      true: 1,
+    },
+    font: {
+      body: typographyTokens.fontFamilies.sans.join(','),
+      mono: typographyTokens.fontFamilies.mono.join(','),
+    },
+  },
+
+  themes: {
+    light: {
+      background: colorTokens.white,
+      color: colorTokens.n900,
+
+      // Surface tokens
+      ...reMapSurface('surface', surface.light),
+      backgroundColor: surface.light.neutral,
+
+      // Shadow tokens
+      ...reMapSurface('shadow', shadow.light),
+
+      // Stroke tokens
+      ...reMapSurface('stroke', stroke.light),
+      borderColor: stroke.light.medium,
+
+      // Font tokens
+      ...reMapSurface('font', font.light),
+
+      // Component tokens
+      ...buttonTokens.button.light,
+      ...statusTokens.status.light,
+      ...statusBulletTokens.statusBullet.light,
+
+      // Badge tokens
+      'badge-primary-background': badge.light.primary.background,
+      'badge-primary-color': badge.light.primary.color,
+      'badge-secondary-background': badge.light.secondary.background,
+      'badge-secondary-color': badge.light.secondary.color,
+      'badge-danger-background': badge.light.danger.background,
+      'badge-danger-color': badge.light.danger.color,
+      'badge-warning-background': badge.light.warning.background,
+      'badge-warning-color': badge.light.warning.color,
+      'badge-ghost-background': badge.light.ghost.background,
+      'badge-ghost-color': badge.light.ghost.color,
+      'badge-disabled-background': badge.light.disabled.background,
+      'badge-disabled-color': badge.light.disabled.color,
+    },
+    dark: {
+      background: colorTokens.n900,
+      color: colorTokens.white,
+
+      // Surface tokens
+      ...reMapSurface('surface', surface.dark),
+      backgroundColor: surface.dark.neutral,
+
+      // Shadow tokens
+      ...reMapSurface('shadow', shadow.dark),
+
+      // Stroke tokens
+      ...reMapSurface('stroke', stroke.dark),
+      borderColor: stroke.dark.medium,
+
+      // Font tokens
+      ...reMapSurface('font', font.dark),
+
+      // Component tokens
+      ...buttonTokens.button.dark,
+      ...statusTokens.status.dark,
+      ...statusBulletTokens.statusBullet.dark,
+
+      // Badge tokens
+      'badge-primary-background': badge.dark.primary.background,
+      'badge-primary-color': badge.dark.primary.color,
+      'badge-secondary-background': badge.dark.secondary.background,
+      'badge-secondary-color': badge.dark.secondary.color,
+      'badge-danger-background': badge.dark.danger.background,
+      'badge-danger-color': badge.dark.danger.color,
+      'badge-warning-background': badge.dark.warning.background,
+      'badge-warning-color': badge.dark.warning.color,
+      'badge-ghost-background': badge.dark.ghost.background,
+      'badge-ghost-color': badge.dark.ghost.color,
+      'badge-disabled-background': badge.dark.disabled.background,
+      'badge-disabled-color': badge.dark.disabled.color,
+    },
+  },
+  // Add essential Tamagui configurations
+  media: {
+    xs: { maxWidth: 599 },
+    sm: { minWidth: 600, maxWidth: 767 },
+    md: { minWidth: 768, maxWidth: 1023 },
+    lg: { minWidth: 1024, maxWidth: 1279 },
+    xl: { minWidth: 1280, maxWidth: 1599 },
+    xxl: { minWidth: 1600, maxWidth: 1919 },
+    xxxl: { minWidth: 1920 },
+    gtXs: { minWidth: 600 },
+    gtSm: { minWidth: 768 },
+    gtMd: { minWidth: 1024 },
+    gtLg: { minWidth: 1280 },
+    gtXl: { minWidth: 1600 },
+    gtXxl: { minWidth: 1920 },
+    short: { maxHeight: 820 },
+    tall: { minHeight: 820 },
+    hoverNone: { hover: 'none' },
+    pointerCoarse: { pointer: 'coarse' },
+  },
+});
+
+export default config;
+
+export type AppConfig = typeof config;
+
+declare module '@tamagui/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface TamaguiCustomConfig extends AppConfig {}
+}

packages/fuselage-tamagui-tokens/src/tokens/badge.ts

@@ -0,0 +1,66 @@
+export const badgeTokens = {
+  badge: {
+    light: {
+      level0: '#F2F3F5',
+      level1: '#9EA2A8',
+      level2: '#1D74F5',
+      level3: '#F5455C',
+      level4: '#F38C39',
+      primary: {
+        background: '#1D74F5',
+        color: '#FFFFFF',
+      },
+      secondary: {
+        background: '#9EA2A8',
+        color: '#FFFFFF',
+      },
+      danger: {
+        background: '#F5455C',
+        color: '#FFFFFF',
+      },
+      warning: {
+        background: '#F38C39',
+        color: '#1F2329',
+      },
+      ghost: {
+        background: '#2F343D',
+        color: '#FFFFFF',
+      },
+      disabled: {
+        background: '#F2F3F5',
+        color: '#9EA2A8',
+      },
+    },
+    dark: {
+      level0: '#2F343D',
+      level1: '#6C727A',
+      level2: '#095AD2',
+      level3: '#D40C26',
+      level4: '#E26D0E',
+      primary: {
+        background: '#095AD2',
+        color: '#FFFFFF',
+      },
+      secondary: {
+        background: '#6C727A',
+        color: '#FFFFFF',
+      },
+      danger: {
+        background: '#D40C26',
+        color: '#FFFFFF',
+      },
+      warning: {
+        background: '#E26D0E',
+        color: '#FFFFFF',
+      },
+      ghost: {
+        background: '#1F2329',
+        color: '#FFFFFF',
+      },
+      disabled: {
+        background: '#2F343D',
+        color: '#6C727A',
+      },
+    },
+  },
+};

packages/fuselage-tamagui-tokens/src/tokens/button.ts

@@ -0,0 +1,16 @@
+export const buttonTokens = {
+  button: {
+    light: {
+      secondaryBg: '#9EA2A8',
+      secondaryHover: '#6C727A',
+      secondaryPress: '#6C727A',
+      secondaryText: '#1F2329',
+    },
+    dark: {
+      secondaryBg: '#6C727A',
+      secondaryHover: '#9EA2A8',
+      secondaryPress: '#9EA2A8',
+      secondaryText: '#FFFFFF',
+    }
+  }
+};