@planningcenter/chat-react-native 1.6.1-rc.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/display/button.js +11 -11
- package/build/components/display/button.js.map +1 -1
- package/build/utils/theme.d.ts +4 -4
- package/build/utils/theme.d.ts.map +1 -1
- package/build/utils/theme.js +4 -11
- package/build/utils/theme.js.map +1 -1
- package/build/vendor/tapestry/alias_tokens_color_map.d.ts +2 -0
- package/build/vendor/tapestry/alias_tokens_color_map.d.ts.map +1 -1
- package/build/vendor/tapestry/alias_tokens_color_map.js +2 -0
- package/build/vendor/tapestry/alias_tokens_color_map.js.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/hooks/useTheme.tsx +1 -1
- package/src/components/display/button.tsx +11 -11
- package/src/utils/theme.ts +8 -15
- package/src/vendor/tapestry/alias_tokens_color_map.ts +3 -0
|
@@ -43,31 +43,31 @@ export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true,
|
|
|
43
43
|
// ====== Styles ===================
|
|
44
44
|
// =================================
|
|
45
45
|
const useStyles = ({ appearance = 'interaction', disabled = false, loading = false, maxFontSizeMultiplier, size = 'md', variant = 'fill', }) => {
|
|
46
|
-
const { colors } = useTheme();
|
|
46
|
+
const { colors, button } = useTheme();
|
|
47
47
|
const fontScale = useFontScale({ maxFontSizeMultiplier });
|
|
48
48
|
const colorOptionMap = useButtonColorOptionMap();
|
|
49
|
-
const
|
|
50
|
-
const
|
|
49
|
+
const outlineHeightOffset = size === 'sm' ? 2 : 4;
|
|
50
|
+
const outlineMarginOffset = size === 'sm' ? 1 : 2;
|
|
51
51
|
const sizeStyleMap = {
|
|
52
52
|
[SIZES.sm]: {
|
|
53
53
|
fontSize: 12,
|
|
54
54
|
paddingHorizontal: 12 * fontScale,
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
borderRadius: button.borderRadius * fontScale,
|
|
56
|
+
height: 24 * fontScale - outlineHeightOffset,
|
|
57
57
|
gap: 4 * fontScale,
|
|
58
58
|
},
|
|
59
59
|
[SIZES.md]: {
|
|
60
60
|
fontSize: 14,
|
|
61
61
|
paddingHorizontal: 16 * fontScale,
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
borderRadius: button.borderRadius * fontScale,
|
|
63
|
+
height: 32 * fontScale - outlineHeightOffset,
|
|
64
64
|
gap: 6 * fontScale,
|
|
65
65
|
},
|
|
66
66
|
[SIZES.lg]: {
|
|
67
67
|
fontSize: 16,
|
|
68
68
|
paddingHorizontal: 24 * fontScale,
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
borderRadius: button.borderRadius * fontScale,
|
|
70
|
+
height: 40 * fontScale - outlineHeightOffset,
|
|
71
71
|
gap: 8 * fontScale,
|
|
72
72
|
},
|
|
73
73
|
};
|
|
@@ -97,9 +97,9 @@ const useStyles = ({ appearance = 'interaction', disabled = false, loading = fal
|
|
|
97
97
|
flexDirection: 'row',
|
|
98
98
|
justifyContent: 'center',
|
|
99
99
|
alignItems: 'center',
|
|
100
|
-
margin:
|
|
100
|
+
margin: outlineMarginOffset,
|
|
101
101
|
gap: sizeStyleMap[size].gap,
|
|
102
|
-
borderRadius: sizeStyleMap[size].borderRadius,
|
|
102
|
+
borderRadius: sizeStyleMap[size].borderRadius - outlineMarginOffset,
|
|
103
103
|
height: sizeStyleMap[size].height,
|
|
104
104
|
backgroundColor: variantStyleMap[variant].backgroundColor,
|
|
105
105
|
paddingHorizontal: sizeStyleMap[size].paddingHorizontal,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEhE,OAAO,cAAc,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAGhG,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAA;AAcV,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAA;AAsEV,MAAM,UAAU,MAAM,CAAC,EACrB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,IAAI,EACvB,UAAU,GAAG,aAAa,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,OAAO,GAAG,MAAM,EAChB,GAAG,KAAK,EACI;IACZ,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAA;IACjG,MAAM,kBAAkB,GAAG,mBAAmB,EAAE,CAAA;IAChD,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA;IAE/D,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC,WAAW,CAAC,CAAA;IAChG,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC,WAAW,CAAC,CAAA;IAEhG,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAElG,OAAO,CACL,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,2BAA2B,CAAC,CAAC,CACnF,iBAAiB,CAAC,QAAQ,CAC1B,QAAQ,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAC9B,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CACtC,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACnF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,cAAc,CACb,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAC1B,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CACxB,MAAM,CAAC,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CACrC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAEhD;QAAA,CAAC,OAAO,IAAI,CACV,CAAC,OAAO,CACN,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAC9B,qBAAqB,CAAC,CAAC,qBAAqB,IAAI,CAAC,CAAC,EAClD,CACH,CACD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CACpD;UAAA,CAAC,YAAY,IAAI,CACf,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,YAAY,CAAC,CACnB,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,EAC7C,CACH,CACD;UAAA,CAAC,IAAI,CACH,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,KAAK,CAAC,CAAC,UAAU,CAAC,CAElB;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,aAAa,IAAI,CAChB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,KAAK,CAAC,CAAC,UAAU,CAAC,CAClB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,EAC7C,CACH,CACH;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,SAAS,GAAG,CAAC,EACjB,UAAU,GAAG,aAAa,EAC1B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,qBAAqB,EACrB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,MAAM,GACK,EAAE,EAAE;IACzB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAA;IACzD,MAAM,cAAc,GAAG,uBAAuB,EAAE,CAAA;IAEhD,MAAM,eAAe,GAAG,CAAC,CAAA;IACzB,MAAM,aAAa,GAAG,CAAC,CAAA;IAEvB,MAAM,YAAY,GAAc;QAC9B,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE,GAAG,SAAS;YACjC,MAAM,EAAE,EAAE,GAAG,SAAS,GAAG,eAAe;YACxC,YAAY,EAAE,EAAE,GAAG,SAAS;YAC5B,GAAG,EAAE,CAAC,GAAG,SAAS;SACnB;QACD,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE,GAAG,SAAS;YACjC,MAAM,EAAE,EAAE,GAAG,SAAS,GAAG,aAAa;YACtC,YAAY,EAAE,EAAE,GAAG,SAAS;YAC5B,GAAG,EAAE,CAAC,GAAG,SAAS;SACnB;QACD,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE;YACV,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE,GAAG,SAAS;YACjC,MAAM,EAAE,EAAE,GAAG,SAAS,GAAG,aAAa;YACtC,YAAY,EAAE,EAAE,GAAG,SAAS;YAC5B,GAAG,EAAE,CAAC,GAAG,SAAS;SACnB;KACF,CAAA;IAED,MAAM,mBAAmB,GACvB,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,2BAA2B,CAAA;IAEvF,MAAM,eAAe,GAAkB;QACrC,IAAI,EAAE;YACJ,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,MAAM,CAAC,oBAAoB;SACnC;QACD,OAAO,EAAE;YACP,eAAe,EAAE,mBAAmB;YACpC,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC;SAClC;KACF,CAAA;IAED,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY;YAC7C,QAAQ,EAAE,QAAQ;SACnB;QACD,YAAY,EAAE;YACZ,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY;SAC9C;QACD,YAAY,EAAE;YACZ,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7B,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG;YAC3B,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,YAAY;YAC7C,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM;YACjC,eAAe,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,eAAe;YACzD,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,iBAAiB;SACxD;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;YACnB,iBAAiB,EAAE,QAAQ;YAC3B,kBAAkB,EAAE,KAAK;YACzB,UAAU,EAAE,sBAAsB;YAClC,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ;YACrC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK;SACtC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC;SACX;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ;YACrC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK;SACtC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC;SACX;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,QAAQ;SACtC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, Text, View } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport { Icon } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './button_color_utils'\nimport type { ButtonAppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n SizeUnion,\n {\n fontSize: number\n paddingHorizontal: number\n height: number\n borderRadius: number\n gap: number\n }\n>\n\nconst VARIANTS = {\n fill: 'fill',\n outline: 'outline',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\ntype VariantColors = Record<\n VariantUnion,\n {\n backgroundColor: string\n color: string\n }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface ButtonProps extends PressableProps {\n /**\n * Specifies whether fonts should be scaled down automatically to fit given style constraints.\n */\n adjustsFontSizeToFit?: boolean\n /**\n * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n */\n allowFontScaling?: boolean\n /**\n * Updates the button's colors\n */\n appearance?: ButtonAppearanceUnion\n /**\n * Styles the inner View that wraps the button's content\n */\n buttonInnerStyles?: ViewStyle\n /**\n * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color\n */\n buttonOuterStyles?: ViewStyle\n /**\n * Generates an icon to the left of the button text\n */\n iconNameLeft?: string\n /**\n * Generates an icon to the right of the button text\n */\n iconNameRight?: string\n /**\n * Disables the button and replaces its content with a spinner\n */\n loading?: boolean\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n */\n minimumFontScale?: number\n /**\n * Changes the overall size of the button and its contents\n */\n size?: SizeUnion\n /**\n * Renders as text within the button\n */\n title: string\n /**\n * Fill buttons are visually more propmonitent then outline buttons\n */\n variant?: VariantUnion\n}\n\nexport function Button({\n adjustsFontSizeToFit = false,\n allowFontScaling = true,\n appearance = 'interaction',\n buttonInnerStyles,\n buttonOuterStyles,\n disabled = false,\n iconNameLeft,\n iconNameRight,\n loading,\n maxFontSizeMultiplier,\n minimumFontScale,\n size = 'md',\n title,\n variant = 'fill',\n ...props\n}: ButtonProps) {\n const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })\n const gradientOptionsMap = useGradientColorMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]\n const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]\n\n const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] })\n\n return (\n <Pressable\n style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}\n accessibilityRole=\"button\"\n disabled={disabled || loading}\n accessibilityState={{ busy: loading }}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n {...props}\n >\n <LinearGradient\n start={{ x: 0.1, y: 0.1 }}\n end={{ x: 0.9, y: 0.9 }}\n colors={gradientOptionsMap[colorKey]}\n style={[styles.colorWrapper, buttonOuterStyles]}\n >\n {loading && (\n <Spinner\n size={styles.spinner.fontSize}\n maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n />\n )}\n <View style={[styles.innerWrapper, buttonInnerStyles]}>\n {iconNameLeft && (\n <Icon\n name={iconNameLeft}\n style={iconStyles}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n <Text\n allowFontScaling={allowFontScaling}\n minimumFontScale={minimumFontScale}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n adjustsFontSizeToFit={adjustsFontSizeToFit}\n numberOfLines={1}\n style={textStyles}\n >\n {title}\n </Text>\n {iconNameRight && (\n <Icon\n name={iconNameRight}\n style={iconStyles}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n </View>\n </LinearGradient>\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'interaction',\n disabled = false,\n loading = false,\n maxFontSizeMultiplier,\n size = 'md',\n variant = 'fill',\n}: Partial<ButtonProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const colorOptionMap = useButtonColorOptionMap()\n\n const outlineOffsetSm = 2\n const outlineOffset = 4\n\n const sizeStyleMap: SizeStyle = {\n [SIZES.sm]: {\n fontSize: 12,\n paddingHorizontal: 12 * fontScale,\n height: 24 * fontScale - outlineOffsetSm,\n borderRadius: 24 * fontScale,\n gap: 4 * fontScale,\n },\n [SIZES.md]: {\n fontSize: 14,\n paddingHorizontal: 16 * fontScale,\n height: 32 * fontScale - outlineOffset,\n borderRadius: 32 * fontScale,\n gap: 6 * fontScale,\n },\n [SIZES.lg]: {\n fontSize: 16,\n paddingHorizontal: 24 * fontScale,\n height: 40 * fontScale - outlineOffset,\n borderRadius: 40 * fontScale,\n gap: 8 * fontScale,\n },\n }\n\n const variantOutlineColor =\n disabled || loading ? colors.fillColorNeutral090 : colors.fillColorNeutral100Inverted\n\n const variantStyleMap: VariantColors = {\n fill: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutral100White,\n },\n outline: {\n backgroundColor: variantOutlineColor,\n color: colorOptionMap[appearance],\n },\n }\n\n return StyleSheet.create({\n pressable: {\n borderRadius: sizeStyleMap[size].borderRadius,\n overflow: 'hidden',\n },\n colorWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: sizeStyleMap[size].borderRadius,\n },\n innerWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n margin: size === 'sm' ? 1 : 2,\n gap: sizeStyleMap[size].gap,\n borderRadius: sizeStyleMap[size].borderRadius,\n height: sizeStyleMap[size].height,\n backgroundColor: variantStyleMap[variant].backgroundColor,\n paddingHorizontal: sizeStyleMap[size].paddingHorizontal,\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n includeFontPadding: false,\n fontWeight: platformFontWeightBold,\n fontSize: sizeStyleMap[size].fontSize,\n color: variantStyleMap[variant].color,\n },\n textDisabled: {\n color: colors.textColorDefaultDisabled,\n },\n textLoading: {\n opacity: 0,\n },\n icon: {\n fontSize: sizeStyleMap[size].fontSize,\n color: variantStyleMap[variant].color,\n },\n iconDisabled: {\n color: colors.iconColorDefaultDisabled,\n },\n iconLoading: {\n opacity: 0,\n },\n spinner: {\n fontSize: sizeStyleMap[size].fontSize,\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, Text, View } from 'react-native'\nimport type { PressableProps, ViewStyle } from 'react-native'\nimport LinearGradient from 'react-native-linear-gradient'\nimport { Icon } from './icon'\nimport { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'\nimport { Spinner } from './spinner'\nimport { getColorKey, useButtonColorOptionMap, useGradientColorMap } from './button_color_utils'\nimport type { ButtonAppearanceUnion } from './button_color_utils'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst SIZES = {\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n} as const\n\ntype SizeUnion = (typeof SIZES)[keyof typeof SIZES]\ntype SizeStyle = Record<\n SizeUnion,\n {\n fontSize: number\n paddingHorizontal: number\n height: number\n borderRadius: number\n gap: number\n }\n>\n\nconst VARIANTS = {\n fill: 'fill',\n outline: 'outline',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\ntype VariantColors = Record<\n VariantUnion,\n {\n backgroundColor: string\n color: string\n }\n>\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface ButtonProps extends PressableProps {\n /**\n * Specifies whether fonts should be scaled down automatically to fit given style constraints.\n */\n adjustsFontSizeToFit?: boolean\n /**\n * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.\n */\n allowFontScaling?: boolean\n /**\n * Updates the button's colors\n */\n appearance?: ButtonAppearanceUnion\n /**\n * Styles the inner View that wraps the button's content\n */\n buttonInnerStyles?: ViewStyle\n /**\n * Styles the outer LinearGradient that gives the button it's backgrounnd and outline color\n */\n buttonOuterStyles?: ViewStyle\n /**\n * Generates an icon to the left of the button text\n */\n iconNameLeft?: string\n /**\n * Generates an icon to the right of the button text\n */\n iconNameRight?: string\n /**\n * Disables the button and replaces its content with a spinner\n */\n loading?: boolean\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n /**\n * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).\n */\n minimumFontScale?: number\n /**\n * Changes the overall size of the button and its contents\n */\n size?: SizeUnion\n /**\n * Renders as text within the button\n */\n title: string\n /**\n * Fill buttons are visually more propmonitent then outline buttons\n */\n variant?: VariantUnion\n}\n\nexport function Button({\n adjustsFontSizeToFit = false,\n allowFontScaling = true,\n appearance = 'interaction',\n buttonInnerStyles,\n buttonOuterStyles,\n disabled = false,\n iconNameLeft,\n iconNameRight,\n loading,\n maxFontSizeMultiplier,\n minimumFontScale,\n size = 'md',\n title,\n variant = 'fill',\n ...props\n}: ButtonProps) {\n const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant })\n const gradientOptionsMap = useGradientColorMap()\n const colorKey = getColorKey({ disabled, loading, appearance })\n\n const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading]\n const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading]\n\n const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] })\n\n return (\n <Pressable\n style={({ pressed }) => [styles.pressable, pressed && platformPressedOpacityStyle]}\n accessibilityRole=\"button\"\n disabled={disabled || loading}\n accessibilityState={{ busy: loading }}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n {...props}\n >\n <LinearGradient\n start={{ x: 0.1, y: 0.1 }}\n end={{ x: 0.9, y: 0.9 }}\n colors={gradientOptionsMap[colorKey]}\n style={[styles.colorWrapper, buttonOuterStyles]}\n >\n {loading && (\n <Spinner\n size={styles.spinner.fontSize}\n maxFontSizeMultiplier={maxFontSizeMultiplier || 0}\n />\n )}\n <View style={[styles.innerWrapper, buttonInnerStyles]}>\n {iconNameLeft && (\n <Icon\n name={iconNameLeft}\n style={iconStyles}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n <Text\n allowFontScaling={allowFontScaling}\n minimumFontScale={minimumFontScale}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n adjustsFontSizeToFit={adjustsFontSizeToFit}\n numberOfLines={1}\n style={textStyles}\n >\n {title}\n </Text>\n {iconNameRight && (\n <Icon\n name={iconNameRight}\n style={iconStyles}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n />\n )}\n </View>\n </LinearGradient>\n </Pressable>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'interaction',\n disabled = false,\n loading = false,\n maxFontSizeMultiplier,\n size = 'md',\n variant = 'fill',\n}: Partial<ButtonProps>) => {\n const { colors, button } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n const colorOptionMap = useButtonColorOptionMap()\n\n const outlineHeightOffset = size === 'sm' ? 2 : 4\n const outlineMarginOffset = size === 'sm' ? 1 : 2\n\n const sizeStyleMap: SizeStyle = {\n [SIZES.sm]: {\n fontSize: 12,\n paddingHorizontal: 12 * fontScale,\n borderRadius: button.borderRadius * fontScale,\n height: 24 * fontScale - outlineHeightOffset,\n gap: 4 * fontScale,\n },\n [SIZES.md]: {\n fontSize: 14,\n paddingHorizontal: 16 * fontScale,\n borderRadius: button.borderRadius * fontScale,\n height: 32 * fontScale - outlineHeightOffset,\n gap: 6 * fontScale,\n },\n [SIZES.lg]: {\n fontSize: 16,\n paddingHorizontal: 24 * fontScale,\n borderRadius: button.borderRadius * fontScale,\n height: 40 * fontScale - outlineHeightOffset,\n gap: 8 * fontScale,\n },\n }\n\n const variantOutlineColor =\n disabled || loading ? colors.fillColorNeutral090 : colors.fillColorNeutral100Inverted\n\n const variantStyleMap: VariantColors = {\n fill: {\n backgroundColor: 'transparent',\n color: tokens.colorNeutral100White,\n },\n outline: {\n backgroundColor: variantOutlineColor,\n color: colorOptionMap[appearance],\n },\n }\n\n return StyleSheet.create({\n pressable: {\n borderRadius: sizeStyleMap[size].borderRadius,\n overflow: 'hidden',\n },\n colorWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: sizeStyleMap[size].borderRadius,\n },\n innerWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n margin: outlineMarginOffset,\n gap: sizeStyleMap[size].gap,\n borderRadius: sizeStyleMap[size].borderRadius - outlineMarginOffset,\n height: sizeStyleMap[size].height,\n backgroundColor: variantStyleMap[variant].backgroundColor,\n paddingHorizontal: sizeStyleMap[size].paddingHorizontal,\n },\n text: {\n textAlign: 'center',\n textAlignVertical: 'center',\n includeFontPadding: false,\n fontWeight: platformFontWeightBold,\n fontSize: sizeStyleMap[size].fontSize,\n color: variantStyleMap[variant].color,\n },\n textDisabled: {\n color: colors.textColorDefaultDisabled,\n },\n textLoading: {\n opacity: 0,\n },\n icon: {\n fontSize: sizeStyleMap[size].fontSize,\n color: variantStyleMap[variant].color,\n },\n iconDisabled: {\n color: colors.iconColorDefaultDisabled,\n },\n iconLoading: {\n opacity: 0,\n },\n spinner: {\n fontSize: sizeStyleMap[size].fontSize,\n },\n })\n}\n"]}
|
package/build/utils/theme.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ColorSchemeName } from 'react-native';
|
|
2
2
|
import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map';
|
|
3
3
|
export interface ChatTheme extends DefaultTheme {
|
|
4
4
|
colors: DefaultTheme['colors'] & (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark);
|
|
@@ -11,6 +11,7 @@ export interface ChatTheme extends DefaultTheme {
|
|
|
11
11
|
2. Any styles for a specific component. (Use only one level of nesting.)
|
|
12
12
|
```
|
|
13
13
|
primaryButton: {
|
|
14
|
+
borderRadius: number
|
|
14
15
|
container: ViewStyle
|
|
15
16
|
text: TextStyle
|
|
16
17
|
}
|
|
@@ -18,9 +19,8 @@ export interface ChatTheme extends DefaultTheme {
|
|
|
18
19
|
============================================= */
|
|
19
20
|
export interface DefaultTheme {
|
|
20
21
|
colors: ChatColors;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
text: TextStyle;
|
|
22
|
+
button: {
|
|
23
|
+
borderRadius: number;
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
export declare const defaultTheme: (colorScheme: ColorSchemeName) => ChatTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAc3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB"}
|
package/build/utils/theme.js
CHANGED
|
@@ -8,15 +8,8 @@ export const defaultTheme = (colorScheme) => {
|
|
|
8
8
|
};
|
|
9
9
|
return {
|
|
10
10
|
colors: defaultColors,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
paddingHorizontal: tokens.spacing1,
|
|
14
|
-
backgroundColor: aliasTokensColorMap[scheme].fillColorNeutral070,
|
|
15
|
-
borderWidth: tokens.borderSizeDefault,
|
|
16
|
-
},
|
|
17
|
-
text: {
|
|
18
|
-
textAlign: 'center',
|
|
19
|
-
},
|
|
11
|
+
button: {
|
|
12
|
+
borderRadius: 40,
|
|
20
13
|
},
|
|
21
14
|
};
|
|
22
15
|
};
|
|
@@ -25,14 +18,14 @@ const colorsChatLight = {
|
|
|
25
18
|
buttonStart: undefined,
|
|
26
19
|
buttonEnd: undefined,
|
|
27
20
|
interaction: tokens.fillColorInteractionDefault,
|
|
28
|
-
testColor: '
|
|
21
|
+
testColor: 'hotpink',
|
|
29
22
|
};
|
|
30
23
|
const colorsChatDark = {
|
|
31
24
|
name: 'dark',
|
|
32
25
|
buttonStart: undefined,
|
|
33
26
|
buttonEnd: undefined,
|
|
34
27
|
interaction: tokens.fillColorInteractionDefaultDark,
|
|
35
|
-
testColor: '
|
|
28
|
+
testColor: 'pink',
|
|
36
29
|
};
|
|
37
30
|
const chatThemeColorMap = {
|
|
38
31
|
light: colorsChatLight,
|
package/build/utils/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA6B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,MAAM,aAAa,GAAG;QACpB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5B,GAAG,mBAAmB,CAAC,MAAM,CAAC;KAC/B,CAAA;IAED,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA6B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,MAAM,aAAa,GAAG;QACpB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5B,GAAG,mBAAmB,CAAC,MAAM,CAAC;KAC/B,CAAA;IAED,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE;YACN,YAAY,EAAE,EAAE;SACjB;KACF,CAAA;AACH,CAAC,CAAA;AAYD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n colors: DefaultTheme['colors'] &\n (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n The default theme is intended to support two types of customizations:\n 1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n 2. Any styles for a specific component. (Use only one level of nesting.)\n ```\n primaryButton: {\n borderRadius: number\n container: ViewStyle\n text: TextStyle\n }\n ```\n============================================= */\n\nexport interface DefaultTheme {\n colors: ChatColors\n button: {\n borderRadius: number\n }\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n const scheme = colorScheme || 'light'\n\n const defaultColors = {\n ...chatThemeColorMap[scheme],\n ...aliasTokensColorMap[scheme],\n }\n\n return {\n colors: defaultColors,\n button: {\n borderRadius: 40,\n },\n }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n name: string\n buttonStart: string | undefined\n buttonEnd: string | undefined\n interaction: string\n testColor: string\n}\n\nconst colorsChatLight: ChatColors = {\n name: 'light',\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefault,\n testColor: 'hotpink',\n}\n\nconst colorsChatDark: ChatColors = {\n name: 'dark',\n buttonStart: undefined,\n buttonEnd: undefined,\n interaction: tokens.fillColorInteractionDefaultDark,\n testColor: 'pink',\n}\n\nconst chatThemeColorMap = {\n light: colorsChatLight,\n dark: colorsChatDark,\n}\n"]}
|
|
@@ -17,6 +17,7 @@ export declare const aliasTokensColorMap: {
|
|
|
17
17
|
readonly fillColorStatusErrorMedium: string;
|
|
18
18
|
readonly fillColorButtonNeutralSolidDisabled: string;
|
|
19
19
|
readonly androidRippleNeutral: string;
|
|
20
|
+
readonly needsDesignPass: string;
|
|
20
21
|
readonly fillColorNeutral000: string;
|
|
21
22
|
readonly fillColorNeutral010: string;
|
|
22
23
|
readonly fillColorNeutral020: string;
|
|
@@ -47,6 +48,7 @@ export declare const aliasTokensColorMap: {
|
|
|
47
48
|
readonly fillColorStatusErrorMedium: string;
|
|
48
49
|
readonly fillColorButtonNeutralSolidDisabled: string;
|
|
49
50
|
readonly androidRippleNeutral: string;
|
|
51
|
+
readonly needsDesignPass: string;
|
|
50
52
|
readonly fillColorNeutral000: string;
|
|
51
53
|
readonly fillColorNeutral010: string;
|
|
52
54
|
readonly fillColorNeutral020: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"alias_tokens_color_map.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAkHA,eAAO,MAAM,mBAAmB;;uBA9DxB,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCA7DF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;;uBAkC7B,MAAM;0CACa,MAAM;4CACJ,MAAM;sCACZ,MAAM;2CACD,MAAM;2CACN,MAAM;2CACN,MAAM;0CACP,MAAM;4CACJ,MAAM;2CACP,MAAM;8CACH,MAAM;2CACT,MAAM;oDACG,MAAM;8CACZ,MAAM;6CACP,MAAM;sDACG,MAAM;uCACrB,MAAM;kCACX,MAAM;sCA7DF,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;0CACF,MAAM;sCACV,MAAM;sCACN,MAAM;sCACN,MAAM;sCACN,MAAM;8CACE,MAAM;;CAmG3B,CAAA"}
|
|
@@ -45,6 +45,7 @@ const semanticAliasesLight = {
|
|
|
45
45
|
fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
|
|
46
46
|
fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,
|
|
47
47
|
androidRippleNeutral: tokens.fillColorTransparencyDark020,
|
|
48
|
+
needsDesignPass: 'hotpink',
|
|
48
49
|
};
|
|
49
50
|
const semanticAliasesDark = {
|
|
50
51
|
name: 'dark',
|
|
@@ -64,6 +65,7 @@ const semanticAliasesDark = {
|
|
|
64
65
|
fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
|
|
65
66
|
fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,
|
|
66
67
|
androidRippleNeutral: tokens.fillColorTransparencyLight020,
|
|
68
|
+
needsDesignPass: 'pink',
|
|
67
69
|
};
|
|
68
70
|
export const aliasTokensColorMap = {
|
|
69
71
|
light: { ...neutralsLight, ...semanticAliasesLight },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAqBjC,MAAM,aAAa,GAAkB;IACnC,IAAI,EAAE,OAAO;IACb,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,oBAAoB;CAChD,CAAA;AAEV,MAAM,YAAY,GAAkB;IAClC,IAAI,EAAE,MAAM;IACZ,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,uBAAuB,EAAE,MAAM,CAAC,cAAc;IAC9C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,mBAAmB,EAAE,MAAM,CAAC,cAAc;IAC1C,2BAA2B,EAAE,MAAM,CAAC,aAAa;CACzC,CAAA;
|
|
1
|
+
{"version":3,"file":"alias_tokens_color_map.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/alias_tokens_color_map.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from './tokens'\n\n// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\ninterface NeutralColors {\n name: string\n fillColorNeutral000: string\n fillColorNeutral010: string\n fillColorNeutral020: string\n fillColorNeutral030: string\n fillColorNeutral040: string\n fillColorNeutral050Base: string\n fillColorNeutral060: string\n fillColorNeutral070: string\n fillColorNeutral080: string\n fillColorNeutral090: string\n fillColorNeutral100Inverted: string\n}\n\nconst neutralsLight: NeutralColors = {\n name: 'light',\n fillColorNeutral000: tokens.colorNeutral12,\n fillColorNeutral010: tokens.colorNeutral24,\n fillColorNeutral020: tokens.colorNeutral45,\n fillColorNeutral030: tokens.colorNeutral58,\n fillColorNeutral040: tokens.colorNeutral81,\n fillColorNeutral050Base: tokens.colorNeutral88,\n fillColorNeutral060: tokens.colorNeutral93,\n fillColorNeutral070: tokens.colorNeutral95,\n fillColorNeutral080: tokens.colorNeutral97,\n fillColorNeutral090: tokens.colorNeutral98,\n fillColorNeutral100Inverted: tokens.colorNeutral100White,\n} as const\n\nconst neutralsDark: NeutralColors = {\n name: 'dark',\n fillColorNeutral000: tokens.colorNeutral98,\n fillColorNeutral010: tokens.colorNeutral88,\n fillColorNeutral020: tokens.colorNeutral68,\n fillColorNeutral030: tokens.colorNeutral50,\n fillColorNeutral040: tokens.colorNeutral32,\n fillColorNeutral050Base: tokens.colorNeutral24,\n fillColorNeutral060: tokens.colorNeutral19,\n fillColorNeutral070: tokens.colorNeutral17,\n fillColorNeutral080: tokens.colorNeutral15,\n fillColorNeutral090: tokens.colorNeutral12,\n fillColorNeutral100Inverted: tokens.colorNeutral7,\n} as const\n\ninterface SemanticAliasesColors {\n name: string\n iconColorDefaultPrimary: string\n iconColorDefaultSecondary: string\n iconColorDefaultDim: string\n iconColorDefaultDisabled: string\n iconColorDefaultInverted: string\n textColorDefaultHeadline: string\n textColorDefaultPrimary: string\n textColorDefaultSecondary: string\n textColorDefaultDisabled: string\n textColorDefaultPlaceholder: string\n textColorDefaultInverted: string\n fillColorInteractionOnlineDefault: string\n fillColorInteractionDefault: string\n fillColorStatusErrorMedium: string\n fillColorButtonNeutralSolidDisabled: string\n androidRippleNeutral: string\n needsDesignPass: string\n}\n\nconst semanticAliasesLight: SemanticAliasesColors = {\n name: 'light',\n iconColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n iconColorDefaultDim: neutralsLight.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n iconColorDefaultInverted: neutralsLight.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsLight.fillColorNeutral000,\n textColorDefaultPrimary: neutralsLight.fillColorNeutral010,\n textColorDefaultSecondary: neutralsLight.fillColorNeutral020,\n textColorDefaultDisabled: neutralsLight.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsLight.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral100White,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefault,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyDark020,\n needsDesignPass: 'hotpink',\n} as const\n\nconst semanticAliasesDark: SemanticAliasesColors = {\n name: 'dark',\n iconColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n iconColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n iconColorDefaultDim: neutralsDark.fillColorNeutral030,\n iconColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n iconColorDefaultInverted: neutralsDark.fillColorNeutral100Inverted,\n textColorDefaultHeadline: neutralsDark.fillColorNeutral000,\n textColorDefaultPrimary: neutralsDark.fillColorNeutral010,\n textColorDefaultSecondary: neutralsDark.fillColorNeutral020,\n textColorDefaultDisabled: neutralsDark.fillColorNeutral040,\n textColorDefaultPlaceholder: neutralsDark.fillColorNeutral030,\n textColorDefaultInverted: tokens.colorNeutral7,\n fillColorInteractionOnlineDefault: tokens.colorInteractionOnlineDefault,\n fillColorInteractionDefault: tokens.fillColorInteractionDefaultDark,\n fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,\n fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,\n androidRippleNeutral: tokens.fillColorTransparencyLight020,\n needsDesignPass: 'pink',\n}\n\nexport const aliasTokensColorMap = {\n light: { ...neutralsLight, ...semanticAliasesLight },\n dark: { ...neutralsDark, ...semanticAliasesDark },\n} as const\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "1.6.1
|
|
3
|
+
"version": "1.6.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"prettier": "^3.4.2",
|
|
47
47
|
"typescript": "<5.6.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "42d8be96d6f0ab7ac25b1b43c72bec714f3870f1"
|
|
50
50
|
}
|
|
@@ -45,7 +45,7 @@ describe('configurable theme', () => {
|
|
|
45
45
|
const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
|
|
46
46
|
|
|
47
47
|
expect(result.current).toBeDefined()
|
|
48
|
-
expect(result.current.colors.testColor).toBe('
|
|
48
|
+
expect(result.current.colors.testColor).toBe('hotpink')
|
|
49
49
|
expect(result.current.colors.interaction).toBeDefined()
|
|
50
50
|
expect(result.current.colors.buttonStart).toBeUndefined()
|
|
51
51
|
expect(result.current.colors.buttonEnd).toBeUndefined()
|
|
@@ -195,33 +195,33 @@ const useStyles = ({
|
|
|
195
195
|
size = 'md',
|
|
196
196
|
variant = 'fill',
|
|
197
197
|
}: Partial<ButtonProps>) => {
|
|
198
|
-
const { colors } = useTheme()
|
|
198
|
+
const { colors, button } = useTheme()
|
|
199
199
|
const fontScale = useFontScale({ maxFontSizeMultiplier })
|
|
200
200
|
const colorOptionMap = useButtonColorOptionMap()
|
|
201
201
|
|
|
202
|
-
const
|
|
203
|
-
const
|
|
202
|
+
const outlineHeightOffset = size === 'sm' ? 2 : 4
|
|
203
|
+
const outlineMarginOffset = size === 'sm' ? 1 : 2
|
|
204
204
|
|
|
205
205
|
const sizeStyleMap: SizeStyle = {
|
|
206
206
|
[SIZES.sm]: {
|
|
207
207
|
fontSize: 12,
|
|
208
208
|
paddingHorizontal: 12 * fontScale,
|
|
209
|
-
|
|
210
|
-
|
|
209
|
+
borderRadius: button.borderRadius * fontScale,
|
|
210
|
+
height: 24 * fontScale - outlineHeightOffset,
|
|
211
211
|
gap: 4 * fontScale,
|
|
212
212
|
},
|
|
213
213
|
[SIZES.md]: {
|
|
214
214
|
fontSize: 14,
|
|
215
215
|
paddingHorizontal: 16 * fontScale,
|
|
216
|
-
|
|
217
|
-
|
|
216
|
+
borderRadius: button.borderRadius * fontScale,
|
|
217
|
+
height: 32 * fontScale - outlineHeightOffset,
|
|
218
218
|
gap: 6 * fontScale,
|
|
219
219
|
},
|
|
220
220
|
[SIZES.lg]: {
|
|
221
221
|
fontSize: 16,
|
|
222
222
|
paddingHorizontal: 24 * fontScale,
|
|
223
|
-
|
|
224
|
-
|
|
223
|
+
borderRadius: button.borderRadius * fontScale,
|
|
224
|
+
height: 40 * fontScale - outlineHeightOffset,
|
|
225
225
|
gap: 8 * fontScale,
|
|
226
226
|
},
|
|
227
227
|
}
|
|
@@ -255,9 +255,9 @@ const useStyles = ({
|
|
|
255
255
|
flexDirection: 'row',
|
|
256
256
|
justifyContent: 'center',
|
|
257
257
|
alignItems: 'center',
|
|
258
|
-
margin:
|
|
258
|
+
margin: outlineMarginOffset,
|
|
259
259
|
gap: sizeStyleMap[size].gap,
|
|
260
|
-
borderRadius: sizeStyleMap[size].borderRadius,
|
|
260
|
+
borderRadius: sizeStyleMap[size].borderRadius - outlineMarginOffset,
|
|
261
261
|
height: sizeStyleMap[size].height,
|
|
262
262
|
backgroundColor: variantStyleMap[variant].backgroundColor,
|
|
263
263
|
paddingHorizontal: sizeStyleMap[size].paddingHorizontal,
|
package/src/utils/theme.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ColorSchemeName } from 'react-native'
|
|
2
2
|
import { tokens } from '../vendor/tapestry/tokens'
|
|
3
3
|
import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
|
|
4
4
|
|
|
@@ -15,6 +15,7 @@ export interface ChatTheme extends DefaultTheme {
|
|
|
15
15
|
2. Any styles for a specific component. (Use only one level of nesting.)
|
|
16
16
|
```
|
|
17
17
|
primaryButton: {
|
|
18
|
+
borderRadius: number
|
|
18
19
|
container: ViewStyle
|
|
19
20
|
text: TextStyle
|
|
20
21
|
}
|
|
@@ -23,9 +24,8 @@ export interface ChatTheme extends DefaultTheme {
|
|
|
23
24
|
|
|
24
25
|
export interface DefaultTheme {
|
|
25
26
|
colors: ChatColors
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
text: TextStyle
|
|
27
|
+
button: {
|
|
28
|
+
borderRadius: number
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -39,15 +39,8 @@ export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
|
|
|
39
39
|
|
|
40
40
|
return {
|
|
41
41
|
colors: defaultColors,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
paddingHorizontal: tokens.spacing1,
|
|
45
|
-
backgroundColor: aliasTokensColorMap[scheme].fillColorNeutral070,
|
|
46
|
-
borderWidth: tokens.borderSizeDefault,
|
|
47
|
-
},
|
|
48
|
-
text: {
|
|
49
|
-
textAlign: 'center',
|
|
50
|
-
},
|
|
42
|
+
button: {
|
|
43
|
+
borderRadius: 40,
|
|
51
44
|
},
|
|
52
45
|
}
|
|
53
46
|
}
|
|
@@ -67,7 +60,7 @@ const colorsChatLight: ChatColors = {
|
|
|
67
60
|
buttonStart: undefined,
|
|
68
61
|
buttonEnd: undefined,
|
|
69
62
|
interaction: tokens.fillColorInteractionDefault,
|
|
70
|
-
testColor: '
|
|
63
|
+
testColor: 'hotpink',
|
|
71
64
|
}
|
|
72
65
|
|
|
73
66
|
const colorsChatDark: ChatColors = {
|
|
@@ -75,7 +68,7 @@ const colorsChatDark: ChatColors = {
|
|
|
75
68
|
buttonStart: undefined,
|
|
76
69
|
buttonEnd: undefined,
|
|
77
70
|
interaction: tokens.fillColorInteractionDefaultDark,
|
|
78
|
-
testColor: '
|
|
71
|
+
testColor: 'pink',
|
|
79
72
|
}
|
|
80
73
|
|
|
81
74
|
const chatThemeColorMap = {
|
|
@@ -67,6 +67,7 @@ interface SemanticAliasesColors {
|
|
|
67
67
|
fillColorStatusErrorMedium: string
|
|
68
68
|
fillColorButtonNeutralSolidDisabled: string
|
|
69
69
|
androidRippleNeutral: string
|
|
70
|
+
needsDesignPass: string
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
const semanticAliasesLight: SemanticAliasesColors = {
|
|
@@ -87,6 +88,7 @@ const semanticAliasesLight: SemanticAliasesColors = {
|
|
|
87
88
|
fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
|
|
88
89
|
fillColorButtonNeutralSolidDisabled: neutralsLight.fillColorNeutral070,
|
|
89
90
|
androidRippleNeutral: tokens.fillColorTransparencyDark020,
|
|
91
|
+
needsDesignPass: 'hotpink',
|
|
90
92
|
} as const
|
|
91
93
|
|
|
92
94
|
const semanticAliasesDark: SemanticAliasesColors = {
|
|
@@ -107,6 +109,7 @@ const semanticAliasesDark: SemanticAliasesColors = {
|
|
|
107
109
|
fillColorStatusErrorMedium: tokens.fillColorStatusErrorMedium,
|
|
108
110
|
fillColorButtonNeutralSolidDisabled: neutralsDark.fillColorNeutral070,
|
|
109
111
|
androidRippleNeutral: tokens.fillColorTransparencyLight020,
|
|
112
|
+
needsDesignPass: 'pink',
|
|
110
113
|
}
|
|
111
114
|
|
|
112
115
|
export const aliasTokensColorMap = {
|