Update design-system.md

styled-components is replaced by nextui and stitches.

Author: apoorva-srivastav

docs/design-system.md

@@ -1,32 +1,31 @@
+
 ---
 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 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. 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`.
 
 ## 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. Create a theme using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme)  and store it as `src/themes/theme.js`.
+2. Now in all `nextui` styled components, theme prop 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' // this property is added temporarily for the issue of nextui styled method with typescript v4.6.2. Will not be required once the issue is resolved.
+});
 ``` 
 
-More about theming can be found in [styled-components](https://styled-components.com/docs/advanced#theming) docs.
+More about cutomizing theming can be found in [nextui customize theme](https://nextui.org/docs/theme/customize-theme) docs.