From 5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb Mon Sep 17 00:00:00 2001 From: Kirill Rogovoy Date: Tue, 20 Jul 2021 21:24:52 +0300 Subject: WIP --- app/theme/color.ts | 64 ------------------------------------------------ app/theme/fonts/index.ts | 12 --------- app/theme/index.ts | 4 --- app/theme/palette.ts | 11 --------- app/theme/spacing.ts | 41 ------------------------------- app/theme/timing.ts | 6 ----- app/theme/typography.ts | 31 ----------------------- 7 files changed, 169 deletions(-) delete mode 100644 app/theme/color.ts delete mode 100644 app/theme/fonts/index.ts delete mode 100644 app/theme/index.ts delete mode 100644 app/theme/palette.ts delete mode 100644 app/theme/spacing.ts delete mode 100644 app/theme/timing.ts delete mode 100644 app/theme/typography.ts (limited to 'app/theme') diff --git a/app/theme/color.ts b/app/theme/color.ts deleted file mode 100644 index aa582e7..0000000 --- a/app/theme/color.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { palette } from './palette' - -/** - * Roles for colors. Prefer using these over the palette. It makes it easier - * to change things. - * - * The only roles we need to place in here are the ones that span through the app. - * - * If you have a specific use-case, like a spinner color. It makes more sense to - * put that in the component. - */ -export const color = { - /** - * The palette is available to use, but prefer using the name. - */ - palette, - /** - * A helper for making something see-thru. Use sparingly as many layers of transparency - * can cause older Android devices to slow down due to the excessive compositing required - * by their under-powered GPUs. - */ - transparent: 'rgba(0, 0, 0, 0)', - /** - * The screen background. - */ - background: palette.white, - /** - * The main tinting color. - */ - primary: palette.orange, - /** - * The main tinting color, but darker. - */ - primaryDarker: palette.orangeDarker, - /** - * A subtle color used for borders and lines. - */ - line: palette.offWhite, - /** - * The default color of text in many components. - */ - text: palette.white, - /** - * Secondary information. - */ - dim: palette.lightGrey, - /** - * Error messages and icons. - */ - error: palette.angry, - - /** - * Storybook background for Text stories, or any stories where - * the text color is color.text, which is white by default, and does not show - * in Stories against the default white background - */ - storybookDarkBg: palette.black, - - /** - * Storybook text color for stories that display Text components against the - * white background - */ - storybookTextColor: palette.black, -} diff --git a/app/theme/fonts/index.ts b/app/theme/fonts/index.ts deleted file mode 100644 index e55248d..0000000 --- a/app/theme/fonts/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -// import * as Font from "expo-font" - -export const initFonts = async () => { - // Refer to ./assets/fonts/custom-fonts.md for instructions. - // ... - // Welcome back! Just uncomment this and replace/append with your font file names! - // ⬇ - // await Font.loadAsync({ - // Montserrat: require("./Montserrat-Regular.ttf"), - // "Montserrat-Regular": require("./Montserrat-Regular.ttf"), - // }) -} diff --git a/app/theme/index.ts b/app/theme/index.ts deleted file mode 100644 index 95cca26..0000000 --- a/app/theme/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './color' -export * from './spacing' -export * from './typography' -export * from './timing' diff --git a/app/theme/palette.ts b/app/theme/palette.ts deleted file mode 100644 index b2b075d..0000000 --- a/app/theme/palette.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const palette = { - black: '#1d1d1d', - white: '#ffffff', - offWhite: '#e6e6e6', - orange: '#FBA928', - orangeDarker: '#EB9918', - lightGrey: '#939AA4', - lighterGrey: '#CDD4DA', - angry: '#dd3333', - deepPurple: '#5D2555', -} diff --git a/app/theme/spacing.ts b/app/theme/spacing.ts deleted file mode 100644 index b1b7935..0000000 --- a/app/theme/spacing.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * NOTE TO DEVS: - * - * Spacing should be consistent and whitespace thought of as a first class technique up - * there with color and typefaces. - * - * Which type of scale you use is based on the design. - * - * If you've got simpler app, you may only need 6 items. Or maybe you want a spacing scale - * to be named: - * - * export const spacing = { - * tiny: 4, - * small: 8, - * medium: 12, - * large: 24, - * huge: 64 - * } - * - * Whatever you choose, try to stick with these, and not freestyle it everywhere. - * - * Feel free to delete this block. - */ - -/** - * The available spacing. - * - * Here's the rough guideline. Customize this for you usage. It's ok to put exceptions - * within the components themselves if they are truly exceptions. - * - * 0 = none - nothing. only here to bust out of a zero-based array. - * 1 = tiny - elements contextually close to each other - * 2 = smaller - for groups of closely related items or perhaps borders - * 3 = small - ? - * 4 = medium - ? - * 5 = medium+ - ? - * 6 = large - between groups of content that aren't related? - * 7 = huge - ? - * 8 = massive - an uncomfortable amount of whitespace - */ -export const spacing = [0, 4, 8, 12, 16, 24, 32, 48, 64] diff --git a/app/theme/timing.ts b/app/theme/timing.ts deleted file mode 100644 index b8b7203..0000000 --- a/app/theme/timing.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const timing = { - /** - * The duration (ms) for quick animations. - */ - quick: 300, -} diff --git a/app/theme/typography.ts b/app/theme/typography.ts deleted file mode 100644 index 1695777..0000000 --- a/app/theme/typography.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Platform } from 'react-native' - -/** - * You can find a list of available fonts on both iOS and Android here: - * https://github.com/react-native-training/react-native-fonts - * - * If you're interested in adding a custom font to your project, - * check out the readme file in ./assets/fonts/ then come back here - * and enter your new font name. Remember the Android font name - * is probably different than iOS. - * More on that here: - * https://github.com/lendup/react-native-cross-platform-text - * - * The various styles of fonts are defined in the component. - */ -export const typography = { - /** - * The primary font. Used in most places. - */ - primary: Platform.select({ ios: 'Helvetica', android: 'normal' }), - - /** - * An alternate font used for perhaps titles and stuff. - */ - secondary: Platform.select({ ios: 'Arial', android: 'sans-serif' }), - - /** - * Lets get fancy with a monospace font! - */ - code: Platform.select({ ios: 'Courier', android: 'monospace' }), -} -- cgit v1.2.3