cdd91dbbb8
* Standardize tags and chips through the app * Add missing texts * Fix tests and snapshots * Address feedback * Fix snapshots * Address UX feedback * Apply text styles to outer text component --------- Co-authored-by: Mattermost Build <build@mattermost.com>
400 lines
13 KiB
TypeScript
400 lines
13 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {type StyleProp, StyleSheet, type TextStyle, type ViewStyle} from 'react-native';
|
|
|
|
import {blendColors, changeOpacity} from '@utils/theme';
|
|
|
|
import {typography} from './typography';
|
|
|
|
export const getBackgroundStyles = (theme: Theme): BackgroundStyles => {
|
|
return {
|
|
primary: {
|
|
default: {
|
|
default: {
|
|
backgroundColor: theme.buttonBg,
|
|
},
|
|
hover: {
|
|
backgroundColor: blendColors(theme.buttonBg, '#000000', 0.08),
|
|
},
|
|
active: {
|
|
backgroundColor: blendColors(theme.buttonBg, '#000000', 0.16),
|
|
},
|
|
focus: {
|
|
backgroundColor: theme.buttonBg,
|
|
borderColor: changeOpacity('#FFFFFF', 0.32),
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
destructive: {
|
|
default: {
|
|
backgroundColor: theme.errorTextColor,
|
|
},
|
|
hover: {
|
|
backgroundColor: blendColors(theme.errorTextColor, '#000000', 0.08),
|
|
},
|
|
active: {
|
|
backgroundColor: blendColors(theme.errorTextColor, '#000000', 0.16),
|
|
},
|
|
focus: {
|
|
backgroundColor: theme.errorTextColor,
|
|
borderColor: changeOpacity('#FFFFFF', 0.32),
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
inverted: {
|
|
default: {
|
|
backgroundColor: theme.buttonColor,
|
|
},
|
|
hover: {
|
|
backgroundColor: blendColors(theme.buttonColor, '#000000', 0.08),
|
|
},
|
|
active: {
|
|
backgroundColor: blendColors(theme.buttonColor, '#000000', 0.16),
|
|
},
|
|
focus: {
|
|
backgroundColor: theme.buttonColor,
|
|
borderColor: changeOpacity('#FFFFFF', 0.32),
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
disabled: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
},
|
|
},
|
|
secondary: {
|
|
default: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0),
|
|
borderColor: theme.buttonBg,
|
|
borderWidth: 1,
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.08),
|
|
borderColor: theme.buttonBg,
|
|
borderWidth: 1,
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.16),
|
|
borderColor: theme.buttonBg,
|
|
borderWidth: 1,
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0),
|
|
borderColor: theme.sidebarTextActiveBorder,
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
destructive: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0),
|
|
borderColor: theme.errorTextColor,
|
|
borderWidth: 1,
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.08),
|
|
borderColor: theme.errorTextColor,
|
|
borderWidth: 1,
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.16),
|
|
borderColor: theme.errorTextColor,
|
|
borderWidth: 1,
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0),
|
|
borderColor: changeOpacity(theme.errorTextColor, 0.68), // @to-do; needs 32% white?
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
inverted: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.buttonColor, 0),
|
|
borderColor: theme.buttonColor,
|
|
borderWidth: 1,
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.buttonColor, 0.08),
|
|
borderColor: theme.buttonColor,
|
|
borderWidth: 1,
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.buttonColor, 0.16),
|
|
borderColor: theme.buttonColor,
|
|
borderWidth: 1,
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.buttonColor, 0),
|
|
borderColor: theme.sidebarTextActiveBorder,
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
disabled: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0),
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.32),
|
|
borderWidth: 1,
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0),
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.32),
|
|
borderWidth: 1,
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0),
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.32),
|
|
borderWidth: 1,
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0),
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.32),
|
|
borderWidth: 1,
|
|
},
|
|
},
|
|
},
|
|
tertiary: {
|
|
default: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.08),
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.12),
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.16),
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.buttonBg, 0.08),
|
|
borderColor: theme.sidebarTextActiveBorder,
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
destructive: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.08),
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.12),
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.16),
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.errorTextColor, 0.08),
|
|
borderColor: changeOpacity(theme.errorTextColor, 0.68), // @to-do; needs 32% white?
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
inverted: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.buttonColor, 0.12),
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.sidebarText, 0.16),
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.sidebarText, 0.24),
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.sidebarText, 0.08),
|
|
borderColor: theme.sidebarTextActiveBorder, // @to-do; needs 32% white?
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
disabled: {
|
|
default: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
hover: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
active: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
focus: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
|
|
},
|
|
},
|
|
},
|
|
link: {
|
|
default: {
|
|
default: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
hover: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
active: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
focus: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
inverted: {
|
|
default: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
hover: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
active: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
focus: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
disabled: {
|
|
default: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
hover: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
active: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
focus: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
destructive: {
|
|
default: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
hover: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
active: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
focus: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export const buttonSizeStyles: ButtonSizes = StyleSheet.create({
|
|
xs: {
|
|
paddingVertical: 4,
|
|
paddingHorizontal: 10,
|
|
},
|
|
s: {
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
},
|
|
m: {
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 20,
|
|
},
|
|
lg: {
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 24,
|
|
},
|
|
});
|
|
|
|
export const buttonStyles = StyleSheet.create({
|
|
main: {
|
|
borderRadius: 4,
|
|
},
|
|
fullWidth: {
|
|
width: '100%',
|
|
},
|
|
});
|
|
|
|
export const buttonTextSizeStyles = StyleSheet.create({
|
|
xs: {
|
|
...typography('Body', 50, 'SemiBold'),
|
|
},
|
|
s: {
|
|
...typography('Body', 75, 'SemiBold'),
|
|
},
|
|
m: {
|
|
...typography('Body', 100, 'SemiBold'),
|
|
},
|
|
lg: {
|
|
...typography('Body', 200, 'SemiBold'),
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Returns the appropriate Style object for <View style={} />
|
|
*
|
|
*
|
|
* @param theme
|
|
* @param size
|
|
* @param emphasis
|
|
* @param type
|
|
* @param state
|
|
* @returns
|
|
*/
|
|
export const buttonBackgroundStyle = (
|
|
theme: Theme,
|
|
size: ButtonSize = 'm',
|
|
emphasis: ButtonEmphasis = 'primary',
|
|
type: ButtonType = 'default',
|
|
state: ButtonState = 'default',
|
|
): StyleProp<ViewStyle> => {
|
|
const backgroundStyles = getBackgroundStyles(theme);
|
|
|
|
return [buttonStyles.main, buttonSizeStyles[size], backgroundStyles[emphasis][type][state]];
|
|
};
|
|
|
|
/**
|
|
* Returns the appropriate TextStyle for the <Text style={} ...> object inside the button.
|
|
*
|
|
*
|
|
* @param theme
|
|
* @param size
|
|
* @param emphasis
|
|
* @param type
|
|
* @returns
|
|
*/
|
|
export const buttonTextStyle = (
|
|
theme: Theme,
|
|
size: ButtonSize = 'm',
|
|
emphasis: ButtonEmphasis = 'primary',
|
|
type: ButtonType = 'default',
|
|
): StyleProp<TextStyle> => {
|
|
return [buttonTextSizeStyles[size], {color: getColorByType(theme, type, emphasis)}];
|
|
};
|
|
|
|
const getColorByType = (theme: Theme, type: ButtonType, emphasis: ButtonEmphasis) => {
|
|
if (type === 'disabled') {
|
|
return changeOpacity(theme.centerChannelColor, 0.32);
|
|
}
|
|
|
|
if (type === 'destructive') {
|
|
if (emphasis === 'primary') {
|
|
return theme.buttonColor;
|
|
}
|
|
return theme.errorTextColor;
|
|
}
|
|
|
|
if (type === 'inverted') {
|
|
if (emphasis === 'primary') {
|
|
return theme.buttonBg;
|
|
}
|
|
return theme.buttonColor;
|
|
}
|
|
|
|
if (emphasis === 'primary') {
|
|
return theme.buttonColor;
|
|
}
|
|
|
|
return theme.buttonBg;
|
|
};
|