Update component example doc

data/docs/example.mdx

@@ -1,30 +1,36 @@
 ---
-title: Full Component Example
+title: Example Component
 description: A full example of a component using CSS Components.
 category: Getting Started
 index: 16
 ---
 
 Below is a full example of a basic component put together using CSS Components.
 
-A component will be split into 3 files:
-
 ```bash
 src
 └── components
     └── Panel
         ├── index.tsx # The main component file
         ├── styles.module.css # The CSS file
-        └── styles.tsx # The CSS Components file)
+        └── styles.ts # The CSS Components file
+    ├── SomeOtherComponent
+    └── SomeOtherComponent
 ```
 
-We are going to create a simple `Panel` component that has a title and some content. The component will have a `wide` prop that will make the panel fill the width of its container.
+Every component is split into 3 files:
+
+- `index.tsx`, your standard React component;
+- `styles.module.css`, your standard CSS styles; and
+- `styles.ts`, which bridges the gap between the two.
 
-Here you can see the `Panel` component in action.
+Let's create a simple `Panel` component with a title and some content. The component will have a `wide` prop that will make the panel fill the width of its container.
+
+Here it is in action:
 
 <Preview>
   <Panel title="Hello World" wide>
-    <p>This is some example content. It's not very exciting.</p>
+    <p>This is some example content. It's working great! 😄</p>
   </Panel>
 </Preview>
 
@@ -33,16 +39,18 @@ import Panel from "@/components/Panel";
 
 () => (
   <Panel title="Hello World" wide>
-    <p>This is some example content. It's not very exciting.</p>
+    <p>This is some example content. It's working great! 😄</p>
   </Panel>
 );
 ```
 
-## panel/index.tsx
+## index.tsx
+
+This is the main component file. It's a simple component with a title and some content.
 
-This is the main component file. It's a simple component that has a title and some content. `PanelWrapper`, `Title` and `Content` are all CSS Components that are imported from `styles.tsx`.
+If you've used React in any capacity this format should be very familiar to you, with the exception of `PanelWrapper`, `Title` and `Content`. These are all CSS Components that are imported from `styles.ts`.
 
-Notice how this component is free of ugly CSS class names. Everything is symantec.
+Note how this component is free of ugly CSS class names. Everything is semantic.
 
 ```tsx
 import { PanelWrapper, Title, Content } from "./styles";
