From 61b14f930e7ef7979f1f915c03daec3c6a1bcade Mon Sep 17 00:00:00 2001
From: Breno Castelo Branco <breno.cbsousa@gmail.com>
Date: Mon, 12 Dec 2022 11:19:23 +0000
Subject: [PATCH] documenting tokens

---
 packages/docs/.storybook/main.js              | 28 ++++++++---------
 packages/docs/.storybook/preview.js           |  9 ++++--
 packages/docs/package.json                    |  4 ++-
 packages/docs/src/components/ColorsGrid.tsx   | 21 +++++++++++++
 packages/docs/src/components/Tokens.tsx       | 29 ++++++++++++++++++
 packages/docs/src/pages/Home.stories.mdx      |  7 +++++
 .../docs/src/pages/tokens/Colors.stories.mdx  | 10 +++++++
 .../src/pages/tokens/font-size.stories.mdx    | 11 +++++++
 .../src/pages/tokens/fontFamily.stories.mdx   | 11 +++++++
 .../src/pages/tokens/fontWeight.stories.mdx   | 11 +++++++
 .../src/pages/tokens/lineHeights.stories.mdx  | 11 +++++++
 .../docs/src/pages/tokens/radii.stories.mdx   | 11 +++++++
 .../docs/src/pages/tokens/space.stories.mdx   | 11 +++++++
 packages/docs/src/styles/tokens.css           | 30 +++++++++++++++++++
 packages/docs/tsconfig.json                   |  4 +++
 15 files changed, 191 insertions(+), 17 deletions(-)
 create mode 100644 packages/docs/src/components/ColorsGrid.tsx
 create mode 100644 packages/docs/src/components/Tokens.tsx
 create mode 100644 packages/docs/src/pages/Home.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/Colors.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/font-size.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/fontFamily.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/fontWeight.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/lineHeights.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/radii.stories.mdx
 create mode 100644 packages/docs/src/pages/tokens/space.stories.mdx
 create mode 100644 packages/docs/src/styles/tokens.css
 create mode 100644 packages/docs/tsconfig.json

