From 2f8036ee4dd628f510b7173ea86bc8ff2a75fdac Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 13 Aug 2021 06:46:37 -0400 Subject: [PATCH 01/11] Add the rough cut of v6 themes --- CHANGELOG.md | 10 +++++ package.json | 2 +- src/blueDarkAltTheme.ts | 21 ---------- src/blueDarkTheme.ts | 92 +++++++++++++++++++++++++++++------------ src/blueTheme.ts | 43 +++++++++++++++++-- src/index.ts | 40 +++++++++++++++++- 6 files changed, 155 insertions(+), 53 deletions(-) delete mode 100644 src/blueDarkAltTheme.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b6e089..e953c14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## v6.0.0 (Unpublished) + +### Added + +- Many new theme color properties to give greater control over the styles of various components. Note that the global ReactNativePaper namespace will need to be updated in your application to use these properties. + +### Removed +- The `blueDarkAlt` theme has been consolidated into the `blueDark` theme and a selection of wrapper components in the `@pxblue/react-native-components` library. This eliminates the need for using two theme providers and writing your own wrappers for these components. +- `theme.colors.textSecondary` — use `theme.colors.textPalette.secondary` instead. + ## v5.1.0 (March 30, 2021) ### Added diff --git a/package.json b/package.json index e1f1274..fed463a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@pxblue/react-native-themes", "author": "PX Blue ", "license": "BSD-3-Clause", - "version": "5.1.0", + "version": "6.0.0-alpha.0", "description": "React Native themes for PX Blue applications", "main": "./dist/index.js", "scripts": { diff --git a/src/blueDarkAltTheme.ts b/src/blueDarkAltTheme.ts deleted file mode 100644 index c654f4a..0000000 --- a/src/blueDarkAltTheme.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** -Copyright (c) 2020-present, Eaton - -All rights reserved. - -This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. -**/ - -import { blue, black, lightBlue } from '@pxblue/colors'; -import { blueDarkTheme } from './blueDarkTheme'; - -export const blueDarkAltTheme = { - ...blueDarkTheme, - colors: { - ...blueDarkTheme.colors, - primary: blue[500], - accent: lightBlue[500], - background: black[900], - notification: lightBlue[500], - }, -}; diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts index 4e9e464..d364dbd 100644 --- a/src/blueDarkTheme.ts +++ b/src/blueDarkTheme.ts @@ -7,35 +7,75 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r **/ import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, darkBlack, black, lightBlue } from '@pxblue/colors'; +import { blue, red, darkBlack, black, white, lightBlue } from '@pxblue/colors'; import { fontConfig } from './shared'; import Color from 'color'; export const blueDarkTheme: ReactNativePaper.Theme = { ...DefaultTheme, - dark: true, - roundness: 4, - fonts: { - ...configureFonts(fontConfig), - bold: { - fontFamily: 'OpenSans-Bold', - fontWeight: '700', - }, - }, - colors: { - ...DefaultTheme.colors, - primary: blue[200], - primaryBase: blue[500], - accent: lightBlue[200], - background: darkBlack[800], - surface: black[900], - error: red[200], - text: black[50], - textSecondary: black[200], - placeholder: black[200], - onBackground: black[50], - onSurface: black[50], - notification: lightBlue[200], - disabled: Color(black[300]).alpha(0.36).rgb().string(), - }, + dark: true, + roundness: 4, + fonts: { + ...configureFonts(fontConfig), + bold: { + fontFamily: 'OpenSans-Bold', + fontWeight: '700', + }, + }, + colors: { + ...DefaultTheme.colors, + + primary: blue[200], + primaryBase: blue[500], + primaryPalette: { + light: blue[50], + main: blue[200], + dark: blue[500], + }, + + accent: lightBlue[200], + accentPalette: { + light: lightBlue[50], + main: lightBlue[200], + dark: lightBlue[500], + }, + + error: red[200], + errorPalette: { + light: red[50], + main: red[200], + dark: red[500] + }, + divider: Color(black[200]).alpha(0.36).string(), + + background: darkBlack[800], + surface: black[900], + + text: black[50], + placeholder: black[200], + onSurface: black[50], + textPalette: { + primary: black[50], + secondary: black[200], + onPrimary: { + light: black[500], + main: black[500], + dark: white[50], + }, + disabled: black[400], + highlight: black[200], + hint: Color(black[300]).alpha(0.36).string(), + }, + + actionPalette: { + hover: Color(black[50]).alpha(0.1).string(), + active: black[500], + background: black[800], + disabled: Color(black[300]).alpha(0.36).string(), + disabledBackground: Color(black[200]).alpha(0.24).string(), + }, + + disabled: Color(black[300]).alpha(0.36).string(), + notification: lightBlue[200], + }, }; diff --git a/src/blueTheme.ts b/src/blueTheme.ts index 7fd1e19..fd0c99c 100644 --- a/src/blueTheme.ts +++ b/src/blueTheme.ts @@ -7,8 +7,9 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r **/ import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, black, lightBlue, white } from '@pxblue/colors'; +import { blue, red, black, gray, lightBlue, white } from '@pxblue/colors'; import { fontConfig } from './shared'; +import Color from 'color'; export const blueTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -25,13 +26,49 @@ export const blueTheme: ReactNativePaper.Theme = { ...DefaultTheme.colors, primary: blue[500], primaryBase: blue[500], + primaryPalette: { + light: blue[50], + main: blue[500], + dark: blue[700], + }, accent: lightBlue[500], + accentPalette: { + light: lightBlue[50], + main: lightBlue[500], + dark: lightBlue[700], + }, background: white[200], surface: white[50], error: red[500], + errorPalette: { + light: red[50], + main: red[500], + dark: red[700] + }, + divider: Color(black[200]).alpha(0.36).string(), + text: black[500], - textSecondary: black[300], - onBackground: black[500], + placeholder: gray[500], + textPalette: { + primary: black[500], + secondary: gray[500], + onPrimary: { + light: black[500], + main: white[50], + dark: white[50], + }, + disabled: Color(black[500]).alpha(0.3).string(), + highlight: blue[200], + hint: Color(black[500]).alpha(0.3).string(), + }, + actionPalette: { + hover: Color(black[50]).alpha(0.1).string(), + active: gray[500], + background: white[500], + disabled: Color(black[500]).alpha(0.3).string(), + disabledBackground: Color(black[200]).alpha(0.24).string(), + }, + disabled: Color(black[500]).alpha(0.3).string(), onSurface: black[500], notification: lightBlue[500], }, diff --git a/src/index.ts b/src/index.ts index 4cd3566..3b6d3a4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,15 +7,51 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r **/ export { blueTheme as blue } from './blueTheme'; export { blueDarkTheme as blueDark } from './blueDarkTheme'; -export { blueDarkAltTheme as blueDarkAlt } from './blueDarkAltTheme'; // This will still need to be added to an end-user project if they want to access these properties without typescript yelling at them. declare global { + // eslint-disable-next-line @typescript-eslint/no-namespace namespace ReactNativePaper { + // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface ThemeColors { primaryBase: string; - textSecondary: string; + primaryPalette: { + light: string; + main: string; + dark: string; + }; + accentPalette: { + light: string; + main: string; + dark: string; + }; + errorPalette: { + light: string; + main: string; + dark: string; + }; + divider: string; + textPalette: { + primary: string; + secondary: string; + onPrimary: { + light: string; + main: string; + dark: string; + }; + highlight: string; + disabled: string; + hint: string; + }; + actionPalette: { + hover: string; + active: string; + background: string; + disabled: string; + disabledBackground: string; + }; } + // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface ThemeFonts { bold: ThemeFont; } From 18b88dcb9b23b5b16dca07c92b5516d9db5504b5 Mon Sep 17 00:00:00 2001 From: daileytj Date: Mon, 27 Sep 2021 14:03:07 -0400 Subject: [PATCH 02/11] Update theme structure --- package.json | 2 +- src/blueDarkTheme.ts | 144 +++++++++++++++++++++++-------------------- src/blueTheme.ts | 40 +++++++----- src/index.ts | 43 +++++++++++-- 4 files changed, 139 insertions(+), 90 deletions(-) diff --git a/package.json b/package.json index fed463a..a7526ed 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@pxblue/react-native-themes", "author": "PX Blue ", "license": "BSD-3-Clause", - "version": "6.0.0-alpha.0", + "version": "6.0.0-alpha.1", "description": "React Native themes for PX Blue applications", "main": "./dist/index.js", "scripts": { diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts index d364dbd..4961d48 100644 --- a/src/blueDarkTheme.ts +++ b/src/blueDarkTheme.ts @@ -6,76 +6,84 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, darkBlack, black, white, lightBlue } from '@pxblue/colors'; -import { fontConfig } from './shared'; -import Color from 'color'; +import { configureFonts, DefaultTheme } from "react-native-paper"; +import { blue, red, darkBlack, black, white, lightBlue } from "@pxblue/colors"; +import { fontConfig } from "./shared"; +import Color from "color"; export const blueDarkTheme: ReactNativePaper.Theme = { ...DefaultTheme, - dark: true, - roundness: 4, - fonts: { - ...configureFonts(fontConfig), - bold: { - fontFamily: 'OpenSans-Bold', - fontWeight: '700', - }, - }, - colors: { - ...DefaultTheme.colors, - - primary: blue[200], - primaryBase: blue[500], - primaryPalette: { - light: blue[50], - main: blue[200], - dark: blue[500], - }, - - accent: lightBlue[200], - accentPalette: { - light: lightBlue[50], - main: lightBlue[200], - dark: lightBlue[500], - }, - - error: red[200], - errorPalette: { - light: red[50], - main: red[200], - dark: red[500] - }, - divider: Color(black[200]).alpha(0.36).string(), + dark: true, + roundness: 4, + fonts: { + ...configureFonts(fontConfig), + bold: { + fontFamily: "OpenSans-Bold", + fontWeight: "700", + }, + }, + colors: { + ...DefaultTheme.colors, + primary: blue[200], + primaryPalette: { + light: blue[50], + main: blue[200], + dark: blue[500], + }, + accent: lightBlue[200], + accentPalette: { + light: lightBlue[50], + main: lightBlue[200], + dark: lightBlue[500], + }, + error: red[200], + errorPalette: { + light: red[50], + main: red[200], + dark: red[500], + }, + divider: Color(black[200]).alpha(0.36).string(), + background: darkBlack[800], + surface: black[900], + text: black[50], + placeholder: black[200], + onSurface: black[50], + textPalette: { + primary: black[50], + secondary: black[200], + onPrimary: { + light: black[500], + main: black[500], + dark: white[50], + }, + disabled: black[400], + }, + actionPalette: { + active: black[500], + background: black[800], + disabled: Color(black[300]).alpha(0.36).string(), + disabledBackground: Color(black[200]).alpha(0.24).string(), + }, + disabled: Color(black[300]).alpha(0.36).string(), + notification: lightBlue[200], - background: darkBlack[800], - surface: black[900], - - text: black[50], - placeholder: black[200], - onSurface: black[50], - textPalette: { - primary: black[50], - secondary: black[200], - onPrimary: { - light: black[500], - main: black[500], - dark: white[50], - }, - disabled: black[400], - highlight: black[200], - hint: Color(black[300]).alpha(0.36).string(), - }, - - actionPalette: { - hover: Color(black[50]).alpha(0.1).string(), - active: black[500], - background: black[800], - disabled: Color(black[300]).alpha(0.36).string(), - disabledBackground: Color(black[200]).alpha(0.24).string(), - }, - - disabled: Color(black[300]).alpha(0.36).string(), - notification: lightBlue[200], - }, + overrides: { + avatar: { + background: Color(black[50]).alpha(0.1).string(), + }, + chip: { + outlined: { + background: Color(black[200]).alpha(0.2).string(), + }, + flat: { + background: black[500], + }, + }, + toggleButtonGroup: { + checked: { + background: Color(blue[500]).alpha(0.36).string(), + }, + }, + }, + }, }; diff --git a/src/blueTheme.ts b/src/blueTheme.ts index fd0c99c..a146a7a 100644 --- a/src/blueTheme.ts +++ b/src/blueTheme.ts @@ -6,10 +6,10 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -import { configureFonts, DefaultTheme } from 'react-native-paper'; -import { blue, red, black, gray, lightBlue, white } from '@pxblue/colors'; -import { fontConfig } from './shared'; -import Color from 'color'; +import { configureFonts, DefaultTheme } from "react-native-paper"; +import { blue, red, black, gray, lightBlue, white } from "@pxblue/colors"; +import { fontConfig } from "./shared"; +import Color from "color"; export const blueTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -18,14 +18,13 @@ export const blueTheme: ReactNativePaper.Theme = { fonts: { ...configureFonts(fontConfig), bold: { - fontFamily: 'OpenSans-Bold', - fontWeight: '700', + fontFamily: "OpenSans-Bold", + fontWeight: "700", }, }, colors: { ...DefaultTheme.colors, primary: blue[500], - primaryBase: blue[500], primaryPalette: { light: blue[50], main: blue[500], @@ -37,18 +36,18 @@ export const blueTheme: ReactNativePaper.Theme = { main: lightBlue[500], dark: lightBlue[700], }, - background: white[200], - surface: white[50], error: red[500], errorPalette: { light: red[50], main: red[500], - dark: red[700] + dark: red[700], }, divider: Color(black[200]).alpha(0.36).string(), - + background: white[200], + surface: white[50], text: black[500], placeholder: gray[500], + onSurface: black[500], textPalette: { primary: black[500], secondary: gray[500], @@ -58,18 +57,29 @@ export const blueTheme: ReactNativePaper.Theme = { dark: white[50], }, disabled: Color(black[500]).alpha(0.3).string(), - highlight: blue[200], - hint: Color(black[500]).alpha(0.3).string(), }, actionPalette: { - hover: Color(black[50]).alpha(0.1).string(), active: gray[500], background: white[500], disabled: Color(black[500]).alpha(0.3).string(), disabledBackground: Color(black[200]).alpha(0.24).string(), }, disabled: Color(black[500]).alpha(0.3).string(), - onSurface: black[500], notification: lightBlue[500], + overrides: { + snackbar: { + accent: blue[200], + }, + bottomNavigation: { + inactive: blue[200], + }, + button: { + contained: { + text: { + disabled: blue[200], + }, + }, + }, + }, }, }; diff --git a/src/index.ts b/src/index.ts index 3b6d3a4..c070264 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,8 +5,9 @@ All rights reserved. This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. **/ -export { blueTheme as blue } from './blueTheme'; -export { blueDarkTheme as blueDark } from './blueDarkTheme'; +export { blueTheme as blue } from "./blueTheme"; +export { blueDarkTheme as blueDark } from "./blueDarkTheme"; +import { $DeepPartial } from "@callstack/react-theme-provider"; // This will still need to be added to an end-user project if they want to access these properties without typescript yelling at them. declare global { @@ -14,7 +15,6 @@ declare global { namespace ReactNativePaper { // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface ThemeColors { - primaryBase: string; primaryPalette: { light: string; main: string; @@ -39,17 +39,15 @@ declare global { main: string; dark: string; }; - highlight: string; disabled: string; - hint: string; }; actionPalette: { - hover: string; active: string; background: string; disabled: string; disabledBackground: string; }; + overrides: $DeepPartial; } // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface ThemeFonts { @@ -57,3 +55,36 @@ declare global { } } } + +export type ThemeOverrides = { + avatar: { + background: string; + }; + + bottomNavigation: { + inactive: string; + }; + button: { + contained: { + text: { + disabled: string; + }; + }; + }; + chip: { + outlined: { + background: string; + }; + flat: { + background: string; + }; + }; + snackbar: { + accent: string; + }; + toggleButtonGroup: { + checked: { + background: string; + }; + }; +}; From e2198bd04976bb383247c1c7606860731c135b3a Mon Sep 17 00:00:00 2001 From: daileytj Date: Tue, 28 Sep 2021 12:33:42 -0400 Subject: [PATCH 03/11] Add themeOpacity to themes --- src/blueDarkTheme.ts | 17 +++++++++++++---- src/blueTheme.ts | 19 ++++++++++++++----- src/index.ts | 6 ++++++ 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts index 4961d48..53e0ae6 100644 --- a/src/blueDarkTheme.ts +++ b/src/blueDarkTheme.ts @@ -10,6 +10,13 @@ import { configureFonts, DefaultTheme } from "react-native-paper"; import { blue, red, darkBlack, black, white, lightBlue } from "@pxblue/colors"; import { fontConfig } from "./shared"; import Color from "color"; +import { ThemeOpacity } from "."; + +const themeOpacity: ThemeOpacity = { + disabled: 0.36, + divider: 0.36, + disabledBackground: 0.24, +}; export const blueDarkTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -42,7 +49,7 @@ export const blueDarkTheme: ReactNativePaper.Theme = { main: red[200], dark: red[500], }, - divider: Color(black[200]).alpha(0.36).string(), + divider: Color(black[200]).alpha(themeOpacity.divider).string(), background: darkBlack[800], surface: black[900], text: black[50], @@ -61,10 +68,12 @@ export const blueDarkTheme: ReactNativePaper.Theme = { actionPalette: { active: black[500], background: black[800], - disabled: Color(black[300]).alpha(0.36).string(), - disabledBackground: Color(black[200]).alpha(0.24).string(), + disabled: Color(black[300]).alpha(themeOpacity.disabled).string(), + disabledBackground: Color(black[200]) + .alpha(themeOpacity.disabledBackground) + .string(), }, - disabled: Color(black[300]).alpha(0.36).string(), + disabled: Color(black[300]).alpha(themeOpacity.disabled).string(), notification: lightBlue[200], overrides: { diff --git a/src/blueTheme.ts b/src/blueTheme.ts index a146a7a..e6a5d22 100644 --- a/src/blueTheme.ts +++ b/src/blueTheme.ts @@ -10,6 +10,13 @@ import { configureFonts, DefaultTheme } from "react-native-paper"; import { blue, red, black, gray, lightBlue, white } from "@pxblue/colors"; import { fontConfig } from "./shared"; import Color from "color"; +import { ThemeOpacity } from "."; + +const themeOpacity: ThemeOpacity = { + disabled: 0.3, + divider: 0.36, + disabledBackground: 0.24, +}; export const blueTheme: ReactNativePaper.Theme = { ...DefaultTheme, @@ -42,7 +49,7 @@ export const blueTheme: ReactNativePaper.Theme = { main: red[500], dark: red[700], }, - divider: Color(black[200]).alpha(0.36).string(), + divider: Color(black[200]).alpha(themeOpacity.divider).string(), background: white[200], surface: white[50], text: black[500], @@ -56,15 +63,17 @@ export const blueTheme: ReactNativePaper.Theme = { main: white[50], dark: white[50], }, - disabled: Color(black[500]).alpha(0.3).string(), + disabled: Color(black[500]).alpha(themeOpacity.disabled).string(), }, actionPalette: { active: gray[500], background: white[500], - disabled: Color(black[500]).alpha(0.3).string(), - disabledBackground: Color(black[200]).alpha(0.24).string(), + disabled: Color(black[500]).alpha(themeOpacity.disabled).string(), + disabledBackground: Color(black[200]) + .alpha(themeOpacity.disabledBackground) + .string(), }, - disabled: Color(black[500]).alpha(0.3).string(), + disabled: Color(black[500]).alpha(themeOpacity.disabled).string(), notification: lightBlue[500], overrides: { snackbar: { diff --git a/src/index.ts b/src/index.ts index c070264..650e019 100644 --- a/src/index.ts +++ b/src/index.ts @@ -88,3 +88,9 @@ export type ThemeOverrides = { }; }; }; + +export type ThemeOpacity = { + disabled: number; + divider: number; + disabledBackground: number; +}; From ea14ee3a1a5f1a27699a80e4543aa9a38ac48f00 Mon Sep 17 00:00:00 2001 From: daileytj Date: Tue, 28 Sep 2021 13:58:58 -0400 Subject: [PATCH 04/11] Update themes one more time... --- src/blueDarkTheme.ts | 13 ++++----- src/blueTheme.ts | 5 ++-- src/index.ts | 41 ++------------------------ src/shared.ts | 69 ++++++++++++++++++++++++++++++++++++++------ 4 files changed, 71 insertions(+), 57 deletions(-) diff --git a/src/blueDarkTheme.ts b/src/blueDarkTheme.ts index 53e0ae6..e907086 100644 --- a/src/blueDarkTheme.ts +++ b/src/blueDarkTheme.ts @@ -8,14 +8,14 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r import { configureFonts, DefaultTheme } from "react-native-paper"; import { blue, red, darkBlack, black, white, lightBlue } from "@pxblue/colors"; -import { fontConfig } from "./shared"; +import { fontConfig, ThemeOpacity } from "./shared"; import Color from "color"; -import { ThemeOpacity } from "."; const themeOpacity: ThemeOpacity = { disabled: 0.36, divider: 0.36, disabledBackground: 0.24, + actionOpacity: 0.1, }; export const blueDarkTheme: ReactNativePaper.Theme = { @@ -75,15 +75,14 @@ export const blueDarkTheme: ReactNativePaper.Theme = { }, disabled: Color(black[300]).alpha(themeOpacity.disabled).string(), notification: lightBlue[200], - + opacity: themeOpacity, overrides: { avatar: { - background: Color(black[50]).alpha(0.1).string(), + background: Color(black[50]) + .alpha(themeOpacity.actionOpacity) + .string(), }, chip: { - outlined: { - background: Color(black[200]).alpha(0.2).string(), - }, flat: { background: black[500], }, diff --git a/src/blueTheme.ts b/src/blueTheme.ts index e6a5d22..5d485aa 100644 --- a/src/blueTheme.ts +++ b/src/blueTheme.ts @@ -8,14 +8,14 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r import { configureFonts, DefaultTheme } from "react-native-paper"; import { blue, red, black, gray, lightBlue, white } from "@pxblue/colors"; -import { fontConfig } from "./shared"; +import { fontConfig, ThemeOpacity } from "./shared"; import Color from "color"; -import { ThemeOpacity } from "."; const themeOpacity: ThemeOpacity = { disabled: 0.3, divider: 0.36, disabledBackground: 0.24, + actionOpacity: 1, }; export const blueTheme: ReactNativePaper.Theme = { @@ -75,6 +75,7 @@ export const blueTheme: ReactNativePaper.Theme = { }, disabled: Color(black[500]).alpha(themeOpacity.disabled).string(), notification: lightBlue[500], + opacity: themeOpacity, overrides: { snackbar: { accent: blue[200], diff --git a/src/index.ts b/src/index.ts index 650e019..535b916 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r export { blueTheme as blue } from "./blueTheme"; export { blueDarkTheme as blueDark } from "./blueDarkTheme"; import { $DeepPartial } from "@callstack/react-theme-provider"; +import { ThemeOpacity, ThemeOverrides } from "./shared"; // This will still need to be added to an end-user project if they want to access these properties without typescript yelling at them. declare global { @@ -48,6 +49,7 @@ declare global { disabledBackground: string; }; overrides: $DeepPartial; + opacity: Partial; } // eslint-disable-next-line @typescript-eslint/consistent-type-definitions interface ThemeFonts { @@ -55,42 +57,3 @@ declare global { } } } - -export type ThemeOverrides = { - avatar: { - background: string; - }; - - bottomNavigation: { - inactive: string; - }; - button: { - contained: { - text: { - disabled: string; - }; - }; - }; - chip: { - outlined: { - background: string; - }; - flat: { - background: string; - }; - }; - snackbar: { - accent: string; - }; - toggleButtonGroup: { - checked: { - background: string; - }; - }; -}; - -export type ThemeOpacity = { - disabled: number; - divider: number; - disabledBackground: number; -}; diff --git a/src/shared.ts b/src/shared.ts index 959efc6..dc6e95a 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -1,21 +1,32 @@ -type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; +type FontWeight = + | "normal" + | "bold" + | "100" + | "200" + | "300" + | "400" + | "500" + | "600" + | "700" + | "800" + | "900"; const defaultFontConfig = { regular: { - fontFamily: 'OpenSans-Regular', - fontWeight: '400' as FontWeight, + fontFamily: "OpenSans-Regular", + fontWeight: "400" as FontWeight, }, medium: { - fontFamily: 'OpenSans-SemiBold', - fontWeight: '600' as FontWeight, + fontFamily: "OpenSans-SemiBold", + fontWeight: "600" as FontWeight, }, light: { - fontFamily: 'OpenSans-Light', - fontWeight: '300' as FontWeight, + fontFamily: "OpenSans-Light", + fontWeight: "300" as FontWeight, }, thin: { - fontFamily: 'OpenSans-Light', - fontWeight: '100' as FontWeight, + fontFamily: "OpenSans-Light", + fontWeight: "100" as FontWeight, }, }; @@ -24,3 +35,43 @@ export const fontConfig = { ios: defaultFontConfig, android: defaultFontConfig, }; + +export type ThemeOverrides = { + avatar: { + background: string; + }; + + bottomNavigation: { + inactive: string; + }; + button: { + contained: { + text: { + disabled: string; + }; + }; + }; + chip: { + outlined: { + background: string; + }; + flat: { + background: string; + }; + }; + snackbar: { + accent: string; + }; + toggleButtonGroup: { + checked: { + background: string; + }; + }; +}; + +export type ThemeOpacity = { + disabled: number; + divider: number; + disabledBackground: number; + actionOpacity: number; +}; From f7848704e04c2ff1f7eb621a8253099a3f604cd9 Mon Sep 17 00:00:00 2001 From: daileytj Date: Wed, 29 Sep 2021 14:52:02 -0400 Subject: [PATCH 05/11] Update README - first pass --- README.md | 191 ++++++++++++++++++++++++------------------------------ 1 file changed, 83 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index 8731a70..17242af 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # PX Blue themes for React Native applications + [![](https://img.shields.io/circleci/project/github/pxblue/react-native-themes/master.svg?style=flat)](https://circleci.com/gh/pxblue/react-native-themes/tree/master) [![](https://img.shields.io/npm/v/@pxblue/react-native-themes.svg?label=@pxblue/react-native-themes&style=flat)](https://www.npmjs.com/package/@pxblue/react-native-themes) @@ -45,9 +46,7 @@ import * as PXBThemes from '@pxblue/react-native-themes'; ### Dark Theme -The theming mechanism for React Native Paper is a bit limited in the amount of customization available for components. Because of this, there are two dark themes available from PX Blue that should be applied to different components. - -The main theme should be applied using a `Provider` that wraps your application and passing in the theme (`blueDark`). This will be applied to the majority of the component in the RNP library. +To use the light theme in your application, simply wrap the app in a `Provider` and pass in your desired theme (`blueDark`). ```tsx import { Provider as ThemeProvider} from 'react-native-paper'; @@ -58,111 +57,11 @@ import * as PXBThemes from '@pxblue/react-native-themes'; ``` -#### Alternate Dark Theme - -The alternate dark theme (`blueDarkAlt`) should be applied to select components to give them the desired PX Blue styling. The following components should use the alternate dark theme: - -- Activity Indicator -- Appbar -- Avatar -- Badge -- Bottom Navigation -- Button (`contained` mode variant) -- FAB -- ProgressBar -- Snackbar -- TextInput - -![Dark Theme Infographic](https://raw.githubusercontent.com/pxblue/themes/master/react-native/assets/dark-theme-infographic.png) - -1. For these components, make sure you are using the darkThemeAlt. -2. Do not use the darkTheme or these components will render using the incorrect color scheme. - -##### One-Off Usage - -If you are only using a component from this list once or twice in your application, you can pass the alternate theme directly to the component through the `theme` prop. - -```tsx -import { useTheme } from 'react-native-paper'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -const theme = useTheme(); -... - -``` - -##### Component-Based Usage - -If you are using components frequently, it's best to create a wrapper component that will handle the alternate theme logic. This will allow you to keep your code more readable and avoid errors with inconsistent theme application. - -To do this, you define a wrapper component that acts as a pass-through for all of the default props and adds the theme logic. - -```tsx -import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -import { SomeComponent as PaperComponent, useTheme } from 'react-native-paper'; -... -export const SomeComponent: typeof PaperComponent = (props) => { - const theme = useTheme(props.theme); - return ( - - ); -}; -``` - -You would then use your custom wrapper component throughout your application instead of using the component directly from React Native Paper: - -```tsx -import { SomeComponent } from './path/to/SomeComponent'; -... - -``` - -The `Button` component is a special case that requires the alternate theme only if you are using the contained mode. The wrapper component for the `Button` should look like: - -```tsx -import React from 'react'; -import { blueDarkAlt } from '@pxblue/react-native-themes'; -import { Button, useTheme } from 'react-native-paper'; -... -export const MyCustomButton: typeof Button = (props) => { - const theme = useTheme(props.theme); - return ( -