website_next: part 3

website_next/wallets/start/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "../dom.js";
+import { createWalletPart } from "../dom.js";
 import { createPersistentVault } from "./persistent.js";
 import { createStartStory } from "./story.js";
 import { createTemporaryVault } from "./temporary.js";
@@ -15,12 +15,11 @@ import { createTemporaryVault } from "./temporary.js";
  * @property {() => void} [onReset]
  */
 
-
 /**
  * @param {StartOptions} options
  */
 export function createStart(options) {
-  const section = createElement("section", "start");
+  const section = createWalletPart("section", "start");
   const modes = document.createElement("div");
   const divider = document.createElement("p");
   const persistent = createPersistentVault({

website_next/wallets/start/reset/index.js

@@ -7,7 +7,7 @@ export function createResetButton(onReset) {
   return createHoldButton({
     label: "Reset vault",
     title: "Hold to reset",
-    className: "reset",
+    variant: "reset",
     onHold: onReset,
   });
 }

website_next/wallets/start/reset/style.css

@@ -1,6 +1,6 @@
-main.wallets {
-  .start {
-    .reset {
+main[data-page="wallets"] {
+  [data-wallet="start"] {
+    [data-variant="reset"] {
       justify-self: start;
       width: 100%;
     }

website_next/wallets/start/style.css

@@ -1,5 +1,5 @@
-main.wallets {
-  .start {
+main[data-page="wallets"] {
+  [data-wallet="start"] {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
     gap: 4rem;
@@ -24,7 +24,7 @@ main.wallets {
     h1 {
       margin: 0;
       font-size: 4.5rem;
-      font-weight: 400;
+      font-weight: var(--font-weight-regular);
       line-height: 0.95;
 
       span {
@@ -126,7 +126,7 @@ main.wallets {
         color: var(--white);
         font-family: var(--font-mono);
         font-size: var(--font-size-sm);
-        font-weight: 400;
+        font-weight: var(--font-weight-regular);
         line-height: var(--line-height-sm);
       }