diff --git a/packages/docs/.storybook/main.js b/packages/docs/.storybook/main.js
index 06d2314..9e258ea 100644
--- a/packages/docs/.storybook/main.js
+++ b/packages/docs/.storybook/main.js
@@ -1,18 +1,18 @@
 module.exports = {
-  "stories": [
-    "../src/stories/**/*.stories.mdx",
-    "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: [
+    '../src/pages/**/*.stories.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-vite"
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-vite',
   },
-  "features": {
-    "storyStoreV7": true
-  }
-}
\ No newline at end of file
+  features: {
+    storyStoreV7: true,
+  },
+};
diff --git a/packages/docs/.storybook/preview.js b/packages/docs/.storybook/preview.js
index 48afd56..076f13d 100644
--- a/packages/docs/.storybook/preview.js
+++ b/packages/docs/.storybook/preview.js
@@ -1,9 +1,14 @@
+import { themes } from '@storybook/theming';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
\ No newline at end of file
+  docs: {
+    theme: themes.dark,
+  },
+};
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 4a03369..3c0c290 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -17,9 +17,11 @@
     "vite": "^4.0.0"
   },
   "dependencies": {
+    "@ignite-ui/eslint-config": "*",
+    "@ignite-ui/ts-config": "*",
     "@ignite-ui/react": "*",
     "@ignite-ui/tokens": "*",
-    "@ignite-ui/eslint-config": "*",
+    "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/packages/docs/src/components/ColorsGrid.tsx b/packages/docs/src/components/ColorsGrid.tsx
new file mode 100644
index 0000000..2527f72
--- /dev/null
+++ b/packages/docs/src/components/ColorsGrid.tsx
@@ -0,0 +1,21 @@
+import { colors } from '@ignite-ui/tokens';
+import { getContrast } from 'polished';
+
+export function ColorsGrid() {
+  return Object.entries(colors).map(([key, color]) => {
+    return (
+      <div key={key} style={{ backgroundColor: color, padding: '2rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            color: getContrast(color, '#fff') < 3.5 ? '#000' : '#fff',
+            fontFamily: 'monospace',
+          }}
+        >
+          ${key}
+        </div>
+      </div>
+    );
+  });
+}
diff --git a/packages/docs/src/components/Tokens.tsx b/packages/docs/src/components/Tokens.tsx
new file mode 100644
index 0000000..f98402f
--- /dev/null
+++ b/packages/docs/src/components/Tokens.tsx
@@ -0,0 +1,29 @@
+import '../styles/tokens.css';
+
+type TokensProps = {
+  tokens: Record<string, string>;
+  hasRem?: boolean;
+};
+
+export function Tokens({ tokens, hasRem }: TokensProps) {
+  return (
+    <table className="tokens">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+          {hasRem && <th>Pixels</th>}
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(tokens).map(([key, value]) => (
+          <tr key={key}>
+            <td>{key}</td>
+            <td>{value}</td>
+            {hasRem && <td>{Number(value.replace('rem', '')) * 16}px</td>}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/packages/docs/src/pages/Home.stories.mdx b/packages/docs/src/pages/Home.stories.mdx
new file mode 100644
index 0000000..493acde
--- /dev/null
+++ b/packages/docs/src/pages/Home.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Home" />
+
+# Ignite UI
+
+Ignite Design System
diff --git a/packages/docs/src/pages/tokens/Colors.stories.mdx b/packages/docs/src/pages/tokens/Colors.stories.mdx
new file mode 100644
index 0000000..2367d75
--- /dev/null
+++ b/packages/docs/src/pages/tokens/Colors.stories.mdx
@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs';
+import { ColorsGrid } from '../../components/ColorsGrid';
+
+<Meta title="Tokens/Colors" />
+
+# Colors
+
+This are the colors used in the Ignite UI
+
+<ColorsGrid />
diff --git a/packages/docs/src/pages/tokens/font-size.stories.mdx b/packages/docs/src/pages/tokens/font-size.stories.mdx
new file mode 100644
index 0000000..d955fd8
--- /dev/null
+++ b/packages/docs/src/pages/tokens/font-size.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { fontSizes } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Font Sizes" />
+
+# Font Sizes
+
+This are the Font Sizes used in the Ignite UI
+
+<Tokens tokens={fontSizes} hasRem />
diff --git a/packages/docs/src/pages/tokens/fontFamily.stories.mdx b/packages/docs/src/pages/tokens/fontFamily.stories.mdx
new file mode 100644
index 0000000..1df1ea7
--- /dev/null
+++ b/packages/docs/src/pages/tokens/fontFamily.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { fonts } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Font Family" />
+
+# Font Family
+
+This are the Font Family used in the Ignite UI
+
+<Tokens tokens={fonts} />
diff --git a/packages/docs/src/pages/tokens/fontWeight.stories.mdx b/packages/docs/src/pages/tokens/fontWeight.stories.mdx
new file mode 100644
index 0000000..02b805c
--- /dev/null
+++ b/packages/docs/src/pages/tokens/fontWeight.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { fontWeights } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Font Weight" />
+
+# Font Weight
+
+This are the Font Weight used in the Ignite UI
+
+<Tokens tokens={fontWeights} />
diff --git a/packages/docs/src/pages/tokens/lineHeights.stories.mdx b/packages/docs/src/pages/tokens/lineHeights.stories.mdx
new file mode 100644
index 0000000..23c44ce
--- /dev/null
+++ b/packages/docs/src/pages/tokens/lineHeights.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { lineHeights } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Line Heights" />
+
+# Line Heights
+
+This are the Line Heights used in the Ignite UI
+
+<Tokens tokens={lineHeights} />
diff --git a/packages/docs/src/pages/tokens/radii.stories.mdx b/packages/docs/src/pages/tokens/radii.stories.mdx
new file mode 100644
index 0000000..210b34d
--- /dev/null
+++ b/packages/docs/src/pages/tokens/radii.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { radii } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Radii" />
+
+# Radii
+
+This are the radii used in the Ignite UI
+
+<Tokens tokens={radii} />
diff --git a/packages/docs/src/pages/tokens/space.stories.mdx b/packages/docs/src/pages/tokens/space.stories.mdx
new file mode 100644
index 0000000..706556e
--- /dev/null
+++ b/packages/docs/src/pages/tokens/space.stories.mdx
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import { Tokens } from '../../components/Tokens';
+import { space } from '@ignite-ui/tokens';
+
+<Meta title="Tokens/Space" />
+
+# Space
+
+This are the space used in the Ignite UI
+
+<Tokens tokens={space} hasRem />
diff --git a/packages/docs/src/styles/tokens.css b/packages/docs/src/styles/tokens.css
new file mode 100644
index 0000000..e1a9e82
--- /dev/null
+++ b/packages/docs/src/styles/tokens.css
@@ -0,0 +1,30 @@
+.tokens {
+  width: 100%;
+  font-family: 'sans-serif';
+  color: #fff;
+  border-collapse: collapse;
+}
+
+.tokens thead th {
+  padding: 0.75rem 1 rem;
+  text-align: left;
+}
+
+.tokens tbody td {
+  padding: 0.75rem 1rem;
+  color: #ccc;
+}
+
+.tokens tbody td:fist-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.tokens tbody td:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.tokens tbody tr:nth-child(even) td {
+  background: #444;
+}
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
new file mode 100644
index 0000000..2669f6d
--- /dev/null
+++ b/packages/docs/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@ignite-ui/ts-config/react.json",
+  "include": ["src"]
+}