From 3b62d6f85d26cd97bea698d6df1431fbc0d871c4 Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 21:53:52 -0800 Subject: [PATCH 1/6] chore(rna): theming docs --- docs/src/components/Layout/Sidebar.tsx | 23 ++-- docs/src/data/links.tsx | 4 +- .../configuration/hidesignup.react-native.mdx | 4 - .../customization.styling.react-native.mdx | 24 ++++- .../customization/index.page.mdx | 2 +- .../theming/dark-mode/index.page.mdx | 2 +- .../theming/dark-mode/react-native.mdx | 101 ++++++++++++++++++ .../pages/[platform]/theming/index.page.mdx | 2 +- .../theming/theming.react-native.mdx | 101 ++++++++++++++++++ .../Authenticator/Theming/DarkMode.tsx | 46 ++++++++ .../Authenticator/Theming/Example.tsx | 38 +++++++ 11 files changed, 324 insertions(+), 23 deletions(-) create mode 100644 docs/src/pages/[platform]/theming/dark-mode/react-native.mdx create mode 100644 docs/src/pages/[platform]/theming/theming.react-native.mdx create mode 100644 examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx create mode 100644 examples/react-native/src/features/Authenticator/Theming/Example.tsx diff --git a/docs/src/components/Layout/Sidebar.tsx b/docs/src/components/Layout/Sidebar.tsx index 2eb820a453e..abfd70534bf 100644 --- a/docs/src/components/Layout/Sidebar.tsx +++ b/docs/src/components/Layout/Sidebar.tsx @@ -184,19 +184,16 @@ const SecondaryNav = (props) => { ))} - {/* React Native does not yet support theming */} - {isReactNative ? null : ( - } - value="theming" - > - {theming.map(({ label, ...rest }) => ( - - {label} - - ))} - - )} + } + value="theming" + > + {theming.map(({ label, ...rest }) => ( + + {label} + + ))} + {/* Flutter and React Native don't have guides at this time */} {isFlutter || isReactNative ? null : ( diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx index 5efcfd9d358..97ee3abb060 100644 --- a/docs/src/data/links.tsx +++ b/docs/src/data/links.tsx @@ -497,7 +497,7 @@ export const theming: ComponentNavItem[] = [ { href: '/theming', label: 'Overview', - platforms: ['react', 'vue', 'angular', 'flutter'], + platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'], }, { href: '/theming/responsive', @@ -530,7 +530,7 @@ export const theming: ComponentNavItem[] = [ { href: '/theming/dark-mode', label: 'Dark mode', - platforms: ['react', 'vue', 'angular', 'flutter'], + platforms: ['react', 'vue', 'angular', 'flutter', 'react-native'], }, { href: '/theming/css-variables', diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx index bc684af1905..717855c4e72 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.react-native.mdx @@ -9,7 +9,3 @@ The Authenticator has an option to hide the sign up page including the `Create A {({ platform }) => import(`./hidesignup.default.${platform}.mdx`)} - - - - diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx index cdc3bffff1f..beed8a73af9 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx @@ -1 +1,23 @@ -TODO: REACT NATIVE DOCS + +import { AuthStyle } from './AuthStyle'; +import { Example } from '@/components/Example'; + +## Styling + +### Theme Provider + +You can update the style of the Authenticator by wrapping it with a [ThemeProvider](/react-native/theming). Then create a [theme object](/react-native/theming#theme-structure), with all your font customizations. + +```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/Theming/Example.tsx +``` + +> If you have TypeScript enabled, all the object keys will be present when creating the [theme object](/react-native/theming#theme-structure). This will help speed up your development time while creating themes. + +### Dark mode + +Amplify UI comes with a default dark mode implementation + +```jsx file=../../../../../../../examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx +``` + +[Learn more about dark mode](/react-native/theming/dark-mode) diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx index d585f5a2173..f6e5123697a 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx @@ -59,7 +59,7 @@ export async function getStaticProps() { {({ platform }) => import(`./formfields/form-fields.${platform}.mdx`)} - + {({ platform }) => import(`./customization.styling.${platform}.mdx`)} diff --git a/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx b/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx index e6aff63eb13..ac27ac64fa5 100644 --- a/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx +++ b/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx @@ -1,7 +1,7 @@ --- title: Dark Mode metaDescription: Dark Mode uses a darker color palette for all screens, making foreground content stand out against darker backgrounds. -supportedFrameworks: react|angular|vue|flutter +supportedFrameworks: react|angular|vue|flutter|react-native --- import { Fragment } from '@/components/Fragment'; diff --git a/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx b/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx new file mode 100644 index 00000000000..e5cd5203375 --- /dev/null +++ b/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx @@ -0,0 +1,101 @@ +import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react'; +import { Example, ExampleCode } from '@/components/Example'; + +## Overview + +Amplify UI supports color modes/schemes, like Dark Mode, through theme overrides. Amplify UI Theme Overrides let you define different theme styles in different contexts, such as color mode. + +## ThemeProvider + +The `ThemeProvider` accepts a `colorMode` prop which can be `light`, `dark`, or `system`. + + + +If you have multiple `ThemeProvider`s in your application, make sure to store `colorMode` in the application's state or context and pass it to each `ThemeProvider` or else some parts of your app won't have the right color mode applied. Also, because the theme uses CSS variables which are inherited, your application can have some weird behavior with nested themes and color modes. + + + +## Default Dark Mode + +Amplify UI comes with a default dark mode that you can use. Import the `defaultDarkModeOverride` and add it to the overrides array in your theme. + +If you want to honor your users' operating system preference for color mode, you can send the `useColorScheme` hook from React Native to the `colorMode` prop on the `ThemeProvider`. + +```jsx +import * as React from 'react'; +import { useColorScheme } from 'react-native'; +import { defaultDarkModeOverride, ThemeProvider } from '@aws-amplify/ui-react'; + +const theme = { + overrides: [defaultDarkModeOverride], +}; + +export const DefaultDarkMode = () => { + const colorMode = useColorScheme(); + + return ( + + {/* ... */} + + ); +}; +``` + +You can also control the color mode in your application as well by keeping a state variable that is either `'light'` or `'dark'`. + +```jsx +import * as React from 'react'; +import { Pressable, Text } from 'react-native'; +import { ThemeProvider } from '@aws-amplify/ui-react-native'; + +const theme = { + overrides: [defaultDarkModeOverride], +}; + +export const CustomDarkModeExample = () => { + const [colorMode, setColorMode] = React.useState('light'); + + return ( + // Note: color mode overrides are scoped to the ThemeProvider + // if you use multiple providers + + setColorMode(colorMode === 'light' ? 'dark' : 'light')}> + Change theme + + + ); +}; +``` + +## Custom dark mode + +You can create your own dark mode override as well. The dark mode override will be applied when `colorMode` on the `ThemeProvider` is set to `dark`. + +```jsx +const theme = { + overrides: [ + { + colorMode: 'dark', + tokens: { + colors: { + font: { + primary: '{colors.pink.100}', + secondary: '{colors.pink.90}', + tertiary: '{colors.pink.80}', + }, + background: { + primary: '{colors.purple.10}', + secondary: '{colors.purple.20}', + tertiary: '{colors.purple.40}', + }, + border: { + primary: '{colors.pink.60}', + secondary: '{colors.pink.40}', + tertiary: '{colors.pink.20}', + }, + }, + }, + }, + ], +}; +``` diff --git a/docs/src/pages/[platform]/theming/index.page.mdx b/docs/src/pages/[platform]/theming/index.page.mdx index 6477eeb475c..804080cc491 100644 --- a/docs/src/pages/[platform]/theming/index.page.mdx +++ b/docs/src/pages/[platform]/theming/index.page.mdx @@ -2,7 +2,7 @@ title: Overview metaTitle: Theming metaDescription: A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme is a structured object of design tokens, breakpoints, and overrides. -supportedFrameworks: react|angular|vue|flutter +supportedFrameworks: react|angular|vue|flutter|react-native --- import { Fragment } from '@/components/Fragment'; diff --git a/docs/src/pages/[platform]/theming/theming.react-native.mdx b/docs/src/pages/[platform]/theming/theming.react-native.mdx new file mode 100644 index 00000000000..5ac76bbd60f --- /dev/null +++ b/docs/src/pages/[platform]/theming/theming.react-native.mdx @@ -0,0 +1,101 @@ +A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme is a structured object of [design tokens](#design-tokens) and [overrides](#overrides). The goals of the Amplify UI theme are: + + +## Getting started + +Wrap your application in a `ThemeProvider` and pass in a `Theme` object + +```jsx +import { ThemeProvider } from '@aws-amplify/ui-react-native'; + +const theme = { + tokens: { + colors: { + font: { + primary: 'black' + } + } + } +} + +export default function App() { + return ( + + {/* ... */} + + ) +} +``` + +## Theme Structure + +### Design Tokens + +Amplify UI uses [Design Tokens](https://www.designtokens.org/) for storing design decisions and is the primary way to theme the components. + +Amplify UI follows the [System UI Theme Specification](https://system-ui.com/theme/) with some modifications. The System UI Theme Specification outlines top-level namespaces for categorizing design token types. For example, colors go under the `colors` namespace. This specification is used by [Stitches](https://stitches.dev/docs/tokens), [Chakra-UI](https://chakra-ui.com/docs/styled-system/theme), and [Evergreen](https://evergreen.segment.com/introduction/theming). + +You can define as much or as little as you like in your theme. A simple might define the brand colors and not much else + +```javascript +const theme = { + tokens: { + colors: { + brand: { + primary: { + 10: '', + 20: '', + 40: '', + 60: '', + 80: '', + 90: '', + 100: '', + } + } + } + } +} +``` + +A full theme would look like this: + +```javascript +const theme = { + tokens: { + colors: {}, + fontSizes: {}, + } +} +``` + +### Overrides + +An override is a collection of design tokens that should take precedence in certain situations, like dark mode. Overrides are built into the theme configuration, but kept separate, so that token references and values can be resolved at runtime. + +```javascript +const theme = { + tokens: { + colors: { + white: '#fff', + black: '#000', + background: { + // This will resolve to #fff in light mode + // and #000 in dark mode because of the override below + primary: '{colors.white}' + }, + font: { + primary: '{colors.black}' + } + } + }, + overrides: [{ + colorMode: 'dark', + tokens: { + colors: { + white: '#000', + black: '#fff' + } + } + }] +} +``` diff --git a/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx new file mode 100644 index 00000000000..56313e4b5f4 --- /dev/null +++ b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { + Authenticator, + defaultDarkModeOverride, + ThemeProvider, +} from '@aws-amplify/ui-react-native'; +import { Amplify } from 'aws-amplify'; + +import config from './aws-exports'; +import { useColorScheme } from 'react-native'; + +Amplify.configure(config); + +function App() { + const colorMode = useColorScheme(); + return ( + + + + + + ); +} + +export default App; diff --git a/examples/react-native/src/features/Authenticator/Theming/Example.tsx b/examples/react-native/src/features/Authenticator/Theming/Example.tsx new file mode 100644 index 00000000000..741a018e3c5 --- /dev/null +++ b/examples/react-native/src/features/Authenticator/Theming/Example.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react-native'; +import { Amplify } from 'aws-amplify'; + +import config from './aws-exports'; + +Amplify.configure(config); + +function App() { + return ( + + + + + + ); +} + +export default App; From c036afbb882481dea124b544552620313dbac7d8 Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 21:58:26 -0800 Subject: [PATCH 2/6] chore(docs): updates --- .../customization/customization.styling.react-native.mdx | 3 --- docs/src/pages/[platform]/theming/theming.react-native.mdx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx index beed8a73af9..6d5d968485f 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.styling.react-native.mdx @@ -1,7 +1,4 @@ -import { AuthStyle } from './AuthStyle'; -import { Example } from '@/components/Example'; - ## Styling ### Theme Provider diff --git a/docs/src/pages/[platform]/theming/theming.react-native.mdx b/docs/src/pages/[platform]/theming/theming.react-native.mdx index 5ac76bbd60f..35303c171da 100644 --- a/docs/src/pages/[platform]/theming/theming.react-native.mdx +++ b/docs/src/pages/[platform]/theming/theming.react-native.mdx @@ -1,4 +1,4 @@ -A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme is a structured object of [design tokens](#design-tokens) and [overrides](#overrides). The goals of the Amplify UI theme are: +A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme is a structured object of [design tokens](#design-tokens) and [overrides](#overrides). ## Getting started From df1fcf6f269e48fa8f11acddb5bec2fb76d93c4d Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 22:11:31 -0800 Subject: [PATCH 3/6] chore: updates --- .../[platform]/theming/theming.react-native.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/[platform]/theming/theming.react-native.mdx b/docs/src/pages/[platform]/theming/theming.react-native.mdx index 35303c171da..c488f61bc42 100644 --- a/docs/src/pages/[platform]/theming/theming.react-native.mdx +++ b/docs/src/pages/[platform]/theming/theming.react-native.mdx @@ -43,13 +43,13 @@ const theme = { colors: { brand: { primary: { - 10: '', - 20: '', - 40: '', - 60: '', - 80: '', - 90: '', - 100: '', + 10: '{colors.pink.10}', + 20: '{colors.pink.20}', + 40: '{colors.pink.40}', + 60: '{colors.pink.60}', + 80: '{colors.pink.80}', + 90: '{colors.pink.90}', + 100: '{colors.pink.100}', } } } From 1ca19f263f2a03f567f902cfab8d9cbc2eb8d430 Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 22:28:28 -0800 Subject: [PATCH 4/6] chore: updates --- docs/src/pages/[platform]/theming/dark-mode/index.page.mdx | 2 +- docs/src/pages/[platform]/theming/dark-mode/react-native.mdx | 2 +- docs/src/pages/[platform]/theming/index.page.mdx | 2 +- .../src/features/Authenticator/Theming/DarkMode.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx b/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx index ac27ac64fa5..a5351a25177 100644 --- a/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx +++ b/docs/src/pages/[platform]/theming/dark-mode/index.page.mdx @@ -1,7 +1,7 @@ --- title: Dark Mode metaDescription: Dark Mode uses a darker color palette for all screens, making foreground content stand out against darker backgrounds. -supportedFrameworks: react|angular|vue|flutter|react-native +supportedFrameworks: all --- import { Fragment } from '@/components/Fragment'; diff --git a/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx b/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx index e5cd5203375..05d0e147efb 100644 --- a/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx +++ b/docs/src/pages/[platform]/theming/dark-mode/react-native.mdx @@ -24,7 +24,7 @@ If you want to honor your users' operating system preference for color mode, you ```jsx import * as React from 'react'; import { useColorScheme } from 'react-native'; -import { defaultDarkModeOverride, ThemeProvider } from '@aws-amplify/ui-react'; +import { defaultDarkModeOverride, ThemeProvider } from '@aws-amplify/ui-react-native'; const theme = { overrides: [defaultDarkModeOverride], diff --git a/docs/src/pages/[platform]/theming/index.page.mdx b/docs/src/pages/[platform]/theming/index.page.mdx index 804080cc491..7cf974ea884 100644 --- a/docs/src/pages/[platform]/theming/index.page.mdx +++ b/docs/src/pages/[platform]/theming/index.page.mdx @@ -2,7 +2,7 @@ title: Overview metaTitle: Theming metaDescription: A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme is a structured object of design tokens, breakpoints, and overrides. -supportedFrameworks: react|angular|vue|flutter|react-native +supportedFrameworks: all --- import { Fragment } from '@/components/Fragment'; diff --git a/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx index 56313e4b5f4..0960f945cac 100644 --- a/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx +++ b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useColorScheme } from 'react-native'; import { Authenticator, @@ -8,7 +9,6 @@ import { import { Amplify } from 'aws-amplify'; import config from './aws-exports'; -import { useColorScheme } from 'react-native'; Amplify.configure(config); From 76dde1164fdbc4c70703740504a9800c3658bce6 Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 23:27:50 -0800 Subject: [PATCH 5/6] Update examples/react-native/src/features/Authenticator/Theming/Example.tsx Co-authored-by: Caleb Pollman --- .../react-native/src/features/Authenticator/Theming/Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react-native/src/features/Authenticator/Theming/Example.tsx b/examples/react-native/src/features/Authenticator/Theming/Example.tsx index 741a018e3c5..8b407d095e8 100644 --- a/examples/react-native/src/features/Authenticator/Theming/Example.tsx +++ b/examples/react-native/src/features/Authenticator/Theming/Example.tsx @@ -29,7 +29,7 @@ function App() { }} > - + ); From 96ca110bb388c8203824f9cd36b1ae6a68b09d8b Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Mon, 21 Nov 2022 23:27:57 -0800 Subject: [PATCH 6/6] Update examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx Co-authored-by: Caleb Pollman --- .../src/features/Authenticator/Theming/DarkMode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx index 0960f945cac..c1284f6b10f 100644 --- a/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx +++ b/examples/react-native/src/features/Authenticator/Theming/DarkMode.tsx @@ -37,7 +37,8 @@ function App() { }} > - + +``` );