docs: make code in <SectionMessage> look nicer (#4269)

* docs: make `code` in `<SectionMessage>` look nicer

* Create sweet-squids-design.md

* Update sweet-squids-design.md

.changeset/sweet-squids-design.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/theme-docs": patch
+---
+
+docs: adjust font size of `code` in `<SectionMessage>` and make them less distracting

docs/ui/mdx.tsx

@@ -129,7 +129,7 @@ const typography = {
   ),
   code: (props: HTMLAttributes<HTMLElement>) => (
     <code
-      className="my-0 inline-grid rounded bg-black/10 px-1 py-0.5 font-mono text-sm before:content-none after:content-none"
+      className="my-0 inline-grid rounded bg-black/5 px-1 py-0.5 font-mono text-sm before:content-none after:content-none"
       {...props}
     />
   ),

themes/theme-docs/src/components/SectionMessage.styles.ts

@@ -17,5 +17,5 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
   ),
   icon: cva('size-6'),
   title: cva('mb-1 font-bold leading-none tracking-tight'),
-  content: cva('text-sm [&_p]:leading-relaxed'),
+  content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),
 };