add documentation for styles

apps/www/next.config.js

@@ -1,6 +1,8 @@
 /** @type {import('next').NextConfig} */
 const withNextIntl = require('next-intl/plugin')();
 
-const nextConfig = {};
+const nextConfig = {
+  transpilePackages: ['opub-ui'],
+};
 
 module.exports = withNextIntl(nextConfig);

examples/district/next.config.js

@@ -1,6 +1,8 @@
 /** @type {import('next').NextConfig} */
 const withNextIntl = require('next-intl/plugin')();
 
-const nextConfig = {};
+const nextConfig = {
+  transpilePackages: ['opub-ui'],
+};
 
 module.exports = withNextIntl(nextConfig);

packages/opub-ui/docs/Styles/Shape.mdx

@@ -0,0 +1,5 @@
+# Shape
+
+The shape of a component or a layout is defined using border radius and border width.
+OPub consists of 9 border radiuses, ranging from `0px` to `9999px` which can be used for circular layouts. There are 3 border widths, `1px`, `2px`, `4px`.
+[Check the border tokens](/story/foundations-design-tokens--borders)

packages/opub-ui/docs/Styles/Space.mdx

@@ -0,0 +1,7 @@
+# Space
+
+Consistent spacing creates visual balance that makes the user interface (UI) easier for users to scan.
+All of the space related styling can be done using `space` tokens. They range from `0px` to `128px`.
+Border Radius and Width also rely on `space` tokens for their value. [Check out space tokens](/story/foundations-design-tokens--space)
+
+Use space for `margins`, `paddings`, and `gaps` while developing to stay consistent with design.

packages/opub-ui/docs/Styles/Typography.mdx

@@ -0,0 +1,26 @@
+# Typography
+
+Typography plays a crucial role in defining hierarchy within design. Variable weights convey different levels of importance, where bolder weights indicate greater significance.
+
+## Font
+
+OPub relies on [Inter](https://github.com/rsms/inter), an open source variable font. This allows variation in font weight and slant.
+In case the language does not support the font family, system fonts should be employed for compatibility.
+
+### Indian Font
+
+We are also experimenting if we can incorporate [Mukta](https://github.com/EkType/Mukta) for Indian languages. It's a mono-linear font family available in seven weights, supporting Devanagari, Gujarati, Gurumukhi, Tamil and Latin scripts
+
+### Mono
+
+While making any refernce to code, a mono font should be used. OPub relies on `Ubuntu Mono` for this.
+
+## Type scale
+
+A type scale is a selection of font styles that can be used across an app, ensuring a flexible, yet consistent, style that accommodates a range of purposes. OPub type scale is a combination of 22 styles, built using combination of font size, font weight, line height and line spacing.
+
+The Type scales are divided in 2 categories, Heading and Body. Heading have different styles for smaller screen sizes.
+
+You can head over to [Figma Kit](https://www.figma.com/file/c3qljmNHrwu3whdXIXYhQ1/D4D-Design-System?node-id=1:2&mode=dev) to know about all of the type scales.
+
+To use them in code, use [Text component](/docs/components-text--docs)