From a30711c6fd1b9e628a443dd5ceeb82590ac253e2 Mon Sep 17 00:00:00 2001
From: wighawag <wighawag@gmail.com>
Date: Wed, 17 Jan 2024 12:06:54 +0000
Subject: [PATCH] revamp css

---
 web/src/css/base.css                          | 32 ++++++-
 web/src/css/globals.css                       | 75 +++++++--------
 web/src/css/palette.css                       | 95 +++++++++++++------
 .../lib/components/jolly-roger/Feature.svelte |  2 +-
 .../components/jolly-roger/Showcase.svelte    |  4 +-
 .../lib/components/modals/ModalContent.svelte | 14 +--
 web/src/lib/components/modals/Modals.svelte   |  2 +-
 .../lib/components/navigation/NavTabs.svelte  |  4 +-
 .../lib/components/navigation/PageLink.svelte |  6 +-
 .../lib/components/prompts/PromptCard.svelte  | 16 ++--
 .../lib/components/utilities/CopyBlock.svelte |  6 +-
 .../lib/components/utilities/Executor.svelte  |  7 +-
 web/src/lib/structure/Footer.svelte           |  2 +-
 web/src/lib/web3/AccountSignIn.svelte         |  4 +-
 web/src/lib/web3/ConnectButton.svelte         |  9 +-
 web/src/lib/web3/NeedAWallet.svelte           |  2 +-
 web/src/lib/web3/Web3AccountInfo.svelte       |  6 +-
 web/src/lib/web3/Web3ConnectionError.svelte   |  8 +-
 web/src/lib/web3/Web3Executing.svelte         |  6 +-
 web/src/lib/web3/Web3WalletSelection.svelte   |  2 +-
 web/src/routes/+page.svelte                   |  7 +-
 web/src/routes/debug/utilities/+page.svelte   |  2 +-
 web/src/routes/degit-home/+page.svelte        |  4 +-
 web/src/routes/demo/+page.svelte              |  6 +-
 24 files changed, 181 insertions(+), 140 deletions(-)

