Skip to content

Commit 7c0c5c7

Browse files
devin-ai-integration[bot]aaronsteers
devin-ai-integration[bot]
and
aaronsteers
committed
docs: Add Airbyte branding and styling to pdoc documentation
This commit adds custom CSS styling to the Python CDK API documentation to match the Airbyte brand identity: - Created custom theme.css to override pdoc's default theme with Airbyte colors - Created custom.css with comprehensive Airbyte branding (purple #615eff, Inter font) - Updated docs/generate.py to use the custom templates directory - Added documentation explaining the styling methodology and upstream sources The styling includes: - Airbyte purple color scheme for links and accents - Inter font family (Airbyte's brand font) - Styled tables with purple headers - Dark mode support - Comprehensive documentation about maintenance and updates This matches the styling already applied to PyAirbyte's documentation. Co-Authored-By: AJ Steers <[email protected]>
1 parent 73ec055 commit 7c0c5c7

File tree

3 files changed

+283
-1
lines changed

3 files changed

+283
-1
lines changed

‎docs/generate.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ def run() -> None:
6565
shutil.rmtree("docs/generated")
6666

6767
pdoc.render.configure(
68-
template_directory="docs",
68+
template_directory=pathlib.Path("docs/templates"),
6969
show_source=True,
7070
search=True,
7171
logo="https://docs.airbyte.com/img/logo-dark.png",

‎docs/templates/custom.css‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
/*
2+
* PyAirbyte Documentation - Custom Styling
3+
*
4+
* This file applies Airbyte branding and design elements to the PyAirbyte API documentation.
5+
*
6+
* METHODOLOGY:
7+
* - Colors and design tokens are sourced from the main Airbyte documentation site
8+
* - Primary source: https://github.com/airbytehq/airbyte/blob/main/docusaurus/src/css/custom.css
9+
* - The Airbyte design system uses a purple primary color (#615eff) and Inter font family
10+
* - This CSS overrides pdoc's default theme variables to match Airbyte branding
11+
*
12+
* UPDATING STYLES:
13+
* When Airbyte brand styles are updated, check the following upstream sources:
14+
* 1. Main docs CSS: https://github.com/airbytehq/airbyte/blob/main/docusaurus/src/css/custom.css
15+
* 2. Docusaurus config: https://github.com/airbytehq/airbyte/blob/main/docusaurus/docusaurus.config.js
16+
* 3. Live site: https://docs.airbyte.com (inspect styles in browser dev tools)
17+
*
18+
* Key variables to sync:
19+
* - --ifm-color-primary and variants (primary brand color)
20+
* - --ifm-font-family-base (typography)
21+
* - Color palette variables (grey, green, blue scales)
22+
*
23+
* PDOC INTEGRATION:
24+
* pdoc uses specific CSS variables that we override here:
25+
* - --link: Link color (set to Airbyte primary)
26+
* - --link-hover: Link hover color (set to Airbyte primary-dark)
27+
* - --code: Code background color
28+
* - --accent: Accent/highlight color
29+
* - --text: Main text color
30+
*/
31+
32+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
33+
34+
:root {
35+
/* Airbyte Primary Colors - from docusaurus/src/css/custom.css */
36+
--airbyte-primary: #615eff;
37+
--airbyte-primary-dark: #3f3bff;
38+
--airbyte-primary-darker: #2e2aff;
39+
--airbyte-primary-darkest: #0500f4;
40+
--airbyte-primary-light: #8381ff;
41+
--airbyte-primary-lighter: #9492ff;
42+
--airbyte-primary-lightest: #c8c7ff;
43+
44+
/* Airbyte Color Palette - from docusaurus/src/css/custom.css */
45+
--color-white: hsl(0, 0%, 100%);
46+
--color-grey-40: hsl(240, 25%, 98%);
47+
--color-grey-100: hsl(240, 12%, 92%);
48+
--color-grey-400: hsl(239, 10%, 59%);
49+
--color-grey-500: hsl(240, 10%, 49%);
50+
--color-grey-900: hsl(240, 19%, 18%);
51+
--color-green-40: hsl(185, 76%, 97%);
52+
--color-green-50: hsl(184, 67%, 92%);
53+
--color-green-600: hsl(185, 100%, 35%);
54+
--color-green-800: hsl(184, 100%, 26%);
55+
--color-blue-30: hsl(240, 100%, 98%);
56+
--color-dark-blue-40: hsl(230, 23%, 95%);
57+
--color-dark-blue-700: hsl(236, 43%, 31%);
58+
}
59+
60+
/* Override pdoc's default theme variables - must be in .pdoc selector for specificity */
61+
.pdoc {
62+
--link: #615eff;
63+
--link-hover: #3f3bff;
64+
--code: hsl(240, 100%, 98%);
65+
--accent: hsl(240, 25%, 98%);
66+
--text: hsl(240, 19%, 18%);
67+
--name: #615eff;
68+
--def: #3f3bff;
69+
}
70+
71+
/* Dark mode colors - from docusaurus/src/css/custom.css */
72+
@media (prefers-color-scheme: dark) {
73+
:root {
74+
--airbyte-primary: #7976ff;
75+
--airbyte-primary-dark: #3f3bff;
76+
--airbyte-primary-darker: #2e2aff;
77+
--airbyte-primary-light: #8381ff;
78+
--airbyte-primary-lighter: #9492ff;
79+
--airbyte-primary-lightest: #c8c7ff;
80+
81+
--color-grey-40: hsl(240, 14%, 14%);
82+
--color-grey-100: hsl(240, 15%, 15%);
83+
--color-grey-400: hsl(240, 13%, 72%);
84+
--color-grey-500: hsl(240, 10%, 70%);
85+
--color-grey-900: hsl(240, 10%, 90%);
86+
--color-green-50: hsl(184, 100%, 12%);
87+
--color-blue-30: hsl(252, 25%, 18%);
88+
--color-dark-blue-700: hsl(240, 100%, 98%);
89+
--color-white: hsl(0, 0%, 16%);
90+
}
91+
92+
/* Override pdoc's default theme variables for dark mode - must be in .pdoc selector */
93+
.pdoc {
94+
--link: #9492ff;
95+
--link-hover: #c8c7ff;
96+
--code: hsl(252, 25%, 18%);
97+
--accent: hsl(240, 14%, 14%);
98+
--text: hsl(240, 10%, 90%);
99+
--name: #9492ff;
100+
--def: #8381ff;
101+
}
102+
}
103+
104+
/* Apply Inter font family - Airbyte's brand font */
105+
body {
106+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
107+
}
108+
109+
/* Enhanced heading styles */
110+
h1, h2, h3, h4, h5, h6 {
111+
font-weight: 600;
112+
}
113+
114+
/* Enhanced code block styling */
115+
pre code {
116+
border-radius: 8px;
117+
}
118+
119+
/* Style tables with Airbyte theme */
120+
table {
121+
border-spacing: 0;
122+
border-collapse: separate;
123+
border-radius: 10px;
124+
overflow: hidden;
125+
}
126+
127+
table th {
128+
background-color: var(--airbyte-primary);
129+
color: var(--color-white);
130+
font-weight: 600;
131+
padding: 12px;
132+
}
133+
134+
table th:first-child {
135+
border-top-left-radius: 10px;
136+
}
137+
138+
table th:last-child {
139+
border-top-right-radius: 10px;
140+
}
141+
142+
table td {
143+
padding: 10px 12px;
144+
border-bottom: 1px solid var(--color-grey-100);
145+
}
146+
147+
table tr:hover {
148+
background-color: var(--color-grey-40);
149+
transition: background-color 0.2s ease;
150+
}
151+
152+
table tr:last-child td:first-child {
153+
border-bottom-left-radius: 10px;
154+
}
155+
156+
table tr:last-child td:last-child {
157+
border-bottom-right-radius: 10px;
158+
}
159+
160+
/* Style navigation with Airbyte colors - use !important to override pdoc's default nav styles */
161+
nav a {
162+
color: var(--link) !important;
163+
}
164+
165+
nav a:hover {
166+
color: var(--link-hover) !important;
167+
}
168+
169+
/* Style badges and labels */
170+
.badge {
171+
background-color: var(--color-green-40);
172+
border: 1px solid var(--color-green-800);
173+
color: var(--color-green-800);
174+
font-weight: 500;
175+
border-radius: 4px;
176+
padding: 2px 8px;
177+
font-size: 0.85em;
178+
}
179+
180+
/* Add rounded corners to images */
181+
img {
182+
max-width: 100%;
183+
border-radius: 10px;
184+
}
185+
186+
/* Style the header/logo area */
187+
header {
188+
border-bottom: 2px solid var(--airbyte-primary-lightest);
189+
}
190+
191+
/* Style buttons and interactive elements */
192+
button, .button {
193+
background-color: var(--airbyte-primary);
194+
color: var(--color-white);
195+
border: none;
196+
border-radius: 6px;
197+
padding: 8px 16px;
198+
font-weight: 500;
199+
cursor: pointer;
200+
transition: background-color 0.2s ease;
201+
}
202+
203+
button:hover, .button:hover {
204+
background-color: var(--airbyte-primary-dark);
205+
}
206+
207+
/* Improve code syntax highlighting */
208+
.pdoc-code {
209+
border-radius: 8px;
210+
border: 1px solid var(--color-grey-100);
211+
}
212+
213+
/* Style docstring sections */
214+
.docstring {
215+
line-height: 1.6;
216+
}
217+
218+
/* Add subtle shadow to main content area */
219+
main {
220+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
221+
}
222+
223+
/* Style search box if present */
224+
input[type="search"], input[type="text"] {
225+
border: 1px solid var(--color-grey-100);
226+
border-radius: 6px;
227+
padding: 8px 12px;
228+
font-family: inherit;
229+
}
230+
231+
input[type="search"]:focus, input[type="text"]:focus {
232+
outline: none;
233+
border-color: var(--airbyte-primary);
234+
box-shadow: 0 0 0 3px var(--airbyte-primary-lightest);
235+
}
236+
237+
/* Improve spacing and readability */
238+
.pdoc-module-list {
239+
line-height: 1.8;
240+
}
241+
242+
/* Style admonitions/notes */
243+
.admonition {
244+
border-left: 4px solid var(--airbyte-primary);
245+
background-color: var(--color-blue-30);
246+
padding: 12px 16px;
247+
border-radius: 4px;
248+
margin: 16px 0;
249+
}
250+
251+
/* Responsive improvements */
252+
@media (max-width: 768px) {
253+
body {
254+
font-size: 14px;
255+
}
256+
257+
table {
258+
font-size: 0.9em;
259+
}
260+
}

‎docs/templates/theme.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* pdoc color scheme - Airbyte branded version */
2+
:root {
3+
--pdoc-background: #fff;
4+
}
5+
6+
.pdoc {
7+
/* Airbyte purple color scheme */
8+
--text: hsl(240, 19%, 18%);
9+
--muted: #6c757d;
10+
--link: #615eff;
11+
--link-hover: #3f3bff;
12+
--code: hsl(240, 100%, 98%);
13+
--active: #fff598;
14+
15+
--accent: hsl(240, 25%, 98%);
16+
--accent2: #c1c1c1;
17+
18+
--nav-hover: rgba(97, 94, 255, 0.1);
19+
--name: #615eff;
20+
--def: #3f3bff;
21+
--annotation: #007020;
22+
}

0 commit comments

Comments
 (0)