From 21992767d09dbfa2de30d98d4f17a05a199336e8 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 22 Feb 2024 15:28:52 -0500
Subject: [PATCH 1/9] wip

---
 packages/documentation/.ladle/config.mjs      |  2 +-
 packages/documentation/.ladle/styles.css      | 13 +--
 packages/documentation/nodemon.json           |  3 +
 packages/documentation/package.json           |  4 +-
 .../src/GettingStarted/overview.stories.mdx   | 78 -----------------
 .../src/GettingStarted/overview.stories.tsx   | 87 +++++++++++++++++++
 packages/ui-components/lib/tailwindPlugin.ts  | 10 ++-
 7 files changed, 102 insertions(+), 95 deletions(-)
 create mode 100644 packages/documentation/nodemon.json
 delete mode 100644 packages/documentation/src/GettingStarted/overview.stories.mdx
 create mode 100644 packages/documentation/src/GettingStarted/overview.stories.tsx

diff --git a/packages/documentation/.ladle/config.mjs b/packages/documentation/.ladle/config.mjs
index 1f8eb76c..ca7adffe 100644
--- a/packages/documentation/.ladle/config.mjs
+++ b/packages/documentation/.ladle/config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('@ladle/react').UserConfig} */
 
 export default {
-	defaultStory: "getting-started--overview",
+	// defaultStory: "getting-started--overview",
 	storyOrder: [
 		"getting-started--overview",
 		"getting-started--installation",
diff --git a/packages/documentation/.ladle/styles.css b/packages/documentation/.ladle/styles.css
index f4aa175b..cd393765 100644
--- a/packages/documentation/.ladle/styles.css
+++ b/packages/documentation/.ladle/styles.css
@@ -12,18 +12,7 @@
 	.docs-typography p:not(.not-docs-typography p) {
 		@apply my-0 text-lg leading-7 text-copy-lighter;
 	}
-	.docs-typography h1:not(.not-docs-typography h1) {
-		@apply mb-4 text-4xl text-copy-light;
-		font-family: "Open Sans";
-	}
-	.docs-typography h2:not(.not-docs-typography h2) {
-		@apply mb-3 mt-6 text-3xl text-copy-light;
-		font-family: "Open Sans";
-	}
-	.docs-typography h3:not(.not-docs-typography h3) {
-		@apply mb-3 mt-3 text-2xl text-copy-light;
-		font-family: "Open Sans";
-	}
+
 	.docs-typography blockquote p:not(.not-docs-typography p) {
 		@apply mb-0 italic leading-7 text-copy-lighter;
 		font-family: Georgia, serif;
diff --git a/packages/documentation/nodemon.json b/packages/documentation/nodemon.json
new file mode 100644
index 00000000..450d7bf0
--- /dev/null
+++ b/packages/documentation/nodemon.json
@@ -0,0 +1,3 @@
+{
+	"watch": ["src/**/*.*", "../ui-components/src/**/*.*"]
+}
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index d252f570..91348fa8 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -10,9 +10,9 @@
 		"build:docs": "ladle build --outDir dist",
 		"build": "npm-run-all --serial clean build:docs",
 		"clean": "rimraf dist",
-		"dev": "ladle serve",
+		"dev": "nodemon",
 		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
-		"start": "static-server dist --port 5173",
+		"start": "ladle serve --noWatch",
 		"test:coverage": "echo \"WARNING: no test specified\" && exit 0",
 		"test": "echo \"WARNING: no test specified\" && exit 0"
 	},
diff --git a/packages/documentation/src/GettingStarted/overview.stories.mdx b/packages/documentation/src/GettingStarted/overview.stories.mdx
deleted file mode 100644
index 6449c735..00000000
--- a/packages/documentation/src/GettingStarted/overview.stories.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { linkTo, Meta } from "@ladle/react";
-import {
-	ButtonIcon,
-	Flexgrid,
-	FlexgridItem,
-	IconNext,
-	Card,
-} from "@versini/ui-components";
-
-<Meta title="Getting started/Overview" />
-
-# UI Components
-
-<Flexgrid alignVertical="center">
-	<FlexgridItem span={{fallback:12 , lg: 6}}>
-		> UI Components provides a strong, responsive, and accessible library of
-		foundational React components.
-
-    <ButtonIcon
-    	spacing={{ t: 8 }}
-    	labelLeft="Installation"
-    	noBorder
-    	onClick={linkTo("getting-started--installation")}
-    >
-    	<IconNext decorative monotone />
-    </ButtonIcon>
-
-  </FlexgridItem>
-  <FlexgridItem span={{fallback:12 , lg: 6}}>
-		<img
-			className="mt-5"
-			src="hero-14.jpg"
-			alt="An illustration of web page rendered on both desktop and mobile devices."
-			title="Hero image of a web page rendered on both desktop and mobile devices."
-    	/>
-  </FlexgridItem>
-</Flexgrid>
-
-## Features
-
-<div className="prose">
-	<ul>
-		<li>
-			<strong>Strong</strong>: built-in strong components typing via TypeScript.
-    	</li>
-    	<li>
-    		<strong>Responsive</strong>: built-in responsive components.
-    	</li>
-    	<li>
-    		<strong>Accessible</strong>: built with accessibility in mind from the
-    		start.
-    	</li>
-    </ul>
-
-</div>
-
-## Extra
-
-<div className="prose">
-	<ul>
-		<li>
-			<strong>TailwindCSS</strong>: built with TailwindCSS, enabling styles
-			tree-shaking.
-		</li>
-		<li>
-			<strong>Hooks</strong>: provides a set of hooks to use in your
-			application.
-		</li>
-		<li>
-			<strong>Icons</strong>: provides a set of icons to use in your
-			application.
-		</li>
-		<li>
-			<strong>Theming</strong>: provides a theming system to customize the look
-			of the components.
-		</li>
-	</ul>
-</div>
diff --git a/packages/documentation/src/GettingStarted/overview.stories.tsx b/packages/documentation/src/GettingStarted/overview.stories.tsx
new file mode 100644
index 00000000..624b1a4d
--- /dev/null
+++ b/packages/documentation/src/GettingStarted/overview.stories.tsx
@@ -0,0 +1,87 @@
+import type { Story } from "@ladle/react";
+import { linkTo, Meta } from "@ladle/react";
+import {
+	ButtonIcon,
+	Flexgrid,
+	FlexgridItem,
+	IconNext,
+} from "@versini/ui-components";
+
+export default {
+	title: "Getting started",
+};
+
+export const Overview: Story<any> = () => (
+	<>
+		<Meta title="Getting started/Overview" />
+
+		<div className="prose">
+			<h1>UI Components -- </h1>
+
+			<Flexgrid alignVertical="center">
+				<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+					<blockquote>
+						<p>
+							UI Components provides a strong, responsive, and accessible
+							library of foundational React components.
+						</p>
+					</blockquote>
+
+					<ButtonIcon
+						spacing={{ t: 8 }}
+						labelLeft="Installation"
+						noBorder
+						onClick={linkTo("getting-started--installation")}
+					>
+						<IconNext decorative monotone />
+					</ButtonIcon>
+				</FlexgridItem>
+				<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+					<img
+						className="mt-5"
+						src="hero-14.jpg"
+						alt="An illustration of web page rendered on both desktop and mobile devices."
+						title="Hero image of a web page rendered on both desktop and mobile devices."
+					/>
+				</FlexgridItem>
+			</Flexgrid>
+
+			<h2>Features</h2>
+
+			<ul>
+				<li>
+					<strong>Strong</strong>: built-in strong components typing via
+					TypeScript.
+				</li>
+				<li>
+					<strong>Responsive</strong>: built-in responsive components.
+				</li>
+				<li>
+					<strong>Accessible</strong>: built with accessibility in mind from the
+					start.
+				</li>
+			</ul>
+
+			<h2>Extra</h2>
+
+			<ul>
+				<li>
+					<strong>TailwindCSS</strong>: built with TailwindCSS, enabling styles
+					tree-shaking.
+				</li>
+				<li>
+					<strong>Hooks</strong>: provides a set of hooks to use in your
+					application.
+				</li>
+				<li>
+					<strong>Icons</strong>: provides a set of icons to use in your
+					application.
+				</li>
+				<li>
+					<strong>Theming</strong>: provides a theming system to customize the
+					look of the components.
+				</li>
+			</ul>
+		</div>
+	</>
+);
diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts
index 759d1f99..825a9f9e 100644
--- a/packages/ui-components/lib/tailwindPlugin.ts
+++ b/packages/ui-components/lib/tailwindPlugin.ts
@@ -44,17 +44,23 @@ const myComponentLibraryConfig = {
 	theme: {
 		extend: {
 			colors: dynamicColors(),
+			// typography: ({ theme }: { theme: any }) => ({
 			typography: {
 				DEFAULT: {
 					css: {
+						"h1, h2, h3, h4, h5, h6": {
+							color: tokens.colors["copy-light"],
+							fontFamily: "Open Sans",
+						},
 						blockquote: {
-							borderLeftColor: "var(--tw-prose-blockquote-border-color)",
+							borderLeftColor: tokens.colors["border-dark"],
 						},
 						"ul > li::marker": {
-							color: "var(--tw-prose-counter)",
+							color: "var(--tw-prose-counters)",
 						},
 					},
 				},
+				// }),
 			},
 		},
 	},

From c317e9db457f9d0fbaafc8630a7e4a920df42737 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 22 Feb 2024 20:51:48 -0500
Subject: [PATCH 2/9] feat: adding typography classes prose-light and
 prose-dark

---
 packages/documentation/.ladle/components.tsx  |  30 +----
 packages/documentation/.ladle/config.mjs      |   2 +-
 packages/documentation/.ladle/styles.css      |   4 +-
 packages/documentation/nodemon.json           |   6 +-
 .../src/Components/Main.stories.tsx           |   7 +-
 .../src/Components/Table.stories.tsx          |  12 +-
 .../src/GettingStarted/1-overview.stories.tsx |  82 ++++++++++++
 .../GettingStarted/2-Installation.stories.tsx |  50 +++++++
 .../3-configuration.stories.tsx               | 108 +++++++++++++++
 ...{usage.stories.mdx => 4-usage.stories.mdx} |  30 +++--
 .../GettingStarted/Installation.stories.mdx   |  47 -------
 .../GettingStarted/configuration.stories.mdx  |  84 ------------
 .../src/GettingStarted/overview.stories.tsx   |  87 -------------
 .../src/System/Flexgrid.stories.tsx           |  99 +++++++-------
 .../src/System/Icons.stories.tsx              |  50 ++++---
 packages/ui-components/lib/tailwindPlugin.ts  | 123 ++++++++++++++++--
 .../src/components/Bubble/utilities.ts        |   2 +-
 .../src/components/Button/utilities.ts        |   2 +-
 .../src/components/Card/utilities.ts          |   2 +-
 .../src/components/Table/Table.tsx            |   1 +
 .../src/components/Table/utilities.ts         |   6 +-
 21 files changed, 476 insertions(+), 358 deletions(-)
 create mode 100644 packages/documentation/src/GettingStarted/1-overview.stories.tsx
 create mode 100644 packages/documentation/src/GettingStarted/2-Installation.stories.tsx
 create mode 100644 packages/documentation/src/GettingStarted/3-configuration.stories.tsx
 rename packages/documentation/src/GettingStarted/{usage.stories.mdx => 4-usage.stories.mdx} (70%)
 delete mode 100644 packages/documentation/src/GettingStarted/Installation.stories.mdx
 delete mode 100644 packages/documentation/src/GettingStarted/configuration.stories.mdx
 delete mode 100644 packages/documentation/src/GettingStarted/overview.stories.tsx

diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx
index 316e49b6..d684fc62 100644
--- a/packages/documentation/.ladle/components.tsx
+++ b/packages/documentation/.ladle/components.tsx
@@ -7,38 +7,18 @@ import clsx from "clsx";
 
 const renderImportLine = (importName: string) => {
 	return (
-		<div className="docs-typography">
+		<div className="mb-6 max-w-none">
 			<h1>{importName}</h1>
-			<pre className="ladle-markdown">
-				<div
-					className="prism-code language-bash"
-					style={{
-						color: "rgb(57, 58, 52)",
-						backgroundColor: "var(--ladle-bg-color-secondary)",
-						textAlign: "left",
-						margin: "0.5em 0px 1em",
-						padding: "1em",
-					}}
-				>
-					<div>
-						<span className="token plain">{`import { ${importName} } from "@versini/ui-components";`}</span>
-					</div>
-				</div>
+			<pre>
+				<code>{`import { ${importName} } from "@versini/ui-components";`}</code>
 			</pre>
 		</div>
 	);
 };
 
-export const Provider: GlobalProvider = ({
-	children,
-	globalState,
-	storyMeta,
-}) => {
+export const Provider: GlobalProvider = ({ children, storyMeta }) => {
 	const className = clsx(
-		"mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl",
-		{
-			"docs-typography": globalState.story.startsWith("getting-started--"),
-		},
+		"prose prose-light mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl",
 	);
 	const handleOnClickGitHub = () => {
 		window.open(import.meta.env.REPOSITORY, "_blank", "noopener,noreferrer");
diff --git a/packages/documentation/.ladle/config.mjs b/packages/documentation/.ladle/config.mjs
index ca7adffe..1f8eb76c 100644
--- a/packages/documentation/.ladle/config.mjs
+++ b/packages/documentation/.ladle/config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('@ladle/react').UserConfig} */
 
 export default {
-	// defaultStory: "getting-started--overview",
+	defaultStory: "getting-started--overview",
 	storyOrder: [
 		"getting-started--overview",
 		"getting-started--installation",
diff --git a/packages/documentation/.ladle/styles.css b/packages/documentation/.ladle/styles.css
index cd393765..a4a0526a 100644
--- a/packages/documentation/.ladle/styles.css
+++ b/packages/documentation/.ladle/styles.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
+/* @layer components {
 	.docs-typography strong:not(.not-docs-typography strong) {
 		@apply text-copy-lighter;
 	}
@@ -23,4 +23,4 @@
 	.docs-typography .prism-code:not(.not-docs-typography .prism-code) {
 		@apply m-1 !important;
 	}
-}
+} */
diff --git a/packages/documentation/nodemon.json b/packages/documentation/nodemon.json
index 450d7bf0..5f0f51bf 100644
--- a/packages/documentation/nodemon.json
+++ b/packages/documentation/nodemon.json
@@ -1,3 +1,7 @@
 {
-	"watch": ["src/**/*.*", "../ui-components/src/**/*.*"]
+	"watch": [
+		".ladle/*.*",
+		"src/**/*.*",
+		"../ui-components/src/**/*.*",
+		"../ui-components/lib/**/*.*"]
 }
diff --git a/packages/documentation/src/Components/Main.stories.tsx b/packages/documentation/src/Components/Main.stories.tsx
index 0b6da195..890faa7a 100644
--- a/packages/documentation/src/Components/Main.stories.tsx
+++ b/packages/documentation/src/Components/Main.stories.tsx
@@ -15,16 +15,17 @@ Basic.args = {
 
 export const WithHeaderAndFooter: Story<any> = (args) => (
 	<div className="h-full bg-slate-100">
-		<Header {...args} className="bg-slate-300">
+		<Header {...args} className="bg-slate-500">
 			<div>hello header content</div>
 		</Header>
 
-		<Main {...args} className="bg-slate-300">
+		<Main {...args} className="bg-slate-500">
 			<div>hello main content</div>
 		</Main>
 
 		<Footer
-			className="bg-slate-300"
+			kind="light"
+			className="bg-slate-500"
 			row1={<div>App Name v1.0.0</div>}
 			row2={<div>something something</div>}
 		/>
diff --git a/packages/documentation/src/Components/Table.stories.tsx b/packages/documentation/src/Components/Table.stories.tsx
index 94ab0b2a..ea381774 100644
--- a/packages/documentation/src/Components/Table.stories.tsx
+++ b/packages/documentation/src/Components/Table.stories.tsx
@@ -104,11 +104,7 @@ export const WithAction: Story<any> = (args) => {
 						{data.map((row, idx) => {
 							return (
 								<TableRow key={`${row.id}-${idx}`}>
-									<TableCell
-										component="th"
-										scope="row"
-										className="text-gray-400"
-									>
+									<TableCell component="th" scope="row">
 										{row.timestamp}
 									</TableCell>
 									<TableCell>{row.character}</TableCell>
@@ -209,11 +205,7 @@ export const WithStickyHeader: Story<any> = (args) => {
 						{data.map((row, idx) => {
 							return (
 								<TableRow key={`${row.id}-${idx}`}>
-									<TableCell
-										component="th"
-										scope="row"
-										className="text-gray-400"
-									>
+									<TableCell component="th" scope="row">
 										{row.timestamp}
 									</TableCell>
 									<TableCell>{row.character}</TableCell>
diff --git a/packages/documentation/src/GettingStarted/1-overview.stories.tsx b/packages/documentation/src/GettingStarted/1-overview.stories.tsx
new file mode 100644
index 00000000..9e68186c
--- /dev/null
+++ b/packages/documentation/src/GettingStarted/1-overview.stories.tsx
@@ -0,0 +1,82 @@
+import { linkTo, Story } from "@ladle/react";
+import {
+	ButtonIcon,
+	Flexgrid,
+	FlexgridItem,
+	IconNext,
+} from "@versini/ui-components";
+
+export default {
+	title: "Getting started",
+};
+
+export const Overview: Story<any> = () => (
+	<div className="prose prose-light max-w-none">
+		<h1 className="mb-0">UI Components</h1>
+
+		<Flexgrid alignVertical="center">
+			<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+				<blockquote>
+					<p>
+						UI Components provides a strong, responsive, and accessible library
+						of foundational React components.
+					</p>
+				</blockquote>
+
+				<ButtonIcon
+					spacing={{ t: 8 }}
+					labelLeft="Installation"
+					noBorder
+					onClick={linkTo("getting-started--installation")}
+				>
+					<IconNext decorative monotone />
+				</ButtonIcon>
+			</FlexgridItem>
+			<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+				<img
+					className="mt-5"
+					src="hero-14.jpg"
+					alt="An illustration of web page rendered on both desktop and mobile devices."
+					title="Hero image of a web page rendered on both desktop and mobile devices."
+				/>
+			</FlexgridItem>
+		</Flexgrid>
+
+		<h2>Features</h2>
+
+		<ul>
+			<li>
+				<strong>Strong</strong>: built-in strong components typing via
+				TypeScript.
+			</li>
+			<li>
+				<strong>Responsive</strong>: built-in responsive components.
+			</li>
+			<li>
+				<strong>Accessible</strong>: built with accessibility in mind from the
+				start.
+			</li>
+		</ul>
+
+		<h2>Extra</h2>
+
+		<ul>
+			<li>
+				<strong>TailwindCSS</strong>: built with TailwindCSS, enabling styles
+				tree-shaking.
+			</li>
+			<li>
+				<strong>Hooks</strong>: provides a set of hooks to use in your
+				application.
+			</li>
+			<li>
+				<strong>Icons</strong>: provides a set of icons to use in your
+				application.
+			</li>
+			<li>
+				<strong>Theming</strong>: provides a theming system to customize the
+				look of the components.
+			</li>
+		</ul>
+	</div>
+);
diff --git a/packages/documentation/src/GettingStarted/2-Installation.stories.tsx b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx
new file mode 100644
index 00000000..c4a89ba9
--- /dev/null
+++ b/packages/documentation/src/GettingStarted/2-Installation.stories.tsx
@@ -0,0 +1,50 @@
+import { linkTo, Story } from "@ladle/react";
+import {
+	ButtonIcon,
+	Flexgrid,
+	FlexgridItem,
+	IconNext,
+	IconPrevious,
+} from "@versini/ui-components";
+
+export default {
+	title: "Getting Started",
+};
+
+export const Installation: Story<any> = () => (
+	<div className="prose prose-light max-w-none">
+		<h1>Installation</h1>
+		<p>
+			The <strong>UI-Components</strong> library is available as a npm package.
+		</p>
+		<pre>
+			<code>$ npm install --save @versini/ui-components</code>
+		</pre>
+		<p>
+			You also need to install React and React-DOM (at least 18.0.0 or above).
+		</p>
+		<pre>
+			<code>$ npm install --save react react-dom</code>
+		</pre>
+		<Flexgrid alignHorizontal="space-between">
+			<FlexgridItem>
+				<ButtonIcon
+					labelRight="Overview"
+					noBorder
+					onClick={linkTo("getting-started--overview")}
+				>
+					<IconPrevious decorative monotone />
+				</ButtonIcon>
+			</FlexgridItem>
+			<FlexgridItem>
+				<ButtonIcon
+					labelLeft="Configuration"
+					noBorder
+					onClick={linkTo("getting-started--configuration")}
+				>
+					<IconNext decorative monotone />
+				</ButtonIcon>
+			</FlexgridItem>
+		</Flexgrid>
+	</div>
+);
diff --git a/packages/documentation/src/GettingStarted/3-configuration.stories.tsx b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx
new file mode 100644
index 00000000..14b07ddc
--- /dev/null
+++ b/packages/documentation/src/GettingStarted/3-configuration.stories.tsx
@@ -0,0 +1,108 @@
+import { linkTo, Story } from "@ladle/react";
+import {
+	ButtonIcon,
+	Flexgrid,
+	FlexgridItem,
+	IconNext,
+	IconPrevious,
+} from "@versini/ui-components";
+
+export default {
+	title: "Getting Started",
+};
+
+export const Configuration: Story<any> = () => (
+	<div className="prose prose-light max-w-none">
+		<h1>Configuration</h1>
+
+		<h2>JavaScript</h2>
+
+		<ul>
+			<li>
+				<p>
+					UI Components come un-bundled, which means you need to use a bundler
+					such as Webpack, Vite or Rollup to bundle components into your
+					application.
+				</p>
+			</li>
+			<li>
+				<p>
+					UI Components are tree-shakeable, side-effect free and each component
+					style is self-contained.
+				</p>
+			</li>
+			<li>
+				<p>
+					Please refer to each component API documentation (under the Components
+					or Form components menu) to see how they should be imported, what
+					their individual props are as well as many different examples.
+				</p>
+			</li>
+		</ul>
+
+		<h2>CSS</h2>
+
+		<p>
+			You can use the <strong>UI-Components</strong> library with or without{" "}
+			<strong>TailwindCSS</strong>. Depending on your situation, you can either
+			use the pre-built CSS or the TailwindCSS plugin to build your own styles
+			and take advantage of tree-shaking unused styles.
+		</p>
+
+		<h2>Without TailwindCSS</h2>
+
+		<p>
+			If you are not using TailwindCSS, you can use the pre-built CSS file. Just
+			import it in your entry file:
+		</p>
+
+		<pre>
+			<code>
+				{`// index.js
+import "@versini/ui-components/dist/style.css";`}
+			</code>
+		</pre>
+
+		<h2>With TailwindCSS</h2>
+
+		<p>
+			If you are using TailwindCSS, you can use the{" "}
+			<strong>UI-Components</strong> library TailwindCSS plugin:
+		</p>
+
+		<pre>
+			<code>
+				{`// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+
+import { twPlugin } from "@versini/ui-components/dist/utilities";
+
+export default twPlugin.merge({
+  // this is an example, you can change the path to your files
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+});`}
+			</code>
+		</pre>
+
+		<Flexgrid alignHorizontal="space-between">
+			<FlexgridItem>
+				<ButtonIcon
+					labelRight="Installation"
+					noBorder
+					onClick={linkTo("getting-started--installation")}
+				>
+					<IconPrevious decorative monotone />
+				</ButtonIcon>
+			</FlexgridItem>
+			<FlexgridItem>
+				<ButtonIcon
+					labelLeft="Usage"
+					noBorder
+					onClick={linkTo("getting-started--usage")}
+				>
+					<IconNext decorative monotone />
+				</ButtonIcon>
+			</FlexgridItem>
+		</Flexgrid>
+	</div>
+);
diff --git a/packages/documentation/src/GettingStarted/usage.stories.mdx b/packages/documentation/src/GettingStarted/4-usage.stories.mdx
similarity index 70%
rename from packages/documentation/src/GettingStarted/usage.stories.mdx
rename to packages/documentation/src/GettingStarted/4-usage.stories.mdx
index e009fe1c..0784ea9d 100644
--- a/packages/documentation/src/GettingStarted/usage.stories.mdx
+++ b/packages/documentation/src/GettingStarted/4-usage.stories.mdx
@@ -10,7 +10,9 @@ import {
 
 <Meta title="Getting started/Usage" />
 
-# Usage
+<div className="prose-light prose mb-6">
+	<h1>Usage</h1>
+</div>
 
 ```jsx
 // App.jsx
@@ -37,22 +39,22 @@ function App() {
 }
 ```
 
-If everything works well, this is what you should see in your page:
+<div className="prose prose-light max-w-none">
+	<p className="mb-4">If everything works well, this is what you should see in your page:</p>
 
-<div className="not-docs-typography mt-4">
-	<Card
-		header="Welcome to UI Components"
-		footer={
-			<Button kind="light" noBorder>
-				Hooray
-			</Button>
-		}
-	>
-		<p>Hello World</p>
-	</Card>
+<Card
+	header="Welcome to UI Components"
+	footer={
+		<Button kind="light" noBorder>
+			Hooray
+		</Button>
+	}
+>
+	<p>Hello World</p>
+</Card>
 </div>
 
-<div className="not-docs-typography mt-8">
+<div className="mt-8">
 	<Flexgrid alignHorizontal="flex-start">
 		<FlexgridItem>
 			<ButtonIcon
diff --git a/packages/documentation/src/GettingStarted/Installation.stories.mdx b/packages/documentation/src/GettingStarted/Installation.stories.mdx
deleted file mode 100644
index b48f0db3..00000000
--- a/packages/documentation/src/GettingStarted/Installation.stories.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { linkTo, Meta } from "@ladle/react";
-import {
-	ButtonIcon,
-	Flexgrid,
-	FlexgridItem,
-	IconNext,
-	IconPrevious,
-} from "@versini/ui-components";
-
-<Meta title="Getting started/Installation" />
-
-# Installation
-
-The <strong>UI-Components</strong> library is available as a npm package.
-
-```bash
-$ npm install --save @versini/ui-components
-```
-
-You also need to install React and React-DOM (at least 18.0.0 or above).
-
-```bash
-$ npm install --save react react-dom
-```
-
-<div className="not-docs-typography">
-	<Flexgrid alignHorizontal="space-between">
-		<FlexgridItem>
-			<ButtonIcon
-				labelRight="Overview"
-				noBorder
-				onClick={linkTo("getting-started--overview")}
-			>
-				<IconPrevious decorative monotone />
-			</ButtonIcon>
-		</FlexgridItem>
-		<FlexgridItem>
-			<ButtonIcon
-				labelLeft="Configuration"
-				noBorder
-				onClick={linkTo("getting-started--configuration")}
-			>
-				<IconNext decorative monotone />
-			</ButtonIcon>
-		</FlexgridItem>
-	</Flexgrid>
-</div>
diff --git a/packages/documentation/src/GettingStarted/configuration.stories.mdx b/packages/documentation/src/GettingStarted/configuration.stories.mdx
deleted file mode 100644
index e250e431..00000000
--- a/packages/documentation/src/GettingStarted/configuration.stories.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { linkTo, Meta } from "@ladle/react";
-import {
-	ButtonIcon,
-	Flexgrid,
-	FlexgridItem,
-	IconNext,
-	IconPrevious,
-} from "@versini/ui-components";
-
-<Meta title="Getting started/Configuration" />
-
-# Configuration
-
-## JavaScript
-
-<div className="prose">
-	<ul>
-		<li>
-			UI Components come un-bundled, which means you need to use a bundler such
-			as Webpack, Vite or Rollup to bundle components into your application.
-		</li>
-		<li>
-			UI Components are tree-shakeable, side-effect free and each component
-			style is self-contained.
-		</li>
-		<li>
-			Please refer to each component API documentation (under the Components or
-			Form components menu) to see how they should be imported, what their
-			individual props are as well as many different examples.
-		</li>
-	</ul>
-</div>
-
-## CSS
-
-You can use the <strong>UI-Components</strong> library with or without <strong>TailwindCSS</strong>. Depending on your situation, you can either use the pre-built CSS or the TailwindCSS plugin to build your own styles and take advantage of tree-shaking unused styles.
-
-## Without TailwindCSS
-
-If you are not using TailwindCSS, you can use the pre-built CSS file. Just import it in your entry file:
-
-```javascript
-// index.js
-import "@versini/ui-components/dist/style.css";
-```
-
-## With TailwindCSS
-
-If you are using TailwindCSS, you can use the <strong>UI-Components</strong> library TailwindCSS plugin:
-
-```javascript
-// tailwind.config.js
-/** @type {import('tailwindcss').Config} */
-
-import { twPlugin } from "@versini/ui-components/dist/utilities";
-
-export default twPlugin.merge({
-	// this is an example, you can change the path to your files
-	content: ["./src/**/*.{js,ts,jsx,tsx}"],
-});
-```
-
-<div className="not-docs-typography">
-	<Flexgrid alignHorizontal="space-between">
-		<FlexgridItem>
-			<ButtonIcon
-				labelRight="Installation"
-				noBorder
-				onClick={linkTo("getting-started--installation")}
-			>
-				<IconPrevious decorative monotone />
-			</ButtonIcon>
-		</FlexgridItem>
-		<FlexgridItem>
-			<ButtonIcon
-				labelLeft="Usage"
-				noBorder
-				onClick={linkTo("getting-started--usage")}
-			>
-				<IconNext decorative monotone />
-			</ButtonIcon>
-		</FlexgridItem>
-	</Flexgrid>
-</div>
diff --git a/packages/documentation/src/GettingStarted/overview.stories.tsx b/packages/documentation/src/GettingStarted/overview.stories.tsx
deleted file mode 100644
index 624b1a4d..00000000
--- a/packages/documentation/src/GettingStarted/overview.stories.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { Story } from "@ladle/react";
-import { linkTo, Meta } from "@ladle/react";
-import {
-	ButtonIcon,
-	Flexgrid,
-	FlexgridItem,
-	IconNext,
-} from "@versini/ui-components";
-
-export default {
-	title: "Getting started",
-};
-
-export const Overview: Story<any> = () => (
-	<>
-		<Meta title="Getting started/Overview" />
-
-		<div className="prose">
-			<h1>UI Components -- </h1>
-
-			<Flexgrid alignVertical="center">
-				<FlexgridItem span={{ fallback: 12, lg: 6 }}>
-					<blockquote>
-						<p>
-							UI Components provides a strong, responsive, and accessible
-							library of foundational React components.
-						</p>
-					</blockquote>
-
-					<ButtonIcon
-						spacing={{ t: 8 }}
-						labelLeft="Installation"
-						noBorder
-						onClick={linkTo("getting-started--installation")}
-					>
-						<IconNext decorative monotone />
-					</ButtonIcon>
-				</FlexgridItem>
-				<FlexgridItem span={{ fallback: 12, lg: 6 }}>
-					<img
-						className="mt-5"
-						src="hero-14.jpg"
-						alt="An illustration of web page rendered on both desktop and mobile devices."
-						title="Hero image of a web page rendered on both desktop and mobile devices."
-					/>
-				</FlexgridItem>
-			</Flexgrid>
-
-			<h2>Features</h2>
-
-			<ul>
-				<li>
-					<strong>Strong</strong>: built-in strong components typing via
-					TypeScript.
-				</li>
-				<li>
-					<strong>Responsive</strong>: built-in responsive components.
-				</li>
-				<li>
-					<strong>Accessible</strong>: built with accessibility in mind from the
-					start.
-				</li>
-			</ul>
-
-			<h2>Extra</h2>
-
-			<ul>
-				<li>
-					<strong>TailwindCSS</strong>: built with TailwindCSS, enabling styles
-					tree-shaking.
-				</li>
-				<li>
-					<strong>Hooks</strong>: provides a set of hooks to use in your
-					application.
-				</li>
-				<li>
-					<strong>Icons</strong>: provides a set of icons to use in your
-					application.
-				</li>
-				<li>
-					<strong>Theming</strong>: provides a theming system to customize the
-					look of the components.
-				</li>
-			</ul>
-		</div>
-	</>
-);
diff --git a/packages/documentation/src/System/Flexgrid.stories.tsx b/packages/documentation/src/System/Flexgrid.stories.tsx
index 4a22d1dd..d1b726af 100644
--- a/packages/documentation/src/System/Flexgrid.stories.tsx
+++ b/packages/documentation/src/System/Flexgrid.stories.tsx
@@ -62,33 +62,41 @@ export const Basic: Story<any> = (args) => (
 	<Flexgrid {...args}>
 		<FlexgridItem span={4}>
 			<Container aria-label="item 1">
-				item 1
-				<div>
-					<small>(starts col 1, spans 4 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 1
+					<div>
+						<small>(starts col 1, spans 4 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem span={4}>
 			<Container aria-label="item 2">
-				item 2
-				<div>
-					<small>(starts col 5, spans 4 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 2
+					<div>
+						<small>(starts col 5, spans 4 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem span={4}>
 			<Container aria-label="item 3">
-				item 3
-				<div>
-					<small>(starts col 9, spans 4 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 3
+					<div>
+						<small>(starts col 9, spans 4 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem span={4}>
 			<Container aria-label="item 4">
-				item 4
-				<div>
-					<small>(starts col 1, spans 4 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 4
+					<div>
+						<small>(starts col 1, spans 4 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
@@ -97,18 +105,22 @@ export const Basic: Story<any> = (args) => (
 
 		<FlexgridItem span="auto">
 			<Container aria-label="item 5">
-				item 5
-				<div>
-					<small>(starts col 7, spans across the remaining space)</small>
+				<div className="bg-slate-500 p-1">
+					item 5
+					<div>
+						<small>(starts col 7, spans across the remaining space)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 
 		<FlexgridItem span={6}>
 			<Container aria-label="item 6">
-				item 6
-				<div>
-					<small>(starts col 1, spans 6 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 6
+					<div>
+						<small>(starts col 1, spans 6 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
@@ -117,27 +129,33 @@ export const Basic: Story<any> = (args) => (
 
 		<FlexgridItem span={7}>
 			<Container aria-label="item 7">
-				item 7
-				<div>
-					<small>(starts col 1, spans 7 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 7
+					<div>
+						<small>(starts col 1, spans 7 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem span={1} />
 		<FlexgridItem span={4}>
 			<Container aria-label="item 8">
-				item 8
-				<div>
-					<small>(starts col 9, spans 4 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 8
+					<div>
+						<small>(starts col 9, spans 4 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
 
 		<FlexgridItem span={12}>
 			<Container aria-label="item 9">
-				item 9
-				<div>
-					<small>(starts col 1, spans 12 cols)</small>
+				<div className="bg-slate-500 p-1">
+					item 9
+					<div>
+						<small>(starts col 1, spans 12 cols)</small>
+					</div>
 				</div>
 			</Container>
 		</FlexgridItem>
@@ -148,38 +166,17 @@ export const Interactive: Story<any> = (args) => (
 	<Flexgrid {...args}>
 		<FlexgridItem>
 			<Container aria-label="cell 1">
-				<div
-					style={{
-						padding: "5px",
-						backgroundColor: "rgb(133 209 156)",
-					}}
-				>
-					Cell 1
-				</div>
+				<div className="bg-slate-500 p-1">Cell 1</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem>
 			<Container aria-label="cell 2">
-				<div
-					style={{
-						padding: "10px",
-						backgroundColor: "rgb(133 209 156)",
-					}}
-				>
-					Cell 2
-				</div>
+				<div className="bg-slate-500 p-2">Cell 2</div>
 			</Container>
 		</FlexgridItem>
 		<FlexgridItem>
 			<Container aria-label="cell 3">
-				<div
-					style={{
-						padding: "15px",
-						backgroundColor: "rgb(133 209 156)",
-					}}
-				>
-					Cell 3
-				</div>
+				<div className="bg-slate-500 p-3">Cell 3</div>
 			</Container>
 		</FlexgridItem>
 	</Flexgrid>
diff --git a/packages/documentation/src/System/Icons.stories.tsx b/packages/documentation/src/System/Icons.stories.tsx
index 0a87cc6a..d2d07c80 100644
--- a/packages/documentation/src/System/Icons.stories.tsx
+++ b/packages/documentation/src/System/Icons.stories.tsx
@@ -25,29 +25,37 @@ export default {
 };
 
 export const Basic: Story<any> = (args) => (
-	<div className="flex flex-wrap gap-2 bg-slate-300 p-10">
-		<IconBack {...args} />
-		<IconChart {...args} />
-		<IconClose {...args} />
-		<IconCopied {...args} />
-		<IconCopy {...args} />
-		<IconDelete {...args} />
-		<IconEdit {...args} />
-		<IconGitHub {...args} />
-		<IconHide {...args} />
-		<IconHistory {...args} />
-		<IconInfo {...args} />
-		<IconNext {...args} />
-		<IconPrevious {...args} />
-		<IconProfile {...args} />
-		<IconRestore {...args} />
-		<IconSettings {...args} />
-		<IconShow {...args} />
-		<IconUser {...args} />
-	</div>
+	<>
+		<div className="mb-6 max-w-none">
+			<h1>Icons</h1>
+			<pre>
+				<code>{`import { IconXYZ } from "@versini/ui-components";`}</code>
+			</pre>
+		</div>
+		<div className="flex flex-wrap gap-2 bg-slate-900 p-10">
+			<IconBack {...args} />
+			<IconChart {...args} />
+			<IconClose {...args} />
+			<IconCopied {...args} />
+			<IconCopy {...args} />
+			<IconDelete {...args} />
+			<IconEdit {...args} />
+			<IconGitHub {...args} />
+			<IconHide {...args} />
+			<IconHistory {...args} />
+			<IconInfo {...args} />
+			<IconNext {...args} />
+			<IconPrevious {...args} />
+			<IconProfile {...args} />
+			<IconRestore {...args} />
+			<IconSettings {...args} />
+			<IconShow {...args} />
+			<IconUser {...args} />
+		</div>
+	</>
 );
 
 Basic.args = {
 	monotone: false,
-	decorative: false,
+	decorative: true,
 };
diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts
index 825a9f9e..693fa022 100644
--- a/packages/ui-components/lib/tailwindPlugin.ts
+++ b/packages/ui-components/lib/tailwindPlugin.ts
@@ -44,24 +44,131 @@ const myComponentLibraryConfig = {
 	theme: {
 		extend: {
 			colors: dynamicColors(),
-			// typography: ({ theme }: { theme: any }) => ({
-			typography: {
+			// typography: {
+			typography: ({ theme }: { theme: (arg0: string) => any }) => ({
 				DEFAULT: {
 					css: {
 						"h1, h2, h3, h4, h5, h6": {
-							color: tokens.colors["copy-light"],
 							fontFamily: "Open Sans",
 						},
+						p: {
+							marginTop: 0,
+							marginBottom: 0,
+							fontSize: "1rem",
+							lineHeight: "1.75rem",
+						},
 						blockquote: {
-							borderLeftColor: tokens.colors["border-dark"],
+							borderLeftWidth: "6px",
+						},
+						"blockquote p": {
+							fontFamily: "Georgia, Cambria, Times New Roman, Times, serif",
+						},
+						li: {
+							fontSize: "1rem",
+						},
+						pre: {
+							marginTop: "2rem",
+							marginBottom: "2rem",
+							borderRadius: "0.5rem",
+							fontSize: "0.875rem",
+							lineHeight: "1.25rem",
+						},
+						code: {
+							fontFamily:
+								'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+						},
+					},
+				},
+				light: {
+					css: {
+						"--tw-prose-body": tokens.colors["copy-light"],
+						"--tw-prose-headings": tokens.colors["copy-light"],
+						"--tw-prose-lead": tokens.colors["copy-lighter"],
+						"--tw-prose-links": tokens.colors["copy-lighter"],
+						"--tw-prose-bold": tokens.colors["copy-lighter"],
+						"--tw-prose-counters": tokens.colors["copy-light"],
+						"--tw-prose-bullets": tokens.colors["copy-light"],
+						"--tw-prose-hr": tokens.colors["copy-light"],
+						"--tw-prose-quotes": tokens.colors["copy-lighter"],
+						"--tw-prose-quote-borders": tokens.colors["copy-lighter"],
+						"--tw-prose-captions": tokens.colors["copy-lighter"],
+						"--tw-prose-code": tokens.colors["copy-lighter"],
+						"--tw-prose-pre-code": tokens.colors["copy-light"],
+						"--tw-prose-pre-bg": tokens.colors["surface-dark"],
+						li: {
+							color: tokens.colors["copy-lighter"],
 						},
-						"ul > li::marker": {
-							color: "var(--tw-prose-counters)",
+					},
+				},
+				dark: {
+					css: {
+						"--tw-prose-body": theme("colors.slate[800]"),
+						"--tw-prose-headings": theme("colors.slate[900]"),
+						"--tw-prose-lead": theme("colors.slate[700]"),
+						"--tw-prose-links": theme("colors.slate[900]"),
+						"--tw-prose-bold": theme("colors.slate[900]"),
+						"--tw-prose-counters": theme("colors.slate[600]"),
+						"--tw-prose-bullets": theme("colors.slate[400]"),
+						"--tw-prose-hr": theme("colors.slate[300]"),
+						"--tw-prose-quotes": theme("colors.slate[900]"),
+						"--tw-prose-quote-borders": theme("colors.slate[300]"),
+						"--tw-prose-captions": theme("colors.slate[700]"),
+						"--tw-prose-code": theme("colors.slate[900]"),
+						"--tw-prose-pre-code": theme("colors.slate[100]"),
+						"--tw-prose-pre-bg": theme("colors.slate[900]"),
+						li: {
+							color: tokens.colors["copy-dark"],
 						},
 					},
 				},
-				// }),
-			},
+				// light: {
+				// 	css: {
+				// 		"h1, h2, h3, h4, h5, h6": {
+				// 			color: tokens.colors["copy-light"],
+				// 			fontFamily: "Open Sans",
+				// 		},
+				// 		strong: {
+				// 			color: tokens.colors["copy-lighter"],
+				// 		},
+				// 		p: {
+				// 			color: tokens.colors["copy-lighter"],
+				// 			marginTop: 0,
+				// 			marginBottom: 0,
+				// 			fontSize: "1.125rem",
+				// 			lineHeight: "1.75rem",
+				// 		},
+				// 		blockquote: {
+				// 			borderLeftColor: tokens.colors["border-light"],
+				// 			borderLeftWidth: "6px",
+				// 		},
+				// 		"blockquote p": {
+				// 			fontFamily: "Georgia, Cambria, Times New Roman, Times, serif",
+				// 		},
+				// 		li: {
+				// 			color: tokens.colors["copy-lighter"],
+				// 			fontSize: "1.125rem",
+				// 		},
+				// 		"ul > li::marker": {
+				// 			color: tokens.colors["copy-lighter"],
+				// 		},
+				// 		pre: {
+				// 			color: tokens.colors["copy-light"],
+				// 			backgroundColor: tokens.colors["surface-dark"],
+				// 			marginTop: "2rem",
+				// 			marginBottom: "2rem",
+				// 			borderRadius: "0.5rem",
+				// 			fontSize: "0.875rem",
+				// 			lineHeight: "1.25rem",
+				// 		},
+				// 		code: {
+				// 			color: tokens.colors["copy-light"],
+				// 			fontFamily:
+				// 				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+				// 		},
+				// 	},
+				// 	// },
+				// },
+			}),
 		},
 	},
 };
diff --git a/packages/ui-components/src/components/Bubble/utilities.ts b/packages/ui-components/src/components/Bubble/utilities.ts
index 45b0b6ad..e27e839c 100644
--- a/packages/ui-components/src/components/Bubble/utilities.ts
+++ b/packages/ui-components/src/components/Bubble/utilities.ts
@@ -16,7 +16,7 @@ const getBubbleColorClasses = ({ kind }: { kind: string }) => {
 };
 
 const getBubbleTypographyClasses = () => {
-	return "prose prose-p:my-3 prose-blockquote:my-3 prose-ol:my-3 prose-ul:my-3 prose-ul:prose-li:marker:text-black";
+	return "prose prose-dark prose-p:my-3 prose-blockquote:my-3 prose-ol:my-3 prose-ul:my-3 prose-ul:prose-li:marker:text-black";
 };
 
 const getBubbleBorderClasses = ({ kind }: { kind: string }) => {
diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts
index 7cebbbd3..2a868849 100644
--- a/packages/ui-components/src/components/Button/utilities.ts
+++ b/packages/ui-components/src/components/Button/utilities.ts
@@ -73,7 +73,7 @@ const getButtonSizesClasses = ({
 };
 
 const getButtonBaseClasses = ({ kind }: { kind: string }) => {
-	return clsx("rounded-full text-copy-light", {
+	return clsx("not-prose rounded-full text-copy-light", {
 		"bg-action-dark": kind === "dark",
 		"bg-action-light": kind === "light",
 	});
diff --git a/packages/ui-components/src/components/Card/utilities.ts b/packages/ui-components/src/components/Card/utilities.ts
index 9508be91..08b5fae3 100644
--- a/packages/ui-components/src/components/Card/utilities.ts
+++ b/packages/ui-components/src/components/Card/utilities.ts
@@ -26,7 +26,7 @@ export const getCardClasses = ({
 	const header = headerClassName
 		? headerClassName
 		: clsx(
-				`${CARD_CLASSNAME}__header mb-4 border-b-2 border-border-medium text-lg font-bold`,
+				`${CARD_CLASSNAME}__header not-prose mb-4 border-b-2 border-border-medium text-lg font-bold`,
 			);
 
 	const footer = footerClassName
diff --git a/packages/ui-components/src/components/Table/Table.tsx b/packages/ui-components/src/components/Table/Table.tsx
index e40d1042..ecedbe65 100644
--- a/packages/ui-components/src/components/Table/Table.tsx
+++ b/packages/ui-components/src/components/Table/Table.tsx
@@ -109,6 +109,7 @@ export const TableCell = ({
 	const cellClass = getTableCellClasses({
 		cellWrapper: context.cellWrapper,
 		className,
+		kind: context.kind,
 	});
 	return (
 		<Component className={cellClass} {...otherProps}>
diff --git a/packages/ui-components/src/components/Table/utilities.ts b/packages/ui-components/src/components/Table/utilities.ts
index da6cb6f3..b8473b14 100644
--- a/packages/ui-components/src/components/Table/utilities.ts
+++ b/packages/ui-components/src/components/Table/utilities.ts
@@ -30,7 +30,7 @@ export const getTableClasses = ({
 			},
 			wrapperClassName,
 		),
-		table: clsx("w-full text-left text-sm", className, {
+		table: clsx("my-0 w-full text-left text-sm", className, {
 			"text-copy-light": kind === "dark",
 			"text-copy-dark": kind === "light",
 		}),
@@ -76,11 +76,15 @@ export const getTableRowClasses = ({
 export const getTableCellClasses = ({
 	cellWrapper,
 	className,
+	kind,
 }: {
+	kind: string;
 	cellWrapper?: string;
 	className?: string;
 }) => {
 	return clsx(className, {
+		"text-copy-light": kind === "dark",
+		"text-copy-dark": kind === "light",
 		"px-4 py-3": cellWrapper === CELL_WRAPPER_HEAD,
 		"p-4": cellWrapper === CELL_WRAPPER_BODY,
 	});

From 945c852496f9852247b1f2e00fa018059694004f Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 22 Feb 2024 20:54:30 -0500
Subject: [PATCH 3/9] Update styles.css

---
 packages/documentation/.ladle/styles.css | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/documentation/.ladle/styles.css b/packages/documentation/.ladle/styles.css
index a4a0526a..b5c61c95 100644
--- a/packages/documentation/.ladle/styles.css
+++ b/packages/documentation/.ladle/styles.css
@@ -1,26 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* @layer components {
-	.docs-typography strong:not(.not-docs-typography strong) {
-		@apply text-copy-lighter;
-	}
-	.docs-typography li:not(.not-docs-typography li) {
-		@apply mb-2 text-copy-lighter;
-	}
-	.docs-typography p:not(.not-docs-typography p) {
-		@apply my-0 text-lg leading-7 text-copy-lighter;
-	}
-
-	.docs-typography blockquote p:not(.not-docs-typography p) {
-		@apply mb-0 italic leading-7 text-copy-lighter;
-		font-family: Georgia, serif;
-	}
-	.docs-typography pre:not(.not-docs-typography pre) {
-		@apply my-8 rounded-lg bg-gray-100 text-sm;
-	}
-	.docs-typography .prism-code:not(.not-docs-typography .prism-code) {
-		@apply m-1 !important;
-	}
-} */

From 8b2b227b1fbd717f4cd0a558a53fc98c6a7c72da Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:31:26 -0500
Subject: [PATCH 4/9] Update styles.css

---
 packages/documentation/.ladle/styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/documentation/.ladle/styles.css b/packages/documentation/.ladle/styles.css
index b5c61c95..c80906de 100644
--- a/packages/documentation/.ladle/styles.css
+++ b/packages/documentation/.ladle/styles.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+	.prose pre.ladle-markdown .prism-code {
+		@apply m-0 !important;
+	}
+}

From 232295434eb923a0da65fa4c0dd9e18d73459c49 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:31:30 -0500
Subject: [PATCH 5/9] Update 4-usage.stories.mdx

---
 packages/documentation/src/GettingStarted/4-usage.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/GettingStarted/4-usage.stories.mdx b/packages/documentation/src/GettingStarted/4-usage.stories.mdx
index 0784ea9d..a2757c45 100644
--- a/packages/documentation/src/GettingStarted/4-usage.stories.mdx
+++ b/packages/documentation/src/GettingStarted/4-usage.stories.mdx
@@ -10,7 +10,7 @@ import {
 
 <Meta title="Getting started/Usage" />
 
-<div className="prose-light prose mb-6">
+<div className="prose prose-light mb-6">
 	<h1>Usage</h1>
 </div>
 

From 0540b48f34fb3d9931fa3f45deef0421a543390f Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:31:33 -0500
Subject: [PATCH 6/9] Update Icons.stories.tsx

---
 packages/documentation/src/System/Icons.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/System/Icons.stories.tsx b/packages/documentation/src/System/Icons.stories.tsx
index d2d07c80..5d96bbd8 100644
--- a/packages/documentation/src/System/Icons.stories.tsx
+++ b/packages/documentation/src/System/Icons.stories.tsx
@@ -32,7 +32,7 @@ export const Basic: Story<any> = (args) => (
 				<code>{`import { IconXYZ } from "@versini/ui-components";`}</code>
 			</pre>
 		</div>
-		<div className="flex flex-wrap gap-2 bg-slate-900 p-10">
+		<div className="prose prose-dark flex max-w-none flex-wrap gap-2 bg-slate-300 p-10">
 			<IconBack {...args} />
 			<IconChart {...args} />
 			<IconClose {...args} />

From 67f5dab35833cc6edf4138ab1eb94e82682f119d Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:31:55 -0500
Subject: [PATCH 7/9] Update tailwindPlugin.ts

---
 packages/ui-components/lib/tailwindPlugin.ts | 61 ++------------------
 1 file changed, 5 insertions(+), 56 deletions(-)

diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts
index 693fa022..b04443ea 100644
--- a/packages/ui-components/lib/tailwindPlugin.ts
+++ b/packages/ui-components/lib/tailwindPlugin.ts
@@ -49,14 +49,9 @@ const myComponentLibraryConfig = {
 				DEFAULT: {
 					css: {
 						"h1, h2, h3, h4, h5, h6": {
-							fontFamily: "Open Sans",
-						},
-						p: {
-							marginTop: 0,
-							marginBottom: 0,
-							fontSize: "1rem",
-							lineHeight: "1.75rem",
+							fontFamily: "Open Sans, ui-sans-serif, system-ui, sans-serif",
 						},
+
 						blockquote: {
 							borderLeftWidth: "6px",
 						},
@@ -69,7 +64,6 @@ const myComponentLibraryConfig = {
 						pre: {
 							marginTop: "2rem",
 							marginBottom: "2rem",
-							borderRadius: "0.5rem",
 							fontSize: "0.875rem",
 							lineHeight: "1.25rem",
 						},
@@ -81,7 +75,7 @@ const myComponentLibraryConfig = {
 				},
 				light: {
 					css: {
-						"--tw-prose-body": tokens.colors["copy-light"],
+						"--tw-prose-body": tokens.colors["copy-lighter"],
 						"--tw-prose-headings": tokens.colors["copy-light"],
 						"--tw-prose-lead": tokens.colors["copy-lighter"],
 						"--tw-prose-links": tokens.colors["copy-lighter"],
@@ -95,6 +89,7 @@ const myComponentLibraryConfig = {
 						"--tw-prose-code": tokens.colors["copy-lighter"],
 						"--tw-prose-pre-code": tokens.colors["copy-light"],
 						"--tw-prose-pre-bg": tokens.colors["surface-dark"],
+						"--tw-prose-kbd": tokens.colors["copy-lighter"],
 						li: {
 							color: tokens.colors["copy-lighter"],
 						},
@@ -116,58 +111,12 @@ const myComponentLibraryConfig = {
 						"--tw-prose-code": theme("colors.slate[900]"),
 						"--tw-prose-pre-code": theme("colors.slate[100]"),
 						"--tw-prose-pre-bg": theme("colors.slate[900]"),
+						"--tw-prose-kbd": theme("colors.slate[800]"),
 						li: {
 							color: tokens.colors["copy-dark"],
 						},
 					},
 				},
-				// light: {
-				// 	css: {
-				// 		"h1, h2, h3, h4, h5, h6": {
-				// 			color: tokens.colors["copy-light"],
-				// 			fontFamily: "Open Sans",
-				// 		},
-				// 		strong: {
-				// 			color: tokens.colors["copy-lighter"],
-				// 		},
-				// 		p: {
-				// 			color: tokens.colors["copy-lighter"],
-				// 			marginTop: 0,
-				// 			marginBottom: 0,
-				// 			fontSize: "1.125rem",
-				// 			lineHeight: "1.75rem",
-				// 		},
-				// 		blockquote: {
-				// 			borderLeftColor: tokens.colors["border-light"],
-				// 			borderLeftWidth: "6px",
-				// 		},
-				// 		"blockquote p": {
-				// 			fontFamily: "Georgia, Cambria, Times New Roman, Times, serif",
-				// 		},
-				// 		li: {
-				// 			color: tokens.colors["copy-lighter"],
-				// 			fontSize: "1.125rem",
-				// 		},
-				// 		"ul > li::marker": {
-				// 			color: tokens.colors["copy-lighter"],
-				// 		},
-				// 		pre: {
-				// 			color: tokens.colors["copy-light"],
-				// 			backgroundColor: tokens.colors["surface-dark"],
-				// 			marginTop: "2rem",
-				// 			marginBottom: "2rem",
-				// 			borderRadius: "0.5rem",
-				// 			fontSize: "0.875rem",
-				// 			lineHeight: "1.25rem",
-				// 		},
-				// 		code: {
-				// 			color: tokens.colors["copy-light"],
-				// 			fontFamily:
-				// 				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-				// 		},
-				// 	},
-				// 	// },
-				// },
 			}),
 		},
 	},

From 16436c9d5f5b955f7cda022f1fc75b257a0f6fa4 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:33:21 -0500
Subject: [PATCH 8/9] Create Typography.stories.tsx

---
 .../src/System/Typography.stories.tsx         | 249 ++++++++++++++++++
 1 file changed, 249 insertions(+)
 create mode 100644 packages/documentation/src/System/Typography.stories.tsx

diff --git a/packages/documentation/src/System/Typography.stories.tsx b/packages/documentation/src/System/Typography.stories.tsx
new file mode 100644
index 00000000..27b43c2f
--- /dev/null
+++ b/packages/documentation/src/System/Typography.stories.tsx
@@ -0,0 +1,249 @@
+/* eslint-disable react/no-unescaped-entities */
+
+import type { Story } from "@ladle/react";
+
+export default { title: "System/Typography" };
+
+const CommonTemplate = ({
+	intro,
+	type,
+}: {
+	intro: any;
+	type: "light" | "dark";
+}) => {
+	return (
+		<>
+			{intro}
+			<pre>
+				<code>{`<div className="prose prose-${type}>...</div>`}</code>
+			</pre>
+			<p>
+				By default, Tailwind removes all of the default browser styling from
+				paragraphs, headings, lists and more. This ends up being really useful
+				for building application UIs because you spend less time undoing
+				user-agent styles, but when you <em>really are</em> just trying to style
+				some content that came from a rich-text editor in a CMS or a markdown
+				file, it can be surprising and unintuitive.
+			</p>
+			<p>
+				We get lots of complaints about it actually, with people regularly
+				asking us things like:
+			</p>
+			<blockquote>
+				<p>
+					Why is Tailwind removing the default styles on my <code>h1</code>{" "}
+					elements? How do I disable this? What do you mean I lose all the other
+					base styles too?
+				</p>
+			</blockquote>
+			<p>
+				We hear you, but we're not convinced that simply disabling our base
+				styles is what you really want. You don't want to have to remove
+				annoying margins every time you use a <code>p</code> element in a piece
+				of your dashboard UI. And I doubt you really want your blog posts to use
+				the user-agent styles either — you want them to look <em>awesome</em>,
+				not awful.
+			</p>
+			<p>
+				The <code>@tailwindcss/typography</code> plugin is our attempt to give
+				you what you <em>actually</em> want, without any of the downsides of
+				doing something stupid like disabling our base styles.
+			</p>
+			<p>
+				It adds a new <code>prose</code> and <code>prose-{type}</code> class
+				that you can slap on any block of vanilla HTML content and turn it into
+				a beautiful, well-formatted document:
+			</p>
+			<pre>{`<article className="prose prose-${type}">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>
+    For years parents have espoused the health benefits of eating
+    garlic bread with cheese to their children, with the food
+    earning such an iconic status in our culture that kids will
+    often dress up as warm, cheesy loaf for Halloween.
+  </p>
+  <p>
+    But a recent study shows that the celebrated appetizer may be
+    linked to a series of rabies cases springing up around the
+    country.
+  </p>
+  <!-- ... -->
+</article>`}</pre>
+			<h2>What to expect from here on out</h2>
+			<p>
+				What follows from here is just a bunch of absolute nonsense I've written
+				to dogfood the plugin itself. It includes every sensible typographic
+				element I could think of, like <strong>bold text</strong>, unordered
+				lists, ordered lists, code blocks, block quotes,{" "}
+				<em>and even italics</em>.
+			</p>
+			<p>It's important to cover all of these use cases for a few reasons:</p>
+			<ol>
+				<li>We want everything to look good out of the box.</li>
+				<li>
+					Really just the first reason, that's the whole point of the plugin.
+				</li>
+				<li>
+					Here's a third pretend reason though a list with three items looks
+					more realistic than a list with two items.
+				</li>
+			</ol>
+			<p>Now we're going to try out another header style.</p>
+			<h3>Typography should be easy</h3>
+			<p>
+				So that's a header for you — with any luck if we've done our job
+				correctly that will look pretty reasonable.
+			</p>
+			<p>Something a wise person once told me about typography is:</p>
+			<blockquote>
+				<p>
+					Typography is pretty important if you don't want your stuff to look
+					like trash. Make it good then it won't be bad.
+				</p>
+			</blockquote>
+			<p>
+				It's probably important that images look okay here by default as well:
+			</p>
+			<figure>
+				<img src="hero-14.jpg" alt="" />
+				<figcaption>
+					Contrary to popular belief, Lorem Ipsum is not simply random text. It
+					has roots in a piece of classical Latin literature from 45 BC, making
+					it over 2000 years old.
+				</figcaption>
+			</figure>
+			<p>
+				Now I'm going to show you an example of an unordered list to make sure
+				that looks good, too:
+			</p>
+			<ul>
+				<li>So here is the first item in this list.</li>
+				<li>In this example we're keeping the items short.</li>
+				<li>Later, we'll use longer, more complex list items.</li>
+			</ul>
+			<p>And that's the end of this section.</p>
+			<h2>What if we stack headings?</h2>
+			<h3>We should make sure that looks good, too.</h3>
+			<p>
+				Sometimes you have headings directly underneath each other. In those
+				cases you often have to undo the top margin on the second heading
+				because it usually looks better for the headings to be closer together
+				than a paragraph followed by a heading should be.
+			</p>
+			<h3>When a heading comes after a paragraph...</h3>
+			<p>
+				When a heading comes after a paragraph, we need a bit more space, like I
+				already mentioned above. Now let's see what a more complex list would
+				look like.
+			</p>
+
+			<ul>
+				<li>
+					<p>
+						<strong>
+							I often do this thing where list items have headings.
+						</strong>
+					</p>
+					<p>
+						For some reason I think this looks cool which is unfortunate because
+						it's pretty annoying to get the styles right.
+					</p>
+					<p>
+						I often have two or three paragraphs in these list items, too, so
+						the hard part is getting the spacing between the paragraphs, list
+						item heading, and separate list items to all make sense. Pretty
+						tough honestly, you could make a strong argument that you just
+						shouldn't write this way.
+					</p>
+				</li>
+				<li>
+					<p>
+						<strong>Since this is a list, I need at least two items.</strong>
+					</p>
+					<p>
+						I explained what I'm doing already in the previous list item, but a
+						list wouldn't be a list if it only had one item, and we really want
+						this to look realistic. That's why I've added this second list item
+						so I actually have something to look at when writing the styles.
+					</p>
+				</li>
+				<li>
+					<p>
+						<strong>It's not a bad idea to add a third item either.</strong>
+					</p>
+					<p>
+						I think it probably would've been fine to just use two items but
+						three is definitely not worse, and since I seem to be having no
+						trouble making up arbitrary things to type, I might as well include
+						it. I'm going to press <kbd>Enter</kbd> now.
+					</p>
+				</li>
+			</ul>
+			<p>
+				After this sort of list I usually have a closing statement or paragraph,
+				because it kinda looks weird jumping right to a heading.
+			</p>
+			<h4>
+				We haven't used an <code>h4</code> yet
+			</h4>
+			<p>
+				But now we have. Please don't use `h5` or `h6` in your content, Medium
+				only supports two heading levels for a reason, you animals. I honestly
+				considered using a `before` pseudo-element to scream at you if you use
+				an `h5` or `h6`.
+			</p>
+			<h3>We still need to think about stacked headings though.</h3>
+			<h4>
+				Let's make sure we don't screw that up with `h4` elements, either.
+			</h4>
+			<p>
+				Phew, with any luck we have styled the headings above this text and they
+				look pretty good.
+			</p>
+			<p>
+				Let's add a closing paragraph here so things end with a decently sized
+				block of text. I can't explain why I want things to end that way but I
+				have to assume it's because I think things will look weird or unbalanced
+				if there is a heading too close to the end of the document.
+			</p>
+			<p>
+				What I've written here is probably long enough, but adding this final
+				sentence can't hurt.
+			</p>
+		</>
+	);
+};
+
+export const Light: Story<any> = () => (
+	<div className="p-11">
+		<div className="prose prose-light max-w-none">
+			<h1>Light</h1>
+			<CommonTemplate
+				type={"light"}
+				intro={
+					<p className="lead">
+						The "light" typography style is designed to be used on dark
+						backgrounds.
+					</p>
+				}
+			/>
+		</div>
+	</div>
+);
+
+export const Dark: Story<any> = () => (
+	<div className="bg-white p-11">
+		<div className="prose prose-dark max-w-none">
+			<h1>Dark</h1>
+			<CommonTemplate
+				type={"dark"}
+				intro={
+					<p className="lead">
+						The "dark" typography style is designed to be used on light
+						backgrounds.
+					</p>
+				}
+			/>
+		</div>
+	</div>
+);

From 9061efcb18b47af601f9339782e57c278ef30caf Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Fri, 23 Feb 2024 13:38:03 -0500
Subject: [PATCH 9/9] Update tailwindPlugin.ts

---
 packages/ui-components/lib/tailwindPlugin.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui-components/lib/tailwindPlugin.ts b/packages/ui-components/lib/tailwindPlugin.ts
index b04443ea..cf2bd444 100644
--- a/packages/ui-components/lib/tailwindPlugin.ts
+++ b/packages/ui-components/lib/tailwindPlugin.ts
@@ -44,7 +44,6 @@ const myComponentLibraryConfig = {
 	theme: {
 		extend: {
 			colors: dynamicColors(),
-			// typography: {
 			typography: ({ theme }: { theme: (arg0: string) => any }) => ({
 				DEFAULT: {
 					css: {