docs: some color adjustments for docs (no white bg anymore) (#3161)

docs/app/_components/SiteHeader.tsx

@@ -2,7 +2,7 @@ import { MobileNavigation } from './MobileNavigation';
 import { SiteNavigation } from './SiteNavigation';
 
 export const SiteHeader = () => (
-  <header className="border-secondary-300 sticky top-0 z-10 w-full border-b bg-white">
+  <header className="border-secondary-300 bg-bg-body sticky top-0 z-10 w-full border-b">
     <div className="container flex h-14 items-center">
       <MobileNavigation />
       <SiteNavigation />

docs/registry/index.tsx

@@ -4,6 +4,16 @@
 import dynamic from 'next/dynamic';
 
 export const registry = {
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
   'basic-accordion': {
     name: 'basic-accordion',
     demo: dynamic(
@@ -32,16 +42,6 @@ export const registry = {
     ),
     file: 'content/components/breakout/vertical-breakout.demo.tsx',
   },
-  rightside: {
-    name: 'rightside',
-    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
-    file: 'content/components/aside/rightside.demo.tsx',
-  },
-  space: {
-    name: 'space',
-    demo: dynamic(() => import('@/content/components/aside/space.demo')),
-    file: 'content/components/aside/space.demo.tsx',
-  },
   'button-variant': {
     name: 'button-variant',
     demo: dynamic(

docs/theme/components/Message.styles.ts

@@ -1,23 +1,15 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Message: ThemeComponent<'Message'> = {
-  container: cva('relative w-full rounded-lg border p-4 pl-11', {
+  container: cva('not-prose relative w-full rounded-lg p-4 pl-11', {
     variants: {
       variant: {
-        default: 'border-primary-950',
-        info: 'border-border-info text-text-info bg-bg-info',
-        warning: 'border-border-warning text-text-warning bg-bg-warning',
+        info: 'bg-bg-info text-text-info',
+        warning: 'bg-bg-warning text-text-warning',
       },
     },
-    defaultVariants: {
-      variant: 'default',
-    },
   }),
-  icon: cva('absolute left-3 top-3 h-6 w-6'),
+  icon: cva('absolute left-3 top-3 block h-6 w-6'),
   title: cva('mb-1 font-bold leading-none tracking-tight'),
   content: cva('text-sm [&_p]:leading-relaxed'),
 };
-
-cva([
-  '[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-]);

docs/theme/root.ts

@@ -1,2 +1,2 @@
 import { Theme, cva } from '@marigold/system';
-export const root: Theme['root'] = cva('text-text-primary');
+export const root: Theme['root'] = cva('text-text-primary bg-bg-body');

docs/theme/tokens.ts

@@ -26,18 +26,18 @@ export const colors = {
   // ---------------
   text: {
     primary: {
-      DEFAULT: brand.primary[950],
+      DEFAULT: tw.slate[950],
     },
 
     // State
-    info: tw.sky[950],
-    warning: tw.amber[950],
+    info: tw.blue[950],
+    warning: tw.amber[800],
   },
 
   // Background
   // ---------------
   bg: {
-    body: tw.white,
+    body: tw.slate[50],
     hover: tw.neutral[100],
     muted: tw.slate[100],
 
@@ -48,14 +48,11 @@ export const colors = {
     },
 
     // Status
-    info: tw.sky[100],
-    warning: tw.amber[100],
+    info: tw.blue[100],
+    warning: tw.amber[50],
   },
 
   // Border
   // ---------------
-  border: {
-    info: tw.sky[950],
-    warning: tw.amber[950],
-  },
+  border: {},
 };