Migrate theming from subjects.scss to relevant files

Author: jacbn

src/scss/phy/button.scss

@@ -331,7 +331,7 @@ a.btn {
 }
 
 .quick-question-options {
-  background: rgba($secondary, 0.5);
+  background: color-mix(in srgb, var(--subject-color-500) 50%, transparent);
   border: 1px solid transparent;
   transition: opacity 0.2s linear;
 }

src/scss/phy/color-theme.scss

@@ -55,6 +55,9 @@
     --subject-color-800: #{map.get($subject-colors, 800)};
     --subject-color-900: #{map.get($subject-colors, 900)};
 
+    // ALERT
+    --alert-text-color: #{map.get($subject-colors, 900)};
+
     @if $palette == "neutral" {
       // neutral has some special cases
       --badges-light: #{$color-neutral-white};
@@ -69,6 +72,8 @@
       --nav-primary: #{$color-brand-500};
 
       --icon-primary: #{$color-brand-500};
+
+      --alert-text-color: #{$color-neutral-800};
     }
   }
 }
@@ -112,5 +117,28 @@
       @include svg-color(url("/assets/phy/icons/redesign/hexagon.svg"), var(--subject-color-200), 75px, 75px, 75px);
       position: absolute;
     }
+
+    .text-bg-theme {
+      @extend .text-bg-#{$palette};
+    }
+
+    .alert-secondary {
+      @extend .alert-#{$palette};
+      color: var(--alert-text-color);
+    }
   }
 }
+
+.text-theme {
+  color: var(--subject-color-500);
+
+  &a {
+    &:hover, &:focus {
+      color: var(--subject-color-600);
+    }
+  }
+}
+
+.border-theme {
+  border-color: var(--subject-color-500);
+}

src/scss/phy/forms.scss

@@ -44,3 +44,25 @@
 .search--filter-input {
   border: 1px solid $color-neutral-300;
 }
+
+.form-check-input {
+  width: 24px;
+  height: 24px;
+  transition: all 0.1s ease-in-out;
+  outline: none;
+  box-shadow: none;
+  &:checked {
+    border-color: var(--subject-color-500);
+    background-color: var(--subject-color-500);
+  }
+  &:focus {
+    border-color: var(--subject-color-500);
+    &:checked {
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
+    }
+  }
+  &:not(:disabled):active {
+    background-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
+    border-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
+  }
+}

src/scss/phy/hints.scss

@@ -7,17 +7,15 @@
     @include respond-below(xs) {padding-left: 0 !important; padding-right: 0 !important;}
   }
 
-  // Note: Colours are practically always overridden by subjects.scss.
-  // The following rule sets the default to be physics purple.
   li {
     .hint-tab-title {
-      color: $phy_physics !important;
+      color: var(--subject-color-500) !important;
     }
     &.active {
       .hint-tab-title {
         color: white !important;
-        background-color: $phy_physics !important;
+        background-color: var(--subject-color-500) !important;
       }
     }
-  }
+  }  
 }

src/scss/phy/isaac.scss

@@ -396,7 +396,6 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
 @import "../common/scroll-button";
 
 // Pages
-@import "subjects";
 @import "../common/pages";
 @import "homepage";
 @import "../common/login";

src/scss/phy/questions.scss

@@ -118,3 +118,42 @@
     border: solid 1px $black;
   }
 }
+
+.validation-response-panel {
+  .question-response {
+    font-family: desyrel, serif;
+    font-size: 36px;
+    font-weight: 600;
+  }
+  h1 {
+    font-family: desyrel, serif;
+    font-size: 48px;
+    font-weight: 700;
+  }
+  &.correct {
+    background: var(--subject-color-500);
+    color: white;
+    a {
+      color: white !important;
+    }
+  }
+  &.almost {
+    background: #ffb847;
+    color: #3c0000;
+  }
+}
+
+.numeric-question .unit-selection {
+  .display-unit {
+    opacity: 1 !important;
+  }
+  .dropdown-item {
+    &:active {
+      background-color: var(--subject-color-500);
+      color: white;
+    }
+    &:focus {
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
+    }
+  }
+}

src/scss/phy/search.scss

@@ -3,3 +3,7 @@
 .searchContextPicker {
     margin-right: -0.75rem;
 }
+
+svg.search-item-icon, svg.gameboard-item-icon {
+    fill: var(--subject-color-500);
+}