Network themes #427

deansallinen · 2025-04-04T16:55:06Z

Add support for per-network color themes and light/dark mode by implementing a role-based abstraction layer between palette and component

cloudflare-workers-and-pages · 2025-04-04T16:59:29Z

Deploying unicove-waxtestnet with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://0bcc5e3d.unicove-waxtestnet.pages.dev
Branch Preview URL:	https://network-themes.unicove-waxtestnet.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:01:03Z

Deploying unicove-telostestnet with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://aa6b12fd.unicove-telostestnet.pages.dev
Branch Preview URL:	https://network-themes.unicove-telostestnet.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:02:40Z

Deploying unicove-telos with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://b48c1cb5.unicove-telos.pages.dev
Branch Preview URL:	https://network-themes.unicove-telos.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:04:11Z

Deploying unicove-wax with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://7b835908.unicove-wax.pages.dev
Branch Preview URL:	https://network-themes.unicove-wax.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:05:43Z

Deploying unicove-jungle4 with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://c3fb6a8c.unicove-jungle4.pages.dev
Branch Preview URL:	https://network-themes.unicove-jungle4.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:07:12Z

Deploying unicove-kylin with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://4f4c2091.unicove-kylin.pages.dev
Branch Preview URL:	https://network-themes.unicove-kylin.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-04T17:08:58Z

Deploying unicove-eos with Cloudflare Pages

Latest commit:	`34a3693`
Status:	✅ Deploy successful!
Preview URL:	https://5ab4e955.unicove-eos.pages.dev
Branch Preview URL:	https://network-themes.unicove-eos.pages.dev

View logs

cloudflare-workers-and-pages · 2025-04-24T18:19:34Z

Deploying unicove-vaulta with Cloudflare Pages

Latest commit:	`28620ba`
Status:	✅ Deploy successful!
Preview URL:	https://1b17b21a.unicove-eos.pages.dev
Branch Preview URL:	https://network-themes.unicove-eos.pages.dev

View logs

deansallinen · 2025-04-25T17:09:40Z

src/app.css

+	[data-theme='eos'] {
+		--color-seed: rgb(248 187 113);
+	}
+
+	[data-theme='telos'] {
+		--color-seed: rgb(207 189 254);
+	}
+
+	[data-theme='jungle4'] {
+		--color-seed: #2e9e87;
+	}
+
+	[data-theme='vaulta'] {
+		--color-seed: #2e3bff;
+	}
+
+	[data-theme='wax'] {
+		--color-seed: rgb(255 183 123);
+	}
+
+	[data-theme='kylin'] {
+		--color-seed: rgb(255 180 168);
+	}


Next steps would be to define these in the chain config if we can read .env in a css file somehow

deansallinen · 2025-04-25T17:11:05Z

src/app.css

