diff --git a/docs/colorMode.md b/docs/colorMode.md
index 170412cbf..e7f7ff4a4 100644
--- a/docs/colorMode.md
+++ b/docs/colorMode.md
@@ -87,6 +87,83 @@ export default function () {
);
}
```
+## _light and _dark Pseudo props
+
+All components accepts _light and _dark props which applies the passed props on dark and light mode.
+
+```SnackPlayer name=PseudoProps%20Usage
+import React from 'react';
+import {
+ Heading,
+ useColorMode,
+ Button,
+ HStack,
+ Avatar,
+ Center,
+ useColorModeValue,
+ NativeBaseProvider
+} from 'native-base';
+
+function PseduoPropsUsage () {
+ const { toggleColorMode } = useColorMode();
+ return (
+ <>
+ I'm a Heading
+
+
+
+
+
+
+ );
+}
+
+const LocalWrapper = ({ children }) => {
+ const bg = useColorModeValue('gray.200', 'gray.800')
+ return (
+
+ {children}
+
+ );
+};
+
+export default function () {
+ return (
+
+
+
+
+
+ );
+}
+
+```
+
## Default color mode
diff --git a/docs/default-theme.md b/docs/default-theme.md
index 6126f0909..ca6cc3918 100644
--- a/docs/default-theme.md
+++ b/docs/default-theme.md
@@ -30,7 +30,7 @@ To manage Typography options, the theme object supports the following keys:
```jsx
const typography = {
letterSpacings: {
- xxs: -1.5,
+ '2xs': -1.5,
xs: -0.5,
sm: 0,
md: 0.1,
@@ -42,20 +42,16 @@ const typography = {
'5xl': 1.5,
},
lineHeights: {
- none: 1,
- shorter: 1.25,
- short: 1.375,
- base: 1.5,
- tall: 1.625,
- taller: '2',
- 3: '12px',
- 4: '16px',
- 5: '20px',
- 6: '24px',
- 7: '28px',
- 8: '32px',
- 9: '36px',
- 10: '40px',
+ '2xs': 16,
+ xs: 18,
+ sm: 20,
+ md: 22,
+ lg: 24,
+ xl: 28,
+ '2xl': 32,
+ '3xl': 40,
+ '4xl': 48,
+ '5xl': 64,
},
fontWeights: {
hairline: 100,
@@ -67,14 +63,15 @@ const typography = {
bold: 700,
extrabold: 800,
black: 900,
+ extrablack: 950,
},
fonts: {
- heading: '',
- body: '',
- mono: '',
+ heading: undefined,
+ body: undefined,
+ mono: undefined,
},
fontSizes: {
- xxs: 10,
+ '2xs': 10,
xs: 12,
sm: 14,
md: 16,
@@ -100,6 +97,30 @@ The `size` key allows you to customize the global spacing and sizing scale for
+## Opacity
+
+The `opacity` key is mainly used to allow you to define colors opacity using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color.
+
+```jsx
+const opacity = {
+ 0: 0,
+ 5: 0.05,
+ 10: 0.1,
+ 20: 0.2,
+ 25: 0.25,
+ 30: 0.3,
+ 40: 0.4,
+ 50: 0.5,
+ 60: 0.6,
+ 70: 0.7,
+ 75: 0.75,
+ 80: 0.8,
+ 90: 0.9,
+ 95: 0.95,
+ 100: 1,
+};
+```
+
## Shadows
The `shadow` key allows you to customize the global box shadow for your project.
@@ -209,4 +230,4 @@ export default {
};
```
-Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base).
+Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base).
diff --git a/docs/migration/v31tov32.md b/docs/migration/v31tov32.md
new file mode 100644
index 000000000..d46c07a5c
--- /dev/null
+++ b/docs/migration/v31tov32.md
@@ -0,0 +1,73 @@
+---
+id: v3.1.0-to-3.2.0
+title: Upgrading to 3.2.0
+---
+
+As we continue to improve NativeBase v3 we got a lot of feature requests and we also reimagined our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code.
+
+But like everything comes at a price, `version 3.2.0` also comes with a few breaking changes from 3.1.0 . But don't worry we don't want to leave all the hassel on to you therefore we have created a code mod that will run over your project and migrate to v3.2.0 where ever it can and notify you of what is left to be migrated if any.
+
+To upgrade to 3.2.0 just go into your root directory and run the below command.
+
+```bash
+npx upgrade native-base-code-mode
+```
+
+:::caution
+
+The above **code mod** only works for migrating from **3.0.0 - 3.1.0 to 3.2.0** . I doesn't support migrating from v2 to v3 currently.
+
+:::
+
+### Log of Breaking Changes
+
+- Theme token changes
+
+ ```js
+ // ------------------------- radius.ts -------------------------
+
+ Radius
+ "sm" -> "xs"
+ "md" -> "sm"
+ "lg" -> "md"
+ "xl" -> "lg"
+ "pill" -> "25"
+
+ // ------------------------- typography.ts -------------------------
+ letterSpacing
+ "xxs" -> "2xs"
+
+ lineHeight
+ "none" -> "2xs"
+ "shorter" -> "sm"
+ "short" -> "md"
+ "base" -> "lg"
+ "tall" -> 26
+ "taller" -> "2xl"
+ "3" -> 12
+ "4" -> "2xs"
+ "5" -> "sm"
+ "6" -> "lg"
+ "7" -> "xl"
+ "8" -> "2xl"
+ "9" -> 36
+ "10" -> "3xl"
+
+ fontSizes
+ "xxs" -> "2xs"
+ ```
+
+- All utility props now takes string values as valid type, number is no longer a valid value type.
+
+ This means that if you pass any value that is a number into a utility prop, then it will be treated as invalid and based on you strictMode config will show you error, warning or just ignore it.
+
+ ```js
+ // Incorrect Way to pass utility props
+ ❌
+
+ ```
+
+ ```js
+ // Correct Way to pass utility props
+ ✅
+ ```
diff --git a/docs/strict-mode.md b/docs/strict-mode.md
new file mode 100644
index 000000000..2d66bb859
--- /dev/null
+++ b/docs/strict-mode.md
@@ -0,0 +1,42 @@
+---
+id: strict-mode
+title: Strict Mode
+---
+
+NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev enviornment. A really handy tool to maintain best practices through out your codebase.
+
+## What it does?
+
+Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warning` and `off` by default it is set to `warning`. Based on your choosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing.
+
+## Levels of Strictness
+
+- Error
+ Choosing this mode will stop your app entierly and throw an error indicating the cause of the error.
+- Warning
+ Choosing this mode will not stop your app but will show warnings to help you improve on your previous code.
+- Off
+ Choosing this mode simply means you want to go rogue and not follow the design system and best practices.
+
+## How to change the mode?
+
+To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warning` and `off` which ever suits your usecase :
+
+```jsx
+import { INativebaseConfig, NativeBaseProvider } from 'native-base';
+
+// ignore the INativebaseConfig if you are not using typescript
+
+const config: INativebaseConfig = {
+ // rest of the config keys like dependencies can go here
+ strictMode: 'warning',
+};
+```
+
+and pass this as a prop in your App `NativeBaseProvider`
+
+```jsx
+
+
+
+```
diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index a1f759fbc..bab667a34 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -110,6 +110,61 @@ export default function () {
| bgColor | background-color | colors |
| opacity | opacity | - |
+
+
+:::tip Note
+
+Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity)
+
+:::
+
+```SnackPlayer name=Alpha%20Opacity%20Usage
+
+import React from "react"
+import { HStack, Stack, Center, NativeBaseProvider } from "native-base"
+export function Example() {
+ return (
+
+
+
+
+ )
+}
+
+```
+
### Typography
```SnackPlayer name=Typography
diff --git a/docs/utilityPropsSpecificity.md b/docs/utilityPropsSpecificity.md
new file mode 100644
index 000000000..70e42236a
--- /dev/null
+++ b/docs/utilityPropsSpecificity.md
@@ -0,0 +1,55 @@
+---
+id: utility-props-specificity
+title: Utility Props Specificity
+---
+
+- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered.
+
+ ```jsx
+
+ ```
+
+ In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered.
+
+- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle.
+
+ Let's take an example of `Input` to understand better.
+
+ ```jsx
+
+
+ // baseStyle for Input component
+ return {
+ ...
+ px: 4,
+ py: 2,
+ ...
+ }
+ ```
+
+ As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.**
+
+Now, here is an example to analyze both the cases together:
+
+```jsx
+
+
+// baseStyle for Input component
+ return {
+ ...
+ px: 4,
+ py: 2,
+ ...
+ }
+
+```
+In the above example, what do you think should be the padding of the rendered Input component?
+
+Let's see.
+
+We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`.
+
+
+
+
+
diff --git a/sidebars.js b/sidebars.js
index 3e465535f..fcf8f82d9 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -12,6 +12,7 @@ module.exports = {
collapsed: false,
items: [
'utility-first',
+ 'utility-props-specificity',
'design-tokens',
'interaction-styles',
'responsive-style',
@@ -26,6 +27,7 @@ module.exports = {
'color-mode',
'nativebase-factory',
'safe-area-view-props',
+ 'strict-mode',
'accessibility',
],
},
@@ -247,6 +249,7 @@ module.exports = {
collapsed: false,
items: [
'migration/Guide',
+ 'migration/v3.1.0-to-3.2.0',
{
'Components Migration': [
// 'migration/Accordion',
diff --git a/src/components/colors/ColorsBlocks.js b/src/components/colors/ColorsBlocks.js
index ef194b4ff..86eebadd1 100644
--- a/src/components/colors/ColorsBlocks.js
+++ b/src/components/colors/ColorsBlocks.js
@@ -1,6 +1,17 @@
import React from 'react';
import ColorComponent from './ColorComponent';
const COLORS = {
+ primary: {},
+ secondary: {},
+ tertiary: {},
+ danger: {},
+ error: {},
+ success: {},
+ warning: {},
+ muted: {},
+ info: {},
+ light: {},
+
singletons: {
white: '#FFFFFF',
black: '#000000',
@@ -103,6 +114,18 @@ const COLORS = {
800: '#075985',
900: '#0c4a6e',
},
+ darkBlue: {
+ 50: '#dbf4ff',
+ 100: '#addbff',
+ 200: '#7cc2ff',
+ 300: '#4aa9ff',
+ 400: '#1a91ff',
+ 500: '#0077e6',
+ 600: '#005db4',
+ 700: '#004282',
+ 800: '#002851',
+ 900: '#000e21',
+ },
cyan: {
50: '#ecfeff',
100: '#cffafe',
@@ -247,18 +270,6 @@ const COLORS = {
800: '#27272a',
900: '#18181b',
},
- dark: {
- 50: '#18181b',
- 100: '#27272a',
- 200: '#3f3f46',
- 300: '#52525b',
- 400: '#71717a',
- 500: '#a1a1aa',
- 600: '#d4d4d8',
- 700: '#e4e4e7',
- 800: '#f4f4f5',
- 900: '#fafafa',
- },
coolGray: {
50: '#f9fafb',
100: '#f3f4f6',
@@ -283,7 +294,29 @@ const COLORS = {
800: '#1e293b',
900: '#0f172a',
},
+ dark: {
+ 50: '#18181b',
+ 100: '#27272a',
+ 200: '#3f3f46',
+ 300: '#52525b',
+ 400: '#71717a',
+ 500: '#a1a1aa',
+ 600: '#d4d4d8',
+ 700: '#e4e4e7',
+ 800: '#f4f4f5',
+ 900: '#fafafa',
+ },
};
+COLORS.danger = COLORS.rose;
+COLORS.error = COLORS.red;
+COLORS.success = COLORS.green;
+COLORS.warning = COLORS.orange;
+COLORS.muted = COLORS.trueGray;
+COLORS.primary = COLORS.cyan;
+COLORS.secondary = COLORS.pink;
+COLORS.tertiary = COLORS.emerald;
+COLORS.info = COLORS.lightBlue;
+COLORS.light = COLORS.warmGray;
const ColorsBlocks = ({}) => {
return (