Merge pull request #8687 from jrjohnson/replace-color-variables

Replace sass Color Variables with css Custom Properties

Author: dartajax

packages/frontend/app/styles/components/api-version-check.scss

@@ -1,10 +1,6 @@
 @use "../ilios-common/colors" as c;
 @use "../ilios-common/mixins" as m;
 
-.api-version-check-warning {
-  background-color: rgba(c.$orange, 0.95);
-}
-
 .api-version-check-container {
   width: 80%;
 

packages/frontend/app/styles/components/bulk-new-users.scss

@@ -52,8 +52,8 @@
       overflow-y: scroll;
 
       .error {
-        border: 1px solid c.$crimson;
-        color: c.$crimson;
+        border: 1px solid var(--crimson);
+        color: var(--crimson);
       }
 
       table {
@@ -72,13 +72,13 @@
 
   .saving-user-errors,
   .saving-authentication-errors {
-    border: 1px solid c.$crimson;
-    border-top: 10px solid c.$crimson;
+    border: 1px solid var(--crimson);
+    border-top: 10px solid var(--crimson);
     margin: 1rem 4rem;
     padding: 0 1rem 1rem;
 
     p {
-      color: c.$crimson;
+      color: var(--crimson);
     }
 
     li {

packages/frontend/app/styles/components/connection-status.scss

@@ -3,7 +3,7 @@
 
 .connection-status {
   $height: 2.5rem;
-  @include m.critical-notice(c.$gold, c.$raisinBlack, $height);
+  @include m.critical-notice(var(--gold), var(--raisin-black), $height);
 
   display: none;
 
@@ -20,9 +20,9 @@
     height: $height;
 
     button {
-      background-color: c.$raisinBlack;
+      background-color: var(--raisin-black);
       border: 0;
-      color: c.$white;
+      color: var(--white);
       display: inline-block;
       height: 100%;
     }

packages/frontend/app/styles/components/course-director-manager.scss

@@ -7,14 +7,14 @@
     justify-content: flex-end;
 
     .bigadd {
-      background-color: c.$fernGreen;
-      color: c.$white;
+      background-color: var(--fern-green);
+      color: var(--white);
       margin-right: 0.25rem;
     }
 
     .bigcancel {
-      background-color: c.$crimson;
-      color: c.$white;
+      background-color: var(--crimson);
+      color: var(--white);
     }
   }
 

packages/frontend/app/styles/components/course-search-result.scss

@@ -6,21 +6,21 @@
   padding: 0.5rem 0;
 
   .course-flag {
-    background: c.$fernGreen;
+    background: var(--fern-green);
     border-radius: 2px;
     bottom: 2px;
-    color: c.$white;
+    color: var(--white);
     display: inline-block;
     @include m.font-size("smallest");
     padding: 2px 3px 1px;
     position: relative;
   }
 
   .school-flag {
-    background: c.$fernGreen;
+    background: var(--fern-green);
     border-radius: 2px;
     bottom: 2px;
-    color: c.$white;
+    color: var(--white);
     display: inline-block;
     @include m.font-size("smallest");
     padding: 2px 3px 1px;
@@ -32,7 +32,7 @@
     padding: 0.25rem 0.75rem 0;
 
     .sessions {
-      color: c.$davysGrey;
+      color: var(--davys-grey);
       @include m.font-size("small");
     }
   }
@@ -58,10 +58,10 @@
     overflow: hidden;
 
     .global-search-tag {
-      background: c.$slightWhite;
-      border: 1px solid c.$davysGrey;
+      background: var(--slight-white);
+      border: 1px solid var(--davys-grey);
       border-radius: 0.125rem;
-      color: c.$raisinBlack;
+      color: var(--raisin-black);
       display: inline-block;
       @include m.font-size("smallest");
       margin-right: 0.375rem;

packages/frontend/app/styles/components/courses/loading.scss

@@ -5,6 +5,6 @@
   .toggle-mycourses .toggle-buttons label {
     @include cm.loading-text;
     cursor: default;
-    background-color: c.$culturedGrey;
+    background-color: var(--cultured-grey);
   }
 }

packages/frontend/app/styles/components/courses/new.scss

@@ -2,8 +2,8 @@
 @use "../../ilios-common/mixins" as m;
 
 .courses-new {
-  background-color: c.$slightWhite;
-  border: 1px solid c.$culturedGrey;
+  background-color: var(--slight-white);
+  border: 1px solid var(--cultured-grey);
   margin: 0.5rem 0;
   padding: 1rem;
 

packages/frontend/app/styles/components/curriculum-inventory/new-report.scss

@@ -2,8 +2,8 @@
 @use "../../ilios-common/mixins" as m;
 
 .curriculum-inventory-new-report {
-  background-color: c.$slightWhite;
-  border: 1px solid c.$culturedGrey;
+  background-color: var(--slight-white);
+  border: 1px solid var(--cultured-grey);
   margin: 0.5rem 0;
   padding: 1rem;
 

packages/frontend/app/styles/components/curriculum-inventory/new-sequence-block.scss

@@ -2,8 +2,8 @@
 @use "../../ilios-common/mixins" as m;
 
 .curriculum-inventory-new-sequence-block {
-  background-color: c.$slightWhite;
-  border: 1px solid c.$culturedGrey;
+  background-color: var(--slight-white);
+  border: 1px solid var(--cultured-grey);
   margin: 0.5rem 0;
   padding: 1rem;
 

packages/frontend/app/styles/components/curriculum-inventory/report-details.scss

@@ -2,18 +2,18 @@
 @use "../../ilios-common/mixins" as m;
 
 .curriculum-inventory-report-details {
-  @include m.detail-container(c.$orange);
+  @include m.detail-container(var(--orange));
   margin: 0 0.5rem;
 
   .title {
     @include m.detail-container-title;
   }
 
   .confirm-finalize {
-    background-color: c.$lavenderBlush;
+    background-color: var(--lavender-blush);
 
     .confirm-message {
-      color: c.$rosewood;
+      color: var(--rosewood);
       font-weight: bold;
       padding: 1rem 10%;
       text-align: center;
@@ -24,12 +24,12 @@
     }
 
     .finalize {
-      background-color: c.$white;
-      color: c.$rosewood;
+      background-color: var(--white);
+      color: var(--rosewood);
 
       &:hover {
-        background-color: c.$crimson;
-        color: c.$white;
+        background-color: var(--crimson);
+        color: var(--white);
       }
     }
   }