Apply amalgama's DS styles to Button's variants

amalgamaco · Jun 30, 2022 · 9d9ed6f · 9d9ed6f
1 parent 1b2c21d
commit 9d9ed6f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 40 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -43,7 +43,7 @@ const customTheme = extendThemeConfig( {
 	components: {
 		Button: {
 			variants: {
-				awesome: {
+				custom: {
 					bg: 'accent.400',
 					borderColor: 'accent.600',
 					__label: {

diff --git a/example/src/components/ButtonExamples.tsx b/example/src/components/ButtonExamples.tsx
@@ -32,11 +32,8 @@ const ButtonExamples = () => (
 		<View style={styles.separator} />
 		<Button variant="primary" onPress={onButtonPressed}>Primary</Button>
 		<Button variant="secondary" onPress={onButtonPressed}>Secondary</Button>
-		<Button variant="awesome" onPress={onButtonPressed}>Awesome</Button>
-		<HStack space="1">
-			<Button variant="danger" onPress={onButtonPressed}>Danger</Button>
-			<Button variant="success" onPress={onButtonPressed}>Success</Button>
-		</HStack>
+		<Button variant="priority" onPress={onButtonPressed}>Priority</Button>
+		<Button variant="custom" onPress={onButtonPressed}>Custom</Button>
 		<Text variant="sh1" color="primary.800">Icons</Text>
 		<View style={styles.separator} />
 		<Button
@@ -48,39 +45,46 @@ const ButtonExamples = () => (
 		</Button>
 		<Button
 			variant="secondary"
-			rightIcon={<Icon name="shower"/>}
+			rightIcon={<Icon name="gitlab"/>}
 			onPress={onButtonPressed}
 		>
 			Secondary
 		</Button>
 		<Button
-			variant="danger"
-			__leftIcon={{ color: 'accent.100' }}
-			leftIcon={<Icon name="gitlab"/>}
-			onPress={onButtonPressed}
-		>
-			Danger
-		</Button>
-		<Button
-			variant="success"
-			rightIcon={<Icon name="microchip"/>}
+			variant="priority"
+			leftIcon={<Icon name="close"/>}
 			onPress={onButtonPressed}
 		>
-			Success
+			Priority
 		</Button>
 		<Button
-			variant="awesome"
+			variant="custom"
+			__leftIcon={{ color: 'success.800' }}
+			__rightIcon={{ color: 'error.700' }}
 			leftIcon={<Icon name="bus-outline"/>}
 			rightIcon={<Icon name="flask"/>}
 			onPress={onButtonPressed}
 		>
-			Awesome
+			Custom
 		</Button>
 		<Text variant="sh1" color="primary.800">Disabled</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" disabled onPress={onButtonPressed}>Primary Disabled</Button>
 		<Button variant="secondary" disabled onPress={onButtonPressed}>Secondary Disabled</Button>
-		<Button variant="primary" __disabled={{ bg: 'error.100' }} disabled onPress={onButtonPressed}>Primary Disabled</Button>
+		<Button
+			variant="primary"
+			__disabled={{ bg: 'error.100', borderColor: 'error.100' }}
+			disabled
+			onPress={onButtonPressed}
+		>
+			Primary with custom disabled bg
+		</Button>
+		<Text variant="sh1" color="primary.800">Horizontal group</Text>
+		<View style={styles.separator} />
+		<HStack space="10">
+			<Button variant="secondary" onPress={onButtonPressed}>Cancel</Button>
+			<Button variant="priority" onPress={onButtonPressed}>Delete</Button>
+		</HStack>
 	</VStack>
 );
 

diff --git a/src/core/theme/defaultTheme/components/Button.ts b/src/core/theme/defaultTheme/components/Button.ts
@@ -5,7 +5,7 @@ export default {
 		borderColor: 'black',
 		borderWidth: '2',
 		rounded: '2xl',
-		padding: '3',
+		padding: '3.5',
 		width: '100%',
 		__stack: {
 			width: '100%',
@@ -32,55 +32,90 @@ export default {
 	},
 	variants: {
 		primary: {
-			bg: 'primary.200',
-			borderWidth: '0',
+			bg: 'primary.900',
+			borderColor: 'primary.900',
 			__label: {
 				color: 'white',
 				fontWeight: 'bold',
-				fontSize: 'md',
-				lineHeight: 'md',
-				letterSpacing: '2xl'
+				fontSize: 'sm',
+				lineHeight: 'sm'
 			},
 			__leftIcon: {
 				color: 'white'
 			},
 			__rightIcon: {
 				color: 'white'
+			},
+			__pressed: {
+				opacity: 1,
+				bg: 'primary.800',
+				borderColor: 'primary.800'
+			},
+			__disabled: {
+				opacity: 1,
+				bg: 'primary.400',
+				borderColor: 'primary.400'
 			}
 		},
 		secondary: {
 			bg: 'white',
 			borderWidth: '2',
-			borderColor: 'primary.200',
+			borderColor: 'primary.900',
 			__label: {
-				color: 'primary.200',
+				color: 'primary.900',
 				fontWeight: 'bold',
-				fontSize: 'md',
-				lineHeight: 'md',
-				letterSpacing: '2xl'
+				fontSize: 'sm',
+				lineHeight: 'sm'
 			},
 			__leftIcon: {
-				color: 'primary.200'
+				color: 'primary.900'
 			},
 			__rightIcon: {
-				color: 'primary.200'
+				color: 'primary.900'
+			},
+			__pressed: {
+				opacity: 1,
+				bg: 'primary.10'
+			},
+			__disabled: {
+				opacity: 1,
+				bg: 'white',
+				borderColor: 'primary.400',
+				__label: {
+					color: 'primary.400'
+				},
+				__leftIcon: {
+					color: 'primary.400'
+				},
+				__rightIcon: {
+					color: 'primary.400'
+				}
 			}
 		},
-		danger: {
-			bg: 'error.700',
-			borderWidth: '0',
+		priority: {
+			bg: 'error.900',
+			borderWidth: 'error.900',
 			__label: {
 				color: 'white',
 				fontWeight: 'bold',
-				fontSize: 'md',
-				lineHeight: 'md',
-				letterSpacing: '2xl'
+				fontSize: 'sm',
+				lineHeight: 'sm'
 			},
 			__leftIcon: {
 				color: 'white'
 			},
 			__rightIcon: {
 				color: 'white'
+			},
+			__pressed: {
+				opacity: 1,
+				bg: 'error.700',
+				borderColor: 'error.700'
+			},
+			__disabled: {
+				opacity: 1,
+				bg: 'error.400',
+				borderColor: 'error.400'
 			}
 		},
 		success: {