explorer: unify css

explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap

@@ -15,7 +15,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       disabled=""
       type="button"
     >
@@ -2565,7 +2565,7 @@ exports[`Blocks Card > should disable the \`Show More\` button is the card is in
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       disabled=""
       type="button"
     >
@@ -2605,7 +2605,7 @@ exports[`Blocks Card > should render the \`BlocksCard\` component 1`] = `
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span

explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap

@@ -15,7 +15,7 @@ exports[`DataCard > should render the \`DataCard\` in the data state 1`] = `
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span
@@ -53,7 +53,7 @@ exports[`DataCard > should render the \`DataCard\` in the data state when loadin
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span
@@ -91,7 +91,7 @@ exports[`DataCard > should render the \`DataCard\` in the error state 1`] = `
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span
@@ -159,7 +159,7 @@ exports[`DataCard > should render the \`DataCard\` in the loading state 1`] = `
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span
@@ -198,7 +198,7 @@ exports[`DataCard > should render the \`DataCard\` in the no data state 1`] = `
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span
@@ -250,7 +250,7 @@ exports[`DataCard > should render the \`DataCard\` with a disabled button 1`] =
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       disabled=""
       type="button"
     >

explorer/src/lib/components/__tests__/__snapshots__/SearchNotification.spec.js.snap

