Updated docs with new tokens

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 (
+    <>
+      <Heading>I'm a Heading</Heading>
+      <Button
+        _light={{colorScheme:'blue'}}
+        _dark={{colorScheme:'red'}}
+        onPress={() => {
+          toggleColorMode();
+        }}
+      >
+        Change mode
+      </Button>
+      <HStack space={2} mt={3}>
+        <Avatar
+          name="Ankur"
+          borderWidth={2}
+          source={{
+            uri:
+              'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg',
+          }}
+        />
+        <Avatar
+          name="Rohit"
+          borderWidth={2}
+          source={{
+            uri:
+              'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg',
+          }}
+        />
+      </HStack>
+      </>
+  );
+}
+
+const LocalWrapper = ({ children }) => {
+  const bg = useColorModeValue('gray.200', 'gray.800')
+  return (
+    <Center
+      flex={1}
+      bg={bg}
+    >
+      {children}
+    </Center>
+  );
+};
+
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <LocalWrapper>
+        <PseduoPropsUsage />
+      </LocalWrapper>
+    </NativeBaseProvider>
+  );
+}
+
+```
+
 
 ## Default color mode
 

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
 
 <SpaceBlocks/>
 
+## 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).

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
+  <Box p={4} mx={8} /> ❌
+
+  ```
+
+  ```js
+  // Correct Way to pass utility props
+  <Box p="4" mx="8" /> ✅
+  ```

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
+<NativeBaseProvider config={config}>
+  <App />
+</NativeBaseProvider>
+```

docs/utilityProps.md

@@ -110,6 +110,61 @@ export default function () {
 | bgColor        | background-color | colors    |
 | opacity        | opacity          | -         |
 
+<br></br>
+
+:::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 (
+    <Stack space={2} alignItems="center">
+      <HStack space={2} alignItems="center">
+        <Center
+          size={16}
+          bg="primary.400:alpha-50"
+          rounded="md"
+          _text={{
+            color: "white",
+          }}
+          shadow={3}
+        >
+          Box 1
+        </Center>
+        <Center
+          bg="primary.400"
+          size={16}
+          rounded="md"
+          _text={{
+            color: "white",
+          }}
+          shadow={3}
+        >
+          Box 2
+        </Center>
+      </HStack>
+    </Stack>
+  )
+}
+
+export default () => {
+  return (
+    <NativeBaseProvider>
+      <Center flex={1}>
+        <Example />
+      </Center>
+    </NativeBaseProvider>
+  )
+}
+
+```
+
 ### Typography
 
 ```SnackPlayer name=Typography