Uplift docs (#778)

* Get basic multi-level nav working

* Move all docs to new format

* Move Srpinkles and integrations to own IA group

* Rename to css-variables

* Add concept pages

* WIp

* Add theming concept page

* Updates

* Saving is hard

* WIP on CSS code blocks

* Standardise mdx layouts

* wip

* Fix SSR mismatch

* Get multi-file code blocks working

* Fix running on multiple code blocks from same file

* Extract SyntaxHighlighter to be shared

* Wip compiledCode panel

* Update lockfile

* CompiledCode fixes

* Updates

* Reworked CompiledCode UX

* Updates

* Fix scrolling

* Update compiledcode show output toggle buttons

* Tweaks

* Start rolling out compiled code blocks

* Tweak createVar

* More updates

* Update lists and inlinecodes

* Update Blockquote style

* Restructured IA

* Skew the world

* Update integration docs

* Integrations pass

* Update api docs

* Nest docs links under parent path

* Update home page footer & layout

* Styling docs update

* More updates

* Tweaks

* Add example to targetting child elements

* Theming overview pass

* More overview tweaks

* More updates

* Fix deps

* Formatting fixes

Co-authored-by: Michael Taranto <[email protected]>

Author: mattcompiles

README.md

@@ -639,7 +639,7 @@ export const themeB = createTheme(vars, {
 });
 ```
 
-> 💡 All theme variants must provide a value for every variable or it’s a type error.
+> 💡 All theme values must be provided or it’s a type error.
 
 ### createGlobalTheme
 
@@ -662,7 +662,7 @@ export const vars = createGlobalTheme(':root', {
 });
 ```
 
-> 💡 All theme variants must provide a value for every variable or it’s a type error.
+> 💡 All theme values must be provided or it’s a type error.
 
 If you want to implement an existing theme contract, you can pass it as the second argument.
 
@@ -857,7 +857,7 @@ export const exampleStyle = style({
 });
 ```
 
-Scoped variables can be set via the `vars` property on style objects.
+Scoped variables can be set using the `vars` key.
 
 ```ts
 import { createVar, style } from '@vanilla-extract/css';

packages/sprinkles/README.md

@@ -53,7 +53,7 @@ document.write(`
 
 🏃‍♂️ &nbsp; Compose sprinkles statically in `.css.ts` files, or dynamically at runtime (<0.5KB Gzip)
 
-🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/styling-api/#createtheme)
+🎨 &nbsp; Generate theme-based scales with CSS Variables using [vanilla-extract themes.](https://vanilla-extract.style/documentation/api/create-theme)
 
 ✍️ &nbsp; Configure shorthands for common property combinations, e.g. `paddingX` / `paddingY`.
 
@@ -191,7 +191,7 @@ document.write(`
 
 > 💡 Although you don’t need to use this library at runtime, it’s designed to be as small and performant as possible. The runtime is only used to look up pre-existing class names. All styles are still generated at build time!
 
-Within `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/styling-api/#style) function.
+Within `.css.ts` files, combine with any custom styles by providing an array to vanilla-extract’s [`style`](https://vanilla-extract.style/documentation/api/style) function.
 
 ```ts
 // styles.css.ts
@@ -364,7 +364,7 @@ const responsiveProperties = defineProperties({
 });
 ```
 
-You can also use [vanilla-extract themes](/documentation/styling-api/#createtheme) to configure themed values.
+You can also use [vanilla-extract themes](/documentation/api/create-theme) to configure themed values.
 
 ```ts
 import { defineProperties } from '@vanilla-extract/sprinkles';