From 9144d0ba70a3666549d9a3d54d8a6f91e79e5270 Mon Sep 17 00:00:00 2001
From: Slizhevsky Vladislav <uladzislau.slizheuski@semrush.com>
Date: Fri, 14 Aug 2026 10:29:50 +0200
Subject: [PATCH] [UIK-5686][wizard] rebranding

---
 semcore/wizard/src/Wizard.tsx                 |  2 +
 semcore/wizard/src/style/wizard.shadow.css    | 51 +++++++++-------
 .../style/design-tokens/design-tokens.json    | 59 +++++++++++--------
 3 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/semcore/wizard/src/Wizard.tsx b/semcore/wizard/src/Wizard.tsx
index 71a376bf86..4e148874ae 100644
--- a/semcore/wizard/src/Wizard.tsx
+++ b/semcore/wizard/src/Wizard.tsx
@@ -322,6 +322,7 @@ function StepBack(props: Required<WizardStepBackProps> & IRootComponentProps) {
     <SStepBack
       render={Button}
       use='tertiary'
+      theme='muted'
       size='l'
       onClick={handleClick}
       aria-label={getI18nText('backButton', { buttonName: stepName })}
@@ -343,6 +344,7 @@ function StepNext(props: Required<WizardStepNextProps> & IRootComponentProps) {
     <SStepNext
       render={Button}
       use='tertiary'
+      theme='muted'
       size='l'
       onClick={handleClick}
       aria-label={getI18nText('nextButton', { buttonName: stepName })}
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index fd0f1bfc37..c8d92f1d49 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -7,27 +7,28 @@ SWizard {
 }
 
 SSidebar {
-  background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
+  background: var(--intergalactic-wizard-sidebar-bg, oklch(0.23 0.01 140));
+  color: var(--intergalactic-wizard-sidebar-text-primary, oklch(0.999 0.001 180 / 0.949));
   font-weight: var(--intergalactic-bold, 700);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
-  padding: var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px);
+  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px) var(--intergalactic-spacing-content-padding-small, 8px);
   max-width: 220px;
   flex-shrink: 0;
   box-sizing: border-box;
-  border-radius: var(--intergalactic-modal-rounded, 14px) 0 0
-    var(--intergalactic-modal-rounded, 14px);
+  border-radius: var(--intergalactic-modal-rounded, 14px) 0 0 var(--intergalactic-modal-rounded, 14px);
   @media (max-width: 1060px) {
-    width: 56px;
+    width: 44px;
   }
 
   SStepper {
     display: flex;
-    gap: var(--intergalactic-spacing-1x, 4px);
+    box-sizing: border-box;
+    min-height: 36px;
+    gap: var(--intergalactic-spacing-content-gap-small, 4px);
     font-size: var(--intergalactic-fs-200, 14px);
     border-radius: var(--intergalactic-control-rounded, 6px);
-    padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
+    padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
     cursor: pointer;
     position: relative;
     overflow: auto;
@@ -38,22 +39,25 @@ SSidebar {
     }
 
     &:hover {
-      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
+      background: var(--intergalactic-wizard-sidebar-control-hover, oklch(0.36 0.005 140));
       z-index: 2;
     }
     &[active] {
-      background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+      background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140));
     }
     &:disabled,
     &[disabled] {
       opacity: var(--intergalactic-disabled-opacity, 0.4);
       cursor: default;
-      pointer-events: none; /* Disable interactions */
+      pointer-events: none;
     }
 
     @media (max-width: 1060px) {
-      padding: var(--intergalactic-spacing-2x, 8px);
+      padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
+
       &:hover {
+        display: flex;
+        padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xsmall, 4px);
         width: max-content;
         max-width: 220px;
       }
@@ -63,7 +67,7 @@ SSidebar {
         overflow: auto;
       }
       &[active]:hover SStepDescription {
-        background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+        background: var(--intergalactic-wizard-sidebar-control-active, oklch(0.4 0.004 140));
       }
     }
   }
