docs: update look'n'feel as well as cover image

Author: clementprevot

package.json

@@ -72,23 +72,23 @@
     "update-references": "workspaces-to-typescript-project-references --includesRoot"
   },
   "devDependencies": {
-    "@monorepo-utils/workspaces-to-typescript-project-references": "^2.10.4",
+    "@monorepo-utils/workspaces-to-typescript-project-references": "^2.11.0",
     "@qiwi/multi-semantic-release": "^7.1.2",
-    "@snowball-tech/prettier-config": "^2.1.4",
-    "@snowball-tech/semantic-release-config": "^3.0.5",
+    "@snowball-tech/prettier-config": "^2.1.5",
+    "@snowball-tech/semantic-release-config": "^3.0.6",
     "chromatic": "^11.28.2",
     "depcheck": "^1.4.7",
     "eslint": "^9.26.0",
     "husky": "^9.1.7",
     "is-ci": "^4.1.0",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "nodemon": "^3.1.10",
     "prettier": "^3.5.3",
     "semantic-release": "^24.2.3",
     "serve": "^14.2.4"
   },
   "dependencies": {
-    "@snowball-tech/eslint-snowball-config": "^2.0.14",
+    "@snowball-tech/eslint-snowball-config": "^2.0.15",
     "@yarnpkg/types": "^4.0.1"
   }
 }

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

@@ -15,6 +15,12 @@
     letter-spacing: var(--typography-display-2-letter-spacing);
   }
 
+  .cover-img {
+    border: var(--border-1) !important;
+    border-radius: var(--size-radius-s) !important;
+    box-shadow: var(--shadow-brutal-1) !important;
+  }
+
   .sbdocs-content > h2 {
     font-family: var(--typography-heading-2-font-family);
     font-size: var(--typography-heading-2-font-size-xxs);
@@ -54,6 +60,13 @@
     text-decoration: var(--typography-body-1-link-text-decoration);
   }
 
+  .sbdocs-content > blockquote {
+    background-color: var(--color-base-white) !important;
+    border-radius: var(--size-radius-s) !important;
+    border: var(--border-1) !important;
+    padding: var(--size-spacing-2) !important;
+  }
+
   .sbdocs-content > blockquote > * {
     font-family: var(--typography-body-2-font-family);
     font-size: var(--typography-body-2-font-size);
@@ -77,12 +90,12 @@
   }
 
   .docblock-source {
+    background-color: var(--color-base-white) !important;
     margin: 0 0 var(--size-spacing-4) !important;
     box-shadow: var(--shadow-brutal-2) !important;
     border-radius: var(--size-radius-s) !important;
   }
 
-  .sbdocs-wrapper,
   .docblock-source button,
   .docblock-code-toggle {
     background-color: var(--color-base-white) !important;
@@ -93,16 +106,26 @@
     border-radius: var(--size-radius-s) !important;
   }
 
+  .docblock-argstable-body,
+  .docblock-argstable-body td {
+    background-color: var(--color-base-white) !important;
+  }
+
   .docblock-argstable-body > tr > td:first-of-type,
   .docblock-argstable-body > tr > td:last-of-type {
     border-radius: var(--size-radius-0) !important;
   }
 
   .sbdocs-preview {
+    background-color: var(--color-base-white) !important;
     box-shadow: var(--shadow-brutal-2) !important;
     border-radius: var(--size-radius-s) !important;
   }
 
+  .docblock-typeset {
+    background-color: var(--color-base-white) !important;
+  }
+
   hr {
     height: 1px;
     min-height: 1px;
@@ -113,7 +136,7 @@
   }
 
   .example-block {
-    background-color: var(--color-background-body-light) !important;
+    background-color: var(--color-base-white) !important;
     padding: 20px !important;
   }
 

packages/fractal/package.json

@@ -32,7 +32,7 @@
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.19",
     "emoji-mart": "^5.6.0",
-    "libphonenumber-js": "^1.12.7",
+    "libphonenumber-js": "^1.12.8",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@csstools/postcss-cascade-layers": "^5.0.1",
     "@snowball-tech/eslint-config": "^5.6.2",
-    "@snowball-tech/prettier-config": "^2.1.4",
+    "@snowball-tech/prettier-config": "^2.1.5",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-actions": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -82,7 +82,7 @@
     "storybook-addon-mock-date": "^0.6.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "vercel": "^41.7.0",
+    "vercel": "^41.7.4",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },

packages/fractal/public/images/cover_fractal.png

@@ -2,11 +2,9 @@ import { Meta } from '@storybook/blocks'
 
 <Meta title="Fractal" />
 
-# <img alt="Fractal's logo" src="/images/logo_fractal.png" width="50" /> Fractal
+# <img alt="" src="/images/logo_fractal.png" width="50" /> Fractal
 
----
-
-![Fractal design system](/images/cover_fractal.png)
+<img alt="" src="/images/cover_fractal.png" className="cover-img" />
 
 Fractal is [Snowball's](https://snowball.xyz) design system.
 
@@ -99,6 +97,6 @@ There are **2 passionate folks** behind Fractal:
 - [Léa Mendes Da Silva](https://dribbble.com/LeaMendes), [principal designer](https://www.linkedin.com/in/leadesign/) at
   [Snowball](https://www.linkedin.com/company/getsnowball/).  
   She loves rainbows, unicorns, Baba (her Golden retriever) and built the Figma file with love.
-- [Clément Prévot](github.com/clementprevot), [lead tech](https://www.linkedin.com/in/clement-p/) at
+- [Clément Prévot](github.com/clementprevot), [CTO](https://www.linkedin.com/in/clement-p/) at
   [Snowball](https://www.linkedin.com/company/getsnowball/).  
   He loves Star Wars, Lego, Lapland, and built Fractal’s code and documentation with the heart.