App/util/theme.ts
// Shoot! I Smoke// Copyright (C) 2018-2023 Marcelo S. Coelho, Amaury M. // Shoot! I Smoke is free software: you can redistribute it and/or modify// it under the terms of the GNU General Public License as published by// the Free Software Foundation, either version 3 of the License, or// (at your option) any later version. // Shoot! I Smoke is distributed in the hope that it will be useful,// but WITHOUT ANY WARRANTY; without even the implied warranty of// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the// GNU General Public License for more details. // You should have received a copy of the GNU General Public License// along with Shoot! I Smoke. If not, see <http://www.gnu.org/licenses/>. import Constants from 'expo-constants';import { Platform, ViewStyle } from 'react-native';import { scale } from 'react-native-size-matters'; export type ShadowPosition = 'top' | 'bottom'; // Colors.export const colors = { gray200: '#CCCFD4', gray600: '#646973', gray700: '#3D3F42', white: '#FFFFFF', cream: '#F7F0DF', gold: '#E5D98D', orange: '#F2934E', red: '#FF5139',}; export const backgroundColor = '#FAFAFC';export const iconBackgroundColor = '#EBE7DD'; /** * @deprecated Use 500 instead. */export const Montserrat400 = 'Montserrat400';export const Montserrat500 = 'Montserrat500';export const Montserrat800 = 'Montserrat800'; // Typography.export const typography = {Similar blocks of code found in 4 locations. Consider refactoring. type700: { fontFamily: Montserrat800, fontSize: scale(48), fontWeight: '800' as const, lineHeight: scale(54), letterSpacing: scale(-3), },Similar blocks of code found in 4 locations. Consider refactoring. type600: { fontFamily: Montserrat800, fontSize: scale(36), fontWeight: '800' as const, lineHeight: scale(42), letterSpacing: scale(-3), },Similar blocks of code found in 4 locations. Consider refactoring. type500: { fontFamily: Montserrat800, fontSize: scale(24), fontWeight: '800' as const, lineHeight: scale(28), letterSpacing: scale(-1), },Similar blocks of code found in 4 locations. Consider refactoring. type400: { fontFamily: Montserrat800, fontSize: scale(18), fontWeight: '800' as const, lineHeight: scale(21.94), letterSpacing: scale(-1), }, type300: { fontFamily: Montserrat800, fontSize: scale(12), fontWeight: '800' as const, lineHeight: scale(14.63), letterSpacing: scale(2), }, type200: { fontFamily: Montserrat500, fontSize: scale(14), fontWeight: '500' as const, lineHeight: scale(17.07), }, type100: { fontFamily: Montserrat500, fontSize: scale(12), fontWeight: '500' as const, lineHeight: scale(20), },}; // Spacing.export const spacing = { tiny: scale(5), mini: scale(10), small: scale(15), normal: scale(20), big: scale(36), huge: scale(48),}; /** * The Gotham font seems like not 100% aligned vertically in the middle,even * when everything's configured in the middle, just remove this and see for * youself. * FIXME */const fixTextMargin = { ...Platform.select({ ios: { marginTop: scale(3), }, }),}; /** * Get consistent shadows between iOS and Android * @see https://stenbeck.io/styling-shadows-in-react-native-ios-and-android/ */export function elevationShadowStyle( elevation: number, position: ShadowPosition = 'bottom'): ViewStyle { return { elevation, shadowColor: 'black', shadowOffset: { width: 0, height: scale((position === 'bottom' ? 1 : -1) * elevation), }, shadowOpacity: 0.3, shadowRadius: scale(0.8 * elevation), };} export const fullScreen = { backgroundColor, flexGrow: 1, paddingTop: Constants.statusBarHeight,}; /** * @deprecated Use Typography instead. */export const link = { color: colors.orange, fontFamily: Montserrat500, textDecorationLine: 'underline' as const,}; /** * Big text with "Sh*t! I smoked..."" * @deprecated Use Typography instead. */export const shitText = { color: colors.gray700, fontFamily: Montserrat800, fontSize: scale(31), letterSpacing: scale(-1), lineHeight: scale(36), ...fixTextMargin,}; /** * Normal text. * @deprecated Use Typography instead. */export const text = { color: colors.gray600, fontFamily: Montserrat500, fontSize: scale(11), letterSpacing: scale(0.85), lineHeight: scale(15),}; /** * @deprecated Use Typography instead. */export const title = { letterSpacing: scale(3.14), lineHeight: scale(18), color: colors.gray700, fontFamily: Montserrat800, fontSize: scale(12), ...fixTextMargin,}; /** * @deprecated Use Typography instead. */export const withLetterSpacing = { letterSpacing: scale(2),}; export const withPadding = { paddingHorizontal: spacing.normal,};