RDoc-3524 Add ContentFrame and Panel components

Author: mateuszbartosik

docusaurus.config.ts

@@ -197,7 +197,7 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} RavenDB`,
     },
     prism: {
-      theme: prismThemes.github,
+      theme: prismThemes.nightOwlLight,
       darkTheme: prismThemes.dracula,
       additionalLanguages: ["csharp", "java", "php"],
     },

src/components/ContentFrame.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import React from "react";
+
+export type ContentFrameProps = {
+  children: React.ReactNode;
+  className?: string;
+  flush?: boolean;
+};
+
+export function ContentFrame(props: ContentFrameProps) {
+  const { children, className, flush } = props;
+
+  return (
+    <div className={clsx("content-frame", flush ? "" : "my-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+export default ContentFrame;

src/components/LanguageSwitcher.tsx

@@ -39,8 +39,8 @@ export default function LanguageSwitcher({
               onClick={() => setLanguage(lang.value)}
               className={clsx(
                 "px-3 py-1.5 rounded-md border text-sm transition-colors cursor-pointer",
-                "border-gray-300 text-gray-500 hover:bg-black/5 hover:border-gray-500 hover:text-gray-600",
-                "dark:text-gray-300 dark:border-gray-600 dark:hover:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-white/5",
+                "border-black/10 text-gray-500 hover:bg-black/5 hover:border-black-15 hover:text-gray-600",
+                "dark:text-gray-300  dark:border-white/10 dark:hover:text-gray-200 dark:hover:border-white-15 dark:hover:bg-white/5",
               )}
               style={
                 isActive

src/components/Panel.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import React from "react";
+import Heading from "@theme/Heading";
+
+export type PanelProps = {
+  children: React.ReactNode;
+  className?: string;
+  flush?: boolean;
+  heading: string;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+export function Panel(props: PanelProps) {
+  const { children, className, flush, heading, headingLevel = 2 } = props;
+  const headingTag = (`h${headingLevel}` as any);
+
+  return (
+    <section className={clsx("panel", flush ? "" : "my-4", className)}>
+      <Heading as={headingTag} className="panel__heading">{heading}</Heading>
+      <div className="panel__body">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default Panel;

src/css/custom.css

@@ -31,6 +31,7 @@
   --font-mono:
     "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
+    --ifm-pre-background: color-mix(in oklab, var(--ifm-background-surface-color) 72%, #FFF 28%);
   --anchor-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjI1NiIgd2lkdGg9IjI1NiIvPjxwYXRoIGQ9Ik0yMTAsNDZhNTEuOCw1MS44LDAsMCwwLTczLjUsMEwxMTYuNyw2NS44QTgsOCwwLDAsMCwxMjgsNzcuMWwxOS44LTE5LjhhMzYuMSwzNi4xLDAsMCwxLDUwLjksMCwzNS45LDM1LjksMCwwLDEsMCw1MC45bC0yOC4zLDI4LjNhMzYuMSwzNi4xLDAsMCwxLTUwLjksMCw4LDgsMCwxLDAtMTEuMywxMS4zLDUyLDUyLDAsMCwwLDczLjUsMEwyMTAsMTE5LjVBNTEuOCw1MS44LDAsMCwwLDIxMCw0NloiLz48cGF0aCBkPSJNMTI4LDE3OC45bC0xOS44LDE5LjhhMzYsMzYsMCwwLDEtNTAuOS01MC45bDI4LjMtMjguM2EzNi4xLDM2LjEsMCwwLDEsNTAuOSwwLDgsOCwwLDAsMCwxMS4zLTExLjMsNTIsNTIsMCwwLDAtNzMuNSwwTDQ2LDEzNi41QTUyLDUyLDAsMSwwLDExOS41LDIxMGwxOS44LTE5LjhBOCw4LDAsMCwwLDEyOCwxNzguOVoiLz48L3N2Zz4=");
   --docsearch-searchbox-focus-background: var(--ifm-background-color) !important;
   --docsearch-hit-color: var(--ifm-color-primary-lightest) !important;
@@ -47,9 +48,18 @@
   --ifm-color-primary-lightest: #86baf2;
   --ifm-navbar-background-color: var(--ifm-background-color);
   --ifm-background-surface-color: #222225;
+  --ifm-pre-background: color-mix(in oklab, var(--ifm-background-surface-color) 72%, #000 28%);
   --anchor-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2Ij4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSJub25lIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDAyIiB3aWR0aD0iNTgyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cmVjdCBpZD0ic3ZnXzEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjEwLDQ2YTUxLjgsNTEuOCAwIDAgMCAtNzMuNSwwbC0xOS44LDE5LjhhOCw4IDAgMCAwIDExLjMsMTEuM2wxOS44LC0xOS44YTM2LjEsMzYuMSAwIDAgMSA1MC45LDBhMzUuOSwzNS45IDAgMCAxIDAsNTAuOWwtMjguMywyOC4zYTM2LjEsMzYuMSAwIDAgMSAtNTAuOSwwYTgsOCAwIDEgMCAtMTEuMywxMS4zYTUyLDUyIDAgMCAwIDczLjUsMGwyOC4zLC0yOC4zYTUxLjgsNTEuOCAwIDAgMCAwLC03My41eiIvPgogIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGlkPSJzdmdfMyIgZD0ibTEyOCwxNzguOWwtMTkuOCwxOS44YTM2LDM2IDAgMCAxIC01MC45LC01MC45bDI4LjMsLTI4LjNhMzYuMSwzNi4xIDAgMCAxIDUwLjksMGE4LDggMCAwIDAgMTEuMywtMTEuM2E1Miw1MiAwIDAgMCAtNzMuNSwwbC0yOC4zLDI4LjNhNTIsNTIgMCAxIDAgNzMuNSw3My41bDE5LjgsLTE5LjhhOCw4IDAgMCAwIC0xMS4zLC0xMS4zeiIvPgogPC9nPgo8L3N2Zz4= ");
 }
 
+/* Ensure code blocks use the harmonized background even if theme overrides */
+.theme-code-block,
+.codeBlockContainer,
+pre[class*="language-"] {
+  --prism-background-color: var(--ifm-pre-background) !important;
+  background-color: var(--prism-background-color) !important;
+}
+
 /* Custom search variables */
 [data-theme="light"] .DocSearch {
   --docsearch-primary-color: var(--ifm-color-primary);
@@ -331,3 +341,71 @@ code {
 [class^="tabItem"]:has(+ *), .theme-admonition:has(+ *) {
   @apply mb-4;
 }
+
+/* Remove trailing margin from the last element inside the last div of an admonition */
+.theme-admonition > div:last-child > :last-child {
+  @apply mb-0;
+}
+
+/* Frames for documentation content */
+.content-frame {
+  @apply rounded-md border border-black/10 dark:border-white/10 p-4;
+  background-color: color-mix(in oklab, var(--ifm-background-surface-color) 85%, transparent);
+}
+
+.content-frame > :first-child {
+  @apply mt-0;
+}
+
+.content-frame > :last-child {
+  @apply mb-0;
+}
+
+.content-frame pre,
+.content-frame .theme-code-block {
+  @apply my-0;
+}
+
+.panel {
+  @apply rounded-lg border border-black/10 dark:border-white/10;
+}
+
+.panel__body {
+  padding: 1.5rem;
+  background-color: color-mix(in oklab, var(--ifm-background-surface-color) 30%, transparent);
+}
+
+.panel__body > :first-child {
+  @apply mt-0;
+}
+
+.panel__body > :last-child {
+  @apply mb-0;
+}
+
+.panel__body pre,
+.panel__body .theme-code-block {
+  @apply my-0;
+}
+
+.panel__heading {
+  @apply rounded-t-lg border-b border-black/10 dark:border-white/10 m-0;
+  padding: 0.875rem 1rem;
+}
+
+.panel__heading {
+  background-color: var(--ifm-background-surface-color);
+}
+
+.theme-code-block {
+  @apply border border-black/10 dark:border-white/10;
+}
+
+/* Remove borders for code blocks when placed inside tabs container */
+.tabs-container .theme-code-block,
+.tabs-container .codeBlockContainer,
+.tabs-container pre[class*="language-"] {
+  @apply !border-0;
+  border: 0 !important;
+  box-shadow: none !important;
+}

src/theme/Tabs/index.tsx

@@ -67,7 +67,7 @@ function TabList({
       role="tablist"
       aria-orientation="horizontal"
       className={clsx(
-        "!my-0 !px-4 flex gap-2 bg-ifm-background-surface",
+        "!my-0 !px-4 flex gap-2 bg-black/6 dark:bg-white/3 border-b border-black/10 dark:border-white/10",
         {
           "tabs--block": block,
         },
@@ -128,7 +128,7 @@ function TabContent({
     });
   }
   return (
-    <div className="p-4 bg-ifm-background">
+    <div className="p-4 bg-pre-background">
       {childTabs.map((tabItem, i) =>
         cloneElement(tabItem, {
           key: i,
@@ -144,7 +144,7 @@ function TabsComponent(props: Props): ReactNode {
   return (
     <div
       className={clsx(
-        "tabs-container overflow-hidden rounded-lg border-gray-300 dark:border-gray-700 border mb-6",
+        "tabs-container overflow-hidden rounded-lg border-black/10 dark:border-white/10 border mb-6",
         styles.tabList,
       )}
     >