📝(react) make docs theme compatible

Some docs were using design tokens and classes that were not theme compliant, rendering ugly colors when switching to dark, it needed to be aligned. Also update some code example to match the new format.
2023-09-26 11:42:15 +02:00
parent b0d68becfe
commit 422834e6d2
4 changed files with 106 additions and 70 deletions
--- a/packages/react/src/docs/colors.mdx
+++ b/packages/react/src/docs/colors.mdx
@@ -32,7 +32,7 @@ You can find all existing classes below.
      {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>
-          <pre className="fs-s mt-st">bg-{color}-{tint}</pre>
+          <pre className="clr-greyscale-800 fs-s mt-st">bg-{color}-{tint}</pre>
        </div>
      ))}
    </div>
@@ -57,7 +57,7 @@ You can find all existing classes below.
 <Canvas sourceState="none">
  {colors.map(color => (
    <div key={color} style={{display: 'flex', gap: '10px'}}>
-      {['text', ...tints].map(tint => {
+      {tints.map(tint => {
        const classes = ['fs-s', 'mt-st', 'clr-' + color + '-' + tint];
        if (tint === 'text') {
          classes.push('bg-' + color + '-500');
@@ -82,7 +82,7 @@ render readable text on top of a -500 background of its own color variation. Ple

 <Canvas sourceState="none">
 <div className="bg-primary-500 clr-primary-text fw-medium p-t">I'm a text on top of a primary-500 background 👋</div>
-<div className="bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
+<div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
 <div className="bg-danger-500 clr-danger-text fw-medium p-t">I'm a text on top of a danger-500 background 👋</div>
 </Canvas>

@@ -97,12 +97,16 @@ You can customize the values of the color design tokens with the configuration f
  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 )
-    }
+    themes: {
+      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 )
+        },
+      },
+    },
  }
  `}
-/>
+/>
--- a/packages/react/src/docs/customization.mdx
+++ b/packages/react/src/docs/customization.mdx
@@ -34,11 +34,15 @@ If you prefer using Typescript, create a file named `cunningham.ts` at the root
 import { DefaultTokens } from "@openfun/cunningham-react";

 const config: DefaultTokens = {
-  theme: {
-      colors: {
-        "primary-500": "purple",
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          "primary-500": "purple",
+        },
      },
    },
+  },
 };

 export default config;
@@ -52,9 +56,13 @@ Or if you prefer Javascript, create a file named `cunningham.cjs` at the root of
 <Source dark={true} code={`
 // cunningham.cjs
 module.exports = {
-  theme: {
-    colors: {
-      "primary-500": "purple",
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          "primary-500": "purple",
+        },
+      },
    },
  },
 };`}></Source>
@@ -93,12 +101,16 @@ For our example we focus on the `border-radius` design token. Now, incorporate t
 import { DefaultTokens } from "@openfun/cunningham-react";

 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "border-radius": "30px",
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "border-radius": "30px",
+        },
+      },
    },
  },
 };
@@ -129,12 +141,16 @@ let's say we want keep the same border radius when the `Button` component is act
 import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";

 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "border-radius--active": defaultTokens.components.button["border-radius"],
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "border-radius--active": defaultTokens.components.button["border-radius"],
+        },
+      },
    },
  },
 };
@@ -152,12 +168,16 @@ You can also use more global design tokens from `defaultTokens.theme`, like that
 import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";

 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "medium-font-size": defaultTokens.theme.font.sizes.s,
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "medium-font-size": defaultTokens.theme.font.sizes.s,
+        },
+      },
    },
  },
 };
--- a/packages/react/src/docs/spacings.mdx
+++ b/packages/react/src/docs/spacings.mdx
@@ -11,10 +11,10 @@ Here are the existing spacings:

 <Canvas sourceState="none">
  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-    {Object.keys(tokens.theme.spacings).map(key => (
+    {Object.keys(tokens.themes.default.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="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.themes.default.theme.spacings[key]}</div>
        <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
      </div>
    ))}
@@ -51,8 +51,8 @@ You can use the following classes to add paddings to your elements:
 ## Example

 <Canvas sourceState="shown">
-  <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 className="clr-greyscale-800 bg-danger-100">
+    <div className="clr-greyscale-800 bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
+    <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
  </div>
 </Canvas>
--- a/packages/react/src/docs/typo.mdx
+++ b/packages/react/src/docs/typo.mdx
@@ -22,8 +22,8 @@ You can use custom utility classes to set the font size of an element. These cla

 <Canvas sourceState="none">
  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.sizes).map(key => (
-      <div key={key} className={"fs-" + key}>Using the <code>fs-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.sizes).map(key => (
+      <div key={key} className={"clr-greyscale-800 fs-" + key}>Using the <code>fs-{key}</code> class</div>
    ))}
  </div>
 </Canvas>
@@ -37,15 +37,19 @@ You can customize the values of the font size design tokens with the configurati
  code={`
  // cunningham.ts|cjs
  export default {
-    theme: {
-      typo: {
-        sizes: {
-          m: '0.5rem', // You can customize the size of the existing medium text ( 'fs-m' class )
-          xxl: '3rem' // You can also add custom sizes yourself ( 'fs-xxl' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            sizes: {
+              m: '0.5rem', // You can customize the size of the existing medium text ( 'fs-m' class )
+              xxl: '3rem' // You can also add custom sizes yourself ( 'fs-xxl' class will be generated )
+              ...
+            },
+          },
        },
-      }
-    }
+      },
+    },
  }
  `}
 />
@@ -65,8 +69,8 @@ You can use custom utility classes to set the font weight of an element. These c

 <Canvas sourceState="none">
  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.weights).map(key => (
-      <div key={key} className={"fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.weights).map(key => (
+      <div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
    ))}
  </div>
 </Canvas>
@@ -80,14 +84,18 @@ You can customize the values of the font weight design tokens with the configura
  code={`
  // cunningham.ts|cjs
  export default {
-    theme: {
-      typo: {
-        weights: {
-          regular: 500, // You can customize the size of the existing regular text ( 'fw-regular' class )
-          chunky: 900 // You can also add custom weights yourself ( 'fw-chunky' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            weights: {
+              regular: 500, // You can customize the size of the existing regular text ( 'fw-regular' class )
+              chunky: 900 // You can also add custom weights yourself ( 'fw-chunky' class will be generated )
+              ...
+            },
+          },
        },
-      }
+      },
    }
  }
  `}
@@ -106,14 +114,14 @@ class on every dom element.
  dark
  format={false}
  code={`
-  <div className="f-accent">Accent text</div>
+  <div className="clr-greyscale-800 f-accent">Accent text</div>
  `}
 />

 <Canvas sourceState="none">
  <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.families).map(key => (
-    <div key={key} className={"f-" + key}>Using the <code>f-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.families).map(key => (
+    <div key={key} className={"clr-greyscale-800 f-" + key}>Using the <code>f-{key}</code> class</div>
    ))}
  </div>
 </Canvas>
@@ -127,15 +135,19 @@ You can customize the values of the font family design tokens with the configura
  code={`
  // cunningham.ts|cjs
  export default {
-    theme: {
-      typo: {
-        families: {
-          base: 'Inter', // You can customize the font family of the existing base variation ( 'f-base' class )
-          legend: 'Arial' // You can also add custom font families yourself ( 'f-legend' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            families: {
+              base: 'Inter', // You can customize the font family of the existing base variation ( 'f-base' class )
+              legend: 'Arial' // You can also add custom font families yourself ( 'f-legend' class will be generated )
+              ...
+            },
+          },
        },
-      }
-    }
+      },
+    },
  }
  `}
-/>
+/>