/* OpenCX docs — overrides on top of Mintlify's "mint" theme. * * Rounding mirrors the OpenCX dashboard design system (see * `dashboard/packages/hoose/src/index.css`): base `--radius: 6px` with a * multiplier scale. Docs MDX surfaces (cards, callouts, accordions, code * blocks) and chrome (CTA button, search bar) are aligned to the * dashboard's component scale — Card 24px, Button/Input 12px, Tabs 18px, * AlertDialog 8px — for cross-surface visual consistency. * * Other local tweaks: brand-color vars, TOC vertical-line rail, frosted * navbar, no icons on header tabs, chrome dividers, inner header divider * removed, custom docs footer. */ /* --- Rounding tokens (mirrors dashboard/packages/hoose/src/index.css) -- * * Base radius 6px; multiplier scale derived from --radius. Same names as * the dashboard so future custom components pick them up by muscle * memory. Mintlify's own `rounded-*` utilities still apply where we * don't override — the component overrides below nudge the few MDX * surfaces and chrome pieces into line with the dashboard scale. */ :root { --radius: 0.375rem; /* 6px — base */ --radius-sm: 0.125rem; /* 2px — calc(var(--radius) - 4px) */ --radius-md: 0.25rem; /* 4px — calc(var(--radius) - 2px) */ --radius-lg: 0.375rem; /* 6px — var(--radius) */ --radius-xl: 0.75rem; /* 12px — buttons, inputs, code blocks */ --radius-2xl: 1.125rem; /* 18px — tabs, icon buttons */ --radius-3xl: 1.5rem; /* 24px — cards */ --radius-full: 9999px; /* circles, pills */ } /* --- Component rounding — align MDX + chrome with dashboard components */ /* Cards — match dashboard : 24px */ card, .card, card-group card, .card-group card, .card-group .card { border-radius: var(--radius-3xl); } /* Callouts + accordions — secondary surfaces, 12px */ callout, .callout, accordion, accordion-group accordion, .accordion, .accordion-group .accordion, [data-accordion], [data-accordion-item] { border-radius: var(--radius-xl); } /* Code blocks — match /

Get Started

Documentation Index