A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
version bump + add theme type file
+29
-4
+4
-2
README.md
+4
-2
README.md
···
60
60
--atproto-color-text-secondary
61
61
--atproto-color-border
62
62
--atproto-color-link
63
-
/* ...and more */
63
+
/* ...and more, check out lib/styles.css */
64
64
```
65
65
66
66
### Override Component Theme
···
68
68
Wrap any component in a div with custom CSS variables to override its appearance:
69
69
70
70
```tsx
71
+
import { AtProtoStyles } from "atproto-ui";
72
+
71
73
<div style={{
72
74
'--atproto-color-bg': '#f0f0f0',
73
75
'--atproto-color-text': '#000',
74
76
'--atproto-color-link': '#0066cc',
75
-
}}>
77
+
} satisfies AtProtoStyles}>
76
78
<BlueskyPost did="..." rkey="..." />
77
79
</div>
78
80
```
+1
-1
lib/components/BlueskyPost.tsx
+1
-1
lib/components/BlueskyPost.tsx
···
196
196
rkey: showParent && !record ? rkey : "",
197
197
});
198
198
199
-
const currentRecord = record || fetchedRecord;
199
+
const currentRecord = record ?? fetchedRecord;
200
200
201
201
const parentUri = currentRecord?.reply?.parent?.uri;
202
202
const parsedParentUri = parentUri ? parseAtUri(parentUri) : null;
+23
lib/theme-type.ts
+23
lib/theme-type.ts
···
1
+
export type AtProtoStyles = React.CSSProperties & {
2
+
'--atproto-color-bg'?: string;
3
+
'--atproto-color-bg-elevated'?: string;
4
+
'--atproto-color-bg-secondary'?: string;
5
+
'--atproto-color-text'?: string;
6
+
'--atproto-color-text-secondary'?: string;
7
+
'--atproto-color-text-muted'?: string;
8
+
'--atproto-color-border'?: string;
9
+
'--atproto-color-border-subtle'?: string;
10
+
'--atproto-color-link'?: string;
11
+
'--atproto-color-link-hover'?: string;
12
+
'--atproto-color-error'?: string;
13
+
'--atproto-color-button-bg'?: string;
14
+
'--atproto-color-button-hover'?: string;
15
+
'--atproto-color-button-text'?: string;
16
+
'--atproto-color-code-bg'?: string;
17
+
'--atproto-color-code-border'?: string;
18
+
'--atproto-color-blockquote-border'?: string;
19
+
'--atproto-color-blockquote-bg'?: string;
20
+
'--atproto-color-hr'?: string;
21
+
'--atproto-color-image-bg'?: string;
22
+
'--atproto-color-highlight'?: string;
23
+
};