Replace custom brand hex with design tokens ($blue, $orange, $green, $red) across 13 SCSS files

src/features/online-board/components/BoardDetailsHeader/actions.scss

@@ -1,3 +1,5 @@
+@use "../../../../styles/colors" as colors;
+
 .flight-action-btn {
   padding: 8px 16px;
   border-radius: 6px;
@@ -13,30 +15,30 @@
   }
 
   &--orange {
-    background: #ff9000;
-    color: #fff;
+    background: colors.$orange;
+    color: colors.$white;
 
     &:hover:not(:disabled) {
-      background: #e68200;
+      background: colors.$orange--hover;
     }
   }
 
   &--blue-light {
-    background: #e3f0ff;
-    color: #1a3a5c;
+    background: colors.$blue-icon;
+    color: colors.$blue-dark;
 
     &:hover:not(:disabled) {
-      background: #c7dff5;
+      background: colors.$border-blue;
     }
   }
 
   &--transparent {
     background: transparent;
     padding: 8px;
-    color: #2060c0;
+    color: colors.$blue;
 
     &:hover:not(:disabled) {
-      background: rgba(32, 96, 192, 0.08);
+      background: rgba(27, 98, 180, 0.08);
     }
   }
 

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

@@ -22,7 +22,7 @@
     align-items: center;
 
     &:hover {
-      color: #2457ff;
+      color: colors.$blue;
     }
   }
 

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

@@ -35,7 +35,7 @@
     }
 
     &--selected {
-      box-shadow: inset 0 0 0 2px #2457ff;
+      box-shadow: inset 0 0 0 2px colors.$blue;
       background: colors.$blue-extra-light;
     }
   }
@@ -56,9 +56,9 @@
     display: inline-flex;
     font-size: 14px;
 
