Merge branch 'js/buttons-design-system' into 'master'

New design system buttons, spacing, fonts, themes #4648 #4649 #4651 See merge request minds/mobile-native!2066
Minds · Jan 24, 2023 · 74e6fd8 · 74e6fd8
2 parents 7341e97 + 90e35dd
commit 74e6fd8
Show file tree

Hide file tree

Showing 15 changed files with 860 additions and 790 deletions.
diff --git a/package.json b/package.json
@@ -59,16 +59,16 @@
     "@shopify/flash-list": "^1.2.1",
     "@snowplow/react-native-tracker": "^1.2.1",
     "@stripe/stripe-react-native": "^0.17.0",
-    "@tamagui/animations-react-native": "^1.0.3",
-    "@tamagui/button": "^1.0.3",
-    "@tamagui/core": "^1.0.3",
-    "@tamagui/font-size": "1.0.3",
-    "@tamagui/get-button-sized": "1.0.3",
-    "@tamagui/helpers-tamagui": "1.0.3",
-    "@tamagui/react-native-media-driver": "1.0.3",
-    "@tamagui/shorthands": "^1.0.3",
-    "@tamagui/stacks": "1.0.3",
-    "@tamagui/text": "1.0.3",
+    "@tamagui/animations-react-native": "^1.0.17",
+    "@tamagui/button": "^1.0.17",
+    "@tamagui/core": "^1.0.17",
+    "@tamagui/font-size": "1.0.17",
+    "@tamagui/get-button-sized": "1.0.17",
+    "@tamagui/helpers-tamagui": "1.0.17",
+    "@tamagui/react-native-media-driver": "1.0.17",
+    "@tamagui/shorthands": "^1.0.17",
+    "@tamagui/stacks": "1.0.17",
+    "@tamagui/text": "1.0.17",
     "@tanstack/react-query": "^4.16.1",
     "@types/react-native-vector-icons": "^6.4.5",
     "@walletconnect/web3-provider": "^1.3.5",
@@ -191,7 +191,7 @@
     "@babel/plugin-proposal-decorators": "7.6.0",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^0.0.5",
-    "@tamagui/babel-plugin": "1.0.2",
+    "@tamagui/babel-plugin": "1.0.17",
     "@testing-library/jest-native": "^4.0.11",
     "@testing-library/react-native": "^11.0.0",
     "@types/chai": "^4.3.3",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -15,22 +15,22 @@
     "*.css"
   ],
   "dependencies": {
-    "@tamagui/animations-react-native": "^1.0.3",
-    "@tamagui/button": "^1.0.3",
-    "@tamagui/core": "^1.0.3",
-    "@tamagui/font-size": "^1.0.3",
-    "@tamagui/get-button-sized": "^1.0.3",
-    "@tamagui/helpers-tamagui": "^1.0.3",
-    "@tamagui/react-native-media-driver": "^1.0.3",
-    "@tamagui/shorthands": "^1.0.3",
-    "@tamagui/stacks": "^1.0.3",
-    "@tamagui/text": "^1.0.3"
+    "@tamagui/animations-react-native": "^1.0.17",
+    "@tamagui/button": "^1.0.17",
+    "@tamagui/core": "^1.0.17",
+    "@tamagui/font-size": "^1.0.17",
+    "@tamagui/get-button-sized": "^1.0.17",
+    "@tamagui/helpers-tamagui": "^1.0.17",
+    "@tamagui/react-native-media-driver": "^1.0.17",
+    "@tamagui/shorthands": "^1.0.17",
+    "@tamagui/stacks": "^1.0.17",
+    "@tamagui/text": "^1.0.17"
   },
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.3"
+    "@tamagui/build": "^1.0.17"
   }
 }
diff --git a/packages/design-system/src/Button.tsx b/packages/design-system/src/Button.tsx
@@ -1,62 +1,108 @@
 import React, { forwardRef } from 'react';
-import { TamaguiElement, styled, themeable, GetProps } from '@tamagui/core';
-import { getButtonSized } from '@tamagui/get-button-sized';
-import { ThemeableStack } from '@tamagui/stacks';
+import { TamaguiElement, styled, themeable } from '@tamagui/core';
+import { YStack } from '@tamagui/stacks';
 import { SizableText } from '@tamagui/text';
-import { ButtonProps, useButton } from './buttonHelpers';
+import { ButtonProps, getButtonStyle, useButton } from './buttonHelpers';
 
 const NAME = 'Button';
 
