@marlinjai/clearify 1.5.2 → 1.6.0

package/dist/node/{chunk-NY3VVUQ3.js → chunk-7IXPTIHW.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "./chunk-UOVBAJMR.js";
+} from "./chunk-7VYQMIW2.js";
 import {
   loadUserConfig,
   resolveConfig,

package/dist/node/{chunk-UOVBAJMR.js → chunk-7VYQMIW2.js}

@@ -13,6 +13,7 @@ import {
 // src/vite-plugin/index.ts
 import { resolve } from "path";
 import { existsSync, readFileSync } from "fs";
+import { dereference } from "@scalar/openapi-parser";
 var VIRTUAL_CONFIG = "virtual:clearify/config";
 var RESOLVED_VIRTUAL_CONFIG = "\0" + VIRTUAL_CONFIG;
 var VIRTUAL_ROUTES = "virtual:clearify/routes";
@@ -35,7 +36,7 @@ function clearifyPlugin(options = {}) {
   let allSectionNavigations;
   let allSearchEntries;
   let mermaidSvgData = options.mermaidSvgs ?? {};
-  function refreshDocs() {
+  async function refreshDocs() {
     const changelogPath = resolve(userRoot, "CHANGELOG.md");
     sectionDataList = visibleSections.map(
       (section) => buildSectionData(section, changelogPath, config.navigation)
@@ -48,7 +49,7 @@ function clearifyPlugin(options = {}) {
     );
     if (config.openapi?.spec && config.openapi.generatePages !== false) {
       const basePath = config.openapi.basePath ?? "/api";
-      const specData = loadOpenAPISpecData();
+      const specData = await loadOpenAPISpecData();
       if (specData) {
         let opAnchor2 = function(tag, method, opPath) {
           const slug = `${method.toLowerCase()}${opPath.replace(/[{}]/g, "")}`;
@@ -132,7 +133,7 @@ ${routeEntries.join(",\n")}
   }
   let cachedSpecData = null;
   let specDataInitialized = false;
-  function loadOpenAPISpecData() {
+  async function loadOpenAPISpecData() {
     if (specDataInitialized) return cachedSpecData;
     specDataInitialized = true;
     const specPath = config.openapi?.spec;
@@ -148,45 +149,32 @@ ${routeEntries.join(",\n")}
     try {
       const content = readFileSync(resolvedPath, "utf-8");
       const isYaml = /\.ya?ml$/i.test(resolvedPath);
+      let parsed;
       if (isYaml) {
         try {
-          cachedSpecData = JSON.parse(content);
-          return cachedSpecData;
+          parsed = JSON.parse(content);
         } catch {
           console.warn("  YAML OpenAPI specs require js-yaml for page generation. Install it or use a JSON spec.");
           cachedSpecData = null;
           return null;
         }
+      } else {
+        parsed = JSON.parse(content);
       }
-      cachedSpecData = JSON.parse(content);
+      const { schema } = await dereference(parsed);
+      cachedSpecData = schema;
       return cachedSpecData;
     } catch {
       cachedSpecData = null;
       return null;
     }
   }
-  function loadOpenAPISpec() {
-    const specPath = config.openapi?.spec;
-    if (!specPath) {
-      return "export default null;";
-    }
-    const resolvedPath = resolve(userRoot, specPath);
-    if (!existsSync(resolvedPath)) {
-      console.warn(`  OpenAPI spec not found: ${resolvedPath}`);
-      return "export default null;";
-    }
-    try {
-      const content = readFileSync(resolvedPath, "utf-8");
-      const isYaml = /\.ya?ml$/i.test(resolvedPath);
-      if (isYaml) {
-        return `export default ${JSON.stringify(content)};`;
-      }
-      JSON.parse(content);
-      return `export default ${content};`;
-    } catch (err) {
-      console.warn(`  Failed to load OpenAPI spec: ${resolvedPath}`, err instanceof Error ? err.message : err);
+  async function loadOpenAPISpec() {
+    const specData = await loadOpenAPISpecData();
+    if (!specData) {
       return "export default null;";
     }
+    return `export default ${JSON.stringify(specData)};`;
   }
   const mainPlugin = {
     name: "clearify",
@@ -199,7 +187,7 @@ ${routeEntries.join(",\n")}
       const allSections = resolveSections(config, userRoot);
       const isDev = resolvedViteConfig.command === "serve";
       visibleSections = isDev ? allSections : allSections.filter((s) => !s.draft);
-      refreshDocs();
+      await refreshDocs();
     },
     resolveId(id) {
       if (id === VIRTUAL_CONFIG) return RESOLVED_VIRTUAL_CONFIG;
@@ -210,7 +198,7 @@ ${routeEntries.join(",\n")}
       if (id === VIRTUAL_OPENAPI_SPEC) return RESOLVED_VIRTUAL_OPENAPI_SPEC;
       return null;
     },
-    load(id) {
+    async load(id) {
       if (id === RESOLVED_VIRTUAL_CONFIG) {
         return `export default ${JSON.stringify(config)};`;
       }
@@ -227,7 +215,7 @@ ${routeEntries.join(",\n")}
         return `export default ${JSON.stringify(mermaidSvgData)};`;
       }
       if (id === RESOLVED_VIRTUAL_OPENAPI_SPEC) {
-        return loadOpenAPISpec();
+        return await loadOpenAPISpec();
       }
       return null;
     },
@@ -248,16 +236,17 @@ ${routeEntries.join(",\n")}
           if (changedPath === openapiPath) {
             specDataInitialized = false;
             cachedSpecData = null;
-            refreshDocs();
-            const specMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_OPENAPI_SPEC);
-            if (specMod) server.moduleGraph.invalidateModule(specMod);
-            const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
-            if (routesMod) server.moduleGraph.invalidateModule(routesMod);
-            const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
-            if (navMod) server.moduleGraph.invalidateModule(navMod);
-            const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
-            if (searchMod) server.moduleGraph.invalidateModule(searchMod);
-            server.ws.send({ type: "full-reload" });
+            refreshDocs().then(() => {
+              const specMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_OPENAPI_SPEC);
+              if (specMod) server.moduleGraph.invalidateModule(specMod);
+              const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
+              if (routesMod) server.moduleGraph.invalidateModule(routesMod);
+              const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
+              if (navMod) server.moduleGraph.invalidateModule(navMod);
+              const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
+              if (searchMod) server.moduleGraph.invalidateModule(searchMod);
+              server.ws.send({ type: "full-reload" });
+            });
           }
         });
       }
@@ -358,14 +347,15 @@ ${routeEntries.join(",\n")}
         if (!isChangelog && !isInSection) return;
         if (!path.endsWith(".md") && !path.endsWith(".mdx")) return;
         if (event === "add" || event === "unlink" || event === "change") {
-          refreshDocs();
-          const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
-          const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
-          const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
-          if (routesMod) server.moduleGraph.invalidateModule(routesMod);
-          if (navMod) server.moduleGraph.invalidateModule(navMod);
-          if (searchMod) server.moduleGraph.invalidateModule(searchMod);
-          server.ws.send({ type: "full-reload" });
+          refreshDocs().then(() => {
+            const routesMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ROUTES);
+            const navMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_NAVIGATION);
+            const searchMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_SEARCH_INDEX);
+            if (routesMod) server.moduleGraph.invalidateModule(routesMod);
+            if (navMod) server.moduleGraph.invalidateModule(navMod);
+            if (searchMod) server.moduleGraph.invalidateModule(searchMod);
+            server.ws.send({ type: "full-reload" });
+          });
         }
       });
       return () => {

package/dist/node/node/build.js

@@ -1,9 +1,9 @@
 import {
   buildSite
-} from "../chunk-NY3VVUQ3.js";
+} from "../chunk-7IXPTIHW.js";
 import "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
-import "../chunk-UOVBAJMR.js";
+import "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import "../chunk-IBK35HZR.js";
 import "../chunk-V7LLYIRO.js";

package/dist/node/node/index.js

@@ -1,13 +1,13 @@
 import {
   buildSite
-} from "../chunk-NY3VVUQ3.js";
+} from "../chunk-7IXPTIHW.js";
 import {
   remarkMermaidToComponent
 } from "../chunk-PRTER35L.js";
 import "../chunk-SCZZB7OE.js";
 import {
   clearifyPlugin
-} from "../chunk-UOVBAJMR.js";
+} from "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import {
   init

