Merge pull request #45 from pagesource/Apoorva2696-patch-1

Update design-system.md

Author: vinodloha

docs/design-system.md

@@ -1,32 +1,39 @@
+
+
 ---
 id: design-system
 title: Design System Integration
 sidebar_label: Design System Integration
 ---
 
 ## Introduction
-A consistent design system is integrated to the all of the app types by using `styled-components` and `theme.js` file generated by [Theme Manager](http://theme-manager.com). 
-
-`styled-component` is one of the most common ways to style components in the react ecosystem. It allows users to write styles in css within the js files. 
+A consistent design system is integrated to the all of the app types by using `nextui` and `theme.js` file  which can be generated by using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme) docs and using nextui `createTheme` method. 
 
-[Theme Manager](http://theme-manager.com) allows users to curate design tokens such as colors, space, border-radius, etc and then export them in a json object which then can be consumed within our apps.
+`nextui` is a library that uses [stitches](https://stitches.dev/) internally to style components in the react ecosystem. It allows users to write styles in css within the js files. It also has components and provides customized theming. To know more about nextui visit [nextui org](https://nextui.org/docs/guide/getting-started) docs.
 
-`styled-components` provides `<ThemeProvider>` component which accepts a `theme` prop (json). The `<ThemeProvider>` is kept at the highest level in the component chain. This allows all of the components within it to inherit the `theme` prop. In case of our Next.js app the `<ThemeProvider>` is added in `src/pages/_app.js`.
+`nextui` provides `<NextUIProvider>` which is a theme provider component which accepts a `theme` prop (created using createTheme nextui method and json) which overrides the nextui default theme. 
 
 ## How to use
-1. Create a theme using [Theme Manager](http://theme-manager.com). Download the theme and store it as `src/themes/theme.js`.
-2. Now in all `styled-component`, theme prop is available to use as following:
+1. The `<NextUIProvider>` is kept at the highest level in the component chain. This allows all of the components within it to inherit the `theme` prop. In case of our Next.js app the `<NextUIProvider>` is added in `src/pages/_app.js`.
+2. `nextui` provides a default theme that can be used out of the box.
+3. To customize, create a theme using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme) and wrap it in `createTheme` nextui method and store it as `src/themes/theme.js`.
+4. Now in all `nextui` styled components, theme props is available to use as following:
 ```jsx
-export const Button = styled.button`
-    color: ${props => props.theme.colors.white[0]};
-    font-size: 1em;
-    margin: 1em;
-    padding: 0.25em 1em;
-    border: 2px solid ${props => props.theme.colors.black[0]};
-    background-color: ${props => props.theme.colors.black[0]};
-    border-radius: 3px;
-    display: block;
-`;
+export const Button = styled('button', {
+  fontSize: '$3',
+  color: '$fontColor',
+  margin: '1em',
+  padding: '0.25em 1em',
+  border: '2px solid black',
+  borderRadius: '$1',
+  display: 'block',
+  length: '1'
+});
 ``` 
 
-More about theming can be found in [styled-components](https://styled-components.com/docs/advanced#theming) docs.
+## Know Issue
+The `length` property used in styled method is added temporarily for the issue of nextui styled method with typescript v4.6.2. Will not be required once the issue is resolved. 
+Issue: https://github.com/modulz/stitches/issues/947
+
+---
+More about cutomizing theming can be found in [nextui customize theme](https://nextui.org/docs/theme/customize-theme) docs.