refactor: Replace with css variables if available

Author: clowreed

style/components/MobileOptionsPopover.scss

@@ -30,7 +30,7 @@
     padding: 12px;
     cursor: pointer;
     color: #585769;
-    border-bottom: 1px solid #d7d7de;
+    border-bottom: $ds-card-border;
 
     &:last-child {
       border-bottom: none;
@@ -101,7 +101,7 @@
     align-items: center;
     justify-content: flex-start;
     padding: 12px 16px;
-    border-bottom: 1px solid #d7d7de;
+    border-bottom: $ds-card-border;
   }
 
   &__title {

style/components/Popover.scss

@@ -9,7 +9,7 @@
   left: 0;
   margin-bottom: 8px;
   background: $ds-ui-lightest-color;
-  border: 1px solid #d7d7de;
+  border: $ds-card-border;
   border-radius: 6px;
   box-shadow: 0 12px 23.2px rgba(0, 0, 0, 0.05);
   padding: 0;

style/forms/PromptInput.scss

@@ -8,7 +8,7 @@
   flex-direction: column;
   align-items: flex-end;
   padding: 16px;
-  background: #fff;
+  background: $ds-ui-lightest-color;
   box-shadow: 0 12px 23.2px rgba(0, 0, 0, 0.05);
   flex: 1;
   position: relative;
@@ -24,7 +24,7 @@
     resize: none;
     border: 0;
     margin-bottom: 12px;
-    color: #110f33;
+    color: $ds-display-regular-color;
 
     @media (min-width: 768px) {
       max-height: 400px;
@@ -45,19 +45,19 @@
     }
 
     &::-webkit-scrollbar-thumb:hover {
-      background: #b3b3b3;
+      background: $ds-ui-darkest-color;
     }
 
     &:focus {
       outline: none;
     }
 
     &::placeholder {
-      color: #84839c;
+      color: $ds-body-lighter-color;
     }
 
     &:disabled {
-      background-color: #ffffff;
+      background-color: $ds-ui-lightest-color;
     }
   }