[ui] Address styling

ui/src/App.svelte

@@ -32,17 +32,24 @@
 </Router>
 
 <style global lang="scss">
+  @use "sass:color";
+
   @use "normalize.css/normalize.css";
   @use "@shoelace-style/shoelace/dist/themes/light.css";
   @use "@shoelace-style/shoelace/dist/themes/dark.css";
   @import url("/assets/fonts/inter.css");
 
+  $primary: #2c3e50;
+  $background: white;
+
   html {
     --default-font: "Inter", sans-serif;
     --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata",
       monospace;
-    --foreground: #2c3e50;
-    --background: white;
+    --foreground: #{$primary};
+    --foreground-lighter: #{color.scale($primary, $lightness: 50%)};
+    --background: #{$background};
+    --background-emph: #{color.scale($background, $lightness: -3%)};
 
     b {
       color: red;
@@ -58,8 +65,10 @@
 
   @media (prefers-color-scheme: dark) {
     html {
-      --foreground: white;
-      --background: #2c3e50;
+      --foreground: #{$background};
+      --foreground-lighter: #{color.scale($background, $lightness: -50%)};
+      --background: #{$primary};
+      --background-emph: #{color.scale($primary, $lightness: 5%)};
     }
   }
 

ui/src/components/Address.svelte

@@ -10,6 +10,7 @@
   export let address: string;
   export let link = false;
   export let resolve = true;
+  export let banner = false;
 
   let resolving = resolve;
 
@@ -37,7 +38,7 @@
   $: dispatch("resolved", inferredIds);
 </script>
 
-<div class="address" class:identified={Boolean(inferredIds)}>
+<div class="address" class:identified={Boolean(inferredIds)} class:banner>
   <HashBadge {address} />
   <div class="separator" />
   <Marquee>
@@ -64,12 +65,18 @@
 
     padding: 0.1em;
 
-    border: 0.1em solid var(--foreground);
-    border-radius: 0.2em;
-
     font-family: var(--monospace-font);
     line-break: anywhere;
 
+    background: var(--background-emph);
+    border: 0.1em solid var(--foreground-lighter);
+    border-radius: 0.2em;
+
+    &.banner {
+      border: 0.12em solid var(--foreground);
+      padding: 0.5em 0.25em;
+    }
+
     &.identified {
       font-family: var(--default-font);
       font-size: 0.95em;

ui/src/components/Inspect.svelte

@@ -82,7 +82,7 @@
 
 <div class="inspect">
   <h2>
-    <Address {address} />
+    <Address banner {address} />
   </h2>
   <BlobPreview {address} />
   {#if !$error}