Final token sweep: pastel blues, blues, greys to design tokens (8 files)

src/features/online-board/components/DayTabs/DayTabs.scss

@@ -52,13 +52,13 @@
   align-items: center;
   justify-content: center;
   padding: 16px 0 15px;
-  background: #f3f9ff;
-  color: #1b62b4;
+  background: colors.$blue-extra-light;
+  color: colors.$blue;
   font-size: 12px;
   font-weight: 500;
   border: 0;
-  border-right: 1px solid #d1dcea;
-  border-bottom: 1px solid #d1dcea;
+  border-right: 1px solid colors.$border;
+  border-bottom: 1px solid colors.$border;
   cursor: pointer;
   text-align: center;
   white-space: nowrap;

src/features/online-board/components/OnlineBoardSearchPage.scss

@@ -42,7 +42,7 @@
 
   &__error-message {
     margin: 0 0 vars.$space-xl;
-    color: #666;
+    color: colors.$light-gray;
     font-size: 14px;
   }
 

src/features/online-board/components/details-panels/panels.scss

@@ -26,16 +26,16 @@
 
 .details-panel--table {
   .details-panel__row {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid colors.$border;
   }
 }
 
 .details-panel__label {
-  color: #666;
+  color: colors.$light-gray;
 }
 
 .details-panel__value {
-  color: #000;
+  color: colors.$blue-dark;
   font-weight: 500;
 }
 
@@ -43,7 +43,7 @@
   display: inline-block;
   padding: 2px 8px;
   border-radius: vars.$border-radius;
-  background: #f0f4f8;
+  background: colors.$blue-extra-light;
   color: colors.$blue;
   font-size: 12px;
 }
@@ -82,7 +82,7 @@
 
   &__label {
     font-size: 12px;
-    color: #657282;
+    color: colors.$light-gray;
   }
 
   // Aircraft property values ('Салехард', '87', '75', '12'). Angular
@@ -91,7 +91,7 @@
   &__value {
     font-size: 16px;
     font-weight: 500;
-    color: #333;
+    color: colors.$text-color;
   }
 
   &__prop--link .aircraft-panel__value {
@@ -107,7 +107,7 @@
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: #4a90e2;
+  color: colors.$blue-light;
   text-decoration: none;
 
   &:hover {

src/features/schedule/components/ScheduleFlightBody.scss

@@ -203,7 +203,7 @@
     min-width: 150px;
     transition: background-color 150ms ease;
 
-    &:hover { background: #e68200; }
+    &:hover { background: colors.$orange--hover; }
   }
 
   &__status-btn {

src/features/schedule/components/ScheduleStartPage.scss

@@ -151,7 +151,7 @@
       -webkit-appearance: none;
       width: 18px;
       height: 18px;
-      border: 1.5px solid #d0d5dd;
+      border: 1.5px solid colors.$border;
       border-radius: 3px;
       background: colors.$white;
       position: relative;

src/features/schedule/components/WeekTabs.scss

@@ -43,19 +43,19 @@
     background: transparent;
     border: none;
     font-size: 13px;
-    color: #1f6fb8;
+    color: colors.$blue;
     cursor: pointer;
     border-radius: vars.$border-radius;
     white-space: nowrap;
     transition: background 120ms;
 
-    &:hover { background: #e8f0fa; }
+    &:hover { background: colors.$blue-extra-light; }
 
     &--active {
       background: colors.$white;
       color: colors.$blue-dark;
       font-weight: 600;
-      box-shadow: inset 0 -2px 0 #2563eb;
+      box-shadow: inset 0 -2px 0 colors.$blue;
       cursor: default;
     }
   }

src/ui/city-autocomplete/CityAutocomplete.scss

@@ -88,7 +88,7 @@
     }
 
     &--opened {
-      background-color: #eef3ff !important;
+      background-color: colors.$blue-extra-light !important;
     }
   }
 }

src/ui/city-autocomplete/CityPickerPopup.scss

@@ -18,7 +18,7 @@
     .tab-button {
       flex-grow: 1;
       padding: 10px;
-      background-color: #f3f9ff;
+      background-color: colors.$blue-extra-light;
       border: none;
       border-right: 1px solid colors.$border-input;
       color: colors.$blue;
@@ -30,11 +30,11 @@
 
       &.active {
         background-color: #ffffff;
-        color: #333;
+        color: colors.$text-color;
       }
 
       &:hover {
-        background-color: #e8f1ff;
+        background-color: colors.$blue-extra-light;
       }
     }
   }
@@ -83,11 +83,11 @@
           border-radius: vars.$border-radius;
           transition-duration: 0.1s;
 
-          &:hover { background-color: #f3f9ff; }
+          &:hover { background-color: colors.$blue-extra-light; }
         }
 
         &.city-active .city--item {
-          background-color: #dfe8ff;
+          background-color: colors.$blue-icon;
         }
 
         .airports-column {
@@ -105,7 +105,7 @@
   }
 
   .city-autocomplete-popup-footer {
-    background: #f3f9ff;
+    background: colors.$blue-extra-light;
     border-top: 1px solid colors.$border-input;
 
     .gps-contaner {