From f2cbbc161f9c3171d5294196e2a0fe524fc67879 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Mon, 14 Apr 2025 16:44:58 +0200
Subject: [PATCH 1/6] begin adding new styling

---
 .../flows/manage/recoveryMethodsSection.ts    |   2 +-
 src/frontend/src/lib/legacy/styles/main.css   | 128 +++++++++++-------
 src/frontend/src/lib/templates/mainWindow.ts  |   2 +-
 3 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts b/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
index a2b22e4a99..055208919b 100644
--- a/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
+++ b/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
@@ -37,7 +37,7 @@ export const recoveryMethodsSection = ({
     "l-stack",
     "c-card",
     "c-card--narrow",
-    ...(warnNoRecovery ? ["c-card--warning"] : []),
+    ...(warnNoRecovery ? [""] : []),
   ];
 
   return html`
diff --git a/src/frontend/src/lib/legacy/styles/main.css b/src/frontend/src/lib/legacy/styles/main.css
index 507ea3ce1d..0c829fc6da 100644
--- a/src/frontend/src/lib/legacy/styles/main.css
+++ b/src/frontend/src/lib/legacy/styles/main.css
@@ -136,6 +136,27 @@
     radial-gradient(at 100% 0%, hsla(272, 86%, 55%, 1) 0px, transparent 50%),
     radial-gradient(at 0% 18%, hsla(223, 79%, 66%, 1) 0px, transparent 50%);
 
+  /* NEW VALUE TOKENS
+  * As we are being asked to very quickly come up with a dark color scheme
+  * We are adding these additional tokens so we definitely don't break anything for now
+  */
+
+  /* #0d0d0b */
+  --nvc-surface-dark: oklch(0.16 0.0041 106.86);
+  /* #2b2c30 */
+  --nvc-surface-medium: oklch(0.29 0.0074 274.72);
+  /* #1b1d1c */
+  --nvc-input-grey: oklch(0.23 0.0036 164.73);
+  /* #6353c4 */
+  --nvc-surface-purple-primary: oklch(0.52 0.1695 285.31);
+  --nvc-text-purple-primary: oklch(0.52 0.1695 285.31);
+  /* #9f95d9 */
+  --nvc-text-purple-secondary: oklch(0.7 0.0986 290.37);
+  /* #373737 */
+  --nvc-text-grey: oklch(0.34 0 0);
+  /* #ffffff */
+  --nvc-text-light: oklch(1 0 0);
+
   /**
    * value tokens: sizes (--vs => valueSize)
    * 1) general purpose spacer unit
@@ -165,6 +186,7 @@
    */
 
   /* reference tokens: colors (--rc => referenceColor) */
+
   --rc-dark: var(--vc-raven);
   --rc-light: var(--vc-snow);
 
@@ -197,11 +219,11 @@
   --rc-line-interaction: var(--vc-brand-purple);
   --rc-line-inverted: var(--rc-dark);
 
-  --rc-button: var(--vc-brand-purple);
-  --rc-button-pair: var(--vc-brand-purple-light);
+  --rc-button: var(--nvc-text-purple-primary);
+  --rc-button-pair: var(--nvc-text-purple-primary);
 
   --rc-interaction: var(--vc-brand-blue);
-  --rc-interaction-text: var(--rc-button);
+  --rc-interaction-text: var(--nvc-text-purple-secondary);
   --rc-interactionHighlight-text: var(--vc-brand-purple-light);
   --rc-loading: var(--vc-brand-purple);
 
@@ -210,7 +232,7 @@
   --rc-button--disabled: var(--vc-shadow);
 
   --rc-background-image--highlight: var(--vc-brand-gradient);
-  --rc-background--highlight: var(--vc-brand-purple);
+  --rc-background--highlight: var(--nvc-surface-dark);
   --rc-background--highlight-text: var(--vc-snow);
 
   /*
@@ -454,8 +476,8 @@ display:revert; revert to element instead of attribute */
   font-weight: 350;
   letter-spacing: -0.005em;
 
-  background: var(--rc-background);
-  color: var(--rc-text);
+  background: var(--nvc-surface-medium);
+  color: var(--nvc-text-light);
 }
 
 /**
@@ -469,7 +491,8 @@ body {
 body {
   font-size: 1.6rem;
   line-height: var(--rs-line-height-body);
-  background: radial-gradient(circle at 50% 100%, var(--rg-brand-alt));
+  /* background: radial-gradient(circle at 50% 100%, var(--rg-brand-alt)); */
+  background-color: var(--nvc-surface-medium);
   background-size: 100% 100%;
   min-height: 100dvh;
 
@@ -588,7 +611,7 @@ body {
 }
 
 .t-muted {
-  color: var(--rc-text--disabled);
+  color: var(--nvc-text-light);
   font-size: 0.8em;
 }
 
@@ -633,7 +656,7 @@ a:hover,
   text-decoration: underline;
   text-decoration-thickness: var(--rs-line);
   text-underline-offset: 0.5ex;
-  color: var(--rc-interactionHighlight-text);
+  color: var(--nvc-text-purple-secondary);
 }
 
 .t-link--discreet:not([disabled]):focus,
@@ -931,7 +954,7 @@ a:hover,
   position: absolute;
   top: 50%;
   left: 50%;
-  background: var(--bgc);
+  background: var(--nvc-text-light);
   width: 0.3rem;
   height: 0.3rem;
   transform: translate(-50%, -50%) rotate(var(--rotate, 0deg))
@@ -954,7 +977,7 @@ a:hover,
 
 :is(button, a, link, .c-dropdown) .c-icon--outlined,
 .c-icon--outlined:is(button, a, link, .c-dropdown) {
-  border: 1px solid var(--rc-button);
+  border: 1px solid var(--nvc-text-grey);
   border-radius: 1px;
 }
 
@@ -1028,8 +1051,8 @@ a:hover,
 }
 
 .c-landingPage__left {
-  background-image: var(--rc-background-image--highlight);
-  background-color: var(--rc-background--highlight);
+  /* background-image: var(--rc-background-image--highlight); */
+  background-color: var(--nvc-surface-dark);
   color: var(--rc-background--highlight-text);
 
   grid-area: left;
@@ -1079,6 +1102,9 @@ a:hover,
   /* This is necessary in case the content is bigger than the parent. */
   /* It keeps the start of the box at the top of the container. */
   max-height: 90%;
+  background-color: var(--nvc-surface-dark);
+  padding: 2rem;
+  border-radius: 1rem;
 
   display: flex;
   flex-direction: column;
@@ -1102,7 +1128,7 @@ a:hover,
 .c-landingPage__left__footer > a:active,
 .c-landingPage__left__footer > a:focus,
 .c-landingPage__left__footer > a:visited {
-  color: var(--rc-light-transparent);
+  color: var(var(--nvc-text-purple-secondary));
 }
 
 @media (max-width: 1024px) {
@@ -1111,8 +1137,8 @@ a:hover,
     flex-direction: column;
     align-items: center;
 
-    background-image: var(--rc-background-image--highlight);
-    background-color: var(--rc-background--highlight);
+    /* background-image: var(--rc-background-image--highlight); */
+    background-color: var(--nvc-surface-medium);
 
     height: auto;
     min-height: 100vh;
@@ -1157,7 +1183,7 @@ a:hover,
   .c-landingPage__right {
     order: 1;
 
-    background: var(--rc-light);
+    background: var(--nvc-surface-dark);
     border-radius: var(--rs-card-border-radius);
     padding: var(--rs-split-page-right-pane-bezzel--mobile);
 
@@ -1189,12 +1215,17 @@ a:hover,
   position: relative;
 
   padding: var(--bezel-y) var(--bezel-x);
-  border: var(--rs-line) solid var(--rc-line);
+  /* border: var(--rs-line) solid var(--rc-line); */
 
-  background-color: var(--rc-card);
+  background-color: var(--nvc-surface-dark);
   border-radius: var(--rs-card-border-radius);
 }
 
+.c-card--invisible {
+  /* may god have mercy on my soul */
+  background-color: transparent !important;
+}
+
 .c-card--vertically-centered {
   position: absolute;
   top: 50%;
@@ -1219,10 +1250,14 @@ a:hover,
   --bezel-x: var(--rs-card-bezel);
   --bezel-y: var(--rs-card-bezel);
 
-  background-color: var(--rc-background-card--background);
+  /* background-color: var(--nvc-surface-dark); */
   border: none;
 }
 
+.c-card--background .c-card--highlight {
+  background-color: transparent;
+}
+
 /**
   * Card Teaser
   * it goes to the edge of the card
@@ -1257,7 +1292,7 @@ a:hover,
   --bezel-x: calc(var(--rs-card-bezel) * 0.3);
   --bezel-y: calc(var(--rs-card-bezel) * 0.3);
 
-  background: var(--rc-card-backdrop);
+  background-color: var(--nvc-surface-dark);
 }
 
 @media (max-width: 512px) {
@@ -1305,7 +1340,7 @@ a:hover,
 /** can be replaced with :has(.c-card__icon) as soon as it's supported
 by all browsers (FF is missing) */
 .c-card__label--hasIcon {
-  border-bottom: var(--rs-line) solid var(--rc-line);
+  border-bottom: var(--rs-line) solid var(--nvc-text-grey);
   padding-bottom: calc(0.5 * var(--rs-card-bezel));
   margin-bottom: calc(0.75 * var(--rs-card-bezel));
   margin-top: calc(-0.15 * var(--rs-card-bezel));
@@ -1405,9 +1440,9 @@ by all browsers (FF is missing) */
 
 .c-card--warning::after,
 .c-card--modal::after {
-  background: var(--rc-background);
+  background: var(--nvc-surface-dark);
   border-radius: var(--rs-card-border-radius);
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
+  /* box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4); */
 }
 
 .c-marketing-block {
@@ -1592,7 +1627,7 @@ by all browsers (FF is missing) */
 }
 
 .t-action:hover {
-  color: var(--rc-interaction);
+  color: var(--nvc-text-purple-secondary);
 }
 
 /**
@@ -1728,7 +1763,7 @@ by all browsers (FF is missing) */
 
 .c-button__icon:not([disabled]):focus,
 .c-button__icon:not([disabled]):hover {
-  fill: var(--rc-onButton);
+  fill: var(var(--nvc-text-purple-secondary));
   stroke-width: 0.5px;
   stroke: var(--rc-button);
 }
@@ -1745,7 +1780,7 @@ by all browsers (FF is missing) */
 
 .c-button:not([disabled]):focus,
 .c-button:not([disabled]):hover {
-  color: var(--rc-onButton);
+  color: var(--nvc-text-purple-secondary);
   opacity: 0.9;
   box-shadow:
     0 0 0 2px #ffffff,
@@ -1757,18 +1792,18 @@ by all browsers (FF is missing) */
 
 .c-button--textOnly:not([disabled]):hover,
 .c-button--textOnly:not([disabled]):focus {
-  color: var(--rc-interactionHighlight-text);
+  color: var(--nvc-text-light);
 }
 
 .c-button--secondary {
-  background: var(--rc-button-secondary);
-  color: var(--rc-onButton-secondary);
-  border: var(--rs-line) solid var(--rc-line-interaction);
+  background: var(--nvc-surface-dark);
+  color: var(--nvc-text-light);
+  border: var(--rs-line) solid var(--nvc-text-grey);
 }
 
 .c-button--secondary:not([disabled]):hover,
 .c-button--secondary:not([disabled]):focus {
-  color: var(--rc-onButton-secondary);
+  color: var(--nvc-text-purple-secondary);
 }
 
 /* Copy pasted from the focus and hover, but with different opacity to show action */
@@ -1861,7 +1896,7 @@ by all browsers (FF is missing) */
   padding: var(--bezel);
   background: var(--rc-input);
   color: var(--rc-onInput);
-  border: calc(var(--rs-line) * 2) solid var(--rc-line);
+  /* border: calc(var(--rs-line) * 2) solid var(--rc-line); */
   word-break: break-word;
   border-radius: var(--rs-input-border-radius);
 }
@@ -1955,7 +1990,7 @@ by all browsers (FF is missing) */
 .c-input--readonly {
   background: var(--rc-input-readonly);
   color: var(--rc-input-onReadonly);
-  border: var(--rs-line) var(--rc-line) solid;
+  /* border: var(--rs-line) var(--rc-line) solid; */
 }
 
 .c-input--textarea {
@@ -2104,8 +2139,8 @@ by all browsers (FF is missing) */
  */
 
 .c-footer {
-  background: var(--rc-footer);
-  color: var(--rc-onFooter);
+  background: var(--nvc-surface-dark);
+  color: var(--nvc-text-light);
   padding: var(--rs-footer-gutter);
 }
 
@@ -2471,7 +2506,8 @@ by all browsers (FF is missing) */
 }
 
 .c-list--anchors .c-list__item::after {
-  background: var(--vc-brand-alt);
+  /* background: var(--vc-brand-alt); */
+  background-color: var(--nvc-surface-dark);
   opacity: 0;
   mix-blend-mode: darken;
   transition: opacity 200ms linear;
@@ -2553,13 +2589,13 @@ by all browsers (FF is missing) */
 .c-list__parcel {
   position: relative;
   padding: var(--rs-list-parcel-bezel) 0.8em;
-  border: var(--rs-line) solid var(--rc-line);
+  border: var(--rs-line) solid var(--nvc-text-grey);
   flex-grow: 1;
   margin: calc(-1 * var(--rs-line));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: var(--rc-input);
+  background: var(--nvc-surface-dark);
 }
 
 .c-list__parcel--detail {
@@ -2721,8 +2757,8 @@ by all browsers (FF is missing) */
 
 .c-action-list {
   margin-top: 1rem;
-  background: var(--rc-background);
-  border: var(--rs-line) solid var(--rc-line);
+  background: var(--nvc-surface-dark);
+  border: var(--rs-line) solid var(--nvc-text-grey);
   padding: var(--rs-list-parcel-bezel);
 }
 
@@ -2791,7 +2827,7 @@ a.c-action-list__item {
   content: "";
   display: block;
   height: var(--rs-line);
-  background: var(--rc-line);
+  background: var(--nvc-text-grey);
   position: absolute;
   top: 0;
   left: var(--rs-list-parcel-bezel);
@@ -2846,7 +2882,7 @@ a.c-action-list__item {
 }
 
 .c-action-list__action:hover {
-  border-color: var(--rc-button);
+  border-color: var(--nvc-text-purple-secondary);
 }
 
 .c-action-list__action:hover svg {
@@ -3091,7 +3127,7 @@ a.c-action-list__item {
 }
 
 .c-action-list__action.c-dropdown__trigger:hover {
-  color: var(--rc-text);
+  color: var(--nvc-text-purple-secondary);
 }
 
 .c-dropdown__menu {
@@ -3161,7 +3197,7 @@ a.c-action-list__item {
 .c-dropdown__trigger[aria-expanded="true"]
   + .c-dropdown__menu
   .c-dropdown__link:hover {
-  color: var(--rc-interaction);
+  color: var(--nvc-text-purple-secondary);
 }
 
 .c-dropdown__backdrop {
@@ -3236,7 +3272,7 @@ input[type="checkbox"] {
 
 .c-loader__link:hover,
 .c-loader__link:focus {
-  color: var(--rc-surface);
+  color: var(--nvc-text-purple-secondary);
 }
 
 /* Wrap QR codes in a white square (for legibility) and prettify a bit */
diff --git a/src/frontend/src/lib/templates/mainWindow.ts b/src/frontend/src/lib/templates/mainWindow.ts
index 6f4bd9ab30..645f76794d 100644
--- a/src/frontend/src/lib/templates/mainWindow.ts
+++ b/src/frontend/src/lib/templates/mainWindow.ts
@@ -44,7 +44,7 @@ export const mainWindow = ({
         class="${containerClasses.join(" ")}"
       >
         ${showLogo ? html`<div class="c-logo">${icLogo}</div>` : ""}
-        <div class="c-card c-card--background">
+        <div class="c-card c-card--background c-card--invisible">
           <div class="c-card c-card--highlight">${slot}</div>
         </div>
       </div>

From 55075a02376e2c091c3342bda13ff8e403c8bf18 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Mon, 14 Apr 2025 17:41:22 +0200
Subject: [PATCH 2/6] preliminarily add styling to all legacy routes

---
 .../lib/flows/recovery/confirmSeedPhrase.ts   |  2 +-
 src/frontend/src/lib/legacy/styles/main.css   | 66 +++++++++++++------
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/lib/flows/recovery/confirmSeedPhrase.ts b/src/frontend/src/lib/flows/recovery/confirmSeedPhrase.ts
index 01b6425972..5815053150 100644
--- a/src/frontend/src/lib/flows/recovery/confirmSeedPhrase.ts
+++ b/src/frontend/src/lib/flows/recovery/confirmSeedPhrase.ts
@@ -103,7 +103,7 @@ const confirmSeedPhraseTemplate = ({
         <button
           @click=${() => back()}
           data-action="back"
-          class="c-button c-button--secondary"
+          class="c-button c-button--secondary transparent"
         >
           ${copy.back}
         </button>
diff --git a/src/frontend/src/lib/legacy/styles/main.css b/src/frontend/src/lib/legacy/styles/main.css
index 0c829fc6da..ecdce2d52c 100644
--- a/src/frontend/src/lib/legacy/styles/main.css
+++ b/src/frontend/src/lib/legacy/styles/main.css
@@ -633,7 +633,7 @@ body {
 a,
 .t-link {
   display: inline;
-  color: var(--rc-interaction-text);
+  color: var(--nvc-text-light);
   text-decoration: none;
   cursor: pointer;
   font-weight: 600;
@@ -680,6 +680,11 @@ a:hover,
   width: 100%;
 }
 
+.t-link__icon svg path {
+  stroke: var(--nvc-text-light);
+  fill: var(--nvc-text-light);
+}
+
 /* 
   generic typography
   .t-formatted us used as a wrapper around formatted text
@@ -894,7 +899,7 @@ a:hover,
   --onBgc: var(--rc-positive);
 }
 .c-icon--info__flipped {
-  --bgc: var(--rc-info);
+  --bgc: var(--nvc-text-purple-primary);
   --onBgc: var(--rc-onInfo);
   border-radius: 50%;
 }
@@ -1221,11 +1226,23 @@ a:hover,
   border-radius: var(--rs-card-border-radius);
 }
 
+.c-card:has(.c-output--recovery) {
+  /* may god have mercy on my soul part 2 */
+  background-color: transparent !important;
+}
+
 .c-card--invisible {
   /* may god have mercy on my soul */
   background-color: transparent !important;
 }
 
+/* may god not get bored of having mercy on my soul */
+@media (max-width: 512px) {
+  .c-card:has([data-page="authenticate"]) {
+    margin: 1rem;
+  }
+}
+
 .c-card--vertically-centered {
   position: absolute;
   top: 50%;
@@ -1250,13 +1267,13 @@ a:hover,
   --bezel-x: var(--rs-card-bezel);
   --bezel-y: var(--rs-card-bezel);
 
-  /* background-color: var(--nvc-surface-dark); */
+  background-color: var(--nvc-surface-dark);
   border: none;
 }
 
-.c-card--background .c-card--highlight {
+/* .c-card--background .c-card--highlight {
   background-color: transparent;
-}
+} */
 
 /**
   * Card Teaser
@@ -1298,7 +1315,7 @@ a:hover,
 @media (max-width: 512px) {
   .c-card--highlight {
     border: none;
-    border-radius: 0;
+    border-radius: var(--rs-card-border-radius);
   }
 }
 
@@ -1393,8 +1410,8 @@ by all browsers (FF is missing) */
 }
 
 .c-card__close svg {
-  fill: var(--rc-onButton);
-  stroke: var(--rc-background);
+  fill: var(--nvc-text-light);
+  stroke: var(--nvc-text-light);
 }
 
 .c-card__title {
@@ -1480,6 +1497,7 @@ by all browsers (FF is missing) */
 .c-toast {
   position: relative;
   animation: appearFromBottom 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--nvc-text-grey);
 }
 
 .c-toast--closing {
@@ -1765,7 +1783,7 @@ by all browsers (FF is missing) */
 .c-button__icon:not([disabled]):hover {
   fill: var(var(--nvc-text-purple-secondary));
   stroke-width: 0.5px;
-  stroke: var(--rc-button);
+  stroke: var(--nvc-text-light);
 }
 
 .c-button svg * {
@@ -1780,7 +1798,7 @@ by all browsers (FF is missing) */
 
 .c-button:not([disabled]):focus,
 .c-button:not([disabled]):hover {
-  color: var(--nvc-text-purple-secondary);
+  /* color: var(--nvc-text-purple-secondary); */
   opacity: 0.9;
   box-shadow:
     0 0 0 2px #ffffff,
@@ -1801,10 +1819,20 @@ by all browsers (FF is missing) */
   border: var(--rs-line) solid var(--nvc-text-grey);
 }
 
-.c-button--secondary:not([disabled]):hover,
+.c-button--secondary {
+  background: var(--nvc-surface-dark);
+  color: var(--nvc-text-light);
+  border: var(--rs-line) solid var(--nvc-text-grey);
+}
+
+.c-button-transparent {
+  background-color: transparent !important;
+}
+
+/* .c-button--secondary:not([disabled]):hover,
 .c-button--secondary:not([disabled]):focus {
   color: var(--nvc-text-purple-secondary);
-}
+} */
 
 /* Copy pasted from the focus and hover, but with different opacity to show action */
 .c-button:not([disabled]):active {
@@ -1894,8 +1922,8 @@ by all browsers (FF is missing) */
 
   position: relative;
   padding: var(--bezel);
-  background: var(--rc-input);
-  color: var(--rc-onInput);
+  background: var(--nvc-input-grey);
+  color: var(--nvc-text-light);
   /* border: calc(var(--rs-line) * 2) solid var(--rc-line); */
   word-break: break-word;
   border-radius: var(--rs-input-border-radius);
@@ -1933,7 +1961,7 @@ by all browsers (FF is missing) */
   display: flex;
   gap: var(--rs-inline-button-gap);
   justify-content: space-between;
-  border-top: var(--rs-line) solid var(--rc-line);
+  border-top: var(--rs-line) solid var(--nvc-text-grey);
   margin-top: calc(var(--vs-stack) * 6);
   padding-top: calc(var(--vs-stack) * 2);
 }
@@ -2252,7 +2280,7 @@ by all browsers (FF is missing) */
   /* Needed for the floating "copy" button, if present */
   position: relative;
 
-  background-color: var(--rc-line);
+  background-color: var(--nvc-surface-dark);
   border-radius: var(--rs-input-border-radius);
   --bezel: calc(1.5 * var(--rs-input-bezel));
   padding: var(--bezel);
@@ -2281,7 +2309,7 @@ by all browsers (FF is missing) */
     it creates a scoped design logic that is easier to understand
     and maintain.
   */
-  --bg: var(--rc-line);
+  --bg: var(--nvc-surface-dark);
   --fg: var(--rc-onInput);
 
   position: relative;
@@ -2399,7 +2427,7 @@ by all browsers (FF is missing) */
 
 /* When a word is disabled, make it more opaque to look non-interactive */
 .c-list--recovery-word__disabled {
-  --bg: var(--rc-input-readonly);
+  --bg: var(--nvc-surface-dark);
   --fg: var(--rc-onInput-readonly);
   background-color: var(--vc-mist);
   /* make sure the user can't select the word */
@@ -2408,7 +2436,7 @@ by all browsers (FF is missing) */
 
 /* When a word requires attention make it look interactive */
 .c-list--recovery-word__attention {
-  --bg: var(--rc-button);
+  --bg: var(--nvc-surface-dark);
 }
 
 /* When a word requires attention, show with a green glow and show a checkmark instead of the counter */

From dc661fc2b999d1e640bc46fe6ad607866e890112 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Mon, 14 Apr 2025 17:57:38 +0200
Subject: [PATCH 3/6] remove prayers

---
 src/frontend/src/lib/legacy/styles/main.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/frontend/src/lib/legacy/styles/main.css b/src/frontend/src/lib/legacy/styles/main.css
index ecdce2d52c..c8d7f43150 100644
--- a/src/frontend/src/lib/legacy/styles/main.css
+++ b/src/frontend/src/lib/legacy/styles/main.css
@@ -1220,23 +1220,19 @@ a:hover,
   position: relative;
 
   padding: var(--bezel-y) var(--bezel-x);
-  /* border: var(--rs-line) solid var(--rc-line); */
 
   background-color: var(--nvc-surface-dark);
   border-radius: var(--rs-card-border-radius);
 }
 
 .c-card:has(.c-output--recovery) {
-  /* may god have mercy on my soul part 2 */
   background-color: transparent !important;
 }
 
 .c-card--invisible {
-  /* may god have mercy on my soul */
   background-color: transparent !important;
 }
 
-/* may god not get bored of having mercy on my soul */
 @media (max-width: 512px) {
   .c-card:has([data-page="authenticate"]) {
     margin: 1rem;

From 7dbef5b9439faf2ee19cc44703ee27fccf553087 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Tue, 15 Apr 2025 14:33:42 +0200
Subject: [PATCH 4/6] update vc flow

---
 src/frontend/src/lib/legacy/styles/main.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/legacy/styles/main.css b/src/frontend/src/lib/legacy/styles/main.css
index c8d7f43150..2e5c2a4347 100644
--- a/src/frontend/src/lib/legacy/styles/main.css
+++ b/src/frontend/src/lib/legacy/styles/main.css
@@ -597,7 +597,7 @@ body {
 }
 
 .t-paragraph--weak {
-  color: var(--rc-text--weak);
+  color: var(--nvc-text-light);
 }
 
 .t-vip {
@@ -1325,7 +1325,9 @@ a:hover,
 
   overflow-y: auto;
 
-  background-color: var(--rc-card--highlight-background);
+  background-color: var(--nvc-surface-dark);
+
+  border: var(--rs-line) solid var(--nvc-text-grey);
 
   padding: var(--bezel-y) var(--bezel-x);
 

From f350a9d225dcb7758f7fa6fb743568dac3e7a9e3 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Tue, 15 Apr 2025 15:00:07 +0200
Subject: [PATCH 5/6] change color of number inside phrase pills, make recovery
 warning bright, make progress bar white

---
 .../lib/flows/manage/authenticatorsSection.ts |  2 +-
 src/frontend/src/lib/legacy/styles/main.css   | 27 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/lib/flows/manage/authenticatorsSection.ts b/src/frontend/src/lib/flows/manage/authenticatorsSection.ts
index e6f0dbf9af..1999f6aade 100644
--- a/src/frontend/src/lib/flows/manage/authenticatorsSection.ts
+++ b/src/frontend/src/lib/flows/manage/authenticatorsSection.ts
@@ -80,7 +80,7 @@ export const authenticatorsSection = ({
                   class="c-card__icon c-icon c-icon--error__flipped c-icon--inline"
                   >${warningIcon}</i
                 >
-                <h2>Security warning</h2>
+                <h2 class="c-warning">Security warning</h2>
               </span>
             `
           : ""
diff --git a/src/frontend/src/lib/legacy/styles/main.css b/src/frontend/src/lib/legacy/styles/main.css
index 2e5c2a4347..51500891ed 100644
--- a/src/frontend/src/lib/legacy/styles/main.css
+++ b/src/frontend/src/lib/legacy/styles/main.css
@@ -2348,8 +2348,8 @@ by all browsers (FF is missing) */
   * the index shown is important for recovery. Also this works around issues related
   * to different counter behavior on Safari & Chrome. */
   content: var(--index);
-  background-color: var(--bg);
-  color: var(--fg);
+  background-color: var(--nvc-surface-dark);
+  color: var(--nvc-text-light);
   padding: 0 0.4em 0 0.4em;
   font-size: 0.8em;
   margin-right: 0.75em;
@@ -2946,11 +2946,11 @@ a.c-action-list__item {
   align-items: center;
   flex: 1 1 0;
   position: relative;
-  color: var(--rc-button);
+  color: var(--nvc-text-light);
 }
 
 .c-progress-stepper__step[aria-current="true"] ~ .c-progress-stepper__step {
-  color: var(--rc-text);
+  color: var(--nvc-text-light);
 }
 
 .c-progress-stepper__step::before {
@@ -2965,17 +2965,12 @@ a.c-action-list__item {
   position: relative;
   z-index: 2;
 
-  background: linear-gradient(
-    90deg,
-    var(--rc-button) 50%,
-    var(--rc-button-secondary) 50%
-  );
+  background: var(--nvc-text-light);
 
   background-size: 200% 100%;
   background-position: 0 0;
 
-  color: var(--rc-onButton);
-  border: var(--rs-line) solid var(--rc-line-interaction);
+  color: var(--nvc-surface-dark);
 
   width: var(--bullet-size);
   height: var(--bullet-size);
@@ -2993,7 +2988,7 @@ a.c-action-list__item {
 .c-progress-stepper__step[aria-current="true"]
   ~ .c-progress-stepper__step
   .c-progress-stepper__icon {
-  color: var(--rc-onButton-secondary);
+  color: var(--nvc-surface-dark);
   background-position: 100% 0;
 }
 
@@ -3024,7 +3019,7 @@ a.c-action-list__item {
   top: calc(-1 * var(--rs-line) + var(--bullet-size) * 0.5);
   left: 0;
   right: 0;
-  border-bottom: var(--rs-line) solid var(--rc-line-interaction);
+  border-bottom: var(--rs-line) solid var(--nvc-text-light);
 }
 
 .c-progress-stepper__step:first-child::after {
@@ -3039,7 +3034,7 @@ a.c-action-list__item {
   margin-top: 0.6em;
   font-size: 1.2rem;
   line-height: 1.2;
-  color: var(--rc-text-secondary);
+  color: var(--nvc-text-light);
   width: min-content;
   min-width: 8rem;
 }
@@ -3456,6 +3451,10 @@ input[type="checkbox"] {
   background-color: var(--vc-brand-purple);
 }
 
+.c-warning {
+  color: var(--nvc-text-light);
+}
+
 /*
  * stack helper classes
  *

From 567bc8f7c1425050095fc17673ab9826f0936fea Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Tue, 15 Apr 2025 15:08:08 +0200
Subject: [PATCH 6/6] recolor more security warnings

---
 .../src/lib/flows/manage/confirmRemoveDevice.ts        |  2 +-
 .../src/lib/flows/manage/confirmUnlinkAccount.ts       | 10 ++++++----
 .../src/lib/flows/manage/recoveryMethodsSection.ts     |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/lib/flows/manage/confirmRemoveDevice.ts b/src/frontend/src/lib/flows/manage/confirmRemoveDevice.ts
index 395b5fe5a5..c117d629a6 100644
--- a/src/frontend/src/lib/flows/manage/confirmRemoveDevice.ts
+++ b/src/frontend/src/lib/flows/manage/confirmRemoveDevice.ts
@@ -65,7 +65,7 @@ const confirmRemoveDeviceTemplate = ({
     <hgroup data-page="confirm-remove-device-page">
       <div class="c-card__label c-card__label--hasIcon">
         ${warningLabelIcon}
-        <h2>${copy.label}</h2>
+        <h2 class="c-warning">${copy.label}</h2>
       </div>
       <h1 class="t-title t-title--main">${mappedCopy.title}</h1>
       <p class="t-paragraph">${copy.irreversible_action}</p>
diff --git a/src/frontend/src/lib/flows/manage/confirmUnlinkAccount.ts b/src/frontend/src/lib/flows/manage/confirmUnlinkAccount.ts
index 1fa8285083..3937e09033 100644
--- a/src/frontend/src/lib/flows/manage/confirmUnlinkAccount.ts
+++ b/src/frontend/src/lib/flows/manage/confirmUnlinkAccount.ts
@@ -27,14 +27,16 @@ const confirmUnlinkAccountTemplate = ({
     <hgroup data-page="confirm-unlink-account-page">
       <div class="c-card__label c-card__label--hasIcon">
         ${warningLabelIcon}
-        <h2>${copy.label}</h2>
+        <h2 class="c-warning>${copy.label}</h2>
       </div>
       <h1 class="t-title t-title--main">${copy.title}</h1>
       <p class="t-paragraph">${copy.message}</p>
       ${accountItem({ credential })}
-      ${nonNullish(isCurrentCredential) && isCurrentCredential
-        ? html`<p class="t-paragraph">${copy.current_credential_warning}</p>`
-        : undefined}
+      ${
+        nonNullish(isCurrentCredential) && isCurrentCredential
+          ? html`<p class="t-paragraph">${copy.current_credential_warning}</p>`
+          : undefined
+      }
     </hgroup>
     <div class="l-stack">
       <button
diff --git a/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts b/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
index 055208919b..b06a41644b 100644
--- a/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
+++ b/src/frontend/src/lib/flows/manage/recoveryMethodsSection.ts
@@ -52,7 +52,7 @@ export const recoveryMethodsSection = ({
                 class="c-card__icon c-icon c-icon--error__flipped c-icon--inline"
                 >${warningIcon}</i
               >
-              <h2>${copy.security_warning}</h2>
+              <h2 class="c-warning">${copy.security_warning}</h2>
             </span>
           `
         : ""}