package/dist/node/vite-plugin/index.js

@@ -1,6 +1,6 @@
 import {
   clearifyPlugin
-} from "../chunk-UOVBAJMR.js";
+} from "../chunk-7VYQMIW2.js";
 import "../chunk-B2Q23JW3.js";
 import "../chunk-IBK35HZR.js";
 import "../chunk-V7LLYIRO.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marlinjai/clearify",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "An open-source documentation site generator. Turn markdown into beautiful docs.",
   "type": "module",
   "bin": {
@@ -29,7 +29,7 @@
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
-    "@scalar/api-reference-react": "^0.8.52",
+    "@scalar/openapi-parser": "^0.10.7",
     "@shikijs/rehype": "^3.22.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",

package/src/theme/Sidebar.tsx

@@ -38,6 +38,14 @@ function findActiveSection(pathname: string, sections: SectionNavigation[]): str
   return bestMatch;
 }
 
+function collectGroupKeys(items: NavigationItem[], prefix = ''): string[] {
+  return items.flatMap((item) => {
+    if (!item.children) return [];
+    const key = prefix ? `${prefix}/${item.label}` : item.label;
+    return [key, ...collectGroupKeys(item.children, key)];
+  });
+}
+
 function SectionSwitcher({
   sections,
   activeId,
@@ -121,6 +129,32 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
   const navigation = legacyNavigation ?? activeSection?.navigation ?? [];
   const showSwitcher = isSectionData && sections.length > 1;
 
+  // Centralized expansion state
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => new Set(collectGroupKeys(navigation)));
+
+  // Re-expand all when section changes
+  useEffect(() => {
+    setExpandedGroups(new Set(collectGroupKeys(navigation)));
+  }, [selectedSectionId]);
+
+  const allGroupKeys = collectGroupKeys(navigation);
+  const hasCollapsibleGroups = allGroupKeys.length >= 2;
+
+  const handleToggleGroup = (key: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const handleExpandAll = () => setExpandedGroups(new Set(allGroupKeys));
+  const handleCollapseAll = () => setExpandedGroups(new Set());
+
   return (
     <>
       {/* Mobile overlay */}
@@ -163,9 +197,86 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
             onSelect={setSelectedSectionId}
           />
         )}
+        {hasCollapsibleGroups && (
+          <div style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '0.25rem',
+            padding: '0.25rem 0.75rem',
+          }}>
+            <button
+              onClick={handleExpandAll}
+              title="Expand all groups"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 24,
+                height: 24,
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--clearify-text-tertiary)',
+                borderRadius: 'var(--clearify-radius-sm)',
+                transition: 'color 0.15s, background-color 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+                e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-tertiary)';
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="7 8 12 3 17 8" />
+                <polyline points="7 16 12 21 17 16" />
+              </svg>
+            </button>
+            <button
+              onClick={handleCollapseAll}
+              title="Collapse all groups"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 24,
+                height: 24,
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--clearify-text-tertiary)',
+                borderRadius: 'var(--clearify-radius-sm)',
+                transition: 'color 0.15s, background-color 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-secondary)';
+                e.currentTarget.style.backgroundColor = 'var(--clearify-bg-secondary)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.color = 'var(--clearify-text-tertiary)';
+                e.currentTarget.style.backgroundColor = 'transparent';
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="7 3 12 8 17 3" />
+                <polyline points="7 21 12 16 17 21" />
+              </svg>
+            </button>
+          </div>
+        )}
         <nav style={{ padding: '0 0.5rem' }}>
           {navigation.map((item, i) => (
-            <NavItem key={i} item={item} depth={0} onNavigate={onClose} />
+            <NavItem
+              key={i}
+              item={item}
+              depth={0}
+              onNavigate={onClose}
+              expandedGroups={expandedGroups}
+              onToggleGroup={handleToggleGroup}
+              groupKeyPrefix=""
+            />
           ))}
         </nav>
       </aside>