@@ -63,41 +71,14 @@ const Panel = ({ title, children, wide }: Props) => (
 export default Panel;
 ```
 
-## panel/styles.tsx
-
-This is the styles file. It contains the CSS Components that are used in the main component file. As you can see, CSS Components are simply a way to map CSS classes to React component in a logical way, nothing more.
-
-```tsx
-import { styled } from "@phantomstudios/css-components";
-
-import css from "./styles.module.css";
-
-export const PanelWrapper = styled("div", {
-  css: css.PanelWrapper,
-  variants: {
-    wide: {
-      true: css.PanelWrapper_wide,
-    },
-  },
-});
-
-export const Title = styled("h2", {
-  css: css.Title,
-});
-
-export const Content = styled("section", {
-  css: css.Content,
-});
-```
-
-Please note that while this example employs standard CSS, you have the freedom to utilize any styling solution of your choice, such as SCSS.
+## styles.module.css
 
-## panel/styles.module.css
+Next is your bog standard CSS file. It contains all the CSS classes used by CSS Components. You're free to name them how you want, [but we do have a helpful naming convention](/docs/cli).
 
-Lastly, this is the bog standard CSS file. It contains the CSS classes that are used in the CSS Components.
+While this file uses CSS, you can use whatever styling solution you want. We'd recommend using SCSS; it works really well with CSS components!
 
 ```css
-.PanelWrapper {
+div.PanelWrapper {
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -109,7 +90,7 @@ Lastly, this is the bog standard CSS file. It contains the CSS classes that are
   color: black;
 }
 
-.PanelWrapper_wide {
+div.PanelWrapper_wide {
   width: 100%;
 }
 
@@ -123,3 +104,40 @@ section.Content {
   padding: 1rem;
 }
 ```
+
+## styles.ts ✨
+
+The styles file is where the magic happens! It contains all of the CSS Components that are imported into the main React component.
+
+As you can see, CSS Components are nothing more than a way to map CSS classes to React components.
+
+You can either create this file yourself, [or use our helpful CLI tool](/docs/cli).
+
+```ts
+import { styled } from "@phantomstudios/css-components";
+
+import css from "./styles.module.css";
+
+export const PanelWrapper = styled("div", {
+  css: css.PanelWrapper,
+  variants: {
+    wide: {
+      true: css.PanelWrapper_wide,
+    },
+  },
+});
+
+export const Title = styled("h2", {
+  css: css.Title,
+});
+
+export const Content = styled("section", {
+  css: css.Content,
+});
+```
+
+And that's it!
+
+As you can see, the only thing that's really different from your standard, CSS-Component-less workflow is the `styles.ts` file. Pop that in and you're good to go.
+
+Happy styling!

data/docs/introduction.mdx

@@ -5,6 +5,8 @@ index: 1
 description: The what and the why of CSS Components.
 ---
 
+> ⚠️ _If you just want a quick reference, [head on over to the example](/docs/example)._
+
 Phantom is a firm believer in the versatility and power of CSS-in-JS, using it for all its projects. However, with the advancements in React like [Server Components](https://beta.nextjs.org/docs/rendering/server-and-client-components) and Next.js 13, using CSS-in-JS can become a challenge. The conventional CSS styling options fail to offer a seamless developer experience and result in cluttered code.
 
 CSS Components was created to solve these problems by offering a React component library that prioritizes component architecture and developer experience. Inspired by [Stitches](https://stitches.dev/), it brings the core functionality to React components, making it easier to wrap CSS styles in React and streamline the use of CSS styles. CSS Components is not a complete styling system, but rather a convenient tool that enhances the developer experience.

src/components/Doc/styles.module.css → src/components/Doc/styles.module.scss

@@ -1,5 +1,18 @@
 main.DocWrapper {
   padding: 0 2rem 4rem;
+  color: #bbb;
+
+  blockquote {
+    margin: 0;
+    padding: 24px;
+    color: #bbb;
+    border-radius: 4px;
+    background-color: var(--color-bg-light);
+
+    p {
+      margin: 0;
+    }
+  }
 }
 
 main.DocWrapper > h1,
@@ -33,9 +46,9 @@ main.DocWrapper > hr {
 }
 
 main.DocWrapper > p {
-  font-size: 17px;
+  font-size: 16px;
   color: #bbb;
-  line-height: 2;
+  line-height: 1.5;
 }
 
 main.DocWrapper > ul {
@@ -60,6 +73,13 @@ main.DocWrapper pre {
 
 main.DocWrapper a {
   font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  transition: 0.2s;
+
+  &:hover {
+    color: #eee;
+  }
 }
 
 /* This styles inline code (i.e. NOT the MDXComponents/code component). */

src/components/Doc/styles.ts

@@ -1,6 +1,6 @@
 import { styled } from "@phantomstudios/css-components";
 
-import css from "./styles.module.css";
+import css from "./styles.module.scss";
 
 export const DocWrapper = styled("main", {
   css: css.DocWrapper,

src/components/MDXComponents/Panel/styles.module.css

@@ -1,25 +1,25 @@
-.PanelWrapper {
+div.PanelWrapper {
   display: flex;
   flex-direction: column;
   text-align: center;
   margin: auto;
   width: 240px;
   border-radius: 0.5rem;
   overflow: hidden;
-  background-color: #e6e6e6;
+  background-color: var(--color-fg);
   color: black;
 }
 
-.PanelWrapper_wide{
+div.PanelWrapper_wide {
   width: 100%;
 }
 
-h2.Title{
-  background-color: #d6d6d6;
+h2.Title {
+  background-color: var(--color-fg-dark);
   margin: 0;
   padding: 1rem;
 }
 
-section.Content{
+section.Content {
   padding: 1rem;
 }

src/styles/colors.css

@@ -2,6 +2,8 @@
 *::after,
 *::before {
   --color-fg: #fafafa;
+  --color-fg-dark: #e9e9e9;
+  --color-bg-light: #2a2e36;
   --color-bg: #21252b;
   --color-bg-dark: #070a1144;
   --color-bg-darker: #070a1188;