Skip to content

Refine Getting Started docs: typography, preview styling, content polish #6340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Alek99 merged 13 commits into from
Apr 25, 2026
Merged

Refine Getting Started docs: typography, preview styling, content polish #6340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
aa97cf6
Refine Getting Started docs: typography, preview styling, content polish
Alek99 Apr 17, 2026
0a4910e
Restore original Backend tab copy in introduction
Alek99 Apr 17, 2026
664ce6e
Add H1 headings, neutral info alerts, dashboard preview up top
Alek99 Apr 24, 2026
1e2f954
Polish getting-started tutorials
Alek99 Apr 24, 2026
3040e44
Add Copy page dropdown button to docpage breadcrumb
Alek99 Apr 24, 2026
844ac34
Add GitHub button to the docs navbar
Alek99 Apr 24, 2026
62790e7
Add Open in ChatGPT / Claude items to copy-page dropdown
Alek99 Apr 24, 2026
61820f3
Add Build this with AI item to copy-page dropdown
Alek99 Apr 24, 2026
368887b
Open Build / ChatGPT / Claude items via anchor tags
Alek99 Apr 24, 2026
da355c6
Drop as_=h3 from demo headings, fix definition box at the source
Alek99 Apr 24, 2026
502aefe
Add missing Returns docstring to _plain_code_block
Alek99 Apr 24, 2026
03c3274
Guard code_block against Var input during import introspection
Alek99 Apr 24, 2026
6e7ff3d
Sync Full app styled source with rendered preview
Alek99 Apr 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions docs/app/assets/tailwind-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1699,6 +1699,14 @@
/* padding: 0rem 0.125rem 0rem 0.125rem; */
}

/* Override Radix Code (rt-Code) accent coloring so inline code matches slate theme */
code.rt-Code,
code.rt-Code.rt-variant-soft,
.rt-Code.rt-variant-soft {
color: var(--c-slate-11) !important;
background-color: var(--c-slate-3) !important;
}

.code-error-style {
font-family: var(--font-jetbrains);
font-size: 0.835rem;
Expand Down Expand Up @@ -1803,6 +1811,44 @@
}
}

.code-block button,
.code-block > button {
border: none !important;
border-width: 0 !important;
background: transparent !important;
background-color: transparent !important;
opacity: 0 !important;
transition: opacity 0.15s ease-out !important;
pointer-events: none;
display: inline-flex !important;
align-items: center !important;
gap: 0.375rem !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: var(--c-slate-11) !important;
top: 8px !important;
right: 12px !important;
Comment thread
Alek99 marked this conversation as resolved.
padding: 6px 8px !important;
}

.code-block button::after,
.code-block > button::after {
content: "Copy";
}

.code-block:hover button,
.code-block:hover > button,
.code-block button:focus-visible {
opacity: 1 !important;
pointer-events: auto;
}

.code-block button:hover,
.code-block > button:hover {
background: var(--c-slate-3) !important;
background-color: var(--c-slate-3) !important;
}


.tab-style {
color: var(--c-slate-9);
Expand All @@ -1814,6 +1860,89 @@
letter-spacing: -0.01094rem;
}

.pill-tab-list {
display: inline-flex !important;
gap: 2px !important;
padding: 4px !important;
background: var(--c-slate-3) !important;
border-radius: 10px !important;
border-bottom: none !important;
box-shadow: none !important;
width: fit-content !important;
max-width: 100%;
overflow-x: auto;
}

.pill-tab-list::before,
.pill-tab-list::after {
display: none !important;
content: none !important;
}

.pill-tab {
appearance: none !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
padding: 8px 16px !important;
font-size: 0.9375rem !important;
font-weight: 450 !important;
color: var(--c-slate-11) !important;
border-radius: 7px !important;
cursor: pointer;
white-space: nowrap;
transition: color 0.12s, background-color 0.12s, box-shadow 0.12s;
letter-spacing: 0 !important;
line-height: 1.25rem !important;
box-shadow: none !important;
}

.pill-tab::before,
.pill-tab::after,
.pill-tab:hover::before,
.pill-tab:hover::after,
.pill-tab[data-state='active']::before,
.pill-tab[data-state='active']::after,
.pill-tab[data-state='active']:hover::before,
.pill-tab[data-state='active']:hover::after {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
content: none !important;
display: none !important;
}

.pill-tab:hover {
color: var(--c-slate-11) !important;
background: transparent !important;
}

.pill-tab .rt-BaseTabListTriggerInner,
.pill-tab:hover .rt-BaseTabListTriggerInner,
.pill-tab:focus-visible .rt-BaseTabListTriggerInner,
.pill-tab:focus-visible:hover .rt-BaseTabListTriggerInner {
background-color: transparent !important;
background: transparent !important;
}

