Fix docs callouts and logo theming (#776)

Author: thebuilder

apps/docs/docs/api/configuration.mdx

@@ -55,7 +55,9 @@ export function ScrollArea() {
 
 The root must be an ancestor of the target. `scrollMargin` is not a substitute for `rootMargin`: it expands or contracts the clipping rectangles of **nested** scroll containers inside the root. Use it when an inner scroller clips the target, for example `useInView({ root, scrollMargin: "80px 0px" })`. Invalid margin syntax, invalid thresholds, iframes, and custom roots can all change what the browser considers visible.
 
-> **Verify configuration:** Test real layout, scrolling, and geometry in [Vitest Browser Mode](/testing/browser-mode). Use a deterministic mock to cross a configured threshold without relying on layout; see [Mock intersections](/testing/mocking-intersections).
+:::note[Verify configuration]
+Test real layout, scrolling, and geometry in [Vitest Browser Mode](/testing/browser-mode). Use a deterministic mock to cross a configured threshold without relying on layout; see [Mock intersections](/testing/mocking-intersections).
+:::
 
 ## Stop, pause, or choose a callback API
 

apps/docs/docs/api/core-apis.mdx

@@ -11,7 +11,9 @@ description: Choose and use the three React APIs for observing elements.
 | `useOnInView` | You need an effect without a hook-owned state update. | A callback `ref` and your `(inView, entry)` callback. |
 | `<InView>` | Render props or a wrapper component fit the composition. | Render-prop fields, or a generated wrapper for plain children. |
 
-> **Initial notification:** By default, the APIs suppress the observer's first `false` result. `initialInView` sets the starting state and changes how that first notification is handled. Later enter and leave transitions report both `true` and `false`.
+:::note[Initial notification]
+By default, the APIs suppress the observer's first `false` result. `initialInView` sets the starting state and changes how that first notification is handled. Later enter and leave transitions report both `true` and `false`.
+:::
 
 The package also exposes a low-level [`observe`](#low-level-observe) function for code that already owns a DOM element.
 

apps/docs/public/logo-horizontal.svg

@@ -12,6 +12,14 @@
   }
 }
 
+[data-docs-logo] path[stroke="#000"] {
+  stroke: currentColor;
+}
+
+[data-docs-logo] path[fill="#1a1a1a"] {
+  fill: currentColor;
+}
+
 @media (min-width: 30rem) and (max-width: 47.999rem) {
   [data-docs-logo-graphic] {
     display: inline-flex;