Integrate custom wizard css into discourse asset pipeline

assets/javascripts/wizard/templates/components/wizard-field-composer.hbs

@@ -6,6 +6,6 @@
                          togglePreview=(action "togglePreview")
                          afterRefresh=(action "afterRefresh")}}
 
-<button class='wizard-btn primary toggle-preview' {{action 'togglePreview'}}>
+<button class='wizard-btn toggle-preview' {{action 'togglePreview'}}>
   <span class="d-button-label">{{i18n togglePreviewLabel}}</span>
 </button>

assets/stylesheets/wizard/custom/autocomplete.scss

@@ -1,11 +1,9 @@
-@import "wizard_variables";
-
 div.ac-wrap {
   overflow: visible;
   max-height: 150px;
   min-height: 34px;
-  background-color: white;
+  background-color: $secondary;
-  border: 1px solid #e9e9e9;
+  border: 1px solid $primary-medium;
   padding: 5px 4px 1px 4px;
 
   div.item {
@@ -34,19 +32,18 @@ div.ac-wrap {
   
   .remove-link {
     margin-left: 4px;
-    font-size: 11px;
+    font-size: $font-down-1;
-    line-height: 10px;
+    line-height: $line-height-small;
-    padding: 1.5px 1.5px 1.5px 2.5px;
+    padding: 1px 3.5px;
     border-radius: 12px;
-    width: 10px;
+    box-sizing: border-box;
-    display: inline-block;
+    border: 1px solid var(--primary-low);
-    border: 1px solid #e9e9e9;
     
     &:hover {
-      background-color: #f2ab9a;
+      background-color: var(--danger-low);
-      border: 1px solid #ec8972;
+      border: 1px solid var(--danger-medium);
       text-decoration: none;
-      color: #e45735;
+      color: var(--danger);
     }
   }
 }
@@ -60,8 +57,8 @@ img.avatar {
   z-index: 999999;
   position: absolute;
   width: 240px;
-  background-color: white;
+  background-color: var(--secondary);
-  border: 1px solid #e9e9e9;
+  border: 1px solid var(--primary-low);
 
   ul {
     list-style: none;
@@ -70,11 +67,11 @@ img.avatar {
 
     li {
       .d-users {
-        color: #333;
+        color: var(--primary-medium);
         padding: 0 2px;
       }
 
-      border-bottom: 1px solid #e9e9e9;
+      border-bottom: 1px solid var(--primary-low);
 
       a {
         padding: 5px;
@@ -90,21 +87,17 @@ img.avatar {
         }
         
         span.username {
-          color: #000;
+          color: var(--primary);
-          vertical-align: middle;
         }
-
         span.name {
-          font-size: 11px;
+          font-size: $font-down-1;
           vertical-align: middle;
         }
-
         &.selected {
-          background-color: #d1f0ff;
+          background-color: var(--tertiary-low);
         }
-
         &:hover {
-          background-color: #ffffa6;
+          background-color: var(--highlight-low);
           text-decoration: none;
         }
       }
@@ -138,7 +131,6 @@ img.avatar {
     }
 
     ul > label {
-      color: #919191;
       margin: 5px 0;
       padding: 0 5px;
       font-size: 80%;

assets/stylesheets/wizard/custom/badges.scss

@@ -0,0 +1,119 @@
+.badge-wrapper {
+  font-size: $font-down-1;
+  font-weight: bold;
+  white-space: nowrap;
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+
+  .badge-category {
+    display: inline-flex;
+    align-items: baseline;
+    .category-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .d-icon {
+      margin-right: 3px;
+      width: 0.74em;
+      height: 0.74em;
+      color: inherit;
+    }
+  }
+
+  &.bullet {
+    margin-right: 12px;
+    span.badge-category {
+      color: $primary-high;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .extra-info-wrapper & {
+        color: $header-primary;
+      }
+    }
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      flex: 0 0 auto;
+      width: 9px;
+      height: 9px;
+      margin-right: 5px;
+      display: inline-block;
+    }
+    .badge-category-parent-bg {
+      width: 5px;
+      margin-right: 0;
+      + .badge-category-bg {
+        width: 5px;
+      }
+    }
+    .d-icon {
+      color: $primary-medium;
+    }
+  }
+
+  &.box {
+    margin-right: 5px;
+    padding: 2px 4px 2px 4px;
+    display: inline-flex;
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.badge-category-bg,
+      &.badge-category-parent-bg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      &.badge-category-parent-bg {
+        width: calc(100% - 5px);
+        & + .badge-category-bg {
+          left: 5px;
+          width: calc(100% - 5px);
+          & + .badge-category {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      &.badge-category {
+        position: relative;
+      }
+    }
+    + .topic-header-extra {
+      padding: 2px 4px 2px 4px;
+    }
+  }
+
+  &.bar {
+    margin-right: 5px;
+
+    span.badge-category {
+      color: $primary-high;
+      padding: 1px 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .extra-info-wrapper & {
+        color: $header-primary;
+      }
+    }
+
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      display: inline-block;
+      padding: 0 1px;
+
+      &:before {
+        content: "\a0";
+      }
+    }
+  }
+
+  &.none {
+    color: $primary-high;
+    margin-right: 5px;
+  }
+}

assets/stylesheets/wizard/custom/base.scss

@@ -0,0 +1,86 @@
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  padding: 4px 10px;
+  margin-bottom: 9px;
+  font-size: 1em;
+  line-height: 1;
+  color: var(--primary);
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
+  border-radius: 0;
+  box-sizing: border-box;
+  min-height: 30px;
+}
+
+textarea {
+  height: auto;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
+  
+  &:focus {
+    border-color: var(--tertiary);
+    box-shadow: shadow("focus");
+    outline: 0;
+  }
+}
+
+input,
+select,
+textarea {
+  color: var(--primary);
+  caret-color: currentColor;
+
+  &[class*="span"] {
+    float: none;
+    margin-left: 0;
+  }
+
+  &[disabled],
+  &[readonly] {
+    cursor: not-allowed;
+    background-color: var(--primary-low);
+    border-color: var(--primary-low);
+  }
+
+  &:focus:required:invalid {
+    color: var(--danger);
+    border-color: var(--danger);
+  }
+
+  &:focus:required:invalid:focus {
+    border-color: var(--danger);
+    box-shadow: shadow("focus-danger");
+  }
+}
+
+.spinner {
+  margin: 20px auto 20px auto;
+  position: relative;
+  -webkit-animation: rotate-forever 1s infinite linear;
+  animation: rotate-forever 1s infinite linear;
+  height: 30px;
+  width: 30px;
+  border: 4px solid var(--primary-low-mid);
+  border-right-color: transparent;
+  border-radius: 50%;
+
+  &.small {
+    width: 10px;
+    height: 10px;
+    margin: 0;
+    display: inline-block;
+  }
+}
+
+@keyframes rotate-forever {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+

assets/stylesheets/wizard/custom/composer.scss

@@ -1,5 +1,3 @@
-@import 'wizard_variables';
-
 .d-editor-container {
   display: flex;
   flex-grow: 1;
@@ -55,7 +53,7 @@
 .d-editor-textarea-wrapper,
 .d-editor-preview-wrapper {
   background-color: $secondary;
-  border: 1px solid #919191;
+  border: 1px solid $primary-low;
   flex: 1;
 }
 
@@ -80,7 +78,7 @@
   border-bottom: none;
   min-height: 30px;
   padding-left: 3px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid var(--primary-low);
 
   button {
     background-color: transparent;

assets/stylesheets/wizard/custom/events.scss

@@ -1,5 +1,3 @@
-@import "wizard_variables";
-
 // event form
 
 .event-form {

assets/stylesheets/wizard/custom/field.scss

@@ -0,0 +1,164 @@
+.custom-wizard {
+  .wizard-field {
+    margin-bottom: 1em;
+    
+    .field-label {
+      font-weight: 800;
+    }
+    
+    .field-image {
+      margin-bottom: 0.5em;
+      
+      img {
+        max-width: 100%;
+        max-height: 150px;
+      }
+    }
+
+    .field-description {
+      flex: 1;
+      color: $primary;
+      margin-top: 0;
+
+      p {
+        margin: 0.3em 0;
+        line-height: 1.3em;
+      }
+
+      img {
+        height: 15px;
+        width: 15px;
+        margin: 0 5px;
+      }
+    }
+    
+    &.invalid {
+      textarea, input[type=text], input[type=checkbox], .select-kit {
+        padding: 3px;
+        border: 4px solid $danger;
+      }
+    }
+  }
+
+  .checkbox-field {
+    display: flex;
+    align-items: center;
+
+    &> .input-area {
+      order: 0;
+      margin: 15px 20px !important;
+
+      input {
+        cursor: pointer;
+        transform: scale(1.3);
+      }
+    }
+
+    &> label.field-label {
+      order: 1;
+      font-weight: 400;
+    }
+
+    &> .field-description {
+      margin-top: 0;
+      order: 2;
+    }
+  }
+
+  .url-field input {
+    width: 100%;
+    font-size: 1.1487em;
+    padding: 6px;
+    transition: border-color 0.5s;
+  }
+
+  .wizard-step-form .wizard-btn {
+    display: block;
+    margin: 20px 0;
+    color: var(--primary);
+    background: var(--primary-low);
+    
+    &.primary {
+      background: $tertiary;
+    }
+  }
+
+  .wizard-image-row {
+    .wizard-btn-upload {
+      margin: 0;
+    }
+  }
+
+  .wizard-image-preview  {
+    margin-top: 10px;
+    max-width: 500px;
+    max-height: 500px;
+    overflow: hidden;
+    display: block;
+    border: none;
+    padding: 0;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .wizard-select-value img {
+    vertical-align: middle;
+  }
+
+  .wizard-field-upload {
+    .wizard-btn-upload-file {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+
+      input {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .filename {
+      margin-left: 10px;
+    }
+  }
+
+  input.date-picker {
+    font-size: 1.1487em;
+    padding: 6px;
+    border: 1px solid $primary;
+    transition: border-color 0.5s;
+  }
+
+  .pika-single.is-bound {
+    width: fit-content;
+    position: absolute !important;
+  }
+
+  .d-time-input .select-kit.combo-box .select-kit-header {
+    font-size: 1.1487em;
+    padding: 6px;
+  }
+
+  .d-date-time-input {
+    display: flex;
+  }
+
+  .list-controls {
+    .category-breadcrumb {
+      a.badge-category {
+        display: inline-block;
+        padding: 6px 8px;
+        line-height: $line-height-medium;
+      }
+    }
+  }
+
+  .select-kit.combo-box.group-dropdown {
+    min-width: 220px;
+  }
+}

assets/stylesheets/wizard/custom/locations.scss

@@ -1,5 +1,3 @@
-@import "wizard_variables";
-
 .location-form-instructions {
   color: #919191;
   margin: 5px 0;

assets/stylesheets/wizard/custom/mobile.scss

@@ -1,5 +1,3 @@
-@import 'wizard_variables';
-
 .custom-wizard {
   .wizard-step-form {
     .wizard-btn {
@@ -35,8 +33,4 @@
     margin-bottom: 20px;
     width: 100%;
   }
-
-  input, textarea {
-    border: 1px solid #919191;
-  }
 }

assets/stylesheets/wizard/custom/step.scss

@@ -0,0 +1,151 @@
+.custom-wizard {
+  .wizard-step-contents {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: initial;
+    height: initial;
+    margin-bottom: 10px;
+  }
+
+  .wizard-step-title {
+    flex: 0;
+    
+    p {
+      margin: 0 0 0.5em 0;
+    }
+  }
+
+  img.emoji {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+  }
+
+  .wizard-step-description {
+    flex: 0;
+    margin-bottom: 0;
+
+    p {
+      line-height: 1.7;
+
+      img {
+        @extend img.emoji;
+      }
+    }
+
+    i {
+      margin-right: 7px;
+    }
+
+    ul li {
+      margin: 10px 0;
+    }
+
+    .image-container {
+      padding: 0 20px;
+      margin: 50px 0;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      a {
+        cursor: pointer;
+      }
+
+      span {
+        display: block;
+        text-align: center;
+        max-width: 140px;
+      }
+
+      &.group {
+        padding: 0;
+        margin: 0;
+        width: 130px;
+        height: 130px;
+      }
+    }
+
+    img.large {
+      width: 150;
+      padding: 25px;;
+    }
+
+    img.small {
+      width: 100;
+      padding: 15px;
+    }
+
+    img.x-small {
+      width: 50px;
+      height: 50px;
+      padding: 3px;
+    }
+
+    label {
+      display: block;
+      text-align: center;
+    }
+
+    .inline-list > * {
+      display: inline-block;
+    }
+  }
+
+  .wizard-step-banner {
+    width: initial;
+    margin-bottom: 1em;
+
+    img {
+      max-height: 300px;
+    }
+  }
+
+  .wizard-step-form {
+    flex: auto;
+    display: flex;
+    flex-direction: column;
+    max-height: initial;
+    width: 100%;
+  }
+  
+  .wizard-progress {
+    .screen {
+      background-color: $tertiary;
+    }
+  }
+
+  .step-message {
+    text-align: center;
+    transition: all .2s;
+    z-index: 2;
+    padding: 20px;
+
+    &.success {
+      background-color: $success;
+      color: $secondary;
+    }
+
+    &.error {
+      background-color: $danger;
+      color: $secondary;
+    }
+
+    &.not-permitted {
+      background-color: $danger;
+      color: $secondary;
+    }
+    
+    .text {
+      display: inline-block;
+    }
+    
+    .reset-wizard {
+      margin-top: 20px;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}

assets/stylesheets/wizard/custom/wizard.scss

@@ -0,0 +1,60 @@
+.custom-wizard {
+  background-color: $secondary;
+  color: $primary;
+  font-size: 1.1em;
+  
+  .wizard-column {
+    background-color: $secondary;
+    
+    .wizard-field .input-area {
+      margin: 0.5em 0;
+    }
+
+    .wizard-column-contents h1 {
+      margin: 0
+    }
+    
+    .wizard-footer {
+      background-color: $secondary;
+    }
+  }
+  
+  .wizard-buttons > a, .wizard-buttons > button, .spinner {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .spinner.small {
+    margin-right: 10px;
+  }
+  
+  .wizard-column .wizard-step-footer button.wizard-btn.done,
+  .wizard-column .wizard-step-footer button.wizard-btn.finish {
+    color: $primary;
+    background-color: $success;
+  }
+  
+  .wizard-column .action-link {
+    color: $tertiary;
+  }
+}
+
+.no-access-gutter {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* IE11 hacks */
+
+@media all and (-ms-high-contrast:none) {
+  .custom-wizard {
+    div.wizard-step-contents {
+      display: block;
+    }
+
+    div.wizard-progress {
+      visibility: hidden;
+    }
+  }
+}

assets/stylesheets/wizard/wizard_custom.scss

@@ -1,544 +1,13 @@
-@import 'wizard_variables';
+@import "common/foundation/colors";
+@import "common/foundation/variables";
+@import "custom/base";
+@import "custom/wizard";
+@import "custom/step";
+@import "custom/field";
+@import "custom/mobile";
+@import "custom/autocomplete";
+@import "custom/composer";
+@import "custom/events";
+@import "custom/locations";
 
-.no-access-gutter {
-  margin-top: 10px;
-  display: flex;
-  justify-content: flex-end;
-}
 
-.custom-wizard {
-  background-color: initial;
-  font-size: 1.1em;
-
-  .wizard-step-contents {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-height: initial;
-    height: initial;
-    margin-bottom: 10px;
-  }
-
-  img.emoji {
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-  }
-
-  .wizard-step-title {
-    flex: 0;
-    
-    p {
-      margin: 0 0 0.5em 0;
-    }
-  }
-
-  .wizard-step-description {
-    flex: 0;
-    margin-bottom: 0;
-
-    p {
-      line-height: 1.7;
-
-      img {
-        @extend img.emoji;
-      }
-    }
-
-    i {
-      margin-right: 7px;
-    }
-
-    ul li {
-      margin: 10px 0;
-    }
-
-    .image-container {
-      padding: 0 20px;
-      margin: 50px 0;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-
-      a {
-        cursor: pointer;
-      }
-
-      span {
-        display: block;
-        text-align: center;
-        max-width: 140px;
-        color: #333;
-      }
-
-      &.group {
-        padding: 0;
-        margin: 0;
-        width: 130px;
-        height: 130px;
-      }
-    }
-
-    img.large {
-      width: 150;
-      padding: 25px;;
-    }
-
-    img.small {
-      width: 100;
-      padding: 15px;
-    }
-
-    img.x-small {
-      width: 50px;
-      height: 50px;
-      padding: 3px;
-    }
-
-    label {
-      display: block;
-      text-align: center;
-    }
-
-    .inline-list > * {
-      display: inline-block;
-    }
-  }
-
-  .wizard-step-banner {
-    width: initial;
-    margin-bottom: 1em;
-
-    img {
-      max-height: 300px;
-    }
-  }
-
-  .wizard-step-form {
-    flex: auto;
-    display: flex;
-    flex-direction: column;
-    max-height: initial;
-    width: 100%;
-  }
-
-  .wizard-field {
-    margin-bottom: 1em;
-    
-    .field-label {
-      font-weight: 800;
-    }
-    
-    .field-image {
-      margin-bottom: 0.5em;
-      
-      img {
-        max-width: 100%;
-        max-height: 150px;
-      }
-    }
-
-    .field-description {
-      flex: 1;
-      color: #333;
-      margin-top: 0;
-
-      p {
-        margin: 0.3em 0;
-        line-height: 1.3em;
-      }
-
-      img {
-        height: 15px;
-        width: 15px;
-        margin: 0 5px;
-      }
-    }
-  }
-
-  .checkbox-field {
-    display: flex;
-    align-items: center;
-
-    &> .input-area {
-      order: 0;
-      margin: 15px 20px !important;
-
-      input {
-        cursor: pointer;
-        transform: scale(1.3);
-      }
-    }
-
-    &> label.field-label {
-      order: 1;
-      font-weight: 400;
-    }
-
-    &> .field-description {
-      margin-top: 0;
-      order: 2;
-    }
-  }
-
-  .url-field input {
-    width: 100%;
-    font-size: 1.1487em;
-    padding: 6px;
-    border: 1px solid #ccc;
-    transition: border-color 0.5s;
-  }
-
-  .control-group {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 10px;
-    margin-bottom: 20px;
-
-    .controls {
-      margin: 5px 0;
-    }
-
-    input {
-      width: 200px;
-      line-height: 24px;
-    }
-
-    input[disabled] {
-      background-color: #e9e9e9;
-      border: #e9e9e9;
-    }
-
-    ul {
-      padding: 0;
-    }
-
-    .select-kit {
-      min-width: 200px;
-    }
-  }
-
-  .wizard-step-form .wizard-btn {
-    display: block;
-    margin: 20px 0;
-  }
-
-  .wizard-image-row {
-
-    .wizard-btn-upload {
-      margin: 0;
-    }
-
-  }
-
-  .wizard-image-preview  {
-    margin-top: 10px;
-    max-width: 500px;
-    max-height: 500px;
-    overflow: hidden;
-    display: block;
-    border: none;
-    padding: 0;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-  .wizard-select-value img {
-    vertical-align: middle;
-  }
-
-  .wizard-field-upload {
-    .wizard-btn-upload-file {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-
-      input {
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .filename {
-      margin-left: 10px;
-    }
-  }
-
-  .wizard-column {
-    .wizard-field .input-area {
-      margin: 0.5em 0;
-    }
-
-    .wizard-column-contents h1 {
-      margin: 0
-    }
-  }
-
-  .combo-box {
-    ul {
-      padding: 0;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  .wizard-buttons > a, .wizard-buttons > button, .spinner {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .spinner.small {
-    margin-right: 10px;
-  }
-}
-
-input.date-picker {
-  font-size: 1.1487em;
-  padding: 6px;
-  border: 1px solid $primary;
-  transition: border-color 0.5s;
-}
-
-.pika-single.is-bound {
-  width: fit-content;
-  position: absolute !important;
-}
-
-.d-time-input .select-kit.combo-box .select-kit-header {
-  font-size: 1.1487em;
-  padding: 6px;
-}
-
-.d-date-time-input {
-  display: flex;
-}
-
-.step-message {
-  text-align: center;
-  transition: all .2s;
-  z-index: 2;
-  padding: 20px;
-
-  &.success {
-    background-color: #009900;
-    color: #ffffff;
-  }
-
-  &.error {
-    background-color: #e45735;
-    color: #ffffff;
-  }
-
-  &.not-permitted {
-    background-color: #e45735;
-    color: #ffffff;
-  }
-  
-  .text {
-    display: inline-block;
-  }
-  
-  .reset-wizard {
-    margin-top: 20px;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-}
-
-.spinner {
-  margin: 20px auto 20px auto;
-  position: relative;
-  -webkit-animation: rotate-forever 1s infinite linear;
-  animation: rotate-forever 1s infinite linear;
-  height: 30px;
-  width: 30px;
-  border: 4px solid #ccc;
-  border-right-color: transparent;
-  border-radius: 50%;
-
-  &.small {
-    width: 10px;
-    height: 10px;
-    margin: 0;
-    display: inline-block;
-  }
-}
-
-.wizard-field {
-  &.invalid{
-    textarea, input[type=text], input[type=checkbox], .select-kit {
-      padding: 3px;
-      border: 4px solid red;
-    }
-  }
-}
-
-@keyframes rotate-forever {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* IE11 hacks */
-
-@media all and (-ms-high-contrast:none)
-{
-  .custom-wizard {
-    div.wizard-step-contents {
-      display: block;
-    }
-
-    div.wizard-progress {
-      visibility: hidden;
-    }
-  }
-}
-
-// Badges
-
-@import 'wizard_variables';
-
-.badge-wrapper {
-  font-size: $font-down-1;
-  font-weight: bold;
-  white-space: nowrap;
-  position: relative;
-  display: inline-flex;
-  align-items: baseline;
-
-  .badge-category {
-    display: inline-flex;
-    align-items: baseline;
-    .category-name {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    .d-icon {
-      margin-right: 3px;
-      width: 0.74em;
-      height: 0.74em;
-      color: inherit;
-    }
-  }
-
-  &.bullet {
-    margin-right: 12px;
-    span.badge-category {
-      color: $primary-high;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      .extra-info-wrapper & {
-        color: $header-primary;
-      }
-    }
-    .badge-category-parent-bg,
-    .badge-category-bg {
-      flex: 0 0 auto;
-      width: 9px;
-      height: 9px;
-      margin-right: 5px;
-      display: inline-block;
-    }
-    .badge-category-parent-bg {
-      width: 5px;
-      margin-right: 0;
-      + .badge-category-bg {
-        width: 5px;
-      }
-    }
-    .d-icon {
-      color: $primary-medium;
-    }
-  }
-
-  &.box {
-    margin-right: 5px;
-    padding: 2px 4px 2px 4px;
-    display: inline-flex;
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      &.badge-category-bg,
-      &.badge-category-parent-bg {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-
-      &.badge-category-parent-bg {
-        width: calc(100% - 5px);
-        & + .badge-category-bg {
-          left: 5px;
-          width: calc(100% - 5px);
-          & + .badge-category {
-            margin-left: 5px;
-          }
-        }
-      }
-
-      &.badge-category {
-        position: relative;
-      }
-    }
-    + .topic-header-extra {
-      padding: 2px 4px 2px 4px;
-    }
-  }
-
-  &.bar {
-    margin-right: 5px;
-
-    span.badge-category {
-      color: $primary-high;
-      padding: 1px 3px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .extra-info-wrapper & {
-        color: $header-primary;
-      }
-    }
-
-    .badge-category-parent-bg,
-    .badge-category-bg {
-      display: inline-block;
-      padding: 0 1px;
-
-      &:before {
-        content: "\a0";
-      }
-    }
-  }
-
-  &.none {
-    color: $primary-high;
-    margin-right: 5px;
-  }
-}
-
-.list-controls {
-  .category-breadcrumb {
-    a.badge-category {
-      display: inline-block;
-      padding: 6px 8px;
-      line-height: $line-height-medium;
-    }
-  }
-}
-
-.select-kit.combo-box.group-dropdown {
-  min-width: 220px;
-}

assets/stylesheets/wizard/wizard_variables.scss

@@ -1,286 +0,0 @@
-$primary:           #222222 !default;
-$secondary:         #ffffff !default;
-$tertiary:          #0088cc !default;
-$quaternary:        #e45735 !default;
-$header_background: #ffffff !default;
-$header_primary:    #333333 !default;
-$highlight:         #ffff4d !default;
-$danger:            #e45735 !default;
-$success:           #009900 !default;
-$love:              #fa6c8d !default;
-
-// --------------------------------------------------
-// Variables from Discourse
-// --------------------------------------------------
-
-// Layout dimensions
-// --------------------------------------------------
-
-$small-width: 800px !default;
-$medium-width: 995px !default;
-$large-width: 1110px !default;
-
-$input-padding: 4px 10px;
-$topic-body-width: 690px;
-$topic-body-width-padding: 11px;
-$topic-avatar-width: 45px;
-
-// Brand color variables
-// --------------------------------------------------
-
-$google: #ffffff !default;
-$instagram: #e1306c !default;
-$facebook: #4267b2 !default;
-$cas: #70ba61 !default;
-$twitter: #1da1f2 !default;
-$github: #100e0f !default;
-
-// Badge color variables
-// --------------------------------------------------
-
-$gold: rgb(231, 195, 0) !default;
-$silver: #c0c0c0 !default;
-$bronze: #cd7f32 !default;
-
-// Fonts
-// --------------------------------------------------
-
-$base-font-size-smaller: 14px !default;
-$base-font-size: 15px !default;
-$base-font-size-larger: 17px !default;
-$base-font-size-largest: 19px !default;
-$base-font-family: Helvetica, Arial, sans-serif !default;
-
-// Font-size defintions, multiplier ^ (step / interval)
-$font-up-6: 2.296em;
-$font-up-5: 2em;
-$font-up-4: 1.7511em;
-$font-up-3: 1.5157em;
-$font-up-2: 1.3195em;
-$font-up-1: 1.1487em; // 2^(1/5)
-$font-0: 1em;
-$font-down-1: 0.8706em; // 2^(-1/5)
-$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
-$font-down-3: 0.6599em;
-$font-down-4: 0.5745em;
-$font-down-5: 0.5em;
-$font-down-6: 0.4355em;
-
-// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
-// with base at 15px, the below gives 16.05px
-$font-size-ios-input: 1.07em;
-
-// Common line-heights
-$line-height-small: 1;
-$line-height-medium: 1.2; // Headings or large text
-$line-height-large: 1.4; // Normal or small text
-
-// Z-index
-// --------------------------------------------------
-
-$z-layers: (
-  "max": 9999,
-  "modal": (
-    "tooltip": 1600,
-    "popover": 1500,
-    "dropdown": 1400,
-    "content": 1300,
-    "overlay": 1200
-  ),
-  "fullscreen": 1150,
-  "mobile-composer": 1100,
-  "ipad-header-nav": 1020,
-  "header": 1000,
-  "footer-nav": 900,
-  "tooltip": 600,
-  "composer": (
-    "dropdown": 700,
-    "tooltip": 600,
-    "popover": 500,
-    "content": 400
-  ),
-  "dropdown": 300,
-  "usercard": 200,
-  "timeline": 100,
-  "base": 1
-);
-
-@function map-has-nested-keys($map, $keys...) {
-  @each $key in $keys {
-    @if not map-has-key($map, $key) {
-      @return false;
-    }
-    $map: map-get($map, $key);
-  }
-  @return true;
-}
-
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}
-
-@function z($layers...) {
-  @if not map-has-nested-keys($z-layers, $layers...) {
-    @warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
-  }
-  @return map-deep-get($z-layers, $layers...);
-}
-
-// Box-shadow
-// --------------------------------------------------
-
-$box-shadow: (
-  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
-  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
-  "menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
-  "card": 0 4px 14px rgba(0, 0, 0, 0.15),
-  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
-  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
-  "footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
-  "kbd": (
-    0 2px 0 rgba(0, 0, 0, 0.2),
-    0 0 0 1px dark-light-choose(#fff, #000) inset
-  ),
-  "focus": 0 0 6px 0 $tertiary,
-  "focus-danger": 0 0 6px 0 $danger
-);
-
-@function shadow($key) {
-  @return map-get($box-shadow, $key);
-}
-
-// Color utilities
-// --------------------------------------------------
-
-// w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
-@function dc-color-brightness($color) {
-  @return (
-    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
-  );
-}
-
-// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
-@function srgb-scale($foreground, $background, $percent) {
-  $ratio: ($percent / 100%);
-  $iratio: 1 - $ratio;
-  $f_r2: red($foreground) * red($foreground);
-  $f_g2: green($foreground) * green($foreground);
-  $f_b2: blue($foreground) * blue($foreground);
-  $b_r2: red($background) * red($background);
-  $b_g2: green($background) * green($background);
-  $b_b2: blue($background) * blue($background);
-  $r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
-  $r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
-  $r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
-  $r_r: sqrt($r_r2);
-  $r_g: sqrt($r_g2);
-  $r_b: sqrt($r_b2);
-  @return rgb($r_r, $r_g, $r_b);
-}
-
-// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
-@function blend-primary-secondary($percent) {
-  @return srgb-scale($primary, $secondary, $percent);
-}
-
-@function dark-light-diff(
-  $adjusted-color,
-  $comparison-color,
-  $lightness,
-  $darkness
-) {
-  @if dc-color-brightness($adjusted-color) <
-    dc-color-brightness($comparison-color)
-  {
-    @return scale-color($adjusted-color, $lightness: $lightness);
-  } @else {
-    @return scale-color($adjusted-color, $lightness: $darkness);
-  }
-}
-@function dark-light-choose($light-theme-result, $dark-theme-result) {
-  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
-    @return $light-theme-result;
-  } @else {
-    @return $dark-theme-result;
-  }
-}
-
-// standard color transformations, use these if possible, and add any new dark-light-diffs here
-
-//primary
-$primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%);
-$primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
-$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
-$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
-$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
-$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
-
-//header_primary
-$header_primary-low: dark-light-diff(
-  $header_primary,
-  $header_background,
-  90%,
-  -78%
-);
-$header_primary-low-mid: dark-light-diff(
-  $header_primary,
-  $header_background,
-  70%,
-  -45%
-);
-
-$header_primary-medium: dark-light-diff(
-  $header_primary,
-  $header_background,
-  50%,
-  -35%
-);
-$header_primary-high: dark-light-diff(
-  $header_primary,
-  $header_background,
-  30%,
-  -25%
-);
-$header_primary-very-high: dark-light-diff(
-  $header_primary,
-  $header_background,
-  15%,
-  -10%
-);
-
-//secondary
-$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
-$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
-$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
-$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
-
-//tertiary
-$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
-$tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%);
-$tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%);
-
-//quaternary
-$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
-
-//highlight
-$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
-$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
-$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
-
-//danger
-$danger-low: dark-light-diff($danger, $secondary, 85%, -64%);
-$danger-medium: dark-light-diff($danger, $secondary, 30%, -35%);
-
-//success
-$success-low: dark-light-diff($success, $secondary, 80%, -60%);
-$success-medium: dark-light-diff($success, $secondary, 50%, -40%);
-
-//love
-$love-low: dark-light-diff($love, $secondary, 85%, -60%);
-
-//wiki
-$wiki: green;
-

plugin.rb

@@ -88,6 +88,14 @@ after_initialize do
     load File.expand_path(path, __FILE__)
   end
   
+  reloadable_patch do
+    full_path = File.dirname(@path) << "/assets/stylesheets/wizard/wizard_custom.scss"
+    DiscoursePluginRegistry.register_asset(full_path, {}, "wizard_custom")
+    Stylesheet::Importer.register_import("wizard_custom") do
+      import_files(DiscoursePluginRegistry.stylesheets["wizard_custom"])
+    end
+  end
+  
   add_class_method(:wizard, :user_requires_completion?) do |user|
     wizard_result = self.new(user).requires_completion?
     return wizard_result if wizard_result

views/layouts/wizard.html.erb

@@ -1,13 +1,7 @@
 <html>
   <head>
     <%= discourse_stylesheet_link_tag :wizard, theme_id: nil %>
-    <%= stylesheet_link_tag "wizard_autocomplete" %>
+    <%= discourse_stylesheet_link_tag :wizard_custom %>
-    <%= stylesheet_link_tag "wizard_custom" %>
-    <%= stylesheet_link_tag "wizard_composer" %>
-    <%= stylesheet_link_tag "wizard_variables" %>
-    <%= stylesheet_link_tag "wizard_custom_mobile" %>
-    <%= stylesheet_link_tag "wizard_locations"%>
-    <%= stylesheet_link_tag "wizard_events"%>
     <%- if theme_ids.present? %>
       <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %>
     <%- end %>