FIX: Wizard css was overriding some of core css (#17126)

* Use `var()`
* Remove imports
* Scope all wizard css to `body.wizard`

app/assets/stylesheets/wizard.scss

@@ -1,11 +1,3 @@
-@import "color_definitions";
-@import "vendor/normalize";
-@import "vendor/normalize-ext";
-@import "common/foundation/colors";
-@import "common/select-kit/_index";
-@import "common/components/svg";
-@import "common/base/modal";
-
 $bubbles-mask: svg-uri(
   '<svg xmlns="http://www.w3.org/2000/svg" width="415.2" height="414" viewBox="0 0 415.2 414">
   <defs>
@@ -722,7 +714,7 @@ $bubbles-mask: svg-uri(
 body.wizard {
   background: var(--secondary) $bubbles-mask;
   color: var(--primary-very-high);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   font-size: 15px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@@ -736,9 +728,8 @@ body.wizard {
     flex-direction: column;
     justify-content: center;
   }
-}
 
-.finish-installation {
+  .finish-installation {
     .tada {
       width: 300px;
     }
@@ -751,9 +742,9 @@ body.wizard {
     .help-text {
       color: var(--primary-medium);
     }
-}
+  }
 
-.discourse-logo {
+  .discourse-logo {
     &,
     svg {
       height: 30px;
@@ -763,9 +754,9 @@ body.wizard {
     .logo-contour {
       fill: var(--primary);
     }
-}
+  }
 
-.wizard-warning {
+  .wizard-warning {
     font-family: sans-serif;
 
     p {
@@ -782,28 +773,28 @@ body.wizard {
     .sa-icon {
       display: none !important;
     }
-}
+  }
 
-.select {
+  .select {
     width: 400px;
-}
+  }
 
-.hidden {
+  .hidden {
     display: none;
-}
+  }
 
-.wizard-canvas {
+  .wizard-canvas {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
-}
+  }
 
-.staff-count {
+  .staff-count {
     font-weight: bold;
-}
+  }
 
-.wizard-step-privacy {
+  .wizard-step-privacy {
     label[for="privacy_options"] .field-description {
       margin-bottom: 1em;
       font-weight: bold;
@@ -816,9 +807,9 @@ body.wizard {
         font-weight: normal;
       }
     }
-}
+  }
 
-.wizard-step-form {
+  .wizard-step-form {
     max-height: 500px;
     display: flex;
 
@@ -838,9 +829,9 @@ body.wizard {
         width: calc(100% - 170px);
       }
     }
-}
+  }
 
-.wizard-step-styling {
+  .wizard-step-styling {
     .preview-nav {
       display: flex;
       justify-content: flex-end;
@@ -893,9 +884,9 @@ body.wizard {
         padding-right: 20px;
       }
     }
-}
+  }
 
-.wizard-column {
+  .wizard-column {
     position: relative;
     z-index: 11;
     background-color: var(--secondary);
@@ -972,7 +963,7 @@ body.wizard {
 
       span {
         position: absolute;
-      font-size: $font-0;
+        font-size: var(--font-0);
         mix-blend-mode: difference;
         color: var(--secondary-or-primary);
         z-index: 13;
@@ -999,7 +990,7 @@ body.wizard {
 
     .wizard-btn {
       border-radius: 2px;
-    font-size: $font-0;
+      font-size: var(--font-0);
       border: 0;
       padding: 0.5em;
       transition: background-color 0.3s;
@@ -1012,7 +1003,7 @@ body.wizard {
 
       &.small {
         padding: 0.25em 0.5em;
-      font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
 
       &:hover,
@@ -1195,34 +1186,34 @@ body.wizard {
     .wizard-image-row canvas {
       border: 1px solid rgba(0, 0, 0, 0.2);
     }
-}
+  }
 
-.textarea-field textarea {
+  .textarea-field textarea {
     width: 100%;
     height: 10em;
     padding: 6px;
     background: var(--secondary);
-}
+  }
 
-.text-field input {
+  .text-field input {
     width: 100%;
-  font-size: $font-up-1;
+    font-size: var(--font-up-1);
     margin: 0;
     padding: 6px;
     background-color: var(--secondary);
     border: 1px solid var(--primary-low-mid);
     transition: border-color 0.5s;
-}
+  }
 
-.textarea-field.invalid textarea,
+  .textarea-field.invalid textarea,
-.text-field.invalid input {
+  .text-field.invalid input {
     outline: 0;
     border: 3px solid var(--danger);
     animation: bump 0.25s ease-in-out;
     animation-iteration-count: 2;
-}
+  }
 
-.radio-field-choice {
+  .radio-field-choice {
     margin-bottom: 1.25em;
 
     .radio-label {
@@ -1234,9 +1225,9 @@ body.wizard {
       margin-left: 1.75em;
       color: var(--primary-high);
     }
-}
+  }
 
-.invite-list {
+  .invite-list {
     .users-list {
       margin-bottom: 1em;
 
@@ -1273,9 +1264,9 @@ body.wizard {
         margin-right: 0.5em;
       }
     }
-}
+  }
 
-.modal-footer {
+  .modal-footer {
     a.btn {
       text-decoration: none;
       display: inline-block;
@@ -1295,18 +1286,12 @@ body.wizard {
         }
       }
     }
-}
+  }
-
-@media only screen and (min-device-width: 569px) {
-  @import "desktop/modal";
-}
-
-/* fix wizard for mobile -- iPhone 5 default width */
-@media only screen and (max-device-width: 568px) {
-  @import "mobile/modal";
 
+  /* fix wizard for mobile -- iPhone 5 default width */
+  @media only screen and (max-device-width: 568px) {
     h1 {
-    font-size: $font-up-2 !important;
+      font-size: var(--font-up-2) !important;
     }
     .wizard-column {
       margin: auto !important;
@@ -1365,4 +1350,5 @@ body.wizard {
         max-width: 225px;
       }
     }
+  }
 }