-export const ButtonFrame = styled(ThemeableStack, {
+export const ButtonFrame = styled(YStack, {
   name: NAME,
   tag: 'button',
-  focusable: true,
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: 'transparent',
   justifyContent: 'center',
   alignItems: 'center',
   flexWrap: 'nowrap',
   flexDirection: 'row',
-  borderRadius: 10000,
-
   // if we wanted this only when pressable = true, we'd need to merge variants?
   cursor: 'pointer',
 
-  pressStyle: {
-    borderColor: 'transparent',
-  },
-
-  hoverStyle: {
-    borderColor: 'transparent',
-  },
-
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
-
   variants: {
     size: {
-      '...size': getButtonSized,
+      '...size': getButtonStyle,
     },
     sSize: {
-      xl: (_, extra) => getButtonSized('$5', extra),
-      l: (_, extra) => getButtonSized('$4', extra),
-      m: (_, extra) => getButtonSized('$3.5', extra),
-      s: (_, extra) => getButtonSized('$3', extra),
+      xl: (_, extra) => getButtonStyle('$5', extra),
+      l: (_, extra) => getButtonStyle('$4', extra),
+      m: (_, extra) => getButtonStyle('$3.5', extra),
+      s: (_, extra) => getButtonStyle('$3', extra),
     },
     disabled: {
       true: {
         pointerEvents: 'none',
         opacity: 0.5,
       },
     },
+    outline: {
+      true: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+      },
+    },
+    base: {
+      true: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: 'transparent',
+      },
+    },
+    type: {
+      primary: {
+        backgroundColor: '$backgroundPrimary',
+        borderColor: '$borderColorPrimary',
+        color: '$colorPrimary',
+        focusStyle: {
+          backgroundColor: '$backgroundFocusPrimary',
+          borderColor: '$borderColorFocusPrimary',
+        },
+        pressStyle: {
+          backgroundColor: '$backgroundPressPrimary',
+          borderColor: '$borderColorPressPrimary',
+        },
+        hoverStyle: {
+          backgroundColor: '$backgroundHoverPrimary',
+          borderColor: '$borderColorHoverPrimary',
+        },
+      },
+      secondary: {
+        backgroundColor: '$backgroundSecondary',
+        borderColor: '$borderColorSecondary',
+
+        focusStyle: {
+          backgroundColor: '$backgroundFocusSecondary',
+          borderColor: '$borderColorFocusSecondary',
+        },
+        pressStyle: {
+          backgroundColor: '$backgroundPressSecondary',
+          borderColor: '$borderColorPressSecondary',
+        },
+        hoverStyle: {
+          backgroundColor: '$backgroundHoverSecondary',
+          borderColor: '$borderColorHoverSecondary',
+        },
+      },
+      warning: {
+        backgroundColor: '$backgroundWarning',
+        borderColor: '$borderColorWarning',
+
+        focusStyle: {
+          backgroundColor: '$backgroundFocusWarning',
+          borderColor: '$borderColorFocusWarning',
+        },
+        pressStyle: {
+          backgroundColor: '$backgroundPressWarning',
+          borderColor: '$borderColorPressWarning',
+        },
+        hoverStyle: {
+          backgroundColor: '$backgroundHoverWarning',
+          borderColor: '$borderColorHoverWarning',
+        },
+      },
+    },
   } as const,
 
   defaultVariants: {
-    size: '$3',
+    type: 'primary',
+    sSize: 'm',
   },
 });
 
@@ -84,16 +130,27 @@ export const ButtonText = styled(SizableText, {
         size: '$3',
       },
     },
+    type: {
+      primary: {
+        color: '$colorPrimary',
+      },
+      secondary: {
+        color: '$colorSecondary',
+      },
+      warning: {
+        color: '$colorWarning',
+      },
+    },
   } as const,
   defaultVariants: {
-    size: '$3.5',
+    sSize: 'm',
+    type: 'primary',
   },
 });
 