+	@media (prefers-color-scheme: light) {
+		/* [data-theme='eos'] { */
+		/* 	--color-seed: rgb(134 83 0); */
+		/* } */
+		/**/
+		/* [data-theme='jungle4'] { */
+		/* 	--color-seed: rgb(0 104 87); */
+		/* } */
+		/**/
+		/* [data-theme='vaulta'] { */
+		/* 	--color-seed: #2e3bff; */
+		/* } */
+		/**/
+		/* [data-theme='telos'] { */
+		/* 	--color-seed: rgb(101 85 143); */
+		/* } */
+		/**/
+		/* [data-theme='wax'] { */
+		/* 	--color-seed: rgb(136 81 29); */
+		/* } */
+		/**/
+		/* [data-theme='kylin'] { */
+		/* 	--color-seed: rgb(144 75 64); */
+		/* } */


This is going to change. We'll need to recalculate the color values for the light theme from the chain branding color. Those will be different than the dark mode calculations.

deansallinen · 2025-04-25T17:11:42Z

src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="%network%">


This is how we tell an element to use a specific theme.

deansallinen · 2025-04-25T17:12:53Z

src/lib/components/accountswitch.svelte

@@ -161,18 +161,18 @@
 </button>

 {#if $open}
-	<div class="" use:melt={$portalled}>
+	<div data-theme={network} class="" use:melt={$portalled}>


Portalled elements need a data attribute with the network theme set

deansallinen · 2025-04-25T17:13:47Z

src/lib/components/button/button.svelte

+	<div
+		class="state-layer group-active/button:group-hove/buttonr:opacity-16 pointer-events-none absolute inset-0 rounded-[inherit] bg-current opacity-0 transition-opacity group-hover/button:opacity-8 group-focus-visible/button:opacity-10 group-disabled/button:hidden"
+	></div>


Buttons now use a dedicated layer to handle changes in state.

deansallinen · 2025-04-25T17:14:28Z

src/lib/components/button/copy.svelte

-			>
-		{/if}
-	</div>
+	<IconButton icon={Copy} onclick={copyToClipboard} {...props} />


New IconButton component is a generic component that can take any icon and turn it into a buton.

deansallinen · 2025-04-25T17:15:48Z

src/lib/components/button/copy.svelte

+	{#if hint}
+		<!-- 		<span -->
+		<!-- 			in:fly={{ x: -20, easing: quartOut, duration: 100 }} -->
+		<!-- 			out:fade={{ easing: quadIn, duration: 200 }} -->
+		<!-- 			class="text-primary absolute inset-y-0 left-full translate-x-2 text-xs text-nowrap select-none" -->
+		<!-- 			>{m.common_copied_result()}</span -->
+		<!-- 		> -->
+	{/if}


Disabled the "Copied!" flyout for now. Need to find a way to achieve the same effect anywhere without affecting layout. Perhaps a portalled element like how melt-ui does tooltips.

deansallinen · 2025-04-25T17:20:14Z

src/lib/components/card/tokenbalance.svelte

+<details
+	bind:this={detailsElement}
+	class={cn('group token-balance-card bg-surface-container rounded-xl', className)}
+	open={open && _balance instanceof TokenBalance}
+>
+	<summary
+		class="focus-visible:outline-solar-500 @container grid cursor-pointer grid-cols-[auto_1fr_auto] gap-3 rounded-xl p-5 select-none focus-visible:outline"
+		onclick={syncOpen}
+	>


Using details/summary pattern here. See issue for more details.

deansallinen · 2025-04-25T17:21:44Z

src/lib/components/elements/tradingpair.svelte

-			<span class="text-red-500">
-				▼ {percentChangeString}% {timeframeString}
+			<span class="inline-flex gap-1.5 leading-none text-red-500">
+				<Triangle fill="currentColor" class="size-4 rotate-180" />


Using an icon instead of the unicode character - we have better control over appearance this way

deansallinen · 2025-04-25T17:23:10Z

src/routes/[network]/(account)/ram/+page.svelte

+			<DL>
+				<DLRow title={` ${data.network.token.id.symbol.code || ''}/RAM (KB) `}>
+					<DD>
+						<AssetText variant="full" value={kbValueToken} />
+					</DD>
+				</DLRow>
+				<DLRow title={` ${market.network.currency.symbol.code}/RAM (KB) `}>
+					<DD>
+						<AssetText variant="full" value={kbValueFiat} />
+					</DD>
+				</DLRow>
+				<DLRow
+					title={m.common_labeled_unit_price({
+						unit: market.network.currency.symbol.code
+					})}
+				>
+					<DD>
+						<AssetText
+							variant="full"
+							value={calculateValue(ramCalculatorState.tokens, market.network.systemtoken.price)}
+						/>
+					</DD>
+				</DLRow>
+				<DLRow title={m.common_network_fees()}>
+					<DD>
+						<AssetText variant="full" value={ramCalculatorState.fee} />
+					</DD>
+				</DLRow>
+			</DL>


Using the component that best fits the data

deansallinen · 2025-04-25T17:23:57Z

src/routes/[network]/(account)/resources/+page.svelte

-			<Button variant="secondary" href="/{network}/ram">{m.common_ram_market()}</Button>
-		</Stack>
-		<AccountBalance />
+<SingleCard class="">


Refactored the resources pages to use the SingleCard layout component

deansallinen · 2025-04-25T17:24:49Z

src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte

-				<button
-					class="text-sky-500 hover:text-sky-400"
+				<Button
+					variant="tertiary"
 					onclick={() => {
 						manager.setMaxValue();
 					}}
-					type="button"
 					>{m.common_labeled_unit_available({ unit: '' })}:
 					<AssetText value={manager.stakable} />
-				</button>
+				</Button>


Using correct component for the design requirements

Swap page design

deansallinen marked this pull request as draft April 4, 2025 16:55

deansallinen mentioned this pull request Apr 4, 2025

Add keyboard navigation to the select components #418

Closed

deansallinen linked an issue Apr 4, 2025 that may be closed by this pull request

Add keyboard navigation to the select components #418

Closed

deansallinen force-pushed the network-themes branch 8 times, most recently from 5ff2402 to 2c53aa4 Compare April 11, 2025 22:16

deansallinen added 12 commits April 24, 2025 08:54

feat: add support for color roles

860f700

refactor: buttons use color roles

23f2557

refactor: sidemenu underline use color roles

48bfe3b

refactor: color roles on base input

3488ecd

refactor: color roles on account switcher

a55e1fc

refactor: my account button colors

dd8c53a

feat: icon button component

1282650

refactor: use theme color roles

2f91a1b

refactor: use icon buttons in pageheader

9a48969

chore: format

0323700

fix: lint

131195e

chore: add text button to debug page

83c202c

deansallinen added 4 commits April 24, 2025 11:12

refactor: use color roles

f409cc7

refactor: use component button

3bce5cd

refactor: use component description list

91273b6

refactor: resources to use standard components

769233b

deansallinen force-pushed the network-themes branch from 34a3693 to 769233b Compare April 24, 2025 18:16

deansallinen added 4 commits April 24, 2025 11:33

chore: format

0b390f0

fix: vaulta blue

fe76935

temp: disable light theme

2e6c99e

fix: lint

936502c

deansallinen marked this pull request as ready for review April 25, 2025 17:06

deansallinen commented Apr 25, 2025

View reviewed changes

deansallinen and others added 6 commits April 25, 2025 10:33

chore: cleanup

328b69a

fix: bug with pageheader image shrinking on small screens

28620ba

fix: bug where props were overriding existing classes

1967977

style: iconbutton inherits shape

7efa6e3

refactor: tidy up swap page

00e43cf

Merge pull request #436 from greymass/swap-page-design

1491b8b

Swap page design

aaroncox merged commit 472d7f3 into dev Apr 25, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Network themes #427

Network themes #427

deansallinen commented Apr 4, 2025

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 24, 2025 •

edited

Loading

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

deansallinen Apr 25, 2025

Network themes #427

Network themes #427

Conversation

deansallinen commented Apr 4, 2025

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-waxtestnet with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-telostestnet with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-telos with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-wax with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-jungle4 with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-kylin with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 4, 2025 • edited Loading

Deploying unicove-eos with Cloudflare Pages

cloudflare-workers-and-pages bot commented Apr 24, 2025 • edited Loading

Deploying unicove-vaulta with Cloudflare Pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 4, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Apr 24, 2025 •

edited

Loading