docs: Modal and Drawer

.starters/default/content/3.components/1.elements/4.drawer.md

@@ -4,13 +4,13 @@ The `Drawer` component is a panel that slides out from the edge of the screen. I
 
 ## Focus
 
-The `Drawer` component is a modal component. It traps focus within the drawer while it is open. When the drawer is closed, focus is returned to the element that had focus before the drawer was opened.
+The `Drawer` component is a modal component. It traps focus within the `Drawer` while it is open. When the drawer is closed, focus is returned to the element that had focus before the `Drawer` was opened.
 
 ## Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `modelValue` | `boolean` | `false` | Whether the `Drawer` is open or not. |
+| `modelValue` | `boolean` | `false` | Whether the `Drawer` is opened or not. |
 
 ## Slots
 
@@ -26,17 +26,7 @@ import { defineTheme } from 'pinceau'
 export default defineTheme({
   elements: {
     drawer: {
-      zIndex: '50',
-      scrim: {
-        backgroundColor: {
-          initial: '{color.gray.50}',
-          dark: '{color.gray.900}'
-        },
-        backdropFilter: 'none'
-      },
-      content: {
-        maxWidth: '{size.xs}',
-      }
+      maxWidth: '{size.xs}',
     }
   }
 })

.starters/default/content/3.components/1.elements/5.modal.md

@@ -0,0 +1,34 @@
+# Modal
+
+A `Modal` is a component that appears on top of the main content of the page. It is used to display important information or to request user input, while blocking interaction with the rest of the page.
+
+## Focus
+
+`Modal` traps focus within it's content while it is open. When the `Modal` is closed, focus is returned to the element that had focus before the `Modal` was opened.
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `boolean` | `false` | Whether the `Modal` is opened or not. |
+
+## Design Tokens
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  elements: {
+    modal: {
+      zIndex: '50',
+      scrim: {
+        backgroundColor: {
+          initial: '{color.gray.50}',
+          dark: '{color.gray.900}'
+        },
+        backdropFilter: 'none'
+      },
+    },
+  }
+})
+```