docs(site): remove theming documentation (#1714)

packages/css/README.md

@@ -1,28 +1,71 @@
 # Shoreline CSS
 
-The `@vtex/shoreline-css` package transforms shoreline tokens into css. For
-example, theme:
+The theme files are generated programmatically using the `@vtex/shoreline-css` package.
+
+## Declaring tokens
+
+You can declare the `@theme` at-rule to declare the theme:
 
 ```css
-@theme example {
-  --space-1: 1rem;
-  --space-2: 2rem;
-  --space-3: 3rem;
-  --space-gap: var(--space-1);
+@theme <theme-name> {
+  /* css rule */
 }
 ```
 
-will convert to:
+For example:
 
-```css
-/* shoreline/styles.css */
+```css filename="tokens.css"
+@theme sunrise {
+  :where(html) {
+    --space-1: 1rem;
+    --space-2: 2rem;
+    --bg-base: #fff;
+  }
+}
+```
+
+You don't need to prefix the variables, this will be done afterwards.
+
+## Transforming tokens
+
+Use the `tokens` function to transform tokens.
 
+```ts
+import { tokens } from '@vtex/shoreline-css'
+
+tokens({
+  inputFile: 'src/tokens.css',
+  outdir: 'dist',
+  emitFile: true,
+  useCascadeLayers: true,
+  browserslistQuery: 'last 2 versions'
+})
+```
+
+This code generates the `tokens.css` file in the `outdir` folder.
+
+```css filename="dist/tokens.css"
 @layer sl-tokens {
-  :root {
+  :where(html) {
     --sl-space-1: 1rem;
     --sl-space-2: 2rem;
-    --sl-space-3: 3rem;
-    --sl-space-gap: var(--sl-space-1);
+    --sl-bg-base: #fff;
   }
 }
 ```
+
+## Bundling
+
+The `bundle` function [bundles](https://lightningcss.dev/bundling.html) existing css code with the tokens.
+
+```ts
+import { bundle } from '@vtex/shoreline-css'
+
+bundle({
+  inputFile: 'src/styles.css',
+  tokensFile: 'src/tokens.css'
+  outdir: 'dist',
+  useCascadeLayers: true,
+  browserslistQuery: 'last 2 versions'
+})
+```

packages/docs/pages/guides/_meta.json

@@ -3,7 +3,6 @@
   "layouts": "Layouts",
   "state-management": "State Management",
   "styling": "Styling",
-  "theming": "Theming",
   "composition": "Composition",
   "forms": "Forms",
   "design-migration": "Design Migration",

packages/docs/pages/guides/getting-started.mdx

@@ -47,7 +47,6 @@ Now that you are all set, you can start building your project with Shoreline. Ch
 <Cards>
 
 <Card title="Styling" href="guides/styling/introduction" />
-<Card title="Theming" href="guides/theming/css-package" />
 <Card title="Components" href="../components" />
 <Card title="Foundations" href="../foundations" />
 

packages/docs/pages/guides/styling/introduction.mdx

@@ -4,6 +4,6 @@ import { Steps } from 'nextra/components'
 
 This documentation aims to explain how the styling using shoreline components works. It is intended for developers who want to customize the look and feel of applications.
 
-By default every component doesn't have any style applied. Instead they have an architecture that respond to the `data-attributes` and `tokens` defined in the [Theme](/guides/theming/css-package).
+By default every component doesn't have any style applied. Instead they have an architecture that respond to the `data-attributes` and `tokens` defined in the Theme.
 
-In the next sections you will understand how this architecture works and how to use it to create your own styles. 
+In the next sections you will understand how this architecture works and how to use it to create your own styles.