@@ -193,16 +304,27 @@ export function Sidebar({ sections, open, onClose }: SidebarProps) {
   );
 }
 
-function NavItem({ item, depth, onNavigate }: { item: NavigationItem; depth: number; onNavigate: () => void }) {
+interface NavItemProps {
+  item: NavigationItem;
+  depth: number;
+  onNavigate: () => void;
+  expandedGroups: Set<string>;
+  onToggleGroup: (key: string) => void;
+  groupKeyPrefix: string;
+}
+
+function NavItem({ item, depth, onNavigate, expandedGroups, onToggleGroup, groupKeyPrefix }: NavItemProps) {
   const location = useLocation();
-  const [expanded, setExpanded] = useState(true);
   const isActive = item.path === location.pathname;
 
   if (item.children) {
+    const groupKey = groupKeyPrefix ? `${groupKeyPrefix}/${item.label}` : item.label;
+    const expanded = expandedGroups.has(groupKey);
+
     return (
       <div style={{ marginBottom: '0.125rem' }}>
         <button
-          onClick={() => setExpanded(!expanded)}
+          onClick={() => onToggleGroup(groupKey)}
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -246,7 +368,15 @@ function NavItem({ item, depth, onNavigate }: { item: NavigationItem; depth: num
         {expanded && (
           <div style={{ animation: 'clearify-fade-in 0.15s ease-out' }}>
             {item.children.map((child, i) => (
-              <NavItem key={i} item={child} depth={depth + 1} onNavigate={onNavigate} />
+              <NavItem
+                key={i}
+                item={child}
+                depth={depth + 1}
+                onNavigate={onNavigate}
+                expandedGroups={expandedGroups}
+                onToggleGroup={onToggleGroup}
+                groupKeyPrefix={groupKey}
+              />
             ))}
           </div>
         )}

package/src/theme/components/OpenAPI.tsx

@@ -1,77 +1,15 @@
-import React, { useMemo } from 'react';
-import { useTheme } from '../ThemeProvider.js';
+import React from 'react';
+import { ApiHeader } from './openapi/ApiHeader.js';
+import { TagGroup } from './openapi/TagGroup.js';
 
 interface OpenAPIProps {
-  /** Inline spec as a parsed object or raw string (JSON/YAML). Falls back to config-based spec. */
-  spec?: string | Record<string, unknown>;
-  /** URL to fetch the OpenAPI spec from at runtime */
-  url?: string;
-  /** Hide the built-in Scalar sidebar (default: true, since Clearify has its own sidebar) */
-  hideSidebar?: boolean;
-  /** Hide the dark mode toggle (default: true, Clearify controls dark mode) */
-  hideDarkModeToggle?: boolean;
-  /** Hide the search (default: true, Clearify has its own search) */
-  hideSearch?: boolean;
-  /** Layout style: 'modern' or 'classic' */
-  layout?: 'modern' | 'classic';
-  /** Enable Scalar's path-based routing. Pass { basePath: '/api' } or true for default '/api'. */
-  pathRouting?: { basePath: string } | boolean;
+  spec?: Record<string, any>;
 }
 
-// SSR guard: Scalar requires DOM
-const LazyApiReference = typeof window !== 'undefined'
-  ? React.lazy(() =>
-      import('@scalar/api-reference-react').then((mod) => ({
-        default: mod.ApiReferenceReact,
-      }))
-    )
-  : null;
+const HTTP_METHODS = ['get', 'post', 'put', 'delete', 'patch'] as const;
 
-export function OpenAPI({
-  spec,
-  url,
-  hideSidebar = true,
-  hideDarkModeToggle = true,
-  hideSearch = true,
-  layout = 'modern',
-  pathRouting,
-}: OpenAPIProps) {
-  const { theme } = useTheme();
-
-  const resolvedSpec = spec ?? null;
-
-  const configuration = useMemo(() => {
-    const config: Record<string, unknown> = {
-      // Use 'none' theme so Clearify's CSS variable bridge takes full control
-      theme: 'none',
-      forceDarkModeState: theme === 'dark' ? 'dark' : 'light',
-      hideDarkModeToggle,
-      showSidebar: !hideSidebar,
-      hideSearch,
-      layout,
-      withDefaultFonts: false,
-      customCss: SCALAR_CUSTOM_CSS,
-    };
-
-    if (pathRouting) {
-      config.pathRouting = pathRouting === true
-        ? { basePath: '/api' }
-        : pathRouting;
-    }
-
-    if (url) {
-      config.url = url;
-    } else if (typeof resolvedSpec === 'string') {
-      config.content = resolvedSpec;
-    } else if (resolvedSpec && typeof resolvedSpec === 'object') {
-      config.content = resolvedSpec;
-    }
-
-    return config;
-  }, [resolvedSpec, url, theme, hideSidebar, hideDarkModeToggle, hideSearch, layout, pathRouting]);
-
-  // No spec provided via props, config, or URL
-  if (!url && !resolvedSpec) {
+export function OpenAPI({ spec }: OpenAPIProps) {
+  if (!spec || typeof spec !== 'object') {
     return (
       <div
         style={{
@@ -82,79 +20,48 @@ export function OpenAPI({
           fontSize: '0.875rem',
         }}
       >
-        <strong>OpenAPI:</strong> No spec provided. Pass a <code>spec</code> or <code>url</code> prop,
-        or set <code>openapi.spec</code> in your Clearify config.
+        <strong>OpenAPI:</strong> No spec provided. Pass a <code>spec</code> prop or set{' '}
+        <code>openapi.spec</code> in your Clearify config.
       </div>
     );
   }
 
-  // SSR fallback
-  if (typeof window === 'undefined' || !LazyApiReference) {
-    return (
-      <div
-        style={{
-          border: '1px solid var(--clearify-border)',
-          borderRadius: 'var(--clearify-radius)',
-          padding: '2rem',
-          textAlign: 'center',
-          color: 'var(--clearify-text-secondary)',
-        }}
-      >
-        Loading API Reference...
-      </div>
-    );
+  const baseUrl = spec.servers?.[0]?.url ?? 'http://localhost:3000';
+  const paths = spec.paths ?? {};
+  const tagMap = new Map<string, { tag: string; description?: string; operations: Array<{ method: string; path: string; operation: Record<string, any> }> }>();
+  const tagDescriptions = new Map<string, string>();
+
+  if (Array.isArray(spec.tags)) {
+    for (const t of spec.tags) {
+      if (t.name && t.description) tagDescriptions.set(t.name, t.description);
+    }
+  }
+
+  for (const [pathStr, pathItem] of Object.entries(paths)) {
+    if (!pathItem || typeof pathItem !== 'object') continue;
+    for (const method of HTTP_METHODS) {
+      const operation = (pathItem as Record<string, any>)[method];
+      if (!operation || typeof operation !== 'object') continue;
+      const tags: string[] = Array.isArray(operation.tags) && operation.tags.length > 0 ? [operation.tags[0]] : ['Default'];
+      for (const tag of tags) {
+        if (!tagMap.has(tag)) tagMap.set(tag, { tag, description: tagDescriptions.get(tag), operations: [] });
+        tagMap.get(tag)!.operations.push({ method: method.toUpperCase(), path: pathStr, operation });
+      }
+    }
   }
 
+  const tagGroups = [...tagMap.values()].sort((a, b) => {
+    if (a.tag === 'Default') return 1;
+    if (b.tag === 'Default') return -1;
+    return a.tag.localeCompare(b.tag);
+  });
+
   return (
-    <div className="clearify-openapi-container">
-      <React.Suspense
-        fallback={
-          <div
-            style={{
-              border: '1px solid var(--clearify-border)',
-              borderRadius: 'var(--clearify-radius)',
-              padding: '2rem',
-              textAlign: 'center',
-              color: 'var(--clearify-text-secondary)',
-            }}
-          >
-            Loading API Reference...
-          </div>
-        }
-      >
-        <LazyApiReference configuration={configuration} />
-      </React.Suspense>
+    <div className="clearify-openapi-page" style={{ maxWidth: 'none' }}>
+      <ApiHeader spec={spec} />
+      {tagGroups.map((group) => (
+        <TagGroup key={group.tag} tag={group.tag} description={group.description} operations={group.operations} baseUrl={baseUrl} />
+      ))}
     </div>
   );
 }
-
-/** Custom CSS to integrate Scalar with Clearify's design tokens */
-const SCALAR_CUSTOM_CSS = `
-  .scalar-app {
-    --scalar-font: var(--font-sans);
-    --scalar-font-code: var(--font-mono);
-
-    --scalar-color-1: var(--clearify-text);
-    --scalar-color-2: var(--clearify-text-secondary);
-    --scalar-color-3: var(--clearify-text-tertiary);
-
-    --scalar-color-accent: var(--clearify-primary);
-
-    --scalar-background-1: var(--clearify-bg);
-    --scalar-background-2: var(--clearify-bg-secondary);
-    --scalar-background-3: var(--clearify-bg-tertiary);
-
-    --scalar-border-color: var(--clearify-border-strong);
-
-    --scalar-radius: var(--clearify-radius-sm);
-    --scalar-radius-lg: var(--clearify-radius);
-
-    --scalar-shadow-1: var(--clearify-shadow-sm);
-    --scalar-shadow-2: var(--clearify-shadow);
-  }
-
-  .scalar-app .section {
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;