From 0116e08c2deeda1a2359fa2b7df578db0f943aa5 Mon Sep 17 00:00:00 2001 From: AdriSolid Date: Thu, 8 Apr 2021 16:19:05 +0200 Subject: [PATCH] docs: add createCartoTheme: look and feel & ui --- app/content/react/guides/look-and-feel.md | 36 +++++++++++++++++++++-- app/content/react/library-reference/ui.md | 24 ++++++++++++++- 2 files changed, 57 insertions(+), 3 deletions(-) diff --git a/app/content/react/guides/look-and-feel.md b/app/content/react/guides/look-and-feel.md index f0b0fb54f..0f06277bf 100644 --- a/app/content/react/guides/look-and-feel.md +++ b/app/content/react/guides/look-and-feel.md @@ -14,7 +14,39 @@ There are lots of properties that you can adapt to your needs. Some of the main - [breakpoints](https://material-ui.com/customization/breakpoints/). Support for different screen sizes. -For instance, if you want to change the main color (used for the navigation bar background), you can edit the `App.js` file and add the following instruction before the theme creation: +We have two different ways to handle the theme creation. As an example, let's change the main color (used for the navigation bar background) and the font family for the application title (`subtitle-1`), using both cases. You can edit the `App.js` file and add the following instruction before the theme creation: + +### Using `createCartoTheme` (recommended): + +`cartoThemeOptions` needs to be overwritten before `createCartoTheme` is initialized. + +#### Changing main color: + +```javascript +... +import { cartoThemeOptions, createCartoTheme } from '@carto/react-ui'; +... +cartoThemeOptions.palette.primary.main = "#800000"; +const theme = createCartoTheme(); +... +``` + +#### Changing the font family: + +```javascript +... +import { cartoThemeOptions, createCartoTheme } from '@carto/react-ui'; +... +cartoThemeOptions.typography.subtitle1.fontFamily = "'Times New Roman'"; +const theme = createCartoTheme(); +... +``` + +### Using `cartoThemeOptions`: + +`cartoThemeOptions` needs to be overwritten before `createMuiTheme` is initialized. + +#### Changing main color: ```javascript ... @@ -25,7 +57,7 @@ let theme = createMuiTheme(cartoThemeOptions); ... ``` -If you want to change the font family for the application title (`subtitle-1`), you can add the following instruction before the theme creation: +#### Changing the font family: ```javascript ... diff --git a/app/content/react/library-reference/ui.md b/app/content/react/library-reference/ui.md index eee41d26d..f90f0ffe3 100644 --- a/app/content/react/library-reference/ui.md +++ b/app/content/react/library-reference/ui.md @@ -6,7 +6,7 @@ A set of UI elements to build CARTO for React applications. -The package includes 2 main elements: a set of values to use a Material UI theme with CARTO brand (`cartoThemeOptions`) + a group of widgets: +The package includes 2 main elements: a set of values to use a Material UI theme with CARTO brand (`createCartoTheme` and `cartoThemeOptions`) + a group of widgets: - `WrapperWidgetUI`: a collapsible panel with a title, useful to wrap other UI elements. - `CategoryWidgetUI`: to display with horizontal bars a magnitude for each selected category (eg. population sum per country). @@ -18,6 +18,28 @@ The package includes 2 main elements: a set of values to use a Material UI theme ### Constants & enums +#### createCartoTheme + +Builds the official CARTO Material UI theme. See official doc on theming at [Material UI theming](https://material-ui.com/customization/theming/) + +- **Example**: + + ```js + import { ThemeProvider } from "@material-ui/core"; + import { createCartoTheme } from "@carto/react-ui"; + + // Theme build + const theme = createCartoTheme(); + + // ... and its use in the main App component + return ( + + + // YOUR APP CONTENT + + ); + ``` + #### cartoThemeOptions A tree of configuration elements (colors, font sizes, families...) to define a theme. See official doc on theming at [Material UI theming](https://material-ui.com/customization/theming/)