Docs: Update modes configuration

master-co · May 22, 2024 · 0f019a2 · 0f019a2
1 parent d73d5b5
commit 0f019a2
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/website/app/[locale]/reference/configuration/content.mdx b/website/app/[locale]/reference/configuration/content.mdx
@@ -6,6 +6,7 @@ import QueriesOverview from '../queries/components/Overview.mdx'
 import SelectorsOverview from '../selectors/components/Overview.mdx'
 import FunctionsOverview from '../functions/components/Overview.mdx'
 import StylesOverview from '../styles/components/Overview.mdx'
+import { config } from '@master/css'
 
 ## Setup [sr-only]
 ```bash name=Terminal
@@ -162,17 +163,19 @@ Generated CSS:
 }
 ```
 
-### `.modeDriver`
+### `.modes`
 Sets how the theme should drive and generate CSS rules.
-<DocProp defaultValue="'class'" types={["'class'", "'media'", "'host'"]} />
+<DocProp defaultValue={JSON.stringify(config.modes)} types={["{ [key: string]: 'class' | 'media' | 'host' | false }"]} />
 ```html
 <div class="bg:black@dark">
 ```
 
 #### Drive theme styles through CSS classes
 ```js name=master.css.js
 export default {
-+    modeDriver: 'class'
+    modes: {
++        dark: 'class'
+    }
 }
 ```
 Generated CSS:
@@ -183,7 +186,9 @@ Generated CSS:
 #### Drive theme styles through media queries
 ```js name=master.css.js
 export default {
-+    modeDriver: 'media'
+    modes: {
++        dark: 'class'
+    }
 }
 ```
 Generated CSS:
@@ -194,10 +199,13 @@ Generated CSS:
 #### Drive theme styles through shadow DOM's host
 ```js name=master.css.js
 export default {
-+    modeDriver: 'host'
+    modes: {
++        dark: 'host'
+    }
 }
 ```
 Generated CSS:
 ```css
 :host(.dark) .bg\:#000000 { background-color: #000000 }
 ```
+