From d22ab93ad67dbc8601305b039d82de2c4c668dcd Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Tue, 8 Oct 2024 16:06:43 +0200
Subject: [PATCH] docs: ad a11y documentation page

---
 documentation/using-spark/Setup.mdx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/documentation/using-spark/Setup.mdx b/documentation/using-spark/Setup.mdx
index 38be26273..5ae897c96 100644
--- a/documentation/using-spark/Setup.mdx
+++ b/documentation/using-spark/Setup.mdx
@@ -6,25 +6,21 @@ import { Callout } from '@docs/helpers/Callout'
 
 # Setup
 
-## 1. Setup TailwindCSS
+## Prerequisites
 
-If you haven't installed **TailwindCSS** on your project yet, you **must** follow the [TailwindCSS installation guide](https://tailwindcss.com/docs/installation).
+**Spark UI** being based on **Tailwind CSS** library, you will need to [have it installed](https://tailwindcss.com/docs/installation) in your system.
 
-## 2. IntelliSense
+To take benefit of a full empowered developper experience (autocomplete, syntax highlighting, linting...), you should also take a look at [**Tailwind CSS IntelliSense**](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) extension. For now it comes actually only for VS Code but you also may be interested on equivalent solutions such as the ones provided [for JetBrains IDEs](https://www.jetbrains.com/help/webstorm/tailwind-css.html).
 
-The official Tailwind CSS [IntelliSense extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) for **Visual Studio Code** enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.
+## Spark setup
 
-**JetBrains IDEs** like WebStorm, PhpStorm, and others include [support](https://www.jetbrains.com/help/webstorm/tailwind-css.html) for intelligent Tailwind CSS completions in your HTML and when using @apply.
-
-## 3. Setup Spark
-
-After setting up **Tailwind** for your application, install the following packages via your command line:
+After completing the Tailwind CSS setup, you'll simply have to install the following packages via your command line:
 
 ```bash
 npm i @spark-ui/tailwind-plugins @spark-ui/theme-utils
 ```
 
-Next, navigate to your **Tailwind config file**. Refer to the example below for proper configuration of our **Spark plugins**:
+Navigate to your `tailwind.config.js` file and refer to the example below for proper configuration of our **Spark plugins**:
 
 ```js
 // tailwind.config.js
@@ -51,9 +47,9 @@ Two important notes regarding the example above:
 - we are using our default themes from our `theme-utils` package. However, you can replace it with your own themes, as long as they adhere to our `Theme` interface.
   The Theme interface is available through the [**@spark-ui/theme-utils**](?path=/docs/utils-theme--docs) package.
 
-- The `sparkConfig` plugin accepts an object with two fields: `themes` and `htmlFontSize`.
+- the `sparkConfig` plugin accepts an object with two fields:
 
-**themes**:
+**`themes`:**
 
 An object containing your themes. Each key in the object will be extracted to a `[data-theme]` attribute, and the values will be converted to CSS custom properties inside the `css` file generated by Tailwing. **Note that this object requires a key with a value of default**, which specifies the default theme for your project.
 
@@ -81,7 +77,7 @@ Tailwind will generate the following CSS:
 }
 ```
 
-**htmlFontSize (optional)**:
+**`htmlFontSize` (optional):**
 
 Spark uses a base font size of **16 pixels** as a standard value for calculating the sizes of all other font-related properties defined in the theme. For example, our `spacing.lg` value is defined as **1rem**, which is equal to 16 pixels (based on the default base font size of 16 pixels).
 
@@ -113,15 +109,13 @@ module.exports = {
 }
 ```
 
-That's all there is to it! 🎉
-
 <Callout marginBottom="large">
   If you want to know more about the custom token class names used in Spark, please check out our
   [**dedicated page**](https://sparkui.vercel.app/viewer/) where you can find a comprehensive list
   of these class names.
 </Callout>
 
-<div className="flex justify-end mt-md">
+<div className="mt-md flex justify-end">
   <Card
     href="/?path=/docs/using-spark-styling-overview--docs#overview-of-spark-styling-solution"
     description="Spark styling solution overview"