From d767d61dd2690368bc3abeb9a6692d8d680cc72b Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Tue, 30 May 2023 18:19:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20customize=20storybook=20t?=
 =?UTF-8?q?heme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to customize our Storybook to market it for Cunningham.
---
 packages/react/.storybook/main.ts         |  2 +-
 packages/react/.storybook/manager.ts      | 41 +++++++++++++++++++++++
 packages/react/public/logo-cunningham.svg | 28 ++++++++++++++++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/.storybook/manager.ts
 create mode 100644 packages/react/public/logo-cunningham.svg

diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index b16ffcb..c26d891 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -24,7 +24,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-vite",
     options: {},
   },
-  staticDirs: ["../src"],
+  staticDirs: ["../src", "../public"],
   features: {
     storyStoreV7: true,
   },
diff --git a/packages/react/.storybook/manager.ts b/packages/react/.storybook/manager.ts
new file mode 100644
index 0000000..a67f90b
--- /dev/null
+++ b/packages/react/.storybook/manager.ts
@@ -0,0 +1,41 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+import { defaultTokens } from '@openfun/cunningham-tokens';
+
+const COLORS = defaultTokens.theme.colors;
+
+const theme = create({
+  base: 'light',
+  brandUrl: 'https://github.com/openfun/cunningham',
+  brandImage: '/logo-cunningham.svg',
+  brandTitle: 'Cunningham',
+  brandTarget: '_self',
+
+
+  //
+  colorPrimary: COLORS["primary-400"],
+  colorSecondary: COLORS["primary-400"],
+
+  // UI
+  appBg: COLORS["greyscale-100"],
+  appContentBg: COLORS["greyscale-000"],
+  appBorderColor: COLORS["greyscale-300"],
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: COLORS["greyscale-900"],
+  textInverseColor: COLORS["greyscale-000"],
+
+  // Toolbar default and active colors
+  barTextColor: COLORS["greyscale-500"],
+  barSelectedColor: COLORS["greyscale-900"],
+  barBg: COLORS["greyscale-000"],
+
+  // Form colors
+  inputBg: COLORS["greyscale-000"],
+  inputBorder: COLORS["greyscale-300"],
+  inputTextColor: COLORS["greyscale-800"],
+  inputBorderRadius: 2,
+});
+
+addons.setConfig({ theme });
diff --git a/packages/react/public/logo-cunningham.svg b/packages/react/public/logo-cunningham.svg
new file mode 100644
index 0000000..b5a5153
--- /dev/null
+++ b/packages/react/public/logo-cunningham.svg
@@ -0,0 +1,28 @@
+<svg width="497" height="90" viewBox="0 0 497 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_16_5113)">
+        <rect width="497" height="90" />
+        <g filter="url(#filter0_d_16_5113)">
+            <path d="M60.2487 31.6114H50.6425C49.7099 31.6114 49.2435 31.2383 49.057 30.1192C48.1244 23.6839 42.2487 18.7409 33.8549 18.7409C24.2487 18.7409 16.4145 26.1088 16.4145 37.0207C16.4145 47.8394 23.8756 55.3005 33.8549 55.3005C42.342 55.3005 48.0311 51.1036 49.057 44.8549C49.2435 43.6425 49.7099 43.2694 50.829 43.2694H60.1554C60.9016 43.2694 61.7409 43.7357 61.7409 44.6684C61.7409 56.6995 50.456 65.9326 33.8549 65.9326C16.9741 65.9326 3.73057 54.2746 3.73057 37.0207C3.73057 19.8601 16.9741 8.10881 33.8549 8.10881C51.5751 8.10881 61.7409 19.3005 61.7409 30.399C61.7409 31.0518 61.2746 31.6114 60.2487 31.6114ZM99.1537 60.9896H98.7807C95.4232 63.7876 91.3196 65.9326 85.6304 65.9326C74.7185 65.9326 69.589 59.1244 69.589 49.1451V28.3471C69.589 27.7876 70.6149 26.7617 71.1745 26.7617H79.9413C80.5009 26.7617 81.5268 27.7876 81.5268 28.3471V48.5855C81.5268 53.2487 84.1382 55.8601 87.8688 55.8601C92.4387 55.8601 96.6356 52.5959 97.9413 49.4249V28.3471C97.9413 27.7876 98.9672 26.7617 99.5268 26.7617H108.294C108.853 26.7617 109.879 27.7876 109.879 28.3471V63.4145C109.879 63.9741 108.853 65 108.294 65H101.765C101.019 65 100.553 64.5337 100.086 63.3212L99.1537 60.9896ZM147.223 63.4145V42.057C147.223 38.3264 144.799 35.9016 140.975 35.9016C136.032 35.9016 132.394 38.9793 130.809 42.43V63.4145C130.809 63.9741 129.783 65 129.223 65H120.457C119.897 65 118.871 63.9741 118.871 63.4145V28.3471C118.871 27.7876 119.897 26.7617 120.457 26.7617H127.638C128.291 26.7617 128.85 27.3212 129.223 28.3471L130.249 31.2383H130.622C133.793 27.8808 138.923 25.829 143.773 25.829C154.498 25.829 159.255 32.3575 159.255 41.1244V63.4145C159.255 63.9741 158.229 65 157.669 65H148.809C148.249 65 147.223 63.9741 147.223 63.4145ZM196.224 63.4145V42.057C196.224 38.3264 193.799 35.9016 189.975 35.9016C185.032 35.9016 181.395 38.9793 179.809 42.43V63.4145C179.809 63.9741 178.783 65 178.224 65H169.457C168.897 65 167.871 63.9741 167.871 63.4145V28.3471C167.871 27.7876 168.897 26.7617 169.457 26.7617H176.638C177.291 26.7617 177.851 27.3212 178.224 28.3471L179.25 31.2383H179.623C182.794 27.8808 187.923 25.829 192.773 25.829C203.498 25.829 208.255 32.3575 208.255 41.1244V63.4145C208.255 63.9741 207.229 65 206.669 65H197.809C197.25 65 196.224 63.9741 196.224 63.4145ZM228.809 28.3471V63.4145C228.809 63.9741 227.783 65 227.224 65H218.457C217.897 65 216.871 63.9741 216.871 63.4145V28.3471C216.871 27.7876 217.897 26.7617 218.457 26.7617H227.224C227.783 26.7617 228.809 27.7876 228.809 28.3471ZM215.939 14.0777C215.939 10.8135 218.643 8.10881 222.84 8.10881C227.037 8.10881 229.742 10.8135 229.742 14.0777C229.742 17.342 227.037 20.0466 222.84 20.0466C218.643 20.0466 215.939 17.342 215.939 14.0777ZM266.081 63.4145V42.057C266.081 38.3264 263.656 35.9016 259.832 35.9016C254.889 35.9016 251.252 38.9793 249.666 42.43V63.4145C249.666 63.9741 248.64 65 248.081 65H239.314C238.754 65 237.728 63.9741 237.728 63.4145V28.3471C237.728 27.7876 238.754 26.7617 239.314 26.7617H246.495C247.148 26.7617 247.708 27.3212 248.081 28.3471L249.107 31.2383H249.48C252.651 27.8808 257.78 25.829 262.63 25.829C273.355 25.829 278.112 32.3575 278.112 41.1244V63.4145C278.112 63.9741 277.086 65 276.526 65H267.666C267.107 65 266.081 63.9741 266.081 63.4145ZM286.169 76.4715C286.169 72.8342 287.848 70.1295 289.993 67.9845V67.7979C287.195 65.9326 285.796 63.1347 285.796 59.5907C285.796 55.8601 287.941 52.5959 290.273 50.544C288.314 48.0259 287.288 44.9482 287.288 41.3109C287.288 32.9171 293.817 25.829 304.729 25.829C309.858 25.829 313.029 27.0414 316.293 29.5596H316.573C318.625 27.3212 320.863 25.829 325.06 25.829C326.552 25.829 327.112 26.3886 327.112 26.9482V34.5026C327.112 34.9689 326.552 35.4352 326.086 35.4352C325.62 35.4352 325.34 35.342 324.501 35.342C323.288 35.342 322.169 35.6218 321.236 36.3679C321.796 38.0466 322.076 39.6321 322.076 41.3109C322.076 50.171 315.734 56.7927 304.729 56.7927C301.837 56.7927 299.319 56.2332 297.081 55.3005C296.521 55.9534 295.868 57.1658 295.868 58.3782C295.868 60.1503 297.174 61.2694 300.532 61.2694H310.418C321.423 61.2694 326.459 67.5181 326.459 74.1399C326.459 81.9741 320.583 89.2487 306.128 89.2487H305.754C293.257 89.2487 286.169 83.4663 286.169 76.4715ZM309.019 70.4093H300.438C299.226 71.1554 298.107 72.6477 298.107 74.6062C298.107 77.4974 301.091 79.7358 305.568 79.7358H306.501C312.19 79.7358 314.521 77.2176 314.521 74.4197C314.521 72.3679 313.309 70.4093 309.019 70.4093ZM298.293 41.3109C298.293 44.5751 300.811 47.2798 304.635 47.2798C308.459 47.2798 311.071 44.5751 311.071 41.3109C311.071 38.0466 308.459 35.342 304.635 35.342C300.811 35.342 298.293 38.0466 298.293 41.3109ZM344.57 5.03109V30.6788H344.943C347.741 27.7876 352.87 25.829 357.534 25.829C367.979 25.829 373.015 31.9845 373.015 41.1244V63.4145C373.015 63.9741 371.99 65 371.43 65H362.57C362.01 65 360.984 63.9741 360.984 63.4145V42.057C360.984 38.2332 358.373 35.9016 354.642 35.9016C350.259 35.9016 346.342 38.6995 344.57 42.43V63.4145C344.57 63.9741 343.544 65 342.984 65H334.218C333.658 65 332.632 63.9741 332.632 63.4145V5.03109C332.632 4.4715 333.658 3.44559 334.218 3.44559H342.984C343.544 3.44559 344.57 4.4715 344.57 5.03109ZM410.264 61.1762H409.985C406.161 64.0674 401.218 65.9326 395.435 65.9326C385.736 65.9326 381.073 60.5233 381.073 54.0881C381.073 47.8394 385.643 42.43 397.301 42.43C402.803 42.43 409.332 43.0829 409.332 43.0829L409.518 42.9896V41.9637C409.518 38.0466 407 35.342 400.938 35.342C396.461 35.342 394.596 36.8342 394.503 39.2591V39.4456C394.409 40.0052 393.663 40.285 392.917 40.285H384.15C383.591 40.285 382.565 39.2591 382.565 38.6995V38.3264C382.565 31.4249 387.881 25.829 401.031 25.829C415.487 25.829 421.456 33.4767 421.456 43.3627V63.4145C421.456 63.9741 420.43 65 419.871 65H412.969C412.316 65 411.757 64.6269 411.384 63.7876L410.264 61.1762ZM397.487 56.7927C401.964 56.7927 406.907 55.3005 409.518 53.5285V50.6373H398.233C394.13 50.6373 393.01 52.1295 393.01 53.8083C393.01 55.3938 394.316 56.7927 397.487 56.7927ZM429.995 63.4145V28.3471C429.995 27.7876 431.021 26.7617 431.58 26.7617H438.575C439.508 26.7617 439.974 27.3212 440.347 28.2539L441.466 31.2383H441.839C445.85 26.9482 450.233 25.829 454.337 25.829C458.627 25.829 463.01 28.1606 465.155 31.8912H465.435C469.352 27.6943 474.016 25.829 479.052 25.829C488.005 25.829 492.668 31.7979 492.668 40.7513V63.4145C492.668 63.9741 491.643 65 491.083 65H482.316C481.757 65 480.731 63.9741 480.731 63.4145V41.4041C480.731 37.6736 478.399 36.0881 475.694 36.0881C472.244 36.0881 468.7 38.6995 467.301 42.43V63.4145C467.301 63.9741 466.275 65 465.715 65H456.948C456.389 65 455.363 63.9741 455.363 63.4145V41.4041C455.363 37.8601 453.218 36.0881 450.326 36.0881C446.876 36.0881 443.332 38.6995 441.933 42.43V63.4145C441.933 63.9741 440.907 65 440.347 65H431.58C431.021 65 429.995 63.9741 429.995 63.4145Z" fill="url(#paint0_linear_16_5113)"/>
+            <path d="M60.2487 31.6114H50.6425C49.7099 31.6114 49.2435 31.2383 49.057 30.1192C48.1244 23.6839 42.2487 18.7409 33.8549 18.7409C24.2487 18.7409 16.4145 26.1088 16.4145 37.0207C16.4145 47.8394 23.8756 55.3005 33.8549 55.3005C42.342 55.3005 48.0311 51.1036 49.057 44.8549C49.2435 43.6425 49.7099 43.2694 50.829 43.2694H60.1554C60.9016 43.2694 61.7409 43.7357 61.7409 44.6684C61.7409 56.6995 50.456 65.9326 33.8549 65.9326C16.9741 65.9326 3.73057 54.2746 3.73057 37.0207C3.73057 19.8601 16.9741 8.10881 33.8549 8.10881C51.5751 8.10881 61.7409 19.3005 61.7409 30.399C61.7409 31.0518 61.2746 31.6114 60.2487 31.6114ZM99.1537 60.9896H98.7807C95.4232 63.7876 91.3196 65.9326 85.6304 65.9326C74.7185 65.9326 69.589 59.1244 69.589 49.1451V28.3471C69.589 27.7876 70.6149 26.7617 71.1745 26.7617H79.9413C80.5009 26.7617 81.5268 27.7876 81.5268 28.3471V48.5855C81.5268 53.2487 84.1382 55.8601 87.8688 55.8601C92.4387 55.8601 96.6356 52.5959 97.9413 49.4249V28.3471C97.9413 27.7876 98.9672 26.7617 99.5268 26.7617H108.294C108.853 26.7617 109.879 27.7876 109.879 28.3471V63.4145C109.879 63.9741 108.853 65 108.294 65H101.765C101.019 65 100.553 64.5337 100.086 63.3212L99.1537 60.9896ZM147.223 63.4145V42.057C147.223 38.3264 144.799 35.9016 140.975 35.9016C136.032 35.9016 132.394 38.9793 130.809 42.43V63.4145C130.809 63.9741 129.783 65 129.223 65H120.457C119.897 65 118.871 63.9741 118.871 63.4145V28.3471C118.871 27.7876 119.897 26.7617 120.457 26.7617H127.638C128.291 26.7617 128.85 27.3212 129.223 28.3471L130.249 31.2383H130.622C133.793 27.8808 138.923 25.829 143.773 25.829C154.498 25.829 159.255 32.3575 159.255 41.1244V63.4145C159.255 63.9741 158.229 65 157.669 65H148.809C148.249 65 147.223 63.9741 147.223 63.4145ZM196.224 63.4145V42.057C196.224 38.3264 193.799 35.9016 189.975 35.9016C185.032 35.9016 181.395 38.9793 179.809 42.43V63.4145C179.809 63.9741 178.783 65 178.224 65H169.457C168.897 65 167.871 63.9741 167.871 63.4145V28.3471C167.871 27.7876 168.897 26.7617 169.457 26.7617H176.638C177.291 26.7617 177.851 27.3212 178.224 28.3471L179.25 31.2383H179.623C182.794 27.8808 187.923 25.829 192.773 25.829C203.498 25.829 208.255 32.3575 208.255 41.1244V63.4145C208.255 63.9741 207.229 65 206.669 65H197.809C197.25 65 196.224 63.9741 196.224 63.4145ZM228.809 28.3471V63.4145C228.809 63.9741 227.783 65 227.224 65H218.457C217.897 65 216.871 63.9741 216.871 63.4145V28.3471C216.871 27.7876 217.897 26.7617 218.457 26.7617H227.224C227.783 26.7617 228.809 27.7876 228.809 28.3471ZM215.939 14.0777C215.939 10.8135 218.643 8.10881 222.84 8.10881C227.037 8.10881 229.742 10.8135 229.742 14.0777C229.742 17.342 227.037 20.0466 222.84 20.0466C218.643 20.0466 215.939 17.342 215.939 14.0777ZM266.081 63.4145V42.057C266.081 38.3264 263.656 35.9016 259.832 35.9016C254.889 35.9016 251.252 38.9793 249.666 42.43V63.4145C249.666 63.9741 248.64 65 248.081 65H239.314C238.754 65 237.728 63.9741 237.728 63.4145V28.3471C237.728 27.7876 238.754 26.7617 239.314 26.7617H246.495C247.148 26.7617 247.708 27.3212 248.081 28.3471L249.107 31.2383H249.48C252.651 27.8808 257.78 25.829 262.63 25.829C273.355 25.829 278.112 32.3575 278.112 41.1244V63.4145C278.112 63.9741 277.086 65 276.526 65H267.666C267.107 65 266.081 63.9741 266.081 63.4145ZM286.169 76.4715C286.169 72.8342 287.848 70.1295 289.993 67.9845V67.7979C287.195 65.9326 285.796 63.1347 285.796 59.5907C285.796 55.8601 287.941 52.5959 290.273 50.544C288.314 48.0259 287.288 44.9482 287.288 41.3109C287.288 32.9171 293.817 25.829 304.729 25.829C309.858 25.829 313.029 27.0414 316.293 29.5596H316.573C318.625 27.3212 320.863 25.829 325.06 25.829C326.552 25.829 327.112 26.3886 327.112 26.9482V34.5026C327.112 34.9689 326.552 35.4352 326.086 35.4352C325.62 35.4352 325.34 35.342 324.501 35.342C323.288 35.342 322.169 35.6218 321.236 36.3679C321.796 38.0466 322.076 39.6321 322.076 41.3109C322.076 50.171 315.734 56.7927 304.729 56.7927C301.837 56.7927 299.319 56.2332 297.081 55.3005C296.521 55.9534 295.868 57.1658 295.868 58.3782C295.868 60.1503 297.174 61.2694 300.532 61.2694H310.418C321.423 61.2694 326.459 67.5181 326.459 74.1399C326.459 81.9741 320.583 89.2487 306.128 89.2487H305.754C293.257 89.2487 286.169 83.4663 286.169 76.4715ZM309.019 70.4093H300.438C299.226 71.1554 298.107 72.6477 298.107 74.6062C298.107 77.4974 301.091 79.7358 305.568 79.7358H306.501C312.19 79.7358 314.521 77.2176 314.521 74.4197C314.521 72.3679 313.309 70.4093 309.019 70.4093ZM298.293 41.3109C298.293 44.5751 300.811 47.2798 304.635 47.2798C308.459 47.2798 311.071 44.5751 311.071 41.3109C311.071 38.0466 308.459 35.342 304.635 35.342C300.811 35.342 298.293 38.0466 298.293 41.3109ZM344.57 5.03109V30.6788H344.943C347.741 27.7876 352.87 25.829 357.534 25.829C367.979 25.829 373.015 31.9845 373.015 41.1244V63.4145C373.015 63.9741 371.99 65 371.43 65H362.57C362.01 65 360.984 63.9741 360.984 63.4145V42.057C360.984 38.2332 358.373 35.9016 354.642 35.9016C350.259 35.9016 346.342 38.6995 344.57 42.43V63.4145C344.57 63.9741 343.544 65 342.984 65H334.218C333.658 65 332.632 63.9741 332.632 63.4145V5.03109C332.632 4.4715 333.658 3.44559 334.218 3.44559H342.984C343.544 3.44559 344.57 4.4715 344.57 5.03109ZM410.264 61.1762H409.985C406.161 64.0674 401.218 65.9326 395.435 65.9326C385.736 65.9326 381.073 60.5233 381.073 54.0881C381.073 47.8394 385.643 42.43 397.301 42.43C402.803 42.43 409.332 43.0829 409.332 43.0829L409.518 42.9896V41.9637C409.518 38.0466 407 35.342 400.938 35.342C396.461 35.342 394.596 36.8342 394.503 39.2591V39.4456C394.409 40.0052 393.663 40.285 392.917 40.285H384.15C383.591 40.285 382.565 39.2591 382.565 38.6995V38.3264C382.565 31.4249 387.881 25.829 401.031 25.829C415.487 25.829 421.456 33.4767 421.456 43.3627V63.4145C421.456 63.9741 420.43 65 419.871 65H412.969C412.316 65 411.757 64.6269 411.384 63.7876L410.264 61.1762ZM397.487 56.7927C401.964 56.7927 406.907 55.3005 409.518 53.5285V50.6373H398.233C394.13 50.6373 393.01 52.1295 393.01 53.8083C393.01 55.3938 394.316 56.7927 397.487 56.7927ZM429.995 63.4145V28.3471C429.995 27.7876 431.021 26.7617 431.58 26.7617H438.575C439.508 26.7617 439.974 27.3212 440.347 28.2539L441.466 31.2383H441.839C445.85 26.9482 450.233 25.829 454.337 25.829C458.627 25.829 463.01 28.1606 465.155 31.8912H465.435C469.352 27.6943 474.016 25.829 479.052 25.829C488.005 25.829 492.668 31.7979 492.668 40.7513V63.4145C492.668 63.9741 491.643 65 491.083 65H482.316C481.757 65 480.731 63.9741 480.731 63.4145V41.4041C480.731 37.6736 478.399 36.0881 475.694 36.0881C472.244 36.0881 468.7 38.6995 467.301 42.43V63.4145C467.301 63.9741 466.275 65 465.715 65H456.948C456.389 65 455.363 63.9741 455.363 63.4145V41.4041C455.363 37.8601 453.218 36.0881 450.326 36.0881C446.876 36.0881 443.332 38.6995 441.933 42.43V63.4145C441.933 63.9741 440.907 65 440.347 65H431.58C431.021 65 429.995 63.9741 429.995 63.4145Z" fill="#00FF57" style="mix-blend-mode:saturation"/>
+        </g>
+    </g>
+    <defs>
+        <filter id="filter0_d_16_5113" x="-112.85" y="-113.135" width="722.099" height="318.964" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="58.2902"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_5113"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_5113" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_16_5113" x1="248.5" y1="0" x2="248.5" y2="90" gradientUnits="userSpaceOnUse">
+            <stop offset="0.28125" stop-color="#5894E1"/>
+            <stop offset="1" stop-color="#377FDB"/>
+        </linearGradient>
+        <clipPath id="clip0_16_5113">
+            <rect width="497" height="90" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>