diff --git a/web/src/css/base.css b/web/src/css/base.css
index 49e78ae..8ea1e10 100644
--- a/web/src/css/base.css
+++ b/web/src/css/base.css
@@ -2,18 +2,18 @@
 /* BASIC STYLES */
 /* ------------------------------------------------- */
 :root {
-	background-color: var(--color-background-base);
-	color: var(--color-text-base);
+	background-color: var(--color-surface-500);
+	color: var(--color-text-on-surface);
 
 	font-family: 'Noto Sans', Verdana, sans-serif;
 }
 
 a {
-	color: var(--color-link-base);
+	color: var(--color-text-for-links);
 	text-decoration: underline;
 }
 a:visited {
-	color: var(--color-link-base);
+	color: var(--color-text-for-links);
 }
 a:hover {
 	/* font-weight: 900; */
@@ -22,7 +22,7 @@ a:hover {
 /* ------------------------------------------------- */
 
 /* ------------------------------------------------- */
-/* remove button style
+/* buttons
 /* ------------------------------------------------- */
 button {
 	background: none;
@@ -33,6 +33,28 @@ button {
 	cursor: pointer;
 	outline: inherit;
 }
+
+button,
+a[role='button'] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+
+	border-radius: 0.5rem;
+
+	line-height: 1em;
+	font-weight: 600;
+	text-decoration-line: none;
+
+	height: 2rem;
+	min-height: 2rem;
+	padding-inline: 0.75rem;
+	font-size: 0.875rem;
+}
 /* ------------------------------------------------- */
 
 /* smooth scrolling */
diff --git a/web/src/css/globals.css b/web/src/css/globals.css
index 58c0595..f156fd6 100644
--- a/web/src/css/globals.css
+++ b/web/src/css/globals.css
@@ -2,59 +2,52 @@
 /* GLOBAL CLASSES */
 /* ------------------------------------------------- */
 
-.button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	cursor: pointer;
-	-webkit-user-select: none;
-	user-select: none;
-
-	border-radius: 0.5rem;
-
-	line-height: 1em;
-	font-weight: 600;
-	text-decoration-line: none;
-
-	height: 2rem;
-	min-height: 2rem;
-	padding-inline: 0.75rem;
-	font-size: 0.875rem;
-}
-
 .primary {
-	background-color: var(--color-background-primary);
-	color: var(--color-text-primary);
-
-	&:hover {
-		background-color: var(--color-background-primary-100);
-	}
+	background-color: var(--color-primary-500);
+	color: var(--color-text-on-primary-500);
+}
+button.primary:hover,
+a[role='button'].primary:hover {
+	background-color: var(--color-primary-600);
+}
+a[role='button'].primary:visited {
+	color: var(--color-text-on-primary-500);
 }
 
 .secondary {
-	background-color: var(--color-background-secondary);
-	color: var(--color-text-secondary);
-
-	&:hover {
-		background-color: var(--color-background-secondary-100);
-	}
+	background-color: var(--color-secondary-500);
+	color: var(--color-text-on-secondary-500);
+}
+button.secondary:hover,
+a[role='button'].secondary:hover {
+	background-color: var(--color-secondary-600);
+}
+a[role='button'].secondary:visited {
+	color: var(--color-text-on-secondary-500);
 }
 
 .success {
-	color: var(--color-text-success);
-	background-color: var(--color-background-success);
+	color: var(--color-text-on-success-500);
+	background-color: var(--color-success-500);
+}
+button.success:hover,
+a[role='button'].success:hover {
+	background-color: var(--color-success-600);
 }
-button.success:hover {
-	background-color: var(--color-background-success-hover);
+a[role='button'].success:visited {
+	color: var(--color-text-on-success-500);
 }
 
 .error {
-	color: var(--color-text-error);
-	background-color: var(--color-background-error);
+	color: var(--color-text-on-error-500);
+	background-color: var(--color-error-500);
+}
+button.error:hover,
+a[role='button'].error:hover {
+	background-color: var(--color-error-600);
 }
-button.error:hover {
-	background-color: var(--color-background-error-hover);
+a[role='button'].error:visited {
+	color: var(--color-text-on-error-500);
 }
 
 /* ------------------------------------------------- */
diff --git a/web/src/css/palette.css b/web/src/css/palette.css
index 4d82062..1eb689f 100644
--- a/web/src/css/palette.css
+++ b/web/src/css/palette.css
@@ -4,35 +4,72 @@
 
 /* Colors */
 :root {
-	--color-text-base: white;
-	--color-background-base: hsl(231.43 15% 18%);
-
-	--color-background-base-100: hsl(231.43 15% 16%);
-	--color-background-base-200: hsl(231.43 15% 16%);
-	--color-background-base-300: hsl(231.43 16% 14%);
-
-	--color-text-primary: black;
-	--color-background-primary: hsl(325.52 100% 74%);
-	--color-text-primary-100: black;
-	--color-background-primary-100: hsl(325.52 100% 64%);
-
-	--color-text-secondary: black;
-	--color-background-secondary: hsl(264.71 89% 78%);
-	--color-text-secondary-100: black;
-	--color-background-secondary-100: hsl(264.71 54% 67%);
-
-	--color-link-base: white;
-
-	--color-error: hsl(0 85.48% 62.99%);
-	--color-error-100: hsl(0 85.48% 52.99%);
-	--color-success: hsl(135.18 66.47% 56.04%);
-	--color-success-100: hsl(135.18 66.47% 46.04%);
-	--color-background-error: var(--color-error);
-	--color-background-error-hover: var(--color-error-100);
-	--color-background-success: var(--color-success);
-	--color-background-success-hover: var(--color-success-100);
-	--color-text-error: black;
-	--color-text-success: black;
+	--color-surface: 231.43 15%;
+	--color-surface-lightness: 18%;
+	--color-on-surface: 0 0%;
+	--color-on-surface-lightness: 100%;
+
+	--color-lighness-direction: -1;
+
+	--color-primary: 325.52 100%;
+	--color-primary-lightness: 74%;
+	--color-on-primary: 0 0%;
+	--color-on-primary-lightness: 0%;
+
+	--color-secondary: 264.71 89%;
+	--color-secondary-lightness: 78%;
+	--color-on-secondary: 0 0%;
+	--color-on-secondary-lightness: 0%;
+
+	--color-error: 0 85.48%;
+	--color-error-lightness: 62.99%;
+	--color-on-error: 0 0%;
+	--color-on-error-lightness: 0%;
+
+	--color-success: 135.18 66.47%;
+	--color-success-lightness: 56.04%;
+	--color-on-success: 0 0%;
+	--color-on-success-lightness: 0%;
+
+	--color-text-on-surface: hsl(var(--color-on-surface) var(--color-on-surface-lightness));
+	--color-text-for-links: hsl(var(--color-on-surface) var(--color-on-surface-lightness));
+
+	--color-surface-500: hsl(var(--color-surface) var(--color-surface-lightness));
+	--color-surface-600: hsl(
+		var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 2%)
+	);
+	--color-surface-700: hsl(
+		var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 3%)
+	);
+	--color-surface-800: hsl(
+		var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 4%)
+	);
+
+	--color-primary-500: hsl(var(--color-primary) var(--color-primary-lightness));
+	--color-primary-600: hsl(
+		var(--color-primary) calc(var(--color-primary-lightness) + var(--color-lighness-direction) * 10%)
+	);
+	--color-text-on-primary-500: hsl(var(--color-on-primary) var(--color-on-primary-lightness));
+	--color-text-on-primary-600: hsl(var(--color-on-primary) var(--color-on-primary-lightness));
+
+	--color-secondary-500: hsl(var(--color-secondary) var(--color-secondary-lightness));
+	--color-secondary-600: hsl(
+		var(--color-secondary) calc(var(--color-secondary-lightness) + var(--color-lighness-direction) * 11%)
+	);
+	--color-text-on-secondary-500: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness));
+	--color-text-on-secondary-600: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness));
+
+	--color-error-500: hsl(var(--color-error) var(--color-error-lightness));
+	--color-error-600: hsl(var(--color-error) calc(var(--color-error-lightness) + var(--color-lighness-direction) * 10%));
+	--color-text-on-error-500: hsl(var(--color-on-error) var(--color-on-error-lightness));
+	--color-text-on-error-600: hsl(var(--color-on-error) var(--color-on-error-lightness));
+
+	--color-success-500: hsl(var(--color-success) var(--color-success-lightness));
+	--color-success-600: hsl(
+		var(--color-success) calc(var(--color-success-lightness) + var(--color-lighness-direction) * 10%)
+	);
+	--color-text-on-success-500: hsl(var(--color-on-success) var(--color-on-success-lightness));
+	--color-text-on-success-600: hsl(var(--color-on-success) var(--color-on-success-lightness));
 }
 
 /* ------------------------------------------------- */
