-
+
{collection?.info?.name || 'API Collection'}
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
index 50efde7..88cbb09 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Docs/Sidebar/StyledWrapper.ts
@@ -4,15 +4,14 @@ export const SidebarContainer = styled.div`
height: 100%;
display: flex;
flex-direction: column;
-
+
&.compact {
min-width: var(--sidebar-width-compact);
max-width: var(--sidebar-width-compact);
}
- /* Sidebar scrollbar styling */
& ::-webkit-scrollbar {
- width: 6px;
+ width: 0;
}
& ::-webkit-scrollbar-track {
@@ -20,11 +19,13 @@ export const SidebarContainer = styled.div`
}
& ::-webkit-scrollbar-thumb {
- background-color: rgba(0, 0, 0, 0.2);
- border-radius: 10px;
+ background-color: transparent;
+ }
+
+ &:hover ::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.12);
}
- /* Sidebar Logo styling */
& .logo {
padding: 0 8px 12px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
@@ -37,7 +38,7 @@ export const SidebarContainer = styled.div`
`;
export const SidebarItems = styled.div`
- padding: 0;
+ padding: 0 6px;
overflow-y: auto;
flex-grow: 1;
@@ -48,16 +49,16 @@ export const SidebarItems = styled.div`
export const SidebarItem = styled.div`
cursor: pointer;
- transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
- border-radius: 0;
+ transition: all 0.12s ease;
+ border-radius: 6px;
margin-bottom: 0;
position: relative;
overflow: hidden;
- padding: 6px 12px;
+ padding: 5px 10px;
display: flex;
align-items: center;
-// font-size: 13px;
- color: #212121;
+ color: var(--text-secondary);
+ font-size: 13px;
${SidebarContainer}.compact & {
padding: 4px 8px;
@@ -67,36 +68,41 @@ export const SidebarItem = styled.div`
&:hover, &.hovered {
background-color: rgba(0, 0, 0, 0.04);
- color: #212121;
+ color: var(--text-primary);
}
&.active {
- background-color: rgba(0, 0, 0, 0.08);
- color: #212121;
+ background-color: rgba(217, 119, 6, 0.08);
+ color: var(--text-primary);
font-weight: 500;
}
&.active:hover {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: rgba(217, 119, 6, 0.1);
+ }
+
+ &.folder {
+ color: var(--text-primary);
+ font-weight: 500;
+ font-size: 12.5px;
}
&.folder:hover {
background-color: transparent;
- color: #212121;
}
& .method-badge {
- font-size: 10px;
- padding: 3px 6px;
- border-radius: 4px;
- font-weight: 600;
- min-width: 42px;
+ font-size: 9px;
+ padding: 2px 5px;
+ border-radius: 3px;
+ font-weight: 700;
+ min-width: 36px;
text-align: center;
- letter-spacing: 0.03em;
- transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+ letter-spacing: 0.05em;
+ transition: all 0.12s ease;
text-transform: uppercase;
margin-right: 8px;
- opacity: 0.85;
+ font-family: var(--font-mono);
}
${SidebarContainer}.compact & .method-badge {
@@ -105,11 +111,10 @@ export const SidebarItem = styled.div`
font-size: 10px;
}
- /* Fix for click events */
& * {
pointer-events: none;
}
-
+
& svg {
pointer-events: all;
}
@@ -119,4 +124,3 @@ export const SidebarItem = styled.div`
height: 14px;
}
`;
-
diff --git a/packages/oc-docs/src/standalone.ts b/packages/oc-docs/src/standalone.ts
index 02b4574..0070936 100644
--- a/packages/oc-docs/src/standalone.ts
+++ b/packages/oc-docs/src/standalone.ts
@@ -41,9 +41,9 @@ export class OpenCollectionRenderer {
const links = [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
- {
+ {
rel: 'stylesheet',
- href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@400;500;600;700&display=swap'
}
];
diff --git a/packages/oc-docs/src/styles/index.css b/packages/oc-docs/src/styles/index.css
index 89be27f..514b78d 100644
--- a/packages/oc-docs/src/styles/index.css
+++ b/packages/oc-docs/src/styles/index.css
@@ -6,103 +6,105 @@
--secondary-color: #0ea5e9;
/* Radius */
- --oc-radius: 3px;
+ --oc-radius: 6px;
/* Tabs */
- --oc-tabs-color: rgb(155, 155, 155);
- --oc-tabs-active-color: rgb(50, 46, 44) !important;
-
+ --oc-tabs-color: #8c8c8c;
+ --oc-tabs-active-color: #1a1a1a !important;
+
/* Background colors */
- --oc-sidebar-bg: rgb(250, 250, 250);
+ --oc-sidebar-bg: #fafafa;
--background-light: #ffffff;
-
+ --content-bg: #ffffff;
+
/* Text colors */
- --oc-text-primary: rgb(52, 52, 52);
- --text-light: rgb(52, 52, 52);
-
+ --oc-text-primary: #1a1a1a;
+ --text-light: #1a1a1a;
+
/* Border colors */
- --border-light: #e8e8e8;
-
- /* Code colors */
- --code-bg-light: #ffffff;
- --code-text-light: #515151;
-
+ --border-light: #e5e5e5;
+
+ /* Code colors - light theme inspired by Stripe */
+ --code-bg-light: #f6f8fa;
+ --code-text-light: #30313d;
+
/* Sidebar colors */
- --sidebar-bg-light: #FCFCFC;
- --sidebar-color-light: rgb(52, 52, 52);
-
+ --sidebar-bg-light: #fafafa;
+ --sidebar-color-light: #1a1a1a;
+
/* Table colors */
--table-header-bg-light: #fafafa;
--table-row-odd-bg-light: #ffffff;
- --table-row-even-bg-light: #ffffff;
-
+ --table-row-even-bg-light: #fafafa;
+
/* Status colors */
- --success-color: #22c55e;
- --warning-color: #eab308;
- --info-color: #3b82f6;
- --error-color: #ef4444;
-
+ --success-color: #16a34a;
+ --warning-color: #ca8a04;
+ --info-color: #2563eb;
+ --error-color: #dc2626;
+
/* Method colors */
- --method-get-bg: #61affe;
- --method-post-bg: #49cc90;
- --method-put-bg: #fca130;
- --method-delete-bg: #f93e3e;
- --method-patch-bg: #50e3c2;
- --method-options-bg: #a47fdc;
-
+ --method-get-bg: #2563eb;
+ --method-post-bg: #16a34a;
+ --method-put-bg: #d97706;
+ --method-delete-bg: #dc2626;
+ --method-patch-bg: #9333ea;
+ --method-options-bg: #6b7280;
+
/* Input and badge colors */
--input-bg-light: #fafafa;
--badge-bg-light: #f5f5f5;
- --badge-text-light: #4b5563;
-
+ --badge-text-light: #3d3d3d;
+
/* Apple colors for method badges */
- --apple-blue-100: #e6f1ff;
- --apple-blue-900: #0050d4;
- --apple-green-100: #e6f7ed;
- --apple-green-900: #056e3c;
- --apple-orange-100: #fef4e6;
- --apple-orange-900: #804c00;
- --apple-red-100: #fee6e6;
- --apple-red-900: #b01212;
- --apple-purple-100: #f3e6ff;
- --apple-purple-900: #6b0099;
- --apple-gray-100: #f0f0f0;
- --apple-gray-900: #333333;
-
+ --apple-blue-100: #eff6ff;
+ --apple-blue-900: #1e40af;
+ --apple-green-100: #f0fdf4;
+ --apple-green-900: #166534;
+ --apple-orange-100: #fffbeb;
+ --apple-orange-900: #92400e;
+ --apple-red-100: #fef2f2;
+ --apple-red-900: #991b1b;
+ --apple-purple-100: #faf5ff;
+ --apple-purple-900: #581c87;
+ --apple-gray-100: #f3f4f6;
+ --apple-gray-900: #1f2937;
+
/* Prose colors */
- --prose-links: #0071e3;
- --prose-links-hover: #0058b0;
- --prose-blockquote-border: rgba(0, 0, 0, 0.1);
- --prose-hr-color: rgba(0, 0, 0, 0.1);
-
+ --prose-links: #d97706;
+ --prose-links-hover: #b45309;
+ --prose-blockquote-border: #d97706;
+ --prose-hr-color: #e5e5e5;
+
/* Layout dimensions */
--sidebar-width: 260px;
--header-height: 60px;
--item-padding-compact: 4px;
--item-height-compact: 28px;
-
+
/* Z-index layers */
--z-header: 10;
--z-sidebar: 5;
--z-overlay: 50;
-
+
/* Shadows */
- --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
- --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
-
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+ --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
+
/* Fonts */
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-
+
/* Theme variables */
--background-color: var(--background-light);
--text-primary: var(--text-light);
- --text-secondary: #6e6e6e;
+ --text-secondary: #6b6b6b;
+ --text-tertiary: #a1a1a1;
--border-color: var(--border-light);
--code-bg: var(--code-bg-light);
--code-text: var(--code-text-light);
- --prose-code-bg: var(--code-bg);
- --prose-code-text: var(--code-text);
+ --prose-code-bg: #f5f5f5;
+ --prose-code-text: #d97706;
--table-header-bg: var(--table-header-bg-light);
--table-row-odd-bg: var(--table-row-odd-bg-light);
--table-row-even-bg: var(--table-row-even-bg-light);
@@ -111,12 +113,29 @@
--badge-text: var(--badge-text-light);
}
+/* ================================================================
+ BASE
+ ================================================================ */
+
+html, body {
+ font-kerning: normal;
+ text-rendering: optimizeLegibility;
+ letter-spacing: -0.011em;
+ margin: 0;
+ padding: 0;
+ font-size: 1rem;
+ overflow-x: hidden;
+ font-family: var(--font-sans) !important;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
/* Main playground container */
.oc-playground {
width: 100%;
height: 100vh !important;
overflow: hidden;
- font-family: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+ font-family: var(--font-sans);
color: var(--text-primary);
background-color: var(--background-color);
position: relative;
@@ -126,30 +145,30 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
- line-height: 1.5;
+ line-height: 1.6;
+ letter-spacing: -0.011em;
+}
+
+.oc-playground * {
+ box-sizing: border-box;
}
-/* Header styling */
+/* ================================================================
+ HEADER
+ ================================================================ */
+
.glass-header {
height: var(--header-height);
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
- background-color: rgba(255, 255, 255, 0.8);
+ backdrop-filter: saturate(180%) blur(20px);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+ background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid var(--border-color);
}
-html, body {
- font-kerning: none;
- text-rendering: optimizeSpeed;
- letter-spacing: normal;
- margin: 0;
- padding: 0;
- font-size: 1rem;
- overflow-x: hidden;
- font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif !important;
-}
+/* ================================================================
+ DESKTOP LAYOUT
+ ================================================================ */
-/* Desktop Layout */
@media (min-width: 1024px) {
.oc-playground {
display: flex;
@@ -169,7 +188,7 @@ html, body {
overflow-y: auto;
background-color: var(--oc-sidebar-bg);
color: var(--sidebar-color-light);
- padding: 12px 0 0 0;
+ padding: 14px 0 0 0;
}
.playground-content {
@@ -177,6 +196,7 @@ html, body {
overflow-y: auto;
scroll-behavior: smooth;
padding: 0;
+ background-color: var(--content-bg);
}
.playground-runner {
@@ -196,25 +216,37 @@ html, body {
transition: width 0.3s ease;
}
- /* All Endpoints View Styles */
+ /* All Endpoints View */
.all-endpoints-view {
- max-width: 1200px;
+ max-width: 1100px;
margin: 0 auto;
- padding: 1.5rem;
+ padding: 2.5rem 3rem;
}
+ /* Endpoint sections - NO cards, clean flowing layout with dividers */
.endpoint-section {
scroll-margin-top: 2rem;
- transition: all 0.2s ease;
+ padding: 2.5rem 0;
+ border-bottom: 1px solid var(--border-color);
+ }
+
+ .endpoint-section:first-child {
+ padding-top: 0;
+ }
+
+ .endpoint-section:last-child {
+ border-bottom: none;
}
.endpoint-section.selected {
position: relative;
}
-
}
-/* Mobile Layout */
+/* ================================================================
+ MOBILE LAYOUT
+ ================================================================ */
+
@media (max-width: 1023px) {
.oc-playground {
flex-direction: column;
@@ -253,88 +285,195 @@ html, body {
}
}
-/* Method badge styling */
+/* ================================================================
+ METHOD BADGES
+ ================================================================ */
+
.method-badge {
display: inline-flex;
align-items: center;
justify-content: center;
- padding: 0.2rem 0.4rem;
- font-size: 0.65rem;
- font-weight: 600;
+ padding: 0.15rem 0.45rem;
+ font-size: 0.625rem;
+ font-weight: 700;
border-radius: 4px;
text-transform: uppercase;
- letter-spacing: 0.03em;
- font-family: var(--font-sans);
- min-width: 42px;
+ letter-spacing: 0.05em;
+ font-family: var(--font-mono);
+ min-width: 40px;
}
.method-badge.get {
- background-color: rgba(0, 112, 243, 0.09);
- color: #0057b7;
+ background-color: rgba(37, 99, 235, 0.1);
+ color: #2563eb;
}
.method-badge.post {
- background-color: rgba(0, 155, 0, 0.09);
- color: #00824d;
+ background-color: rgba(22, 163, 74, 0.1);
+ color: #16a34a;
}
.method-badge.put {
- background-color: rgba(243, 112, 0, 0.09);
- color: #b74600;
+ background-color: rgba(217, 119, 6, 0.1);
+ color: #d97706;
}
.method-badge.delete {
- background-color: rgba(243, 0, 0, 0.09);
- color: #b70000;
+ background-color: rgba(220, 38, 38, 0.1);
+ color: #dc2626;
}
.method-badge.patch {
- background-color: rgba(155, 0, 155, 0.09);
- color: #6b0082;
+ background-color: rgba(147, 51, 234, 0.1);
+ color: #9333ea;
}
-.method-badge.options,
+.method-badge.options,
.method-badge.head {
- background-color: rgba(100, 100, 100, 0.09);
- color: #4a4a4a;
+ background-color: rgba(107, 114, 128, 0.1);
+ color: #6b7280;
}
-/* Code block styling */
+/* ================================================================
+ CODE BLOCKS - DARK THEME
+ ================================================================ */
+
.code-block {
- border-radius: 6px;
+ border-radius: 8px;
background: var(--code-bg);
position: relative;
transition: all 0.2s ease;
overflow: hidden;
color: var(--code-text);
min-height: 80px;
- border: 1px solid var(--border-color);
+ border: none;
}
.code-block pre {
margin: 0;
- padding: 0.75rem;
+ padding: 1rem 1.25rem;
overflow: auto;
font-family: var(--font-mono);
- font-size: 12px;
- line-height: 1.5;
+ font-size: 13px;
+ line-height: 1.65;
scrollbar-width: thin;
}
-/* Copy button styling */
-.copy-button {
- opacity: 0.7;
- transition: all 0.2s ease;
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
- color: var(--text-primary);
+/* ================================================================
+ CODE SNIPPET OVERRIDES — right-side code snippets & example cards
+ Light theme inspired by Stripe
+ ================================================================ */
+
+.code-snippets-wrapper .compact-code-view,
+.code-example-card .compact-code-view {
+ background-color: var(--code-bg);
+ border: 1px solid #ebeef1;
}
-.copy-button:hover {
- opacity: 1;
- transform: scale(1.05);
+.code-snippets-wrapper .code-header,
+.code-example-card .code-header {
+ border-bottom: 1px solid #ebeef1;
+ background-color: #ebeef1;
+}
+
+.code-snippets-wrapper .code-tab,
+.code-example-card .code-tab {
+ color: #687385;
+}
+.code-snippets-wrapper .code-tab:hover,
+.code-example-card .code-tab:hover {
+ color: #30313d;
+ background-color: rgba(0, 0, 0, 0.04);
+}
+.code-snippets-wrapper .code-tab.active,
+.code-example-card .code-tab.active {
+ color: #30313d;
+ background-color: white;
+}
+
+.code-snippets-wrapper .copy-button,
+.code-example-card .copy-button {
+ color: #687385;
+}
+.code-snippets-wrapper .copy-button:hover,
+.code-example-card .copy-button:hover {
+ color: #30313d;
+ background-color: rgba(0, 0, 0, 0.04);
+}
+
+.code-snippets-wrapper .code-content,
+.code-example-card .code-content {
+ background-color: var(--code-bg);
+ color: var(--code-text);
+}
+
+.code-snippets-wrapper .code-content pre,
+.code-snippets-wrapper .code-content code,
+.code-example-card .code-content pre,
+.code-example-card .code-content code {
+ color: var(--code-text);
+}
+
+/* ================================================================
+ SYNTAX HIGHLIGHTING - LIGHT THEME (default for body/scripts)
+ ================================================================ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #6a737d;
+ font-style: italic;
}
+.token.punctuation { color: #24292e; }
+.token.property { color: #005cc5; }
+
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol { color: #005cc5; }
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin { color: #032f62; }
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string { color: #d73a49; }
+
+.token.variable { color: #e36209; }
+
+.token.atrule,
+.token.attr-value,
+.token.keyword { color: #d73a49; }
+
+.token.function,
+.token.class-name { color: #6f42c1; }
+
+.token.regex,
+.token.important { color: #e36209; }
+
+.token.parameter { color: #24292e; }
+
+.token.important,
+.token.bold { font-weight: bold; }
+
+.token.italic { font-style: italic; }
+.token.entity { cursor: help; }
+.token.deleted { color: #d73a49; }
+.token.inserted { color: #22863a; }
+
+
+/* ================================================================
+ TABLES
+ ================================================================ */
+
/* API table styling */
.api-table {
width: 100%;
@@ -346,22 +485,23 @@ html, body {
padding: 0.5rem 0.75rem;
background-color: var(--table-header-bg);
border-bottom: 1px solid var(--border-color);
- color: var(--text-primary);
- font-size: 0.8rem;
+ color: var(--text-secondary);
+ font-size: 0.6875rem;
font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
}
.api-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-color);
- font-size: 0.8rem;
+ font-size: 0.8125rem;
}
.api-table tr:last-child td {
border-bottom: none;
}
-/* Table row styling */
tr.themed-row:nth-child(odd) {
background-color: var(--table-row-odd-bg) !important;
}
@@ -370,214 +510,185 @@ tr.themed-row:nth-child(even) {
background-color: var(--table-row-even-bg) !important;
}
-/* Apple-style rounded corners */
-.rounded-apple {
- border-radius: 10px;
-}
-
-/* Apple-inspired shadows */
-.shadow-apple-sm {
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 0.5px 2px rgba(0, 0, 0, 0.06);
-}
-
-.shadow-apple-md {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
+/* Minimal Table Styles */
+.minimal-table {
+ display: flex;
+ flex-direction: column;
+ gap: 0.375rem;
}
-/* Apple-style scrollbars */
-.oc-playground ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+.table-wrapper {
+ @apply border rounded-lg overflow-hidden;
+ border-color: var(--border-color);
}
-.oc-playground ::-webkit-scrollbar-track {
- background: transparent;
+.minimal-table table {
+ @apply w-full text-sm;
}
-.oc-playground ::-webkit-scrollbar-thumb {
- background-color: #d1d5db;
- border-radius: 20px;
- border: 2px solid transparent;
- background-clip: content-box;
+.minimal-table thead {
+ background-color: var(--table-header-bg);
}
-.oc-playground ::-webkit-scrollbar-thumb:hover {
- background-color: #5a5a5a;
+.minimal-table th {
+ @apply px-3 py-1.5 text-left font-semibold uppercase;
+ color: var(--text-tertiary);
+ font-size: 0.625rem;
+ letter-spacing: 0.08em;
}
-/* Skeleton loading effect */
-.skeleton {
- background: linear-gradient(
- 90deg,
- rgba(0, 0, 0, 0.06) 25%,
- rgba(0, 0, 0, 0.12) 37%,
- rgba(0, 0, 0, 0.06) 63%
- );
- background-size: 400% 100%;
- animation: skeleton 1.4s ease infinite;
+.minimal-table td {
+ @apply px-3 py-2 border-t;
+ border-color: var(--border-color);
+ font-size: 0.8125rem;
}
-@keyframes skeleton {
- 0% { background-position: 100% 50%; }
- 100% { background-position: 0 50%; }
-}
+.minimal-table tbody tr {
+ @apply transition-colors;
-/* Hover lift effect */
-.hover-lift {
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ &:hover {
+ background-color: var(--table-row-even-bg);
+ }
}
-.hover-lift:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+.table-value {
+ @apply font-mono;
+ font-size: 0.75rem;
+ color: var(--text-primary);
}
-/* Ensure consistent box-sizing */
-.oc-playground * {
- box-sizing: border-box;
+.section-title {
+ @apply text-xs font-semibold mb-2 uppercase;
+ color: var(--text-tertiary);
+ font-size: 0.625rem;
+ letter-spacing: 0.1em;
}
-/* Animation for tab indicator */
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
+/* ================================================================
+ SCROLLBARS
+ ================================================================ */
-.fade-in {
- animation: fadeIn 0.3s ease-in-out;
+.oc-playground ::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
}
-/* Smooth Software Syntax Highlighting - Light Theme */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
- color: #6d82a3; /* Cool gray */
- font-style: italic;
+.oc-playground ::-webkit-scrollbar-track {
+ background: transparent;
}
-.token.punctuation {
- color: #4f678a; /* Slate blue */
+.oc-playground ::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 20px;
}
-.token.property {
- color: #2d66bb; /* Bold azure - for JSON properties */
+.oc-playground ::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.2);
}
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol {
- color: #1a9b7d; /* Bold jade */
-}
+/* ================================================================
+ BUTTONS
+ ================================================================ */
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin {
- color: #c55e1e; /* Bold bronze */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+ cursor: pointer;
+ font-size: 0.8125rem;
}
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
- color: #4f678a; /* Slate blue */
+.btn-primary {
+ background-color: var(--primary-color);
+ color: white;
}
-.token.variable {
- color: #1a8468; /* Bold teal */
+.btn-primary:hover {
+ background-color: #b45309;
}
-.token.atrule,
-.token.attr-value,
-.token.keyword {
- color: #d93d4f; /* Bold ruby */
+.btn-secondary {
+ background-color: var(--badge-bg);
+ color: var(--text-primary);
}
-.token.function,
-.token.class-name {
- color: #2d66bb; /* Bold azure */
+.btn-secondary:hover {
+ background-color: #ebebeb;
}
-.token.regex,
-.token.important {
- color: #c55e1e; /* Bold bronze */
-}
+/* ================================================================
+ STATUS BADGES
+ ================================================================ */
-.token.parameter {
- color: #6844c0; /* Bold plum */
+.status-badge {
+ @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold;
+ transition: all 0.15s ease;
+ font-size: 0.6875rem;
}
-.token.important,
-.token.bold {
- font-weight: bold;
-}
+/* ================================================================
+ ICON BUTTONS
+ ================================================================ */
-.token.italic {
- font-style: italic;
-}
+.icon-button {
+ @apply p-2 rounded transition-colors;
+ color: var(--text-secondary);
-.token.entity {
- cursor: help;
+ &:hover {
+ background-color: var(--input-bg);
+ color: var(--text-primary);
+ }
}
-.token.deleted {
- color: #d93d4f; /* Bold ruby */
-}
+.icon-button-small { @apply p-1; }
+.icon-button-large { @apply p-3; }
-.token.inserted {
- color: #39bd7d; /* Bold sage */
-}
+/* ================================================================
+ TABS
+ ================================================================ */
-/* Focus styles for accessibility */
-:focus-visible {
- outline: 2px solid var(--primary-color);
- outline-offset: 2px;
+.tab-group {
+ @apply space-y-0;
}
-/* Button styling */
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- font-weight: 500;
- padding: 0.5rem 1rem;
- border-radius: 0.5rem;
- transition: all 0.2s ease;
- cursor: pointer;
+.tab-header {
+ @apply flex gap-0;
}
-.btn-primary {
- background-color: var(--primary-color);
- color: white;
-}
+.tab-button {
+ @apply px-3 py-2 text-xs font-medium transition-all border-b-2 border-transparent;
+ color: var(--text-tertiary);
-.btn-primary:hover {
- background-color: #005bbf;
+ &:hover {
+ color: var(--text-primary);
+ }
}
-.btn-secondary {
- background-color: #f3f4f6;
- color: #1f2937;
+.tab-button.active {
+ color: var(--text-primary);
+ border-color: var(--primary-color);
+ font-weight: 600;
}
-.btn-secondary:hover {
- background-color: #e5e7eb;
+.tab-content {
+ background-color: var(--background-color);
}
+/* ================================================================
+ MARKDOWN / PROSE
+ ================================================================ */
-/* Markdown documentation styles */
.markdown-documentation {
color: var(--text-primary) !important;
max-width: none !important;
- line-height: 1.6 !important;
+ line-height: 1.7 !important;
+ font-size: 0.9375rem !important;
}
-/* Specific heading styles */
.markdown-documentation h1,
.markdown-documentation h2,
.markdown-documentation h3,
@@ -585,87 +696,94 @@ tr.themed-row:nth-child(even) {
.markdown-documentation h5,
.markdown-documentation h6 {
color: var(--text-primary) !important;
- margin-top: 1.25rem !important;
- margin-bottom: 0.75rem !important;
+ margin-top: 1.5rem !important;
+ margin-bottom: 0.625rem !important;
font-weight: 600 !important;
+ letter-spacing: -0.02em !important;
+ line-height: 1.3 !important;
}
.markdown-documentation h1.heading-1 {
font-size: 1.5rem !important;
- line-height: 2rem !important;
font-weight: 700 !important;
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
- color: var(--text-primary) !important;
+ letter-spacing: -0.025em !important;
}
.markdown-documentation h2.heading-2 {
font-size: 1.25rem !important;
- line-height: 1.75rem !important;
font-weight: 600 !important;
- margin-top: 1.25rem !important;
+ margin-top: 1.5rem !important;
margin-bottom: 0.5rem !important;
}
.markdown-documentation h3.heading-3 {
- font-size: 1.1rem !important;
+ font-size: 1.0625rem !important;
font-weight: 600 !important;
- margin-top: 1rem !important;
+ margin-top: 1.25rem !important;
margin-bottom: 0.5rem !important;
}
.markdown-documentation h4.heading-4 {
- font-size: 1rem !important;
+ font-size: 0.9375rem !important;
font-weight: 600 !important;
- margin-top: 0.75rem !important;
+ margin-top: 1rem !important;
margin-bottom: 0.4rem !important;
}
+.markdown-documentation p {
+ margin-bottom: 0.75rem !important;
+}
+
.markdown-documentation a {
text-decoration: none !important;
- transition: color 0.15s ease-in-out !important;
+ transition: all 0.15s ease !important;
color: var(--prose-links) !important;
+ font-weight: 500 !important;
}
.markdown-documentation a:hover {
text-decoration: underline !important;
color: var(--prose-links-hover) !important;
+ text-underline-offset: 3px !important;
}
.markdown-documentation code {
font-family: var(--font-mono) !important;
- padding: 0.15em 0.35em !important;
- border-radius: 3px !important;
- font-size: 0.9em !important;
+ padding: 0.125em 0.375em !important;
+ border-radius: 4px !important;
+ font-size: 0.85em !important;
background-color: var(--prose-code-bg) !important;
color: var(--prose-code-text) !important;
}
.markdown-documentation pre {
- padding: 0.75em !important;
- background-color: var(--prose-code-bg) !important;
+ padding: 1rem 1.25rem !important;
+ background-color: var(--code-bg) !important;
border-radius: 8px !important;
overflow-x: auto !important;
- margin: 0.75em 0 !important;
- color: var(--prose-code-text) !important;
+ margin: 1rem 0 !important;
+ color: var(--code-text) !important;
+ border: none !important;
}
.markdown-documentation pre code {
background-color: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
- font-size: 0.9em !important;
+ font-size: 0.85em !important;
color: inherit !important;
}
.markdown-documentation img {
margin: 1em 0 !important;
- border-radius: 6px !important;
+ border-radius: 8px !important;
}
.markdown-documentation ul, .markdown-documentation ol {
margin-left: 1.25em !important;
- margin-top: 0.75em !important;
+ margin-top: 0.5em !important;
margin-bottom: 0.75em !important;
}
@@ -675,16 +793,21 @@ tr.themed-row:nth-child(even) {
}
.markdown-documentation blockquote {
- border-left-width: 0.25em !important;
+ border-left-width: 3px !important;
border-left-color: var(--prose-blockquote-border) !important;
- padding-left: 0.75em !important;
- font-style: italic !important;
+ padding: 0.625rem 1rem !important;
+ font-style: normal !important;
margin: 0.75em 0 !important;
+ color: var(--text-secondary) !important;
+ background-color: rgba(217, 119, 6, 0.04) !important;
+ border-radius: 0 6px 6px 0 !important;
}
.markdown-documentation hr {
margin: 1.5em 0 !important;
- border-color: var(--prose-hr-color) !important;
+ border: none !important;
+ height: 1px !important;
+ background-color: var(--border-color) !important;
}
.markdown-documentation table {
@@ -692,6 +815,9 @@ tr.themed-row:nth-child(even) {
border-collapse: collapse !important;
margin: 1em 0 !important;
font-size: 0.875em !important;
+ border: 1px solid var(--border-color) !important;
+ border-radius: 6px !important;
+ overflow: hidden !important;
}
.markdown-documentation th,
@@ -704,7 +830,7 @@ tr.themed-row:nth-child(even) {
.markdown-documentation th {
background-color: var(--table-header-bg) !important;
font-weight: 600 !important;
- color: var(--text-primary) !important;
+ color: var(--text-secondary) !important;
}
.markdown-documentation tr:nth-child(even) {
@@ -725,120 +851,25 @@ tr.themed-row:nth-child(even) {
color: var(--text-secondary) !important;
}
-/* Console animations */
-.console-container {
- transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
- will-change: opacity, transform;
- min-height: 300px;
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-.console-container.fade-in {
- animation: fadeIn 0.3s ease forwards;
-}
-
-.console-container.fade-out {
- opacity: 0;
- transition: opacity 0.2s ease;
-}
-
-/* Make console sticky in appropriate places */
-.playground-console .sticky {
- position: sticky;
- top: 0;
- max-height: 100vh;
- overflow-y: auto;
- z-index: 10;
-}
-
-/* Flash effect for code updates */
-@keyframes codeFlash {
- 0% {
- background-color: var(--primary-color);
- opacity: 0.2;
- }
- 100% {
- background-color: transparent;
- opacity: 1;
- }
-}
-
-.code-updated {
- animation: codeFlash 0.5s ease-out;
-}
-
-/* Loading indicator for console */
-.console-view.is-loading .code-block::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0,0,0,0.1);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 10;
-}
-
-/* Endpoint info styling */
-.endpoint-info {
- padding: 8px 0;
- border-top: 1px solid var(--border-color);
- margin-top: 12px;
-}
-
-/* Section highlight animation */
-@keyframes sectionHighlight {
- 0% {
- background-color: rgba(59, 130, 246, 0.08);
- box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
- }
- 50% {
- background-color: rgba(59, 130, 246, 0.12);
- box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
- }
- 100% {
- background-color: transparent;
- box-shadow: 0 0 0 0 transparent;
- }
-}
-
-.section-highlight {
- animation: sectionHighlight 2s ease-out;
- border-radius: 8px;
-}
-
-/* Hide scrollbar but keep functionality */
-.hide-scrollbar::-webkit-scrollbar {
- width: 0;
- height: 0;
- display: none;
-}
-
-.hide-scrollbar {
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-}
+/* ================================================================
+ ENDPOINT STYLES
+ ================================================================ */
.endpoint-content {
max-width: 100%;
}
-/* Original styles */
.endpoint-header {
margin-bottom: 1rem;
- border-bottom: 1px solid var(--border-color, #e2e8f0);
+ border-bottom: 1px solid var(--border-color);
padding-bottom: 0.75rem;
}
.endpoint-name {
- font-size: 1.5rem;
+ font-size: 1.375rem;
font-weight: 600;
color: var(--text-primary);
+ letter-spacing: -0.02em;
}
.endpoint-method-url {
@@ -849,16 +880,16 @@ tr.themed-row:nth-child(even) {
}
.endpoint-url {
- font-family: monospace;
- background: var(--code-bg);
+ font-family: var(--font-mono);
+ background: var(--prose-code-bg);
border-radius: 4px;
- padding: 0.3rem 0.4rem;
+ padding: 0.2rem 0.4rem;
margin-left: 0.25rem;
overflow-x: auto;
word-break: break-all;
max-width: 100%;
- color: var(--code-text);
- font-size: 0.85rem;
+ color: var(--text-primary);
+ font-size: 0.8125rem;
}
.endpoint-description {
@@ -869,8 +900,8 @@ tr.themed-row:nth-child(even) {
.endpoint-grid {
display: grid;
grid-template-columns: 1fr 37%;
- gap: 1rem;
- margin-top: 0.75rem;
+ gap: 1.5rem;
+ margin-top: 1rem;
width: 100%;
max-width: 100%;
}
@@ -887,7 +918,7 @@ tr.themed-row:nth-child(even) {
}
.code-tab {
- transition: all 0.2s ease;
+ transition: all 0.15s ease;
}
.code-tab:hover {
@@ -901,215 +932,136 @@ tr.themed-row:nth-child(even) {
}
.param-name, .param-value {
- font-family: monospace;
+ font-family: var(--font-mono);
word-break: break-all;
+ font-size: 0.8125rem;
}
.param-name {
font-weight: 600;
}
-.section-title {
- @apply text-xs font-semibold mb-2 uppercase tracking-wide;
- color: var(--text-secondary);
-}
-
-/* Minimal Table Styles */
-.minimal-table {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.table-wrapper {
- @apply border rounded-lg overflow-hidden;
- border-color: var(--border-color);
-}
-
-.minimal-table table {
- @apply w-full text-sm;
-}
-
-.minimal-table thead {
- background-color: var(--table-header-bg);
-}
-
-.minimal-table th {
- @apply px-3 py-1.5 text-left font-medium text-xs uppercase tracking-wider;
- color: var(--text-secondary);
-}
-
-.minimal-table td {
- @apply px-3 py-2 border-t;
- border-color: var(--border-color);
-}
-
-.minimal-table tbody tr {
- @apply transition-colors;
-
- &:hover {
- background-color: var(--table-row-odd-bg);
- opacity: 0.8;
- }
-}
-
-.table-value {
- @apply font-mono text-xs;
- color: var(--text-primary);
-}
-
-/* Compact Code View */
-.compact-code-view {
- @apply overflow-hidden;
- background-color: var(--background-color);
- border: 1px solid var(--border-color);
- border-radius: 8px;
-}
-
-.code-header {
- @apply flex items-center justify-between px-3 py-1.5 border-b;
- border-color: var(--border-color);
- background-color: var(--background-color);
-}
-
-.code-tabs {
- @apply flex gap-1;
-}
-
-.code-tab {
- @apply px-2 py-1 text-xs font-medium transition-colors rounded;
- color: var(--text-secondary);
-
- &:hover {
- color: var(--text-primary);
- background-color: rgba(0, 0, 0, 0.03);
- }
+.endpoint-info {
+ padding: 8px 0;
+ border-top: 1px solid var(--border-color);
+ margin-top: 12px;
}
-.code-tab.active {
- color: var(--primary-color);
- background-color: rgba(0, 112, 243, 0.1);
-}
+/* ================================================================
+ ANIMATIONS
+ ================================================================ */
-.copy-button {
- @apply flex items-center gap-1 px-2 py-1 text-xs transition-colors rounded;
- color: var(--text-secondary);
-
- &:hover {
- color: var(--text-primary);
- background-color: rgba(0, 0, 0, 0.03);
- }
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
}
-.code-content {
- @apply p-3 overflow-x-auto;
- background-color: var(--code-bg);
- color: var(--code-text);
+.fade-in {
+ animation: fadeIn 0.3s ease-in-out;
}
-/* Scrollbar styles - hidden by default, visible on hover */
-.code-content::-webkit-scrollbar {
- width: 8px;
- height: 8px;
+@keyframes skeleton {
+ 0% { background-position: 100% 50%; }
+ 100% { background-position: 0 50%; }
}
-.code-content::-webkit-scrollbar-track {
- background: transparent;
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 0, 0, 0.06) 25%,
+ rgba(0, 0, 0, 0.1) 37%,
+ rgba(0, 0, 0, 0.06) 63%
+ );
+ background-size: 400% 100%;
+ animation: skeleton 1.4s ease infinite;
}
-.code-content::-webkit-scrollbar-thumb {
- background-color: transparent;
- border-radius: 4px;
- transition: background-color 0.2s ease;
+@keyframes sectionHighlight {
+ 0% { background-color: rgba(217, 119, 6, 0.04); }
+ 100% { background-color: transparent; }
}
-.code-content:hover::-webkit-scrollbar-thumb {
- background-color: #d1d5db;
+.section-highlight {
+ animation: sectionHighlight 2s ease-out;
}
-.code-content::-webkit-scrollbar-thumb:hover {
- background-color: #9ca3af;
+@keyframes codeFlash {
+ 0% { background-color: var(--primary-color); opacity: 0.2; }
+ 100% { background-color: transparent; opacity: 1; }
}
-/* Firefox scrollbar */
-.code-content {
- scrollbar-width: thin;
- scrollbar-color: transparent transparent;
+.code-updated {
+ animation: codeFlash 0.5s ease-out;
}
-.code-content:hover {
- scrollbar-color: #d1d5db transparent;
-}
+/* ================================================================
+ HOVER EFFECTS
+ ================================================================ */
-.code-content pre {
- @apply m-0 text-xs leading-relaxed;
- color: var(--code-text);
+.hover-lift {
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
}
-.code-content code {
- @apply font-mono;
- color: var(--code-text);
+.hover-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
}
-/* Status Badge */
-.status-badge {
- @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold;
- transition: all 0.2s ease;
-}
+/* ================================================================
+ UTILITY
+ ================================================================ */
-.status-badge:hover {
- transform: translateY(-1px);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+.rounded-apple { border-radius: 10px; }
+.shadow-apple-sm { box-shadow: var(--shadow-sm); }
+.shadow-apple-md { box-shadow: var(--shadow-md); }
-/* Icon Button */
-.icon-button {
- @apply p-2 rounded transition-colors;
- color: var(--text-secondary);
-
- &:hover {
- background-color: var(--input-bg);
- color: var(--text-primary);
- }
+:focus-visible {
+ outline: 2px solid var(--primary-color);
+ outline-offset: 2px;
}
-.icon-button-small {
- @apply p-1;
-}
+.hide-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
+.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-.icon-button-large {
- @apply p-3;
-}
+/* ================================================================
+ CONSOLE
+ ================================================================ */
-/* Tab Group */
-.tab-group {
- @apply space-y-0;
+.console-container {
+ transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+ will-change: opacity, transform;
+ min-height: 300px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
}
-.tab-header {
- @apply flex gap-0;
-}
+.console-container.fade-in { animation: fadeIn 0.3s ease forwards; }
+.console-container.fade-out { opacity: 0; transition: opacity 0.2s ease; }
-.tab-button {
- @apply px-3 py-2 text-xs font-medium transition-colors border-b-2 border-transparent;
- color: var(--text-secondary);
-
- &:hover {
- color: var(--text-primary);
- background-color: rgba(0, 0, 0, 0.02);
- }
+.playground-console .sticky {
+ position: sticky;
+ top: 0;
+ max-height: 100vh;
+ overflow-y: auto;
+ z-index: 10;
}
-.tab-button.active {
- color: var(--primary-color);
- border-color: var(--primary-color);
+.console-view.is-loading .code-block::after {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: rgba(0,0,0,0.1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
}
-.tab-content {
- background-color: var(--background-color);
-}
+/* ================================================================
+ FOLDER ITEM CARDS
+ ================================================================ */
-/* Folder Items Grid */
.folder-items-section {
@apply mt-6 space-y-3;
}
@@ -1119,12 +1071,13 @@ tr.themed-row:nth-child(even) {
}
.folder-item-card {
- @apply relative p-3 border border-gray-200 rounded-lg hover:border-blue-500 transition-all cursor-pointer;
+ @apply relative p-3 border rounded-lg transition-all cursor-pointer;
+ border-color: var(--border-color);
}
.folder-item-card:hover {
- @apply shadow-sm;
- transform: translateY(-1px);
+ border-color: var(--primary-color);
+ background-color: rgba(217, 119, 6, 0.02);
}
.folder-item-card:hover .item-card-arrow {
@@ -1156,4 +1109,3 @@ tr.themed-row:nth-child(even) {
transform: translateY(-50%);
opacity: 0;
}
-
diff --git a/packages/oc-docs/src/ui/Code/Code.tsx b/packages/oc-docs/src/ui/Code/Code.tsx
new file mode 100644
index 0000000..76550b2
--- /dev/null
+++ b/packages/oc-docs/src/ui/Code/Code.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyledWrapper } from './StyledWrapper';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-xml-doc';
+
+interface CodeProps {
+ code?: string;
+ language?: string;
+}
+
+export const Code: React.FC
= ({
+ code,
+ language = 'text'
+}) => {
+ const [copied, setCopied] = useState(false);
+ const codeRef = useRef(null);
+
+ useEffect(() => {
+ if (codeRef.current) {
+ Prism.highlightAllUnder(codeRef.current);
+ }
+ }, [code, language]);
+
+ const handleCopy = () => {
+ if (code) {
+ navigator.clipboard.writeText(code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+ };
+
+ return (
+
+
+
+
+
- {(title || tabs) && (
-
- {title && !tabs &&
{title}
}
- {tabs && (
-
- {tabs.map(tab => (
-
- ))}
-
- )}
- {copyButton && (
-
- )}
-
- )}
-
-
-
- {displayCode || ''}
-
-
-
-