Skip to content

Commit 55cc8ff

Browse files
chaseflemingchasefleming
authored
Support new theming system across all components (#2769)
* Use color palette for theming buttons * Change naming * Change to theme colors * switch * Run prettier * Add dark colors * Move inline * Run prettier * Support themeing in dialog component (#2772) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Support theming on profile component (#2773) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Use theme system on Scheduled Tx component (#2776) * Use theme on scheduled tx component * Run prettier --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Use theming system on tx dialog (#2777) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Add changset * Use theming system on nft card (#2779) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
1 parent e98815e commit 55cc8ff

9 files changed

Lines changed: 537 additions & 238 deletions

File tree

‎.changeset/tidy-dancers-read.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@onflow/react-sdk": minor
3+
---
4+
5+
Implement theming system across all components and switch to color theme system

‎packages/demo/src/components/advanced-cards/theming-card.tsx‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ const THEMING_CODE = `import { FlowProvider } from "@onflow/react-sdk"
99
1010
const customTheme = {
1111
colors: {
12-
primary: {
13-
background: "flow-bg-purple-600 dark:flow-bg-purple-400",
14-
text: "flow-text-white dark:flow-text-purple-900",
15-
hover: "hover:flow-bg-purple-700 dark:hover:flow-bg-purple-300"
16-
},
17-
secondary: {
18-
background: "flow-bg-emerald-500 dark:flow-bg-emerald-400",
19-
text: "flow-text-white dark:flow-text-emerald-900",
20-
hover: "hover:flow-bg-emerald-600 dark:hover:flow-bg-emerald-300"
21-
}
12+
primary: "flow-bg-purple-600 dark:flow-bg-purple-400",
13+
primaryForeground: "flow-text-white dark:flow-text-white",
14+
secondary: "flow-bg-purple-100 dark:flow-bg-purple-900",
15+
secondaryForeground: "flow-text-purple-900 dark:flow-text-purple-100",
16+
accent: "flow-bg-purple-700 dark:flow-bg-purple-300",
17+
background: "flow-bg-white dark:flow-bg-purple-950",
18+
foreground: "flow-text-purple-900 dark:flow-text-purple-100",
19+
muted: "flow-bg-purple-50 dark:flow-bg-purple-800",
20+
mutedForeground: "flow-text-purple-500 dark:flow-text-purple-400",
21+
border: "flow-border-purple-200 dark:flow-border-purple-700",
2222
}
2323
}
2424
@@ -52,13 +52,17 @@ export function ThemingCard() {
5252
name: "Purple Theme",
5353
theme: {
5454
colors: {
55-
primary: {
56-
background: darkMode ? "flow-bg-purple-400" : "flow-bg-purple-600",
57-
text: "flow-text-white",
58-
hover: darkMode
59-
? "hover:flow-bg-purple-300"
60-
: "hover:flow-bg-purple-700",
61-
},
55+
primary: "flow-bg-purple-600 dark:flow-bg-purple-400",
56+
primaryForeground: "flow-text-white",
57+
secondary: "flow-bg-purple-100 dark:flow-bg-purple-900",
58+
secondaryForeground: "flow-text-purple-900 dark:flow-text-purple-100",
59+
accent: "flow-bg-purple-700 dark:flow-bg-purple-300",
60+
background: "flow-bg-white dark:flow-bg-purple-950",
61+
foreground: "flow-text-purple-900 dark:flow-text-purple-100",
62+
muted: "flow-bg-purple-50 dark:flow-bg-purple-800",
63+
mutedForeground: "flow-text-purple-500 dark:flow-text-purple-400",
64+
border: "flow-border-purple-200 dark:flow-border-purple-700",
65+
link: "flow-text-purple-600 dark:flow-text-purple-300",
6266
},
6367
},
6468
colors: {
@@ -71,15 +75,18 @@ export function ThemingCard() {
7175
name: "Emerald Theme",
7276
theme: {
7377
colors: {
74-
primary: {
75-
background: darkMode
76-
? "flow-bg-emerald-400"
77-
: "flow-bg-emerald-600",
78-
text: "flow-text-white",
79-
hover: darkMode
80-
? "hover:flow-bg-emerald-300"
81-
: "hover:flow-bg-emerald-700",
82-
},
78+
primary: "flow-bg-emerald-600 dark:flow-bg-emerald-400",
79+
primaryForeground: "flow-text-white",
80+
secondary: "flow-bg-emerald-100 dark:flow-bg-emerald-900",
81+
secondaryForeground:
82+
"flow-text-emerald-900 dark:flow-text-emerald-100",
83+
accent: "flow-bg-emerald-700 dark:flow-bg-emerald-300",
84+
background: "flow-bg-white dark:flow-bg-emerald-950",
85+
foreground: "flow-text-emerald-900 dark:flow-text-emerald-100",
86+
muted: "flow-bg-emerald-50 dark:flow-bg-emerald-800",
87+
mutedForeground: "flow-text-emerald-500 dark:flow-text-emerald-400",
88+
border: "flow-border-emerald-200 dark:flow-border-emerald-700",
89+
link: "flow-text-emerald-600 dark:flow-text-emerald-300",
8390
},
8491
},
8592
colors: {
@@ -92,13 +99,17 @@ export function ThemingCard() {
9299
name: "Rose Theme",
93100
theme: {
94101
colors: {
95-
primary: {
96-
background: darkMode ? "flow-bg-rose-400" : "flow-bg-rose-600",
97-
text: "flow-text-white",
98-
hover: darkMode
99-
? "hover:flow-bg-rose-300"
100-
: "hover:flow-bg-rose-700",
101-
},
102+
primary: "flow-bg-rose-600 dark:flow-bg-rose-400",
103+
primaryForeground: "flow-text-white",
104+
secondary: "flow-bg-rose-100 dark:flow-bg-rose-900",
105+
secondaryForeground: "flow-text-rose-900 dark:flow-text-rose-100",
106+
accent: "flow-bg-rose-700 dark:flow-bg-rose-300",
107+
background: "flow-bg-white dark:flow-bg-rose-950",
108+
foreground: "flow-text-rose-900 dark:flow-text-rose-100",
109+
muted: "flow-bg-rose-50 dark:flow-bg-rose-800",
110+
mutedForeground: "flow-text-rose-500 dark:flow-text-rose-400",
111+
border: "flow-border-rose-200 dark:flow-border-rose-700",
112+
link: "flow-text-rose-600 dark:flow-text-rose-300",
102113
},
103114
},
104115
colors: {

‎packages/react-sdk/src/components/NftCard.tsx‎

Lines changed: 92 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {MoreVerticalIcon} from "../icons/MoreVerticalIcon"
99
import {Dialog} from "./internal/Dialog"
1010
import {Button} from "./internal/Button"
1111
import {twMerge} from "tailwind-merge"
12+
import {useTheme} from "../core/theme"
1213

1314
export interface NftCardAction {
1415
title: string
@@ -40,6 +41,7 @@ export const NftCard: React.FC<NftCardProps> = ({
4041
const [actionLoading, setActionLoading] = React.useState<number | null>(null)
4142
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false)
4243
const dropdownRef = React.useRef<HTMLDivElement>(null)
44+
const {colors} = useTheme()
4345

4446
const {
4547
data: nft,
@@ -92,33 +94,48 @@ export const NftCard: React.FC<NftCardProps> = ({
9294
<StyleWrapper>
9395
<div
9496
className={twMerge(
95-
`flow-w-full flow-rounded-lg flow-bg-white dark:flow-bg-slate-900
96-
flow-overflow-hidden`,
97+
"flow-w-full flow-rounded-lg flow-overflow-hidden",
9798
"flow-shadow-lg hover:flow-shadow-xl flow-transition-shadow",
98-
"flow-duration-300 flow-border flow-border-slate-200 dark:flow-border-slate-800",
99+
"flow-duration-300 flow-border",
100+
colors.background,
101+
colors.border,
99102
className
100103
)}
101104
style={style}
102105
>
103106
<div className="flow-relative">
104107
<div
105-
className="flow-relative flow-w-full flow-aspect-square flow-bg-slate-100
106-
dark:flow-bg-slate-800 flow-overflow-hidden"
108+
className={twMerge(
109+
"flow-relative flow-w-full flow-aspect-square flow-overflow-hidden",
110+
colors.secondary
111+
)}
107112
>
108113
{isLoading ? (
109114
<div className="flow-absolute flow-inset-0 flow-flex flow-items-center flow-justify-center">
110115
<LoaderCircleIcon
111-
className="flow-h-16 flow-w-16 flow-text-slate-400 dark:flow-text-slate-600
112-
flow-animate-spin"
116+
className={twMerge(
117+
"flow-h-16 flow-w-16 flow-animate-spin",
118+
colors.mutedForeground
119+
)}
113120
/>
114121
</div>
115122
) : hasError ? (
116123
<div
117124
className="flow-absolute flow-inset-0 flow-flex flow-flex-col flow-items-center
118125
flow-justify-center flow-gap-3"
119126
>
120-
<AlertCircleIcon className="flow-h-16 flow-w-16 flow-text-slate-400 dark:flow-text-slate-600" />
121-
<p className="flow-text-sm flow-text-slate-500 dark:flow-text-slate-500 flow-font-medium">
127+
<AlertCircleIcon
128+
className={twMerge(
129+
"flow-h-16 flow-w-16",
130+
colors.mutedForeground
131+
)}
132+
/>
133+
<p
134+
className={twMerge(
135+
"flow-text-sm flow-font-medium",
136+
colors.mutedForeground
137+
)}
138+
>
122139
Failed to load NFT
123140
</p>
124141
</div>
@@ -130,7 +147,12 @@ export const NftCard: React.FC<NftCardProps> = ({
130147
/>
131148
) : (
132149
<div className="flow-absolute flow-inset-0 flow-flex flow-items-center flow-justify-center">
133-
<ImageIcon className="flow-h-16 flow-w-16 flow-text-slate-400 dark:flow-text-slate-600" />
150+
<ImageIcon
151+
className={twMerge(
152+
"flow-h-16 flow-w-16",
153+
colors.mutedForeground
154+
)}
155+
/>
134156
</div>
135157
)}
136158
</div>
@@ -157,14 +179,19 @@ export const NftCard: React.FC<NftCardProps> = ({
157179
aria-label="Actions menu"
158180
aria-expanded={isDropdownOpen}
159181
>
160-
<MoreVerticalIcon className="flow-h-4 flow-w-4 flow-text-slate-700 dark:flow-text-slate-300" />
182+
<MoreVerticalIcon
183+
className={twMerge("flow-h-4 flow-w-4", colors.foreground)}
184+
/>
161185
</button>
162186

163187
{isDropdownOpen && (
164188
<div
165-
className="flow-absolute flow-top-full flow-mt-2 flow-w-52 flow-rounded-lg flow-bg-white
166-
dark:flow-bg-slate-900 flow-shadow-sm hover:flow-shadow-md flow-border
167-
flow-border-slate-200 dark:flow-border-slate-800 flow-p-1 flow-origin-top-right"
189+
className={twMerge(
190+
"flow-absolute flow-top-full flow-mt-2 flow-w-52 flow-rounded-lg",
191+
"flow-shadow-sm hover:flow-shadow-md flow-border flow-p-1 flow-origin-top-right",
192+
colors.background,
193+
colors.border
194+
)}
168195
style={{right: "0px"}}
169196
>
170197
{actions.map((action, index) => (
@@ -193,8 +220,10 @@ export const NftCard: React.FC<NftCardProps> = ({
193220
<span className="flow-truncate">{action.title}</span>
194221
{actionLoading === index && (
195222
<LoaderCircleIcon
196-
className="flow-h-4 flow-w-4 flow-flex-shrink-0 flow-animate-spin flow-text-slate-500
197-
dark:flow-text-slate-400"
223+
className={twMerge(
224+
"flow-h-4 flow-w-4 flow-flex-shrink-0 flow-animate-spin",
225+
colors.mutedForeground
226+
)}
198227
/>
199228
)}
200229
</button>
@@ -242,16 +271,20 @@ export const NftCard: React.FC<NftCardProps> = ({
242271
<div className="flow-flex-1 flow-min-w-0 flow-pr-2">
243272
{!hasError && nft.collectionName && (
244273
<p
245-
className="flow-text-xs flow-text-slate-500 dark:flow-text-slate-400 flow-uppercase
246-
flow-tracking-wider flow-font-semibold flow-mb-1"
274+
className={twMerge(
275+
"flow-text-xs flow-uppercase flow-tracking-wider flow-font-semibold flow-mb-1",
276+
colors.mutedForeground
277+
)}
247278
>
248279
{nft.collectionName}
249280
</p>
250281
)}
251282

252283
<h3
253-
className="flow-text-xl flow-font-bold flow-text-slate-900 dark:flow-text-white
254-
flow-truncate flow-leading-tight"
284+
className={twMerge(
285+
"flow-text-xl flow-font-bold flow-truncate flow-leading-tight",
286+
colors.foreground
287+
)}
255288
>
256289
{hasError
257290
? `NFT #${tokenId}`
@@ -261,8 +294,10 @@ export const NftCard: React.FC<NftCardProps> = ({
261294

262295
<div className="flow-flex-shrink-0 flow-self-start">
263296
<span
264-
className="flow-text-sm flow-font-medium flow-text-slate-400 dark:flow-text-slate-500
265-
flow-whitespace-nowrap"
297+
className={twMerge(
298+
"flow-text-sm flow-font-medium flow-whitespace-nowrap",
299+
colors.mutedForeground
300+
)}
266301
>
267302
#{tokenId}
268303
</span>
@@ -272,15 +307,17 @@ export const NftCard: React.FC<NftCardProps> = ({
272307

273308
{!isLoading && !hasError && nft.description && (
274309
<p
275-
className="flow-text-sm flow-text-slate-600 dark:flow-text-slate-400 flow-line-clamp-2
276-
flow-leading-relaxed"
310+
className={twMerge(
311+
"flow-text-sm flow-line-clamp-2 flow-leading-relaxed",
312+
colors.mutedForeground
313+
)}
277314
>
278315
{nft.description}
279316
</p>
280317
)}
281318

282319
{!isLoading && hasError && (
283-
<p className="flow-text-sm flow-text-slate-500 dark:flow-text-slate-500">
320+
<p className={twMerge("flow-text-sm", colors.mutedForeground)}>
284321
Unable to load NFT metadata
285322
</p>
286323
)}
@@ -336,8 +373,10 @@ export const NftCard: React.FC<NftCardProps> = ({
336373
{showTraits && !hasError && nft.traits && totalTraits > 0 && (
337374
<div className="flow-space-y-3">
338375
<p
339-
className="flow-text-xs flow-font-bold flow-text-slate-700 dark:flow-text-slate-300
340-
flow-uppercase flow-tracking-wider"
376+
className={twMerge(
377+
"flow-text-xs flow-font-bold flow-uppercase flow-tracking-wider",
378+
colors.foreground
379+
)}
341380
>
342381
Traits
343382
</p>
@@ -347,18 +386,25 @@ export const NftCard: React.FC<NftCardProps> = ({
347386
.map(([key, value]) => (
348387
<div
349388
key={key}
350-
className="flow-px-3 flow-py-2 flow-rounded-lg flow-bg-slate-50 dark:flow-bg-slate-800/50
351-
flow-border flow-border-slate-200 dark:flow-border-slate-700"
389+
className={twMerge(
390+
"flow-px-3 flow-py-2 flow-rounded-lg flow-border",
391+
colors.muted,
392+
colors.border
393+
)}
352394
>
353395
<p
354-
className="flow-text-xs flow-text-slate-500 dark:flow-text-slate-400 flow-truncate
355-
flow-mb-0.5"
396+
className={twMerge(
397+
"flow-text-xs flow-truncate flow-mb-0.5",
398+
colors.mutedForeground
399+
)}
356400
>
357401
{key}
358402
</p>
359403
<p
360-
className="flow-text-sm flow-font-semibold flow-text-slate-900 dark:flow-text-white
361-
flow-truncate"
404+
className={twMerge(
405+
"flow-text-sm flow-font-semibold flow-truncate",
406+
colors.foreground
407+
)}
362408
>
363409
{value}
364410
</p>
@@ -396,18 +442,25 @@ export const NftCard: React.FC<NftCardProps> = ({
396442
Object.entries(nft.traits).map(([key, value]) => (
397443
<div
398444
key={key}
399-
className="flow-px-3 flow-py-2 flow-rounded-lg flow-bg-slate-50 dark:flow-bg-slate-800/50
400-
flow-border flow-border-slate-200 dark:flow-border-slate-700"
445+
className={twMerge(
446+
"flow-px-3 flow-py-2 flow-rounded-lg flow-border",
447+
colors.muted,
448+
colors.border
449+
)}
401450
>
402451
<p
403-
className="flow-text-xs flow-text-slate-500 dark:flow-text-slate-400 flow-truncate
404-
flow-mb-0.5"
452+
className={twMerge(
453+
"flow-text-xs flow-truncate flow-mb-0.5",
454+
colors.mutedForeground
455+
)}
405456
>
406457
{key}
407458
</p>
408459
<p
409-
className="flow-text-sm flow-font-semibold flow-text-slate-900 dark:flow-text-white
410-
flow-truncate"
460+
className={twMerge(
461+
"flow-text-sm flow-font-semibold flow-truncate",
462+
colors.foreground
463+
)}
411464
>
412465
{value}
413466
</p>

0 commit comments

Comments
 (0)