diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /app/components/button/button.presets.ts |
New Ignite 7.0.6 app
Diffstat (limited to 'app/components/button/button.presets.ts')
-rw-r--r-- | app/components/button/button.presets.ts | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts new file mode 100644 index 0000000..b140fd2 --- /dev/null +++ b/app/components/button/button.presets.ts @@ -0,0 +1,54 @@ +import { ViewStyle, TextStyle } from "react-native" +import { color, spacing } from "../../theme" + +/** + * All text will start off looking like this. + */ +const BASE_VIEW: ViewStyle = { + paddingVertical: spacing[2], + paddingHorizontal: spacing[2], + borderRadius: 4, + justifyContent: "center", + alignItems: "center", +} + +const BASE_TEXT: TextStyle = { + paddingHorizontal: spacing[3], +} + +/** + * All the variations of text styling within the app. + * + * You want to customize these to whatever you need in your app. + */ +export const viewPresets: Record<string, ViewStyle> = { + /** + * A smaller piece of secondard information. + */ + primary: { ...BASE_VIEW, backgroundColor: color.palette.orange } as ViewStyle, + + /** + * A button without extras. + */ + link: { + ...BASE_VIEW, + paddingHorizontal: 0, + paddingVertical: 0, + alignItems: "flex-start", + } as ViewStyle, +} + +export const textPresets: Record<ButtonPresetNames, TextStyle> = { + primary: { ...BASE_TEXT, fontSize: 9, color: color.palette.white } as TextStyle, + link: { + ...BASE_TEXT, + color: color.text, + paddingHorizontal: 0, + paddingVertical: 0, + } as TextStyle, +} + +/** + * A list of preset names. + */ +export type ButtonPresetNames = keyof typeof viewPresets |