♻️ Use a DS button for previous in the onboarding questions (#12550)

* ♻️ Use a DS button for previous in the onboarding questions

The "Previous" button of the onboarding questions becomes a DS
secondary button; it was a raw button with the deprecated modal cancel
styles. It is a bit narrower and its label uses the DS typography.

"Next" stays: it is the shared forms submit button. The "Other" option
icon stays too: it belongs to the forms image radio buttons, which move
with the radio buttons group. A visual test covers the step 2 buttons
at rest and with "Previous" hovered.

AI-assisted-by: claude-opus-5-5

* ♻️ Move onboarding questions styles closer to the DS

The onboarding questions stylesheet resolves its legacy modal color
aliases to DS tokens, uses logical properties and the DS typography
module without a namespace. refactor/ stays only for the modal
placeholders (%modal-*), which move with the modals refactor. No visual
change (checked on steps 1 and 2; only the shuffled options differ
between runs).

AI-assisted-by: claude-opus-5-5

frontend/playwright/ui/visual-specs/visual-dashboard.spec.js

@@ -601,3 +601,31 @@ test.describe("Team pages controls", () => {
     await expect(page.locator("[class*='team-icon']")).toHaveScreenshot(shot);
   });
 });
+
+test.describe("Onboarding questions controls", () => {
+  const shot = { maxDiffPixelRatio: 0, threshold: 0 };
+
+  test("Previous and next buttons", async ({ page }) => {
+    await DashboardPage.mockConfigFlags(page, ["enable-onboarding"]);
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.goToDashboard();
+    await expect(
+      page.getByRole("heading", { name: "Help us get to know you" }),
+    ).toBeVisible();
+
+    // Step 1, as in OnboardingPage.fillOnboardingInputsStep1.
+    await page.getByText("Personal", { exact: true }).click();
+    await page.getByText("Select option").click();
+    await page.getByText("Product Management").click();
+    await page.getByRole("button", { name: "Next" }).click();
+
+    const previous = page.getByRole("button", { name: "Previous" });
+    await expect(previous).toBeVisible();
+    const actions = previous.locator("xpath=..");
+    await page.mouse.move(10, 700);
+    await expect(actions).toHaveScreenshot(shot);
+
+    await previous.hover();
+    await expect(actions).toHaveScreenshot(shot);
+  });
+});

frontend/src/app/main/ui/onboarding/questions.cljs

@@ -15,6 +15,7 @@
    [app.main.data.profile :as du]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -43,8 +44,9 @@
      [:div {:class (stl/css :action-buttons)}
 
       (when (some? on-prev)
-        [:button {:class (stl/css :prev-button)
-                  :on-click on-prev}
+        [:> button* {:variant "secondary"
+                     :type "button"
+                     :on-click on-prev}
          (tr "labels.previous")])
 
       [:> fm/submit-button*

frontend/src/app/main/ui/onboarding/questions.scss

@@ -4,8 +4,10 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+// refactor/ stays for the modal placeholders (%modal-*), which move with
+// the modals refactor.
 @use "refactor/common-refactor.scss" as deprecated;
-@use "ds/typography.scss" as t;
+@use "ds/typography.scss" as *;
 @use "ds/_borders.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/_utils.scss" as *;
@@ -22,19 +24,15 @@
   @extend %modal-accept-btn;
 }
 
-.prev-button {
-  @extend %modal-cancel-btn;
-}
-
 .modal-container {
-  max-width: $sz-964;
-  max-height: fit-content;
+  max-inline-size: $sz-964;
+  max-block-size: fit-content;
   inline-size: fit-content;
   padding-inline: $sz-96;
   padding-block: $sz-40 $sz-64;
   border-radius: $br-8;
-  border: $b-2 solid var(--modal-border-color);
-  background-color: var(--modal-background-color);
+  border: $b-2 solid var(--color-background-quaternary);
+  background-color: var(--color-background-primary);
 }
 
 .form-wrapper {
@@ -44,15 +42,15 @@
 }
 
 .paginator {
-  @include t.use-typography("title-small");
+  @include use-typography("title-small");
 
-  text-align: right;
-  color: var(--modal-text-foreground-color);
+  text-align: end;
+  color: var(--color-foreground-secondary);
 }
 
 .radio label,
 .select span {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 }
 
 .header-image {
@@ -62,25 +60,25 @@
 }
 
 .modal-title {
-  @include t.use-typography("title-large");
+  @include use-typography("title-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
   min-block-size: $sz-32;
   margin-block: auto;
 }
 
 .modal-subtitle {
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 
-  color: var(--modal-title-foreground-color);
+  color: var(--color-foreground-primary);
   margin: 0;
   padding: 0;
 }
 
 .modal-text {
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 
-  color: var(--modal-text-foreground-color);
+  color: var(--color-foreground-secondary);
   margin: 0;
 }