updated docs and website styles

docs/api/advanced/snapshot.mdx

@@ -103,14 +103,17 @@ This should be fine, because the expectation is that they execute very quickly (
 
 ## Vanilla JavaScript
 
-In VanillaJS, `snapshot` is not necessary to access proxied object values, inside or outside of subscribe. However, it is useful, for example, to keep a serializable list of unproxied objects or check if objects have changed. It also resolves promises.
+In VanillaJS, `snapshot` is not necessary to access proxied object values, inside or outside of subscribe. However, it is useful, for example, to keep a serializable list of un-proxied objects or check if objects have changed. It also resolves promises.
 
 <br />
 
-> 💡 Tip
->
-> If you are using valtio outside of react, import from `valtio/vanilla`
->
-> ```js
-> import { proxy, snapshot } from 'valtio/vanilla'
-> ```
+<blockquote className="tip">
+💡 Tip
+
+If you are using valtio outside of react, import from `valtio/vanilla`
+
+```js
+import { proxy, snapshot } from 'valtio/vanilla'
+```
+
+</blockquote>

docs/api/basic/useSnapshot.mdx

@@ -186,11 +186,14 @@ In dev mode, `useSnapshot` uses React's `useDebugValue` to output a list of fiel
 
 <br />
 
-> !! &nbsp; There are two disclaimers to
-> using the debug value
->
-> 1. Due to the way `useSnapshot` uses a proxy to recorded accesses _after_ `useSnapshot` has returned, the fields listed in `useDebugValue` are technically from the _previous_ render.
-> 2. Object getter and class getter calls are not included in the `useDebugValue` output, but don't worry, they are actually correctly tracked internally and correctly trigger re-renders when changed.
+<blockquote className="important">
+!! &nbsp; There are two disclaimers to using the debug value
+
+1. Due to the way `useSnapshot` uses a proxy to recorded accesses _after_ `useSnapshot` has returned, the fields listed in `useDebugValue` are technically from the _previous_ render.
+2. Object getter and class getter calls are not included in the `useDebugValue` output, but don't worry, they are actually correctly tracked internally and correctly trigger re-renders when changed.
+   </blockquote>
+
+<br />
 
 <br />
 

docs/api/hacks/internals.mdx

@@ -8,10 +8,10 @@ description: ''
 Valtio exposes some internal capabilities.
 This isn't for app developers. Use it at your own risk.
 
-# unstable_getInternalStates
+# `unstable_getInternalStates`
 
 This function exposes the internal states. Modifying such states may result in wrong behaviors. You need to understand the [source code](https://github.com/pmndrs/valtio/blob/main/src/vanilla.ts) thoroughly to use it.
 
-# unstable_replaceInternalFunction
+# `unstable_replaceInternalFunction`
 
 This function exposes a way to replace some internal functions. It can easily break things. You need to understand the [source code](https://github.com/pmndrs/valtio/blob/main/src/vanilla.ts) thoroughly to use it.

docs/api/utils/derive.mdx

@@ -7,6 +7,13 @@ description: 'create a new proxy derived from others'
 
 ## `derive`
 
+<blockquote className="note">
+ℹ️ &nbsp; Note
+
+There is a new library called [valtio-reactive](https://github.com/valtiojs/valtio-reactive) that is a drop-in replacement for `derive` and provides a more powerful API. It is recommended to use that library instead.
+
+</blockquote>
+
 ## Installation
 
 ```bash

docs/guides/computed-properties.mdx

@@ -10,8 +10,13 @@ In Valtio you can use object & class getters and setters to create computed prop
 
 <br />
 
-> ℹ️ &nbsp; Note
-> Getters in JavaScript are a more advanced feature of the language, so Valtio recommends using them with caution. That said, if you are a more advanced JavaScript programmer, they should work as you expect; see the "Note about using `this`" section below.
+<blockquote className="note">
+ℹ️ &nbsp; Note
+
+Getters in JavaScript are a more advanced feature of the language, so Valtio recommends using them with caution. That said, if you are a more advanced JavaScript programmer, they should work as you expect; see the "Note about using `this`" section below.
+
+</blockquote>
+<br />
 
 <br />
 
@@ -42,8 +47,12 @@ However, when you make a snapshot, calls to `snap.doubled` are effectively cache
 
 <br />
 
-> ℹ️ &nbsp; Note
-> In the current implementation a computed property should only reference \*\*\_sibling\*\*\* properties, otherwise you'll encounter weird bugs. For example:
+<blockquote className="note">
+ℹ️ &nbsp; Note
+
+In the current implementation a computed property should only reference \*\*\_sibling\*\*\* properties, otherwise you'll encounter weird bugs. For example:
+
+</blockquote>
 
 <br />
 

docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx

@@ -47,9 +47,16 @@ export { state, useSnapshot, subscribe }
 
 <br />
 
-> 💡 &nbsp; Using TypeScript? Here are some links for reference
->
-> https://www.totaltypescript.com/tsconfig-cheat-sheet<br /> > https://github.com/tsconfig/bases<br /> > https://www.typescriptlang.org/tsconfig/
+<blockquote className="tip">
+ 💡 &nbsp; Using TypeScript? Here are some links for reference
+
+https://www.totaltypescript.com/tsconfig-cheat-sheet<br />
+https://github.com/tsconfig/bases<br />
+https://www.typescriptlang.org/tsconfig/
+
+</blockquote>
+
+<br />
 
 <br />
 

docs/how-tos/how-to-organize-actions.mdx

@@ -11,9 +11,14 @@ Here's some recipes to show various patterns are possible.
 
 <br />
 
-> ℹ️ &nbsp; Note
->
-> This way is preferred as it is better for code splitting.
+<blockquote className="note">
+ℹ️ &nbsp; Note
+
+This way is preferred as it is better for code splitting.
+
+</blockquote>
+
+<br />
 
 <br />
 

docs/how-tos/how-to-reset-state.mdx

@@ -40,10 +40,13 @@ const reset = () => {
 
 <br />
 
-> ℹ️ &nbsp; Note
->
-> Using `structuredClone()`
+<blockquote className="note">
+ℹ️ &nbsp; Note
+
+Using `structuredClone()`
 
 <br />
 
 In 2022, there was a new global function added called `structuredClone` that is widely available in most modern browsers. You can use `structuredClone` in the same way as `deepClone` above, however `deepClone` is preferred as it will be aware of any `ref`s in your state.
+
+</blockquote>

docs/resources/libraries.mdx

@@ -10,12 +10,17 @@ Valtio provides bare necessities for proxy state management which is great for m
 
 <br />
 
-> ⚠️ &nbsp; Warning
->
-> Disclaimer: These libraries may have bugs, limited maintenance, or other limitations and are not officially recommended by pmndrs or the valtio maintainers. This list is to provide a good starting point for someone looking to extend valtio's feature set.
+<blockquote className="warning">
+⚠️ &nbsp; Warning
+
+Disclaimer: These libraries may have bugs, limited maintenance, or other limitations and are not officially recommended by pmndrs or the valtio maintainers. This list is to provide a good starting point for someone looking to extend valtio's feature set.
+
+</blockquote>
 
 <br />
 
+- [valtio-reactive](https://github.com/valtiojs/valtio-reactive) - Valtio-reactive makes valtio a reactive library. It is an improvement on the derive function. It allows you to create computed values that are reactive to changes in their dependencies.
+
 - [electron-valtio](https://github.com/water-a/electron-valtio) - Share state between the Electron main process and various renderer windows via valtio
 
 - [eslint-plugin-valtio](https://github.com/pmndrs/eslint-plugin-valtio) - Eslint plugin for valtio

website/styles/prism-theme.css

@@ -27,16 +27,26 @@ pre[class*="language-"] {
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
   border-radius: 0.3em;
 }
 
 :not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+code {
   background: #2e3440;
+  padding: 0.1em;
+}
+
+code {
+  font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
+    monospace;
+}
+
+code::before, code::after {
+  content: '' !important;
 }
 
 /* Inline code */
@@ -123,3 +133,38 @@ pre[class*="language-"] {
 .token.entity {
   cursor: help;
 }
+
+blockquote.tip p::before,
+blockquote.tip p::after,
+blockquote.note p::before,
+blockquote.note p::after,
+blockquote.warning p::before,
+blockquote.warning p::after,
+blockquote.important p::before,
+blockquote.important p::after {
+  content: '' !important;
+}
+
+blockquote {
+  padding-left: 1.5rem;
+}
+
+.tip {
+  border-left: 5px solid #88c0d0;
+}
+
+.note {
+  border-left: 5px solid #81a1c1;
+}
+
+.warning {
+  border-left: 5px solid #ebcb8b;
+}
+
+.important {
+  border-left: 5px solid #a3be8c;
+}
+
+code {
+
+}