documenting tokens

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
-  }
-}
+  features: {
+    storyStoreV7: true,
+  },
+};

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$/,
     },
   },
-}
+  docs: {
+    theme: themes.dark,
+  },
+};

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"
   },

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>
+    );
+  });
+}

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>
+  );
+}

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

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 />

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 />

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} />

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} />

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} />

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} />

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 />

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;
+}

packages/docs/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@ignite-ui/ts-config/react.json",
+  "include": ["src"]
+}