@@ -20,7 +20,7 @@ exports[`Search Notification > renders the Search Notification component with a
     </span>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal dusk-icon-button search-notification__header-action"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal dusk-icon-button search-notification__header-action"
       type="button"
     >
        
@@ -67,7 +67,7 @@ exports[`Search Notification > renders the Search Notification component with th
     </span>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal dusk-icon-button search-notification__header-action"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal dusk-icon-button search-notification__header-action"
       type="button"
     >
        

explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap

@@ -15,7 +15,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if the card
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       disabled=""
       type="button"
     >
@@ -55,7 +55,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       disabled=""
       type="button"
     >
@@ -3042,7 +3042,7 @@ exports[`Transactions Card > should render the \`TransactionsCard\` component 1`
     </h1>
      
     <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
       type="button"
     >
       <span

explorer/src/lib/components/block-details/BlockDetails.css

@@ -8,7 +8,6 @@
 
 .block-details__list-anchor {
   display: flex;
-  color: var(--primary-color);
 }
 
 .block-details__gas-used.dusk-progress-bar {

explorer/src/lib/components/data-card/DataCard.svelte

@@ -4,7 +4,6 @@
   import { DataAlert } from "$lib/components";
   import { Button, Card, ProgressBar } from "$lib/dusk/components";
   import { makeClassName } from "$lib/dusk/string";
-  import { appStore } from "$lib/stores";
 
   import "./DataCard.css";
 

explorer/src/lib/components/navbar/Navbar.css

@@ -29,6 +29,7 @@
 
 .dusk-navbar__toggle {
   background-color: transparent;
+  color: var(--primary-color);
   display: inline-flex;
   align-items: center;
   font-size: 1rem;
@@ -37,6 +38,7 @@
 
 .dusk-navbar__toggle:focus {
   outline: none;
+  box-shadow: none;
 }
 
 .dusk-navbar__menu {

explorer/src/lib/components/search-notification/SearchNotification.svelte

@@ -31,7 +31,7 @@
         position: "after",
         size: "normal",
       }}
-      variant={"tertiary"}
+      variant="tertiary"
     />
   </header>
   {#if data.res instanceof Error}

explorer/src/lib/dusk/components/select/Select.css

@@ -6,7 +6,7 @@
   letter-spacing: inherit;
   padding: var(--control-padding);
   padding-right: 2.25em;
-  background-color: var(--control-bg-color);
+  background-color: var(--non-button-control-bg-color);
   border-color: var(--control-border-color);
   border-radius: var(--control-border-radius-size);
   border-style: solid;
@@ -21,14 +21,18 @@
   background-image: linear-gradient(
       45deg,
       transparent 50%,
-      var(--control-text-color) 50%
+      var(--non-button-control-text-color) 50%
     ),
-    linear-gradient(135deg, var(--control-text-color) 50%, transparent 50%);
+    linear-gradient(
+      135deg,
+      var(--non-button-control-text-color) 50%,
+      transparent 50%
+    );
 }
 
 .dusk-select,
 .dusk-select option {
-  color: var(--control-text-color);
+  color: var(--non-button-control-text-color);
 }
 
 .dusk-select:disabled {

explorer/src/lib/stores/appStore.js

@@ -9,10 +9,10 @@ const networks = [
 
 const browserDefaults = browser
   ? {
-      darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches
+      darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
     }
   : {
-      darkMode: false
+      darkMode: false,
     };
 
 /** @type {AppStoreContent} */

explorer/src/routes/__tests__/layout.spec.js

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import { cleanup, fireEvent } from "@testing-library/svelte";
 import { get } from "svelte/store";
 import { appStore } from "$lib/stores";
@@ -9,7 +9,7 @@ import MainLayout from "../+layout.svelte";
 
 describe("Main layout", () => {
   const baseOptions = { props: {}, target: document.body };
- 
+
   afterEach(() => {
     cleanup();
   });
@@ -36,7 +36,8 @@ describe("Main layout", () => {
 
   it('should add and remove the "dark" class name to the `html` element when the `darkMode` value changes in the settings store', async () => {
     const isDarkMode = () => get(appStore).darkMode;
-    const hasDarkClass = () => document.documentElement.classList.contains("dark");
+    const hasDarkClass = () =>
+      document.documentElement.classList.contains("dark");
 
     expect(isDarkMode()).toBe(false);
     expect(hasDarkClass()).toBe(false);
@@ -51,4 +52,4 @@ describe("Main layout", () => {
     expect(isDarkMode()).toBe(false);
     expect(hasDarkClass()).toBe(false);
   });
-});
+});

explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         disabled=""
         type="button"
       >
@@ -63,7 +63,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         type="button"
       >
         <span

explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap

@@ -18,7 +18,7 @@ exports[`Transactions page > should render the Transactions page, start polling
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         disabled=""
         type="button"
       >
@@ -63,7 +63,7 @@ exports[`Transactions page > should render the Transactions page, start polling
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         type="button"
       >
         <span

explorer/src/style/dusk/language.css

@@ -1,7 +1,7 @@
 :root {
   /* Theme colours */
 
-  --page-background-color: var(--light-grey);
+  --page-background-color: var(--smokey-black);
   --background-color: var(--light-grey);
   --background-color-alt: #fff;
   --primary-color: var(--smokey-black);
@@ -56,30 +56,27 @@
   --non-button-control-bg-color: #fff;
   --non-button-control-text-color: var(--smokey-black);
 
-  --control-bg-color: #fff;
-  --control-bg-color-hover: var(--silver-metallic);
+  --control-bg-color: var(--smokey-black);
+  --control-bg-color-hover: var(--cornflower);
   --control-border-color: transparent;
   --control-border-color-hover: transparent;
-  --control-text-color: var(--smokey-black);
+  --control-text-color: #fff;
   --control-text-color-hover: var(--smokey-black);
 
-  --control-secondary-bg-color: var(--smokey-black);
-  --control-secondary-bg-color-hover: var(--cornflower);
+  --control-secondary-bg-color: #fff;
+  --control-secondary-bg-color-hover: var(--silver-metallic);
   --control-secondary-border-color: transparent;
   --control-secondary-border-color-hover: transparent;
-  --control-secondary-text-color: #fff;
-  --control-secondary-text-color-hover: var(--smokey-black);
+  --control-secondary-text-color: var(--smokey-black);
 
   --control-tertiary-bg-color: transparent;
   --control-tertiary-bg-color-hover: var(--cornflower);
   --control-tertiary-border-color: var(--smokey-black);
   --control-tertiary-border-color-hover: var(--cornflower);
   --control-tertiary-text-color: var(--smokey-black);
-  --control-tertiary-text-color-hover: var(--smokey-black);
 
   /* Anchors */
 
-  --anchor-color-on-surface: var(--accent-light-900);
   --anchor-color: var(--secondary-color);
   --anchor-color-visited: var(--secondary-color);
   --anchor-color-hover: var(--secondary-color-variant-light);
@@ -117,17 +114,15 @@
   --on-primary-color: var(--smokey-black);
   --on-surface-color: var(--light-grey);
 
-  /* Anchors */
-  --anchor-color-on-surface: var(--accent-dark-900);
-
   /* Controls */
 
-  --control-bg-color: var(--smokey-black);
-  --control-bg-color-hover: var(--jet);
-  --control-text-color: var(--light-grey);
-  --control-text-color-hover: var(--light-grey);
-  --control-secondary-bg-color: var(--light-grey);
-  --control-secondary-text-color: var(--smokey-black);
+  --non-button-control-bg-color: var(--smokey-black);
+  --non-button-control-text-color: var(--light-grey);
+
+  --control-bg-color: var(--light-grey);
+  --control-text-color: var(--smokey-black);
+  --control-secondary-bg-color: var(--smokey-black);
+  --control-secondary-text-color: var(--light-grey);
   --control-tertiary-border-color: var(--light-grey);
   --control-tertiary-text-color: var(--light-grey);