📝(doc) create docs for utility classes

In order to showcase the utility classes, we needed to create
beautiful tokens-based docs !

packages/react/.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 src/cunningham-tokens.ts
+src/cunningham-tokens.js

packages/react/.storybook/preview-head.html

@@ -1,4 +1,19 @@
 <link rel='stylesheet' type='text/css' href='/src/index.scss'>
+<style>
+    code {
+        margin: 0 2px;
+        padding: 3px 5px;
+        white-space: nowrap;
+        border-radius: 3px;
+        border: 1px solid #EEEEEE;
+        color: rgba(51,51,51,0.9);
+        background-color: #F8F8F8;
+    }
+    /* Prevent the index.scss font-family to override code blocks's one. */
+    pre * {
+        font-family: ui-monospace,Menlo,Monaco,"Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Droid Sans Mono","Courier New",monospace;
+    }
+</style>
 <script>
   window.global = window;
 </script>

packages/react/package.json

@@ -20,9 +20,9 @@
   ],
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.css --exec npm run build",
+    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
     "build": "tsc && yarn build-theme && vite build",
-    "build-theme": "cunningham -o src -s html -g css,ts",
+    "build-theme": "cunningham -o src -g css,ts,js",
     "preview": "vite preview",
     "test": "FORCE_COLOR=1 vitest run",
     "test-watch": "vitest",

packages/react/src/docs/colors.stories.mdx

@@ -0,0 +1,114 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; import {
+  tokens
+} from '../cunningham-tokens';
+
+<Meta title="Getting Started/Colors"/>
+
+export const colors = ['primary', 'secondary', 'greyscale', 'success', 'info', 'warning', 'danger'];
+export const tints = [900, 800, 700, 600, 500, 400, 300, 200, 100];
+
+# Typo
+
+Cunningham comes with an existing toolkit to deal with colors, and it's easy. 🎨
+
+## Background color
+
+You can use custom utility classes to set the background color of an element. These classes are named using the format `.bg-{color}`.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+  <div className="bg-primary-500"></div>
+  `}
+/>
+
+You can find all existing classes below.
+
+<Canvas isColumn={true} withSource="none">
+  {colors.map(color => (
+    <div key={color} style={{display: 'flex', gap: '5px'}}>
+      {tints.map(tint => (
+        <div key={color + tint} style={{display: 'flex', flexDirection: 'column', flexShrink: 0,flexBasis: '120px', alignItems: 'center', flexGrow: 1}}>
+          <div style={{width: '72px', height: '48px'}} className={"bg-" + color + "-" + tint}></div>
+          <code className="fs-s mt-st">bg-{color}-{tint}</code>
+        </div>
+      ))}
+    </div>
+  ))}
+</Canvas>
+
+## Text color
+
+You can use custom utility classes to set the color attribute of an element. These classes are named using the format `.clr-{color}`.
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+  <div className="clr-primary-500">Nice primary-500 colored text</div>
+  `}
+/>
+
+You can find all existing classes below.
+
+<Canvas isColumn={true} withSource="none">
+  {colors.map(color => (
+    <div key={color} style={{display: 'flex', gap: '10px'}}>
+      {['text', ...tints].map(tint => {
+        const classes = ['fs-s', 'mt-st', 'clr-' + color + '-' + tint];
+        if (tint === 'text') {
+          classes.push('bg-' + color + '-500');
+        }
+        return <div key={color + tint} style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flexShrink: 0,
+          flexBasis: '110px',
+          alignItems: 'center',
+          flexGrow: 1
+        }}>
+          <code className={classes.join(' ')}>clr-{color}-{tint}</code>
+        </div>
+      })}
+    </div>
+  ))}
+</Canvas>
+
+Pay attention the special `{color}-text` variation. Each color must have a text color variation, which is supposed to
+render readable text on top of a -500 background of its own color variation. Please check out the following examples:
+
+<Canvas withSource="open">
+<span className="bg-primary-500 clr-primary-text fw-medium p-t">
+  I'm a text on top of a primary-500 background 👋
+</span>
+<span className="bg-secondary-500 clr-secondary-text fw-medium p-t">
+  I'm a text on top of a secondary-500 background 👋
+</span>
+<span className="bg-danger-500 clr-danger-text fw-medium p-t">
+  I'm a text on top of a danger-500 background 👋
+</span>
+</Canvas>
+
+## Customize
+
+You can customize the values of the color design tokens with the configuration file this way:
+
+<Source
+  language='ts'
+  dark
+  format={true}
+  code={`
+  // cunningham.ts|cjs
+  export default {
+    theme: {
+      colors: {
+        'primary-500': 'purple', // You can customize the existing primary-500 color. ( bg-primary-500, clr-primary-500 classes ),
+        'primary-text': 'cream',
+        'amazing-500': 'pink', // You can add a new color. ( bg-amazing-500, clr-amazing-500 classes will be generated )
+    }
+  }
+  `}
+/>

packages/react/src/docs/spacings.stories.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { tokens } from '../cunningham-tokens';
+
+<Meta title="Getting Started/Spacings" />
+
+# Spacings
+
+Cunningham comes with an existing toolkit to deal with spacings. 📏
+
+Here are the existing spacings:
+
+<Canvas isColumn={true}>
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {Object.keys(tokens.theme.spacings).map(key => (
+      <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
+        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.theme.spacings[key]}</div>
+        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
+      </div>
+    ))}
+  </div>
+</Canvas>
+
+Those can be used both with paddings and margins.
+
+## Margins
+
+You can use the following classes to add margins to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| m-{spacing}  | `margin: {spacing}`        |
+| mt-{spacing} | `margin-top: {spacing}`    |
+| mr-{spacing} | `margin-right: {spacing}`  |
+| mb-{spacing} | `margin-bottom: {spacing}` |
+| ml-{spacing} | `margin-left: {spacing}`   |
+
+## Paddings
+
+You can use the following classes to add paddings to your elements:
+
+| Class        | Equivalent                 |
+|--------------|----------------------------|
+| p-{spacing}  | `padding: {spacing}`        |
+| pt-{spacing} | `padding-top: {spacing}`    |
+| pr-{spacing} | `padding-right: {spacing}`  |
+| pb-{spacing} | `padding-bottom: {spacing}` |
+| pl-{spacing} | `padding-left: {spacing}`   |
+
+
+## Example
+
+<Canvas isColumn={true} withSource="open">
+  <div className="bg-danger-100">
+    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">
+      Tiny padding + Large margin bottom
+    </div>
+    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">
+      Large padding + Base margin left
+    </div>
+</div>
+</Canvas>