diff --git a/web/src/lib/components/jolly-roger/Feature.svelte b/web/src/lib/components/jolly-roger/Feature.svelte
index 543c7fa..c4311bb 100644
--- a/web/src/lib/components/jolly-roger/Feature.svelte
+++ b/web/src/lib/components/jolly-roger/Feature.svelte
@@ -15,7 +15,7 @@
 
 <style>
 	h3 {
-		color: var(--color-background-primary-100);
+		color: var(--color-primary-600);
 	}
 
 	p,
diff --git a/web/src/lib/components/jolly-roger/Showcase.svelte b/web/src/lib/components/jolly-roger/Showcase.svelte
index f07b1bc..8f739d2 100644
--- a/web/src/lib/components/jolly-roger/Showcase.svelte
+++ b/web/src/lib/components/jolly-roger/Showcase.svelte
@@ -39,7 +39,7 @@
 			0 10px 15px -3px rgba(0, 0, 0, 0.1),
 			0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
-		background-color: var(--color-background-base-200);
+		background-color: var(--color-surface-700);
 	}
 
 	.image-wrapper {
@@ -70,7 +70,7 @@
 		font-weight: 500;
 	}
 	.name a {
-		color: var(--color-background-primary);
+		color: var(--color-primary-500);
 	}
 
 	.card-content {
diff --git a/web/src/lib/components/modals/ModalContent.svelte b/web/src/lib/components/modals/ModalContent.svelte
index 8c22c87..20b5622 100644
--- a/web/src/lib/components/modals/ModalContent.svelte
+++ b/web/src/lib/components/modals/ModalContent.svelte
@@ -26,8 +26,7 @@
 
 <div bind:this={element} use:focusTrap={true}>
 	{#if showCancelButton}
-		<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="button close-button">✕</button
-		>
+		<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="close-button">✕</button>
 	{/if}
 	{#if settings?.type && settings.type !== 'custom'}
 		{#if settings.type === 'info'}
@@ -45,12 +44,8 @@
 				{settings.message}
 			</p>
 			<div class="actions">
-				<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="button error"
-					>Cancel</button
-				>
-				<button on:click={() => (onResponse ? onResponse(true) : modalStore.close())} class="button success"
-					>Confirm</button
-				>
+				<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="error">Cancel</button>
+				<button on:click={() => (onResponse ? onResponse(true) : modalStore.close())} class="success">Confirm</button>
 			</div>
 		{:else}
 			<!-- TODO more -->
@@ -80,7 +75,4 @@
 		padding-top: 1rem;
 		padding-bottom: 1rem;
 	}
-
-	.actions {
-	}
 </style>
diff --git a/web/src/lib/components/modals/Modals.svelte b/web/src/lib/components/modals/Modals.svelte
index 363770e..40deb14 100644
--- a/web/src/lib/components/modals/Modals.svelte
+++ b/web/src/lib/components/modals/Modals.svelte
@@ -99,7 +99,7 @@
 	}
 
 	.modal {
-		background-color: var(--color-background-base-300);
+		background-color: var(--color-surface-800);
 		border-radius: 1rem;
 		padding: 1rem;
 
diff --git a/web/src/lib/components/navigation/NavTabs.svelte b/web/src/lib/components/navigation/NavTabs.svelte
index 41102b1..f34376b 100644
--- a/web/src/lib/components/navigation/NavTabs.svelte
+++ b/web/src/lib/components/navigation/NavTabs.svelte
@@ -18,7 +18,7 @@
 		margin: 0;
 		list-style-type: none;
 		padding: 8px 8px 0px 0px;
-		background-color: var(--color-background-base);
-		border-bottom: 4px solid var(--color-background-primary);
+		background-color: var(--color-surface-500);
+		border-bottom: 4px solid var(--color-primary-500);
 	}
 </style>
diff --git a/web/src/lib/components/navigation/PageLink.svelte b/web/src/lib/components/navigation/PageLink.svelte
index bddb00d..d4a2ab8 100644
--- a/web/src/lib/components/navigation/PageLink.svelte
+++ b/web/src/lib/components/navigation/PageLink.svelte
@@ -13,7 +13,7 @@
 	a {
 		text-decoration: none;
 		display: inline-block;
-		color: var(--color-text-base);
+		color: var(--color-text-on-surface);
 
 		font-size: 0.875rem;
 		border-top-left-radius: 8px;
@@ -29,8 +29,8 @@
 
 	.current {
 		font-weight: bold;
-		color: var(--color-text-primary);
-		background-color: var(--color-background-primary);
+		color: var(--color-text-on-primary-500);
+		background-color: var(--color-primary-500);
 
 		pointer-events: none;
 	}
diff --git a/web/src/lib/components/prompts/PromptCard.svelte b/web/src/lib/components/prompts/PromptCard.svelte
index 4f1c001..298bf95 100644
--- a/web/src/lib/components/prompts/PromptCard.svelte
+++ b/web/src/lib/components/prompts/PromptCard.svelte
@@ -14,15 +14,15 @@
 	<div class="content">
 		<div class="text"><slot /></div>
 		<div class="buttons-container">
-			<button on:click={() => dispatch('accept')} type="button" class="button success"
+			<button on:click={() => dispatch('accept')} type="button" class="success"
 				><slot name="accept">Accept</slot></button
 			>
-			<button on:click={() => dispatch('reject')} type="button" class="button error"
+			<button on:click={() => dispatch('reject')} type="button" class="error"
 				><slot name="reject">Reject</slot>
 			</button>
 		</div>
 	</div>
-	<button on:click={() => dispatch('reject')} class="button button-close">
+	<button on:click={() => dispatch('reject')} class="button-close">
 		<span class="sr-only">Close</span>
 		<!-- Heroicon name: solid/x -->
 		<svg
@@ -50,7 +50,7 @@
 			0 4px 6px -2px rgba(0, 0, 0, 0.05);
 		border-radius: 0.5rem;
 		pointer-events: auto;
-		background-color: var(--color-background-base-300);
+		background-color: var(--color-surface-800);
 
 		display: flex;
 		align-items: flex-start;
@@ -70,7 +70,7 @@
 		height: 4rem;
 		border-width: 2px;
 		border-radius: 1rem;
-		border-color: var(--color-background-base-200); /* TODO */
+		border-color: var(--color-surface-700); /* TODO */
 	}
 
 	.content {
@@ -82,7 +82,7 @@
 
 	.text {
 		/* text-base font-medium */
-		color: var(--color-text-base);
+		color: var(--color-text-on-surface);
 		font-size: 1rem;
 		line-height: 1.5rem;
 		font-weight: 500;
@@ -96,8 +96,8 @@
 	}
 
 	.button-close {
-		color: var(--color-text-base);
-		background-color: var(--color-background-base);
+		color: var(--color-text-on-surface);
+		background-color: var(--color-surface-500);
 	}
 
 	.font-icon {
diff --git a/web/src/lib/components/utilities/CopyBlock.svelte b/web/src/lib/components/utilities/CopyBlock.svelte
index 6333fcf..5552f67 100644
--- a/web/src/lib/components/utilities/CopyBlock.svelte
+++ b/web/src/lib/components/utilities/CopyBlock.svelte
@@ -36,17 +36,17 @@
 		line-height: 1.7;
 		font-size: large;
 		font-weight: bold;
-		background-color: var(--color-background-base-100);
+		background-color: var(--color-surface-600);
 		padding: 12px;
 		border-radius: 1em;
 	}
 
 	.copied {
-		background-color: hsl(135.18 94% 65%);
+		background-color: var(--color-success-500);
 		color: black;
 	}
 
 	.tocopy {
-		color: var(--color-background-primary);
+		color: var(--color-primary-500);
 	}
 </style>
diff --git a/web/src/lib/components/utilities/Executor.svelte b/web/src/lib/components/utilities/Executor.svelte
index d8a6b68..6f14099 100644
--- a/web/src/lib/components/utilities/Executor.svelte
+++ b/web/src/lib/components/utilities/Executor.svelte
@@ -10,16 +10,15 @@
 <div>
 	{#if $execution.error}
 		{$execution.error}
-		<button class="button error" on:click={() => execution.acknowledgeError()}>Ok</button>
+		<button class="error" on:click={() => execution.acknowledgeError()}>Ok</button>
 	{:else}
-		<button disabled={$execution.executing} class="button success" on:click={() => execution.execute(...args)}
-			><slot /></button
+		<button disabled={$execution.executing} class="success" on:click={() => execution.execute(...args)}><slot /></button
 		>
 	{/if}
 </div>
 
 <style>
-	.button {
+	button {
 		margin: 0.5rem;
 	}
 </style>
diff --git a/web/src/lib/structure/Footer.svelte b/web/src/lib/structure/Footer.svelte
index 89037a4..14da85d 100644
--- a/web/src/lib/structure/Footer.svelte
+++ b/web/src/lib/structure/Footer.svelte
@@ -65,7 +65,7 @@
 			align-items: center;
 		}
 
-		background-color: var(--color-background-base-100);
+		background-color: var(--color-surface-600);
 	}
 
 	@media (max-width: 600px) {
diff --git a/web/src/lib/web3/AccountSignIn.svelte b/web/src/lib/web3/AccountSignIn.svelte
index fb19297..124a50f 100644
--- a/web/src/lib/web3/AccountSignIn.svelte
+++ b/web/src/lib/web3/AccountSignIn.svelte
@@ -19,8 +19,8 @@
 		</label>
 	</div>
 	<div class="actions">
-		<button on:click={() => account.rejectLoadingStep()} class="button error">Cancel</button>
-		<button on:click={() => account.acceptLoadingStep({doNotAskAgainSignature})} class="button success">Sign</button>
+		<button on:click={() => account.rejectLoadingStep()} class="error">Cancel</button>
+		<button on:click={() => account.acceptLoadingStep({doNotAskAgainSignature})} class="success">Sign</button>
 	</div>
 </Modal>
 
diff --git a/web/src/lib/web3/ConnectButton.svelte b/web/src/lib/web3/ConnectButton.svelte
index 648ba66..8bc7707 100644
--- a/web/src/lib/web3/ConnectButton.svelte
+++ b/web/src/lib/web3/ConnectButton.svelte
@@ -26,11 +26,11 @@
 
 {#if $account.state === 'Disconnected' || $account.locked}
 	{#if $account.locked}
-		<button class="button primary" disabled={$account.unlocking} on:click={() => account.unlock()}>unlock</button>
+		<button class="primary" disabled={$account.unlocking} on:click={() => account.unlock()}>unlock</button>
 	{:else}
 		<button
 			disabled={$connection.connecting}
-			class={`${$connection.initialised ? '' : 'invisible'} button primary`}
+			class={`${$connection.initialised ? '' : 'invisible'} primary`}
 			on:click={() => connection.connect()}>{$connection.connecting ? 'Connecting' : 'Connect'}</button
 		>
 	{/if}
@@ -72,7 +72,7 @@
 				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 				<ul tabindex="0" class="menu">
 					<li>
-						<button class="button error" on:click={() => disconnect()}>disconnect</button>
+						<button class="error" on:click={() => disconnect()}>disconnect</button>
 					</li>
 				</ul>
 			{/if}
@@ -110,7 +110,7 @@
 			4px 6px 3px 0 rgb a(1, 0, 0, 0.1),
 			4px 6px 2px 0 rgba(0, 0, 0, 0.06);
 
-		background-color: var(--color-background-base-300);
+		background-color: var(--color-surface-800);
 	}
 
 	.menu button {
@@ -124,6 +124,7 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		padding-inline: revert;
 	}
 	.blockie-wrapper {
 		/* w-10 rounded-full */
diff --git a/web/src/lib/web3/NeedAWallet.svelte b/web/src/lib/web3/NeedAWallet.svelte
index 9baf81b..418245c 100644
--- a/web/src/lib/web3/NeedAWallet.svelte
+++ b/web/src/lib/web3/NeedAWallet.svelte
@@ -7,7 +7,7 @@
 <Modal onResponse={() => connection.cancel()}>
 	<div class="title">You need to a web3 wallet to continue</div>
 	<div class="download">
-		<a href="https://metamask.io/download.html" class="button primary">
+		<a href="https://metamask.io/download.html" role="button" class="primary">
 			<img alt={`Download Metamask}`} src={url('/images/wallets/metamask.svg')} />
 			Download metamask
 		</a>
diff --git a/web/src/lib/web3/Web3AccountInfo.svelte b/web/src/lib/web3/Web3AccountInfo.svelte
index 0454d6d..face72d 100644
--- a/web/src/lib/web3/Web3AccountInfo.svelte
+++ b/web/src/lib/web3/Web3AccountInfo.svelte
@@ -22,7 +22,7 @@
 			<h3 class="title">Welcome to Jolly-Roger</h3>
 			<p class="message">Sign the message to access to your data.</p>
 			<div class="modal-action">
-				<button on:click={() => account.rejectLoadingStep()} class="button error">Cancel</button>
+				<button on:click={() => account.rejectLoadingStep()} class="error">Cancel</button>
 			</div>
 		</Modal>
 	{:else if $account.loadingStep.id == 'WELCOME'}
@@ -32,8 +32,8 @@
 			<h3 class="title">{$account.loadingStep.id}</h3>
 			<p class="message">{$account.loadingStep.id}</p>
 			<div class="modal-action">
-				<button on:click={() => account.rejectLoadingStep()} class="button error">Cancel</button>
-				<button on:click={() => account.acceptLoadingStep()} class="button success">Continue</button>
+				<button on:click={() => account.rejectLoadingStep()} class="error">Cancel</button>
+				<button on:click={() => account.acceptLoadingStep()} class="success">Continue</button>
 			</div>
 		</Modal>
 	{/if}
diff --git a/web/src/lib/web3/Web3ConnectionError.svelte b/web/src/lib/web3/Web3ConnectionError.svelte
index 4f43d76..36b281a 100644
--- a/web/src/lib/web3/Web3ConnectionError.svelte
+++ b/web/src/lib/web3/Web3ConnectionError.svelte
@@ -26,18 +26,14 @@
 		</p>
 
 		<p class="message">You'll need to shutdown and reopen your browser</p>
-		<button class="button" tabindex="0" on:click={() => location.reload()}> Else Try Reload? </button>
+		<button tabindex="0" on:click={() => location.reload()}> Else Try Reload? </button>
 	</AlertWithSlot>
 {:else if $network.hasEncounteredBlocksCacheIssue}
 	<AlertWithSlot>
 		<p class="main-message">You seemed to have recovered from Block Cacke Issue</p>
 
 		<p class="message">You most likely need to clear any data dervided from the chain as it may be invalid.</p>
-		<button
-			class="button"
-			tabindex="0"
-			on:click={() => resetIndexer().then(() => network.acknowledgeBlockCacheIssue())}
-		>
+		<button tabindex="0" on:click={() => resetIndexer().then(() => network.acknowledgeBlockCacheIssue())}>
 			Clear
 		</button>
 	</AlertWithSlot>
diff --git a/web/src/lib/web3/Web3Executing.svelte b/web/src/lib/web3/Web3Executing.svelte
index 0b43044..8312467 100644
--- a/web/src/lib/web3/Web3Executing.svelte
+++ b/web/src/lib/web3/Web3Executing.svelte
@@ -23,11 +23,11 @@
 					on:click={async () => {
 						await execution.cancel();
 					}}
-					class="button error">Cancel</button
+					class="error">Cancel</button
 				>
 				<button
 					on:click={() => network.switchTo($contractsInfos.chainId, getNetworkConfig($contractsInfos.chainId))}
-					class="button success">Switch</button
+					class="success">Switch</button
 				>
 			</div>
 		</Modal>
@@ -42,7 +42,7 @@
 					on:click={async () => {
 						await execution.cancel();
 					}}
-					class="button error">Cancel</button
+					class="error">Cancel</button
 				>
 				<button
 					disabled={$connection.connecting}
diff --git a/web/src/lib/web3/Web3WalletSelection.svelte b/web/src/lib/web3/Web3WalletSelection.svelte
index 4cef83e..d2c9282 100644
--- a/web/src/lib/web3/Web3WalletSelection.svelte
+++ b/web/src/lib/web3/Web3WalletSelection.svelte
@@ -60,7 +60,7 @@ permalink-->
 		{#if builtinNeedInstalation}
 			<div class="title">OR</div>
 			<div class="download">
-				<a href="https://metamask.io/download.html" class="button primary">
+				<a href="https://metamask.io/download.html" role="button" class="primary">
 					<img alt={`Download Metamask}`} src={url('/images/wallets/metamask.svg')} />
 					Download metamask
 				</a>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 792d7ab..67691f2 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -20,9 +20,10 @@
 	</h2>
 	<p class="description">Production-Ready Template To Build Decentralised Applications</p>
 	<div class="actions">
-		<a class="button primary" href={route('/demo/')} aria-label="Try the Demo!">Demo</a>
+		<a role="button" class="primary" href={route('/demo/')} aria-label="Try the Demo!">Demo</a>
 		<a
-			class="button secondary"
+			role="button"
+			class="secondary"
 			target="_blank"
 			rel="noreferrer"
 			href="https://github.com/wighawag/jolly-roger"
@@ -291,7 +292,7 @@
 		}
 	}
 
-	.button {
+	a[role='button'] {
 		padding: 10px;
 		padding-inline: 64px;
 		text-decoration: none;
diff --git a/web/src/routes/debug/utilities/+page.svelte b/web/src/routes/debug/utilities/+page.svelte
index f899d5d..0d6cfee 100644
--- a/web/src/routes/debug/utilities/+page.svelte
+++ b/web/src/routes/debug/utilities/+page.svelte
@@ -29,7 +29,7 @@
 
 	{#if error}
 		{error.message}
-		<button class={`btn btn-error m-2`} on:click={() => (error = undefined)}>OK</button>
+		<button class="error" on:click={() => (error = undefined)}>OK</button>
 	{:else}
 		<Executor func={increaseBlockTime} args={[1 * 3600]}>Add 1 hours</Executor>
 		<Executor func={increaseBlockTime} args={[23 * 3600]}>Add 23 hours</Executor>
diff --git a/web/src/routes/degit-home/+page.svelte b/web/src/routes/degit-home/+page.svelte
index 487fa57..42f5464 100644
--- a/web/src/routes/degit-home/+page.svelte
+++ b/web/src/routes/degit-home/+page.svelte
@@ -18,7 +18,7 @@
 	<p class="welcome">Welcome to your <span class="spin" />!</p>
 	<div class="wrapper">
 		<div class="button-wrapper">
-			<a class="button primary" href={route('/demo/')} aria-label="Try the Demo!">Demo</a>
+			<a role="button" class="primary" href={route('/demo/')} aria-label="Try the Demo!">Demo</a>
 		</div>
 	</div>
 </section>
@@ -123,7 +123,7 @@
 		}
 	}
 
-	.button {
+	a[role='button'] {
 		height: 3rem;
 		display: flex;
 		justify-content: center;
diff --git a/web/src/routes/demo/+page.svelte b/web/src/routes/demo/+page.svelte
index 3acb276..717dab6 100644
--- a/web/src/routes/demo/+page.svelte
+++ b/web/src/routes/demo/+page.svelte
@@ -91,7 +91,7 @@
 
 					contracts.Registry.write.setMessage([messageToSend, 12]);
 				})}
-			class="button primary">Say it!</button
+			class="primary">Say it!</button
 		>
 	</form>
 </main>
@@ -181,8 +181,8 @@
 	.input {
 		line-height: 1;
 		height: 2.25rem;
-		background-color: var(--color-background-base-300);
-		color: white;
+		background-color: var(--color-surface-800);
+		color: var(--color-text-on-surface);
 		width: 90%;
 		max-width: 15rem;
 		border: 2px solid black;