-    &--blue { color: #2457ff; }
-    &--green { color: #6da244; }
-    &--cancelled { color: #e55353; }
+    &--blue { color: colors.$blue; }
+    &--green { color: colors.$green; }
+    &--cancelled { color: colors.$red; }
   }
 
   &__times {

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

@@ -101,18 +101,18 @@
 
   &__center--finished {
     .leg-route__status-text {
-      color: #6da244;
+      color: colors.$green;
       text-align: right;
       align-self: flex-end;
     }
-    .leg-route__bar-inner { background: #6da244; }
-    .leg-route__plane-marker { color: #6da244; }
+    .leg-route__bar-inner { background: colors.$green; }
+    .leg-route__plane-marker { color: colors.$green; }
   }
 
   &__center--in-flight {
-    .leg-route__status-text { color: #6da244; }
-    .leg-route__bar-inner { background: #6da244; }
-    .leg-route__plane-marker { color: #6da244; }
+    .leg-route__status-text { color: colors.$green; }
+    .leg-route__bar-inner { background: colors.$green; }
+    .leg-route__plane-marker { color: colors.$green; }
   }
 
   &__center--progress {
@@ -120,9 +120,9 @@
   }
 
   &__center--cancelled {
-    .leg-route__status-text { color: #e55353; }
+    .leg-route__status-text { color: colors.$red; }
     .leg-route__bar { background: #fbd4d4; }
-    .leg-route__bar-inner { background: #e55353; }
+    .leg-route__bar-inner { background: colors.$red; }
   }
 
   &__duration {

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

@@ -21,7 +21,7 @@
     align-items: center;
 
     &:hover {
-      color: #2457ff;
+      color: colors.$blue;
     }
   }
 
@@ -105,7 +105,7 @@
   &__subtitle {
     font-size: 14px;
     font-weight: 600;
-    color: #2457ff;
+    color: colors.$blue;
     word-break: break-word;
   }
 
@@ -121,7 +121,7 @@
 
     &--inprogress,
     &--started {
-      color: #6da244;
+      color: colors.$green;
     }
 
     &--finished {
@@ -129,7 +129,7 @@
     }
 
     &--expected {
-      color: #2457ff;
+      color: colors.$blue;
     }
 
     &--specified {

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

@@ -1,3 +1,5 @@
+@use "../../../../styles/colors" as colors;
+
 .details-panel {
   padding: 12px 0;
   font-size: 14px;
@@ -41,7 +43,7 @@
   padding: 2px 8px;
   border-radius: 4px;
   background: #f0f4f8;
-  color: #2060c0;
+  color: colors.$blue;
   font-size: 12px;
 }
 
@@ -92,7 +94,7 @@
   }
 
   &__prop--link .aircraft-panel__value {
-    color: #2457ff;
+    color: colors.$blue;
   }
 }
 
@@ -108,7 +110,7 @@
   text-decoration: none;
 
   &:hover {
-    color: #2457ff;
+    color: colors.$blue;
   }
 
   img {

src/features/schedule/components/DayGroupedFlightList.scss

@@ -44,7 +44,7 @@
     border: 0;
     padding: 1px 2px;
     cursor: pointer;
-    color: #b3becd;
+    color: colors.$border-blue;
     line-height: 0;
     border-radius: 2px;
 

src/features/schedule/components/ScheduleFilter.scss

@@ -110,6 +110,6 @@
     cursor: pointer;
     transition: background-color 150ms ease;
 
-    &:hover { background: #1c45cc; }
+    &:hover { background: colors.$blue--hover; }
   }
 }

src/features/schedule/components/ScheduleFlightBody.scss

@@ -111,7 +111,7 @@
     svg {
       width: 20px;
       height: 7px;
-      fill: #ff9000;
+      fill: colors.$orange;
     }
   }
 
@@ -192,7 +192,7 @@
   }
 
   &__buy-btn {
-    background: #ff9000;
+    background: colors.$orange;
     color: #fff;
     border: none;
     border-radius: 4px;
@@ -218,7 +218,7 @@
     min-width: 150px;
     transition: background-color 150ms ease;
 
-    &:hover { background: #1c45cc; }
+    &:hover { background: colors.$blue--hover; }
   }
 
   // ----- horizontal timeline (route summary) -----------------------------

src/ui/city-autocomplete/CityAutocomplete.scss

@@ -61,7 +61,7 @@
   }
 
   &__input--has-error {
-    box-shadow: 0 0 0 1px #e55353;
+    box-shadow: 0 0 0 1px colors.$red;
   }
 
   &__search-button {
@@ -79,7 +79,7 @@
     &::before {
       content: "▾";
       display: inline-block;
-      color: #2457ff;
+      color: colors.$blue;
     }
 
     &:hover {
@@ -125,7 +125,7 @@
 }
 
 .tooltip {
-  color: #e55353;
+  color: colors.$red;
   font-size: 12px;
   margin-bottom: 4px;
 }

src/ui/city-autocomplete/CityPickerPopup.scss

@@ -20,7 +20,7 @@
       background-color: #f3f9ff;
       border: none;
       border-right: 1px solid colors.$border-input;
-      color: #2457ff;
+      color: colors.$blue;
       font-weight: 700;
       font-size: 14px;
       cursor: pointer;

src/ui/flights/FlightCard.scss

@@ -196,9 +196,9 @@
     // Angular shows a leading dot whose colour matches the boarding state.
     // Default is grey ('Уточняется' / 'Запланирован'); active states get
     // coloured dots.
-    &--finished .flight-card__status-dot { background: #41b04c; }
-    &--inprogress .flight-card__status-dot { background: #2060c0; }
-    &--expected .flight-card__status-dot { background: #ff9000; }
+    &--finished .flight-card__status-dot { background: colors.$green; }
+    &--inprogress .flight-card__status-dot { background: colors.$blue; }
+    &--expected .flight-card__status-dot { background: colors.$orange; }
     &--specified .flight-card__status-dot { background: #8a8a8a; }
     &--scheduled .flight-card__status-dot { background: #8a8a8a; }
   }
@@ -258,7 +258,7 @@
   }
 
   &__buy-btn {
-    background: #ff9000;
+    background: colors.$orange;
     color: #fff;
     border: none;
     border-radius: 4px;
@@ -284,7 +284,7 @@
     transition: background-color 150ms ease;
 
     &:hover {
-      background: #1c45cc;
+      background: colors.$blue--hover;
     }
   }
 

src/ui/flights/FlightStatus.scss

@@ -26,11 +26,11 @@
 
   // Mirror the icon colour on the label so "Отменен"/"Прибыл"/"В полете"
   // read at a glance (Angular does the same).
-  &--cancelled &__label { color: #e55353; }
+  &--cancelled &__label { color: colors.$red; }
   &--arrived &__label,
-  &--landed &__label { color: #6da244; }
+  &--landed &__label { color: colors.$green; }
   &--in-flight &__label,
-  &--departed &__label { color: #2457ff; }
+  &--departed &__label { color: colors.$blue; }
   &--delayed &__label { color: #f29f3a; }
 
   &__content {