@@ -71,7 +75,8 @@ SSidebar {
 
 SSidebarHeader {
   font-size: var(--intergalactic-fs-300, 16px);
-  margin: 0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px);
+  margin: 0;
+  padding: 0 var(--intergalactic-spacing-content-padding-xlarge, 20px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xlarge, 20px);
   @media (max-width: 1060px) {
     display: none;
   }
@@ -81,11 +86,10 @@ SStepNumber {
   display: inline-block;
   min-width: 20px;
   text-align: center;
-}
 
-SCompleted {
-  /* disable-tokens-validator */
-  margin-top: 1px;
+  &:has(svg) {
+    line-height: normal;
+  }
 }
 
 SStepDescription {
@@ -95,13 +99,16 @@ SStepDescription {
   }
 }
 
+SCompleted {
+  margin-bottom: -1px;
+}
+
 SContent {
-  padding: var(--intergalactic-spacing-10x, 40px);
+  padding: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
   overflow: hidden;
   flex: 1;
-  border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px)
-    0;
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-wizard-bg */
+  border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px) 0;
+  background: var(--intergalactic-wizard-bg, oklch(1 0 0));
 
   SWizardStepTitle {
     display: block;
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index a5776294ef..2a4265a0a2 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -242,8 +242,7 @@
       "modal",
       "side-panel",
       "slider",
-      "textarea",
-      "wizard"
+      "textarea"
     ]
   },
   {
@@ -1016,25 +1015,19 @@
     "name": "--intergalactic-control-primary-advertising",
     "value": "oklch(0.23 0.01 140)",
     "description": "Background of the advertising primary control.",
-    "components": [
-      "wizard"
-    ]
+    "components": []
   },
   {
     "name": "--intergalactic-control-primary-advertising-hover",
     "value": "oklch(0.36 0.005 140)",
     "description": "Hover state of the advertising primary control.",
-    "components": [
-      "wizard"
-    ]
+    "components": []
   },
   {
     "name": "--intergalactic-control-primary-advertising-active",
     "value": "oklch(0.4 0.004 140)",
     "description": "Active (selected) state of the advertising primary control.",
-    "components": [
-      "wizard"
-    ]
+    "components": []
   },
   {
     "name": "--intergalactic-control-primary-brand",
@@ -2996,8 +2989,7 @@
     "components": [
       "date-picker",
       "feature-highlight",
-      "notice-bubble",
-      "wizard"
+      "notice-bubble"
     ]
   },
   {
@@ -3097,13 +3089,17 @@
     "name": "--intergalactic-wizard-bg",
     "value": "oklch(1 0 0)",
     "description": "Main background of the Wizard.",
-    "components": []
+    "components": [
+      "wizard"
+    ]
   },
   {
     "name": "--intergalactic-wizard-sidebar-bg",
     "value": "oklch(0.23 0.01 140)",
     "description": "Background of the Wizard sidebar.",
-    "components": []
+    "components": [
+      "wizard"
+    ]
   },
   {
     "name": "--intergalactic-wizard-sidebar-control",
@@ -3115,19 +3111,25 @@
     "name": "--intergalactic-wizard-sidebar-control-active",
     "value": "oklch(0.4 0.004 140)",
     "description": "Active state of the control in the Wizard sidebar.",
-    "components": []
+    "components": [
+      "wizard"
+    ]
   },
   {
     "name": "--intergalactic-wizard-sidebar-control-hover",
     "value": "oklch(0.36 0.005 140)",
     "description": "Hover state of the control in the Wizard sidebar.",
-    "components": []
+    "components": [
+      "wizard"
+    ]
   },
   {
     "name": "--intergalactic-wizard-sidebar-text-primary",
     "value": "oklch(0.999 0.001 180 / 0.949)",
     "description": "Primary text color in the Wizard sidebar.",
-    "components": []
+    "components": [
+      "wizard"
+    ]
   },
   {
     "name": "--intergalactic-wizard-sidebar-text-secondary",
@@ -3315,7 +3317,8 @@
       "dropdown",
       "dropdown-menu",
       "input-tags",
-      "pills"
+      "pills",
+      "wizard"
     ]
   },
   {
@@ -3336,7 +3339,8 @@
       "bulk-textarea",
       "dropdown",
       "modal",
-      "pills"
+      "pills",
+      "wizard"
     ]
   },
   {
@@ -3355,7 +3359,8 @@
       "pills",
       "textarea",
       "time-picker",
-      "tooltip"
+      "tooltip",
+      "wizard"
     ]
   },
   {
@@ -3365,7 +3370,8 @@
     "components": [
       "bulk-textarea",
       "feature-popover",
-      "notice-bubble"
+      "notice-bubble",
+      "wizard"
     ]
   },
   {
@@ -3374,7 +3380,8 @@
     "description": "Extra large padding for content inside controls and surfaces.",
     "components": [
       "bulk-textarea",
-      "card"
+      "card",
+      "wizard"
     ]
   },
   {
@@ -3390,7 +3397,8 @@
     "components": [
       "feature-popover",
       "modal",
-      "notice-bubble"
+      "notice-bubble",
+      "wizard"
     ]
   },
   {
@@ -3404,7 +3412,8 @@
       "dropdown-menu",
       "inline-input",
       "pagination",
-      "tag"
+      "tag",
+      "wizard"
     ]
   },
   {