Skip to content

Commit adb837d

Browse files
vinutvvinutv
committed
Update docs spacing and typography
1 parent a3a0cc3 commit adb837d

13 files changed

Lines changed: 416 additions & 432 deletions

‎index.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,25 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/care-ui-logo-mark.svg" />
5+
<link id="site-favicon" rel="icon" href="%FAVICON_HREF%" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Care·ui</title>
88
<script>
99
(function () {
10+
var env = "%DEPLOY_ENV%";
11+
var faviconByEnv = {
12+
preview: "/favicon.preview.ico",
13+
development: "/favicon.development.ico",
14+
};
15+
var expectedFavicon =
16+
env === "production"
17+
? "/favicon.ico"
18+
: faviconByEnv[env] || "/favicon.development.ico";
19+
var faviconLink = document.getElementById("site-favicon");
20+
if (faviconLink && faviconLink.getAttribute("href") !== expectedFavicon) {
21+
faviconLink.setAttribute("href", expectedFavicon);
22+
}
23+
1024
var scale = { small: 0.875, default: 1, large: 1.125, larger: 1.25 };
1125
var saved = localStorage.getItem("careui-font-size");
1226
var value = scale[saved] || 1;

‎public/favicon.development.ico‎

14.7 KB
Binary file not shown.

‎public/favicon.ico‎

14.7 KB
Binary file not shown.

‎public/favicon.preview.ico‎

14.7 KB
Binary file not shown.

‎src/components/accessibility-page.tsx‎

Lines changed: 21 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import {
88
TableRow,
99
} from "@/components/ui/table";
1010
import {
11-
EyebrowTitle,
12-
Lead,
13-
PageTitle,
14-
SectionTitle,
15-
} from "@/components/ui/typography";
11+
DocumentationHeader,
12+
DocumentationInlineCode as InlineCode,
13+
DocumentationPage,
14+
DocumentationParagraph,
15+
DocumentationSectionHeading as SectionHeading,
16+
} from "@/components/documentation-primitives";
1617

1718
/**
1819
* Accessibility documentation page for Care UI.
@@ -34,28 +35,6 @@ import {
3435
* src/components/ui/.
3536
*/
3637

37-
function InlineCode({ children }: { children: React.ReactNode }) {
38-
return (
39-
<code className="bg-muted text-foreground relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
40-
{children}
41-
</code>
42-
);
43-
}
44-
45-
function SectionHeading({
46-
id,
47-
children,
48-
}: {
49-
id: string;
50-
children: React.ReactNode;
51-
}) {
52-
return (
53-
<SectionTitle id={id} className="scroll-m-20">
54-
{children}
55-
</SectionTitle>
56-
);
57-
}
58-
5938
/* ── What Care UI ships for accessibility ── */
6039

6140
type BuiltInRow = {
@@ -362,22 +341,13 @@ const TOOLS: { name: string; use: string }[] = [
362341

363342
export function AccessibilityPage() {
364343
return (
365-
<main className="flex-1 overflow-y-auto">
366-
<div className="mx-auto max-w-4xl space-y-16 p-4 md:p-8">
344+
<DocumentationPage>
367345
{/* Header */}
368-
<header>
369-
<EyebrowTitle className="text-muted-foreground text-xs tracking-widest uppercase">
370-
Documentation
371-
</EyebrowTitle>
372-
<PageTitle className="mt-3 scroll-m-20">
373-
Accessibility
374-
</PageTitle>
375-
<Lead className="mt-6 max-w-2xl text-xl">
376-
Care UI targets <strong>WCAG 2.2 AA</strong> across every theme.
377-
Half of the work is built into the design tokens and primitives; the
378-
other half is a short checklist every contributor must apply.
379-
</Lead>
380-
</header>
346+
<DocumentationHeader title="Accessibility">
347+
Care UI targets <strong>WCAG 2.2 AA</strong> across every theme. Half
348+
of the work is built into the design tokens and primitives; the other
349+
half is a short checklist every contributor must apply.
350+
</DocumentationHeader>
381351

382352
{/* Standards */}
383353
<section>
@@ -410,10 +380,10 @@ export function AccessibilityPage() {
410380
<SectionHeading id="built-in">
411381
What Care UI gives you for free
412382
</SectionHeading>
413-
<p className="text-foreground mt-6 leading-7">
383+
<DocumentationParagraph>
414384
Before you write a single attribute, the design tokens and providers
415385
below are already doing accessibility work on your behalf.
416-
</p>
386+
</DocumentationParagraph>
417387

418388
<div className="border-border mt-6 overflow-hidden rounded-lg border">
419389
<Table>
@@ -446,11 +416,11 @@ export function AccessibilityPage() {
446416
{/* Author checklist */}
447417
<section>
448418
<SectionHeading id="checklist">Author checklist</SectionHeading>
449-
<p className="text-foreground mt-6 leading-7">
419+
<DocumentationParagraph>
450420
Apply every rule below when authoring a new component or composing
451421
existing ones. Each group maps to one WCAG outcome and one place
452422
reviewers will look during code review.
453-
</p>
423+
</DocumentationParagraph>
454424

455425
<div className="mt-8 space-y-10">
456426
{CHECKLIST.map((group) => (
@@ -483,10 +453,10 @@ export function AccessibilityPage() {
483453
{/* Anti-patterns */}
484454
<section>
485455
<SectionHeading id="anti-patterns">Anti-patterns</SectionHeading>
486-
<p className="text-foreground mt-6 leading-7">
456+
<DocumentationParagraph>
487457
Reviewers will flag any of these on sight. They are the most common
488458
ways an otherwise good component becomes inaccessible.
489-
</p>
459+
</DocumentationParagraph>
490460
<ul className="text-foreground mt-6 ml-5 list-disc space-y-2 leading-7">
491461
{ANTI_PATTERNS.map((p) => (
492462
<li key={p}>{p}</li>
@@ -497,11 +467,11 @@ export function AccessibilityPage() {
497467
{/* Testing */}
498468
<section>
499469
<SectionHeading id="testing">Testing &amp; tooling</SectionHeading>
500-
<p className="text-foreground mt-6 leading-7">
470+
<DocumentationParagraph>
501471
Automated tools catch a fraction of accessibility issues. Combine
502472
them with the manual passes below before any non-trivial change
503473
ships.
504-
</p>
474+
</DocumentationParagraph>
505475

506476
<div className="border-border mt-6 overflow-hidden rounded-lg border">
507477
<Table>
@@ -584,7 +554,6 @@ export function AccessibilityPage() {
584554
</div>
585555
</div>
586556
</section>
587-
</div>
588-
</main>
557+
</DocumentationPage>
589558
);
590559
}

‎src/components/brands-page.tsx‎

Lines changed: 30 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Download } from "lucide-react";
22
import { Button } from "@/components/ui/button";
33
import {
4-
EyebrowTitle,
5-
Lead,
6-
PageTitle,
7-
SectionTitle,
8-
} from "@/components/ui/typography";
4+
DocumentationHeader,
5+
DocumentationPage,
6+
DocumentationParagraph,
7+
DocumentationSectionHeading as SectionHeading,
8+
} from "@/components/documentation-primitives";
99

1010
type AssetPreview = {
1111
title: string;
@@ -112,20 +112,6 @@ const BRANDS: BrandSection[] = [
112112
},
113113
];
114114

115-
function SectionHeading({
116-
id,
117-
children,
118-
}: {
119-
id: string;
120-
children: React.ReactNode;
121-
}) {
122-
return (
123-
<SectionTitle id={id} className="scroll-m-20">
124-
{children}
125-
</SectionTitle>
126-
);
127-
}
128-
129115
function BrandPreviewCard({ preview }: { preview: AssetPreview }) {
130116
const surfaceClassName =
131117
preview.theme === "dark"
@@ -169,18 +155,22 @@ function BrandSectionBlock({ brand }: { brand: BrandSection }) {
169155
<SectionHeading id={`${brand.id}-heading`}>
170156
{brand.name}
171157
</SectionHeading>
172-
<p className="text-muted-foreground text-sm leading-6">
158+
<DocumentationParagraph
159+
spacing="none"
160+
tone="muted"
161+
className="text-sm leading-6"
162+
>
173163
{brand.summary}
174-
</p>
164+
</DocumentationParagraph>
175165
</div>
176166
</div>
177-
<div className="space-y-1 md:space-y-4">
178-
<div className="grid grid-cols-1 gap-1 md:gap-4 md:grid-cols-2">
179-
{brand.featuredPreviews.map((preview) => (
180-
<BrandPreviewCard key={preview.src} preview={preview} />
181-
))}
167+
<div className="space-y-1 md:space-y-4">
168+
<div className="grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-4">
169+
{brand.featuredPreviews.map((preview) => (
170+
<BrandPreviewCard key={preview.src} preview={preview} />
171+
))}
182172
</div>
183-
<div className="flex flex-col gap-3 rounded-xl bg-soft-background border p-4 md:flex-row md:items-start md:justify-between md:gap-6">
173+
<div className="bg-soft-background border-border flex flex-col gap-3 rounded-xl border p-4 md:flex-row md:items-start md:justify-between md:gap-6">
184174
<p className="text-muted-foreground max-w-2xl text-sm leading-6">
185175
Download a ZIP with approved {brand.name} logo assets in SVG and PNG
186176
formats, including light and dark variants for different
@@ -264,11 +254,15 @@ function ClearspaceGuidance() {
264254
<SectionHeading id="spacing-considerations-heading">
265255
Clearspace Guidance
266256
</SectionHeading>
267-
<p className="text-muted-foreground max-w-3xl text-base leading-7">
257+
<DocumentationParagraph
258+
spacing="none"
259+
tone="muted"
260+
className="max-w-3xl"
261+
>
268262
Keep consistent clearspace around each primary logo so the mark remains
269263
readable and visually distinct. Avoid placing text, imagery, UI
270264
elements, or other logos inside the protected area.
271-
</p>
265+
</DocumentationParagraph>
272266

273267
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
274268
{guideBoxes.map((guide) => {
@@ -317,28 +311,18 @@ function ClearspaceGuidance() {
317311

318312
export function BrandsPage() {
319313
return (
320-
<main className="flex-1 overflow-y-auto">
321-
<div className="mx-auto max-w-4xl space-y-16 p-4 md:p-8">
322-
<header>
323-
<EyebrowTitle className="text-muted-foreground text-xs tracking-widest uppercase">
324-
Documentation
325-
</EyebrowTitle>
326-
<PageTitle className="mt-3 scroll-m-20">
327-
Brands
328-
</PageTitle>
329-
<Lead className="mt-6 max-w-3xl text-xl">
330-
Centralised brand assets for Care, OHCNF, and OHC. Each section
331-
includes download-ready files, approved light and dark variants,
332-
and spacing references for correct logo placement.
333-
</Lead>
334-
</header>
314+
<DocumentationPage>
315+
<DocumentationHeader title="Brands" leadClassName="max-w-3xl text-xl">
316+
Centralised brand assets for Care, OHCNF, and OHC. Each section
317+
includes download-ready files, approved light and dark variants, and
318+
spacing references for correct logo placement.
319+
</DocumentationHeader>
335320

336321
{BRANDS.map((brand) => (
337322
<BrandSectionBlock key={brand.id} brand={brand} />
338323
))}
339324

340325
<ClearspaceGuidance />
341-
</div>
342-
</main>
326+
</DocumentationPage>
343327
);
344328
}

0 commit comments

Comments
 (0)