.pill-tab[data-state='active'],
.pill-tab[data-state='active']:hover {
color: var(--c-slate-12) !important;
font-weight: 500 !important;
background: var(--c-slate-1) !important;
background-color: var(--c-slate-1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

:where(.dark, .dark *) .pill-tab[data-state='active'] {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.tab-style:hover:not([data-state='active'])::before {
background: transparent !important;
background-color: transparent !important;
}

.tab-style:hover {
color: var(--c-slate-11);
}
Expand Down
79 changes: 55 additions & 24 deletions docs/app/reflex_docs/docgen_pipeline.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,12 +516,18 @@ def _render_alert(self, block: DirectiveBlock) -> rx.Component:
"""Render a ``md alert`` directive."""
status = block.args[0] if block.args else "info"
colors: dict[str, ColorType] = {
"info": "accent",
"info": "slate",
"success": "grass",
"warning": "amber",
"error": "red",
}
color: ColorType = colors.get(status, "blue")
color: ColorType = colors.get(status, "slate")
background_shade = 2 if status == "info" else 3
# For "info" alerts, use the neutral custom slate scale (--c-slate-*)
# so the card matches the codeblock styling instead of the blue-tinted
# default --slate-* scale that rx.color() produces.
bg_override = "var(--c-slate-2)" if status == "info" else None
border_override = "var(--c-slate-4)" if status == "info" else None

# First child may be a heading used as the alert title.
children = block.children
Expand Down Expand Up @@ -560,7 +566,14 @@ def title_comp() -> rx.Component:
padding="0px",
margin_top="16px",
)
return collapsible_box(trigger, body, color)
return collapsible_box(
trigger,
body,
color,
background_shade=background_shade,
background_override=bg_override,
border_override=border_override,
)

# Title only, or text-only (no heading) — simple non-collapsible box.
if title_spans:
Expand Down Expand Up @@ -588,8 +601,8 @@ def title_comp() -> rx.Component:
spacing="1",
padding=["16px", "24px"],
),
border=f"1px solid {rx.color(color, 4)}",
background_color=f"{rx.color(color, 3)}",
border=f"1px solid {border_override or rx.color(color, 4)}",
background_color=f"{bg_override or rx.color(color, background_shade)}",
border_radius="12px",
margin_bottom="16px",
margin_top="16px",
Expand Down Expand Up @@ -666,15 +679,19 @@ def _render_tabs(self, block: DirectiveBlock) -> rx.Component:
rx.tabs.trigger(
title,
value=value,
class_name="tab-style font-base font-semibold text-[1.25rem]",
class_name="pill-tab",
)
)
contents.append(
rx.tabs.content(self._render_children(body_blocks), value=value),
rx.tabs.content(
self._render_children(body_blocks),
value=value,
class_name="pt-6",
),
)

return rx.tabs.root(
rx.tabs.list(*triggers, class_name="mt-4"),
rx.tabs.list(*triggers, class_name="pill-tab-list mt-2"),
*contents,
default_value="tab1",
)
Expand Down Expand Up @@ -702,29 +719,43 @@ def _render_definition(self, block: DirectiveBlock) -> rx.Component:

def _render_section(self, block: DirectiveBlock) -> rx.Component:
"""Render a ``md section`` directive."""
from reflex_site_shared.styles.colors import c_color

sections = self._split_children_by_heading(block.children)
return rx.box(
rx.vstack(
return rx.el.div(
rx.el.div(
*[
rx.fragment(
rx.text(
rx.text.span(header, font_weight="bold"),
width="100%",
rx.el.div(
rx.el.div(
header,
style={
"fontWeight": "600",
"color": "var(--c-slate-12)",
"fontSize": "1rem",
"lineHeight": "1.5",
},
),
rx.el.div(
self._render_children(body),
style={"width": "100%"},
),
rx.box(self._render_children(body), width="100%"),
style={
"display": "flex",
"flexDirection": "column",
"gap": "0.25rem",
"width": "100%",
},
)
for header, body in sections
],
text_align="left",
margin_y="1em",
width="100%",
style={
"display": "flex",
"flexDirection": "column",
"gap": "1.25rem",
"width": "100%",
"paddingLeft": "1.5rem",
"borderLeft": "1.5px solid var(--c-slate-4)",
},
),
border_left=f"1.5px {c_color('slate', 4)} solid",
padding_left="1em",
width="100%",
align_items="center",
style={"width": "100%", "margin": "1.5rem 0"},
)


Expand Down
Loading
Loading