Skip to content
This repository was archived by the owner on Apr 28, 2026. It is now read-only.

Refine getting-started docs typography and preview styling #1818

Open
Alek99 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refine getting-started docs typography and preview styling #1818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 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;
padding: 6px 8px !important;
Comment on lines +1828 to +1831
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 top/right offsets are inert without position

top: 8px and right: 12px only take effect on positioned elements (absolute, fixed, sticky, or relative). No position property is set anywhere on .code-block button in this stylesheet, so these values will be silently ignored unless Reflex's library CSS already applies position: absolute to the copy button. If that guarantee doesn't hold, the button won't be correctly pinned to the top-right corner of the code block.

}

.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;
Comment on lines +1822 to +1843
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 pointer-events inconsistency may allow invisible button clicks

Every adjacent property in this block uses !important, but pointer-events: none and pointer-events: auto do not. If any other rule in the cascade applies pointer-events: all !important (e.g. from Radix or a utility class), the hidden button (opacity: 0) becomes clickable when the code block is not hovered, silently accepting keyboard/mouse events without any visual feedback.

Add !important to both declarations to match the surrounding rules.

}

.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
2 changes: 1 addition & 1 deletion pcweb/components/docpage/sidebar/sidebar_items/learn.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ def get_sidebar_items_learn():
create_item(
"Getting Started",
children=[
getting_started.introduction,
getting_started.installation,
getting_started.introduction,
getting_started.basics,
getting_started.project_structure,
getting_started.dashboard_tutorial,
Expand Down
56 changes: 37 additions & 19 deletions pcweb/docgen_pipeline.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,15 +610,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 @@ -646,29 +650,43 @@ def _render_definition(self, block: DirectiveBlock) -> rx.Component:

def _render_section(self, block: DirectiveBlock) -> rx.Component:
"""Render a ``md section`` directive."""
from pcweb.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.box(self._render_children(body), width="100%"),
rx.el.div(
self._render_children(body),
style={"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
37 changes: 11 additions & 26 deletions pcweb/flexdown.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,35 +153,20 @@ def render(self, env) -> rx.Component:
for i in range(len(header_indices) - 1)
]

return rx.box(
rx.vstack(
*[
rx.fragment(
rx.text(
rx.text.span(
header,
font_weight="bold",
),
width="100%",
),
rx.box(
markdown(section),
width="100%",
),
)
for header, section in sections
],
text_align="left",
margin_y="1em",
width="100%",
),
border_left=f"1.5px {c_color('slate', 4)} solid",
padding_left="1em",
width="100%",
align_items="center",
return rx.el.div(
*[
rx.el.div(
rx.el.div(header, class_name="font-bold text-slate-12"),
rx.el.div(markdown(section), class_name="w-full"),
class_name="flex flex-col gap-1 w-full",
)
for header, section in sections
],
class_name="flex flex-col gap-6 w-full my-4 pl-6 border-l border-slate-4",
)



class DefinitionBlock(flexdown.blocks.Block):
Comment on lines 167 to 170
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Extra blank line will fail Ruff E303

Three blank lines between top-level class definitions violates PEP 8's E303 rule (max 2 allowed), which Ruff enforces. This will cause uv run pre-commit run --all-files to fail, as listed in the test plan.

Suggested change
class DefinitionBlock(flexdown.blocks.Block):
)
class DefinitionBlock(flexdown.blocks.Block):

starting_indicator = "```md definition"
ending_indicator = "```"
Expand Down
18 changes: 9 additions & 9 deletions pcweb/templates/docpage/blocks/headings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ def create(
href=href,
on_click=lambda: rx.set_clipboard(href),
# as_child=True,
class_name="flex flex-row items-center gap-6 hover:!text-violet-11 cursor-pointer mb-6 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
class_name="flex flex-row items-center gap-2 hover:!text-violet-11 cursor-pointer mb-3 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
)


Expand All @@ -125,7 +125,7 @@ def h1_comp(text: str) -> rx.Component:
return h_comp_common(
text=text,
heading="h1",
class_name="lg:text-5xl text-3xl font-[525]",
class_name="lg:text-4xl text-3xl font-semibold",
)


Expand All @@ -134,7 +134,7 @@ def h1_comp_xd(text: str) -> rx.Component:
return h_comp_common(
text=text,
heading="h1",
class_name="lg:text-5xl text-3xl font-[525]",
class_name="lg:text-4xl text-3xl font-semibold",
)


Expand All @@ -144,7 +144,7 @@ def h2_comp(text: str) -> rx.Component:
text=text,
heading="h2",
mt="8",
class_name="lg:text-4xl text-2xl font-[525]",
class_name="lg:text-3xl text-2xl font-semibold",
)


Expand All @@ -154,7 +154,7 @@ def h2_comp_xd(text: str) -> rx.Component:
text=text,
heading="h2",
mt="8",
class_name="lg:text-3xl text-2xl font-[525]",
class_name="lg:text-2xl text-xl font-semibold",
)


Expand All @@ -164,7 +164,7 @@ def h3_comp(text: str) -> rx.Component:
text=text,
heading="h3",
mt="4",
class_name="lg:text-2xl text-xl font-[525]",
class_name="lg:text-xl text-lg font-semibold",
)


Expand All @@ -174,7 +174,7 @@ def h3_comp_xd(text: str) -> rx.Component:
text=text,
heading="h3",
mt="4",
class_name="lg:text-2xl text-lg font-[525]",
class_name="lg:text-xl text-lg font-semibold",
)


Expand All @@ -184,7 +184,7 @@ def h4_comp(text: str) -> rx.Component:
text=text,
heading="h4",
mt="2",
class_name="lg:text-xl text-lg font-[525]",
class_name="lg:text-base text-base font-semibold",
)


Expand All @@ -194,7 +194,7 @@ def h4_comp_xd(text: str) -> rx.Component:
text=text,
heading="h4",
mt="2",
class_name="lg:text-xl text-lg font-[525]",
class_name="lg:text-base text-base font-semibold",
)


Expand Down
6 changes: 3 additions & 3 deletions pcweb/templates/docpage/blocks/typography.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,20 @@ def definition(title: str, *children) -> rx.Component:

@rx.memo
def text_comp(text: rx.Var[str]) -> rx.Component:
return rx.text(text, class_name="font-[475] text-secondary-11 mb-4 leading-7")
return rx.text(text, class_name="font-normal text-secondary-11 mb-4 leading-7")


@rx.memo
def text_comp_2(text: rx.Var[str]) -> rx.Component:
return rx.text(
text,
class_name="font-[475] text-secondary-11 max-w-[80%] mb-10",
class_name="font-normal text-secondary-11 max-w-[80%] mb-10",
)


@rx.memo
def list_comp(text: rx.Var[str]) -> rx.Component:
return rx.list_item(text, class_name="font-[475] text-secondary-11 mb-4")
return rx.list_item(text, class_name="font-normal text-secondary-11 mb-4")


@rx.memo
Expand Down
Loading
Loading