From 1156dd6f90c49203bb4ef3a45a41cb1f844c6328 Mon Sep 17 00:00:00 2001 From: gnezim Date: Mon, 20 Apr 2026 03:02:10 +0300 Subject: [PATCH] Replace hardcoded #6b7280/#1c2330/#8a8a8a greys with design tokens ($light-gray/$text-color) --- .../components/FlightsMapStartPage.scss | 2 +- .../components/OnlineBoardDetailsPage.scss | 14 +++++----- .../components/DayGroupedFlightList.scss | 4 +-- .../components/ScheduleDetailsPage.scss | 4 +-- .../schedule/components/ScheduleFilter.scss | 8 +++--- .../components/ScheduleFlightBody.scss | 26 +++++++++---------- .../components/ScheduleSearchPage.scss | 4 +-- .../schedule/components/WeekTabs.scss | 4 ++- src/ui/city-autocomplete/CityPickerPopup.scss | 4 ++- src/ui/layout/SearchHistory.scss | 8 +++--- 10 files changed, 41 insertions(+), 37 deletions(-) diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss index 4f551a44..73e716fe 100644 --- a/src/features/flights-map/components/FlightsMapStartPage.scss +++ b/src/features/flights-map/components/FlightsMapStartPage.scss @@ -261,7 +261,7 @@ background: transparent !important; border: 1px solid #e0e0e0 !important; border-left: none !important; - color: #6b7280 !important; + color: colors.$light-gray !important; box-shadow: none !important; } .flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:hover, diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss index 886509b2..6e73959d 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.scss +++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss @@ -127,7 +127,7 @@ &__duration { font-size: 12px; - color: #8a8a8a; + color: colors.$light-gray; } &__progress-labels { @@ -135,7 +135,7 @@ justify-content: space-between; width: 100%; font-size: 12px; - color: #8a8a8a; + color: colors.$light-gray; margin-top: 4px; } @@ -240,7 +240,7 @@ .flight-details { &__estimated-note { padding: 0 vars.$space-xl vars.$space-xl; - color: #8a8a8a; + color: colors.$light-gray; font-size: 12px; line-height: 1.5; } @@ -375,7 +375,7 @@ } &__time-label { - color: #8a8a8a; + color: colors.$light-gray; font-size: 12px; } @@ -385,12 +385,12 @@ } &__time-offset { - color: #8a8a8a; + color: colors.$light-gray; font-size: 11px; } &__time-date { - color: #8a8a8a; + color: colors.$light-gray; font-size: 11px; } @@ -400,7 +400,7 @@ &__footer-notes { padding: vars.$space-s vars.$space-xl vars.$space-xl; - color: #8a8a8a; + color: colors.$light-gray; font-size: 12px; line-height: 1.5; diff --git a/src/features/schedule/components/DayGroupedFlightList.scss b/src/features/schedule/components/DayGroupedFlightList.scss index c9d13430..f66a5bee 100644 --- a/src/features/schedule/components/DayGroupedFlightList.scss +++ b/src/features/schedule/components/DayGroupedFlightList.scss @@ -12,7 +12,7 @@ grid-template-columns: 80px 120px 100px minmax(80px, 1fr) 100px 100px minmax(80px, 1fr) 16px; gap: 16px; padding: 14px 24px; - color: #6b7280; + color: colors.$light-gray; font-size: 11px; font-weight: 500; text-transform: uppercase; @@ -80,7 +80,7 @@ } &__weekday { - color: #6b7280; + color: colors.$light-gray; font-size: 13px; text-transform: capitalize; } diff --git a/src/features/schedule/components/ScheduleDetailsPage.scss b/src/features/schedule/components/ScheduleDetailsPage.scss index f5b3bfbd..40909248 100644 --- a/src/features/schedule/components/ScheduleDetailsPage.scss +++ b/src/features/schedule/components/ScheduleDetailsPage.scss @@ -53,12 +53,12 @@ &__flight-number { font-size: 22px; font-weight: fonts.$font-medium; - color: #1c2330; + color: colors.$text-color; margin: 0; } &__status { - color: #6b7280; + color: colors.$light-gray; font-size: 14px; } diff --git a/src/features/schedule/components/ScheduleFilter.scss b/src/features/schedule/components/ScheduleFilter.scss index 16aca159..c723dd87 100644 --- a/src/features/schedule/components/ScheduleFilter.scss +++ b/src/features/schedule/components/ScheduleFilter.scss @@ -23,7 +23,7 @@ .label--filter { display: block; font-size: 12px; - color: #6b7280; + color: colors.$light-gray; margin-bottom: 4px; } @@ -60,7 +60,7 @@ padding: 4px 0; cursor: pointer; font-size: 13px; - color: #1c2330; + color: colors.$text-color; input[type="checkbox"] { width: 16px; @@ -85,12 +85,12 @@ .time-selector__label { font-size: 12px; - color: #6b7280; + color: colors.$light-gray; } .time-selector__value { font-size: 12px; - color: #1c2330; + color: colors.$text-color; font-weight: fonts.$font-medium; } diff --git a/src/features/schedule/components/ScheduleFlightBody.scss b/src/features/schedule/components/ScheduleFlightBody.scss index 7406429f..30a5b4e5 100644 --- a/src/features/schedule/components/ScheduleFlightBody.scss +++ b/src/features/schedule/components/ScheduleFlightBody.scss @@ -15,7 +15,7 @@ gap: 0 vars.$space-l; padding: vars.$space-l vars.$space-xl; font-size: 14px; - color: #1c2330; + color: colors.$text-color; } &__leg-number { @@ -32,7 +32,7 @@ } &__leg-flight-number { - color: #1c2330; + color: colors.$text-color; font-weight: fonts.$font-medium; } @@ -45,7 +45,7 @@ &__leg-aircraft { font-size: 11px; - color: #6b7280; + color: colors.$light-gray; } &__leg-time { @@ -70,7 +70,7 @@ padding-top: 6px; margin-top: 6px; text-align: center; - color: #6b7280; + color: colors.$light-gray; font-size: 13px; } @@ -88,7 +88,7 @@ margin-top: -8px; margin-bottom: -8px; font-size: 12px; - color: #1c2330; + color: colors.$text-color; &::after { content: ""; @@ -157,7 +157,7 @@ display: inline-flex; align-items: center; gap: 6px; - color: #6b7280; + color: colors.$light-gray; } &__actions { @@ -226,7 +226,7 @@ padding: vars.$space-l vars.$space-xl vars.$space-m; border-bottom: 1px solid colors.$border; background: #fff; - color: #1c2330; + color: colors.$text-color; } &__timeline-row { @@ -254,7 +254,7 @@ align-items: center; flex: 1 1 0; min-width: 60px; - color: #6b7280; + color: colors.$light-gray; font-size: 13px; position: relative; } @@ -275,7 +275,7 @@ border: 1px solid colors.$border; border-radius: 3px; background: #fff; - color: #1c2330; + color: colors.$text-color; font-size: 12px; font-weight: fonts.$font-medium; margin-bottom: 2px; @@ -283,14 +283,14 @@ &__timeline-section-dur { margin-top: 2px; - color: #6b7280; + color: colors.$light-gray; font-size: 12px; white-space: nowrap; } &__timeline-transit { flex-shrink: 0; - color: #1c2330; + color: colors.$text-color; font-weight: fonts.$font-medium; font-size: 13px; padding: 0 vars.$space-s; @@ -316,12 +316,12 @@ } &__timeline-station-city { - color: #1c2330; + color: colors.$text-color; font-weight: fonts.$font-medium; } &__timeline-station-terminal { - color: #6b7280; + color: colors.$light-gray; font-size: 12px; } } diff --git a/src/features/schedule/components/ScheduleSearchPage.scss b/src/features/schedule/components/ScheduleSearchPage.scss index f5d017dc..eb349d78 100644 --- a/src/features/schedule/components/ScheduleSearchPage.scss +++ b/src/features/schedule/components/ScheduleSearchPage.scss @@ -49,7 +49,7 @@ background: transparent; border: 0; border-right: 1px solid colors.$border; - color: #6b7280; + color: colors.$light-gray; font-size: 14px; font-weight: 500; cursor: pointer; @@ -71,7 +71,7 @@ } &__icon { - color: #6b7280; + color: colors.$light-gray; transition: color 120ms ease; fill: currentColor; diff --git a/src/features/schedule/components/WeekTabs.scss b/src/features/schedule/components/WeekTabs.scss index ddf65fec..80f3c0bd 100644 --- a/src/features/schedule/components/WeekTabs.scss +++ b/src/features/schedule/components/WeekTabs.scss @@ -1,3 +1,5 @@ +@use "../../../styles/colors" as colors; + .week-tabs { display: flex; align-items: stretch; @@ -10,7 +12,7 @@ &__nav { background: transparent; border: none; - color: #6b7280; + color: colors.$light-gray; font-size: 18px; width: 28px; cursor: pointer; diff --git a/src/ui/city-autocomplete/CityPickerPopup.scss b/src/ui/city-autocomplete/CityPickerPopup.scss index 2ffa9c08..cb1c9849 100644 --- a/src/ui/city-autocomplete/CityPickerPopup.scss +++ b/src/ui/city-autocomplete/CityPickerPopup.scss @@ -1,3 +1,5 @@ +@use "../../styles/colors" as colors; + .city-autocomplete-popup { position: absolute; width: 630px; @@ -94,7 +96,7 @@ margin-bottom: 8px; .city--item { - color: #8a8a8a; + color: colors.$light-gray; } } } diff --git a/src/ui/layout/SearchHistory.scss b/src/ui/layout/SearchHistory.scss index bc1785ee..528fb73a 100644 --- a/src/ui/layout/SearchHistory.scss +++ b/src/ui/layout/SearchHistory.scss @@ -91,7 +91,7 @@ &__icon { flex-shrink: 0; width: 24px; - color: #6b7280; + color: colors.$light-gray; display: flex; align-items: center; justify-content: center; @@ -108,18 +108,18 @@ &__title { font-size: 12px; - color: #6b7280; + color: colors.$light-gray; } &__city { font-size: 14px; font-weight: fonts.$font-medium; - color: #1c2330; + color: colors.$text-color; line-height: 1.2; } &__date { font-size: 12px; - color: #6b7280; + color: colors.$light-gray; } }