-type ButtonFrameProps = GetProps<typeof ButtonFrame>;
-const ButtonComponent = forwardRef<TamaguiElement, ButtonFrameProps>(
+const ButtonComponent = forwardRef<TamaguiElement, ButtonProps>(
   (props, ref) => {
-    const { props: buttonProps } = useButton(props as ButtonProps, ButtonText);
+    const { props: buttonProps } = useButton(props, ButtonText);
     return <ButtonFrame {...buttonProps} ref={ref} />;
   },
 );

diff --git a/packages/design-system/src/Text.tsx b/packages/design-system/src/Text.tsx
@@ -9,6 +9,17 @@ export const Text = styled(Paragraph, {
   // margin: 0,
   variants: {
     type: {
+      primary: {
+        color: '$colorTextPrimary',
+      },
+      secondary: {
+        color: '$colorTextSecondary',
+      },
+      tertiary: {
+        color: '$colorTextTertiary',
+      },
+    },
+    weight: {
       black: {
         fontWeight: '900',
       },

diff --git a/packages/design-system/src/buttonHelpers.tsx b/packages/design-system/src/buttonHelpers.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { FunctionComponent, useContext } from 'react';
-
+import { getButtonSized } from '@tamagui/get-button-sized';
 import {
   ButtonNestingContext,
   FontSizeTokens,
@@ -16,14 +16,19 @@ import { getFontSize } from '@tamagui/font-size';
 import { useGetThemedIcon } from '@tamagui/helpers-tamagui';
 import { TextParentStyles, wrapChildrenInText } from '@tamagui/text';
 import { ThemeableStack } from '@tamagui/stacks';
+import { VariantSpreadExtras } from '@tamagui/core';
 
 type ButtonIconProps = { color?: string; size?: number };
 type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null;
+
+export type ButtonType = 'primary' | 'secondary' | 'warning';
+
 export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
   // GetProps<typeof ButtonFrame> &
   GetProps<typeof ThemeableStack> &
   ThemeableProps & {
     size?: SizeTokens;
+
     /**
      * add icon before, passes color and size automatically if Component
      */
@@ -51,16 +56,37 @@ export type ButtonProps = Omit<TextParentStyles, 'TextComponent'> &
      * semantic size for buttons to propagate to Text
      */
     sSize?: any;
+
+    /**
+     * Semantic type
+     */
+    type?: ButtonType;
+    /**
+     * Base mode
+     */
+    base?: boolean;
+    /**
+     * outline mode
+     */
+    outline?: boolean;
   };
 
+export function getButtonStyle(
+  val: SizeTokens | number,
+  variants: VariantSpreadExtras<any>,
+): ReturnType<typeof getButtonSized> {
+  const style = getButtonSized(val, variants);
+  style.borderRadius = 10000; //round buttons
+  return style;
+}
+
 export function useButton(propsIn: ButtonProps, Text: any) {
   // careful not to desctructure and re-order props, order is important
   const {
     children,
     icon,
     iconAfter,
     noTextWrap,
-    theme: themeName,
     space,
     spaceFlex,
     scaleIcon = 1,
@@ -81,12 +107,12 @@ export function useButton(propsIn: ButtonProps, Text: any) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isNested = isRSC ? false : useContext(ButtonNestingContext);
   const propsActive = useMediaPropsActive(propsIn);
-  if (rest.sSize) {
-    propsActive.textProps = {
-      ...propsActive.textProps,
-      sSize: rest.sSize,
-    } as typeof propsActive.textProps;
-  }
+
+  propsActive.textProps = {
+    ...propsActive.textProps,
+    ...(propsIn.sSize && { sSize: propsIn.sSize }),
+    ...(propsIn.type && { type: propsIn.type }),
+  };
 
   const size = propsActive.size ?? '$3.5';
   const iconSize =

diff --git a/packages/design-system/src/config/buttonThemes.ts b/packages/design-system/src/config/buttonThemes.ts
@@ -1,30 +1,14 @@
-import { createSemanticTheme } from './semanticTheme';
-import { tokens } from './tokens';
-
-const { color } = tokens;
+import { createDarkButtonTheme, createLightButtonTheme } from './semanticTheme';
 
 export const buttonThemes = {
-  dark_Button: createSemanticTheme('basic'),
-  light_Button: createSemanticTheme('basic'),
-  light_basic: createSemanticTheme('basic'),
-  light_warning: createSemanticTheme('warning'),
-  dark_primary_Button: createSemanticTheme('primary'),
-  light_primary: createSemanticTheme('warning'),
-  light_primary_Button: {
-    background: color['color-primary-500'],
-    backgroundFocus: color['color-primary-600'],
-    backgroundPress: color['color-primary-700'],
-    backgroundHover: color['color-primary-800'],
-
-    borderColor: color['color-primary-800'],
-    borderColorFocus: color['color-primary-200'],
-    borderColorPress: color['color-primary-1000'],
-    borderColorHover: color['color-primary-1100'],
-
-    color: color['color-basic-100'],
-    colorFocus: color['color-basic-800'],
-    colorPress: color['color-basic-800'],
-    colorHover: color['color-basic-800'],
-    colorDisabled: color['color-danger-500'],
+  dark_Button: {
+    ...createDarkButtonTheme('Secondary', 'grey'),
+    ...createDarkButtonTheme('Primary', 'yellow'),
+    ...createDarkButtonTheme('Warning', 'red'),
+  },
+  light_Button: {
+    ...createLightButtonTheme('Secondary', 'grey'),
+    ...createLightButtonTheme('Primary', 'yellow'),
+    ...createLightButtonTheme('Warning', 'red'),
   },
 };