From ce9c8c0f4579556f8a80f03bb445c023a5715ea8 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 13 Jul 2026 12:37:38 +0300 Subject: [PATCH] Use palette variables for file-browser and generic related components Replace hard-coded color literals with the shared palette tokens across the file-browser and core/nav component styles: $PR-blue (legacy) -> $PR-blue-900, $white/white -> $PR-brand-white, #000/$black -> $PR-brand-black (including rgba(0,0,0,...) shadows -> rgba($PR-brand-black, ...)), and rgba(100,100,100,1) -> rgba($gray-dark, 1). Values are unchanged, so there is no visual difference. Issue: PER-10633 --- .../left-menu/left-menu.component.scss | 32 +++++++++---------- .../multi-select-status.component.scss | 2 +- .../core/components/nav/nav.component.scss | 12 +++---- .../edit-date-time-modal.component.scss | 30 ++++++++--------- .../edit-tags/edit-tags.component.scss | 6 ++-- .../file-list-controls.component.scss | 8 ++--- .../file-list-item.component.scss | 14 ++++---- .../file-list/file-list.component.scss | 2 +- .../file-viewer/file-viewer.component.scss | 6 ++-- .../location-picker.component.scss | 6 ++-- .../share-link-dropdown.component.scss | 14 ++++---- .../sharing-dialog.component.scss | 4 +-- .../components/sharing/sharing.component.scss | 2 +- .../sidebar-date-picker.component.scss | 22 ++++++------- 14 files changed, 81 insertions(+), 79 deletions(-) diff --git a/src/app/core/components/left-menu/left-menu.component.scss b/src/app/core/components/left-menu/left-menu.component.scss index b317f1aec..329fd09ad 100644 --- a/src/app/core/components/left-menu/left-menu.component.scss +++ b/src/app/core/components/left-menu/left-menu.component.scss @@ -4,11 +4,11 @@ $transition-length: $default-transition-length; $left-menu-icon-width: 3 * $grid-unit; -$hover-color: lighten($PR-blue, 4%); +$hover-color: lighten($PR-blue-900, 4%); $active-color: $PR-orange; $active-indicator-color: lighten($active-color, 7%); -$archive-options-shadow-color: rgba($black, 0.1); +$archive-options-shadow-color: rgba($PR-brand-black, 0.1); $archive-options-shadow-spread: $grid-unit * 0.25; $archive-options-shadow-offset: 0.5rem; @@ -23,8 +23,8 @@ $archive-options-shadow-offset: 0.5rem; width: $left-menu-width; max-width: 80%; transform: translateX(-100%); - background-color: $PR-blue; - color: white; + background-color: $PR-blue-900; + color: $PR-brand-white; max-height: 100vh; display: flex; flex-direction: column; @@ -37,7 +37,7 @@ $archive-options-shadow-offset: 0.5rem; width: 180px; height: 1px; margin: 0 auto; - border-top: solid 1px rgba(255, 255, 255, 0.15); + border-top: solid 1px rgba($PR-brand-white, 0.15); } .apps-menu { @@ -97,14 +97,14 @@ $archive-options-shadow-offset: 0.5rem; line-height: $btn-line-height; cursor: pointer; user-select: none; - color: white; + color: $PR-brand-white; font-weight: 700; text-decoration: none; transition: background-color $transition-length * 0.25 ease-in; a { - color: white; + color: $PR-brand-white; text-decoration: none; } @@ -165,7 +165,7 @@ $archive-options-shadow-offset: 0.5rem; } .submenu { - background: $PR-blue; + background: $PR-blue-900; .submenu-item { font-size: $font-size-sm; @@ -176,7 +176,7 @@ $archive-options-shadow-offset: 0.5rem; display: flex; align-items: center; justify-content: flex-start; - color: white; + color: $PR-brand-white; text-decoration: none; & span { @@ -192,7 +192,7 @@ $archive-options-shadow-offset: 0.5rem; } &:hover { - background: darken($PR-blue, 7%); + background: darken($PR-blue-900, 7%); text-decoration: none; } } @@ -224,7 +224,7 @@ $archive-options-shadow-offset: 0.5rem; padding: 0; position: relative; outline: none !important; - background-color: $PR-blue; + background-color: $PR-blue-900; z-index: 3; .archive { @@ -295,7 +295,7 @@ $archive-options-shadow-offset: 0.5rem; align-items: center; justify-content: center; cursor: pointer; - background-color: $PR-blue; + background-color: $PR-blue-900; transition: background-color $transition-length * 0.25 ease-in; &:hover { @@ -308,10 +308,10 @@ $archive-options-shadow-offset: 0.5rem; .archive-options { display: initial; flex: 0 0 auto; - background-color: $PR-blue; + background-color: $PR-blue-900; hr { margin: $grid-unit * 0.5; - border-color: white; + border-color: $PR-brand-white; } overflow-y: hidden; } @@ -324,12 +324,12 @@ $archive-options-shadow-offset: 0.5rem; align-items: center; font-size: $font-size-sm; user-select: none; - color: white; + color: $PR-brand-white; text-decoration: none; &:hover:not(.active) { text-decoration: none; - background-color: lighten($PR-blue, 4%); + background-color: lighten($PR-blue-900, 4%); } &.active { diff --git a/src/app/core/components/multi-select-status/multi-select-status.component.scss b/src/app/core/components/multi-select-status/multi-select-status.component.scss index 687fe61c8..aa73a96ea 100644 --- a/src/app/core/components/multi-select-status/multi-select-status.component.scss +++ b/src/app/core/components/multi-select-status/multi-select-status.component.scss @@ -9,7 +9,7 @@ display: flex; align-items: center; background-color: $PR-orange; - color: white; + color: $PR-brand-white; transition: transform $default-transition-length ease-in; padding: 0px 10px; diff --git a/src/app/core/components/nav/nav.component.scss b/src/app/core/components/nav/nav.component.scss index ff7526fe6..77a247cfd 100644 --- a/src/app/core/components/nav/nav.component.scss +++ b/src/app/core/components/nav/nav.component.scss @@ -6,7 +6,7 @@ left: 0; right: 0; z-index: $z-index-nav; - background-color: $white; + background-color: $PR-brand-white; box-shadow: $box-shadow-sm; @include after($tablet-horizontal) { @@ -22,10 +22,10 @@ nav.navbar { padding: 0 0.5rem; - color: white; + color: $PR-brand-white; height: $navbar-height; align-items: center; - background-color: $PR-blue; + background-color: $PR-blue-900; &.nav-desktop { display: none; @@ -116,7 +116,7 @@ nav.nav-desktop { .nav-buttons { margin-left: $grid-unit; - color: white; + color: $PR-brand-white; display: flex; align-items: center; @@ -127,8 +127,8 @@ nav.nav-desktop { border-radius: 50%; width: $button-size; height: $button-size; - background-color: white; - color: $PR-blue; + background-color: $PR-brand-white; + color: $PR-blue-900; text-align: center; line-height: $button-size; font-weight: bold; diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss index 228f72fda..628a98be2 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss @@ -2,10 +2,10 @@ @import 'mixins'; .pr-edit-date-time-dialog { - background: $white; + background: $PR-brand-white; border-radius: 12px; min-width: 658px; - box-shadow: 0 8px 32px rgba($black, 0.12); + box-shadow: 0 8px 32px rgba($PR-brand-black, 0.12); font-family: 'Inter', sans-serif; // Header @@ -21,7 +21,7 @@ margin: 0; font-size: 18px; font-weight: 600; - color: $PR-blue; + color: $PR-blue-900; } .pr-close-button { @@ -35,7 +35,7 @@ font-size: 20px; &:hover { - color: $PR-blue; + color: $PR-blue-900; } } } @@ -57,7 +57,7 @@ padding: 20px; border: 1px solid $PR-blue-100; border-radius: 12px; - background: $white; + background: $PR-brand-white; } .pr-card-header { @@ -99,7 +99,7 @@ span { font-size: 14px; - color: $PR-blue; + color: $PR-blue-900; white-space: nowrap; } } @@ -153,7 +153,7 @@ width: 18px; left: 3px; bottom: 3px; - background-color: $white; + background-color: $PR-brand-white; border-radius: 50%; transition: 0.2s; } @@ -185,7 +185,7 @@ border: none; cursor: pointer; padding: 4px; - color: $PR-blue; + color: $PR-blue-900; display: flex; align-items: center; margin-left: auto; @@ -203,7 +203,7 @@ > span { font-size: 14px; - color: $PR-blue; + color: $PR-blue-900; } } @@ -230,8 +230,8 @@ letter-spacing: 0.16em; text-align: center; text-transform: uppercase; - color: $PR-blue; - background: $white; + color: $PR-blue-900; + background: $PR-brand-white; border-radius: 4px; padding: 0 8px; height: 20px; @@ -270,10 +270,10 @@ padding: 16px 24px; border: none; border-radius: 6px; - background: $white; + background: $PR-brand-white; font-size: 14px; font-weight: 500; - color: $PR-blue; + color: $PR-blue-900; cursor: pointer; height: 40px; display: flex; @@ -286,10 +286,10 @@ padding: 16px 24px; border: none; border-radius: 6px; - background: $PR-blue; + background: $PR-blue-900; font-size: 14px; font-weight: 500; - color: $white; + color: $PR-brand-white; cursor: pointer; height: 40px; display: flex; diff --git a/src/app/file-browser/components/edit-tags/edit-tags.component.scss b/src/app/file-browser/components/edit-tags/edit-tags.component.scss index 3e9d91eca..8c30b3c84 100644 --- a/src/app/file-browser/components/edit-tags/edit-tags.component.scss +++ b/src/app/file-browser/components/edit-tags/edit-tags.component.scss @@ -6,7 +6,7 @@ display: block; flex: 1; max-width: 100%; - background-color: white; + background-color: $PR-brand-white; &.is-waiting { opacity: 0.5; @@ -88,7 +88,7 @@ height: $multi-select-radius * math.div(2, 3); width: $multi-select-radius * math.div(2, 3); border-radius: 50%; - background: $PR-blue; + background: $PR-blue-900; opacity: 0; } @@ -122,7 +122,7 @@ .manage-tags-link { font-weight: 600; - color: black; + color: $PR-brand-black; text-decoration: underline; cursor: pointer; } diff --git a/src/app/file-browser/components/file-list-controls/file-list-controls.component.scss b/src/app/file-browser/components/file-list-controls/file-list-controls.component.scss index d16b409aa..619a7e1ae 100644 --- a/src/app/file-browser/components/file-list-controls/file-list-controls.component.scss +++ b/src/app/file-browser/components/file-list-controls/file-list-controls.component.scss @@ -177,7 +177,7 @@ pr-folder-view-toggle { flex: 1 1 auto; display: flex; align-items: center; - background-color: white; + background-color: $PR-brand-white; padding-left: 5px; &.visible { @@ -237,8 +237,8 @@ pr-folder-view-toggle { .download-options { box-shadow: - 0px 2px 2px rgba(0, 0, 0, 0.24), - 0px 0px 2px rgba(0, 0, 0, 0.12); + 0px 2px 2px rgba($PR-brand-black, 0.24), + 0px 0px 2px rgba($PR-brand-black, 0.12); border-radius: 2px; width: 211px; height: auto; @@ -247,7 +247,7 @@ pr-folder-view-toggle { display: flex; flex-direction: column; justify-content: center; - background-color: white; + background-color: $PR-brand-white; margin-left: 7rem; z-index: 1000; diff --git a/src/app/file-browser/components/file-list-item/file-list-item.component.scss b/src/app/file-browser/components/file-list-item/file-list-item.component.scss index 5d1337501..528b4f05f 100644 --- a/src/app/file-browser/components/file-list-item/file-list-item.component.scss +++ b/src/app/file-browser/components/file-list-item/file-list-item.component.scss @@ -65,13 +65,13 @@ $bg-transition-length: 0.075s; cursor: pointer; user-select: none; transition: background-color $bg-transition-length $tweaked-ease; - background-color: rgba(white, 0); + background-color: rgba($PR-brand-white, 0); overflow-y: hidden; min-height: $row-height; &.grid-view { border-bottom: none; - background-color: white; + background-color: $PR-brand-white; flex-wrap: wrap; padding-bottom: $grid-info-section-height; position: relative; @@ -177,7 +177,7 @@ $bg-transition-length: 0.075s; height: $grid-info-section-height; position: absolute; bottom: 0px; - background: white; + background: $PR-brand-white; left: 0; right: 0; min-width: 0; @@ -314,7 +314,7 @@ $bg-transition-length: 0.075s; } & fa-icon { - color: #000; + color: $PR-brand-black; font-size: 2em; } } @@ -329,7 +329,7 @@ $bg-transition-length: 0.075s; position: absolute; bottom: $grid-info-section-height + $margin; right: $margin; - background: white; + background: $PR-brand-white; height: $diameter; width: $diameter; border-radius: 50%; @@ -340,7 +340,7 @@ $bg-transition-length: 0.075s; box-shadow: $box-shadow-sm; .material-icons { - color: $PR-blue; + color: $PR-blue-900; font-size: $mat-icon-sm; transition: color $bg-transition-length $tweaked-ease; } @@ -401,7 +401,7 @@ $multi-select-radius: 30px; position: absolute; top: 50%; left: 50%; - background: $PR-blue; + background: $PR-blue-900; transform: translate(-50%, -50%); } } diff --git a/src/app/file-browser/components/file-list/file-list.component.scss b/src/app/file-browser/components/file-list/file-list.component.scss index 5b17410ce..bf98d73d9 100644 --- a/src/app/file-browser/components/file-list/file-list.component.scss +++ b/src/app/file-browser/components/file-list/file-list.component.scss @@ -50,6 +50,6 @@ z-index: 10; opacity: 1; transition: opacity 0.25s $tweaked-ease; - background: rgba(white, 0.7); + background: rgba($PR-brand-white, 0.7); } } diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.scss b/src/app/file-browser/components/file-viewer/file-viewer.component.scss index 27fc08dea..2ef1db898 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.scss +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.scss @@ -13,7 +13,7 @@ $button-size: 2rem; bottom: 0; left: 0; right: 0; - background-color: white; + background-color: $PR-brand-white; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); @@ -21,7 +21,7 @@ $button-size: 2rem; transform: translate3d(0, 0, 0); &.minimal { - background-color: black; + background-color: $PR-brand-black; .file-viewer-close { transform: translateY(-100%); } @@ -132,7 +132,7 @@ iframe { font-size: 24px; font-weight: bold; z-index: 2; - color: white; + color: $PR-brand-white; cursor: pointer; display: flex; diff --git a/src/app/file-browser/components/location-picker/location-picker.component.scss b/src/app/file-browser/components/location-picker/location-picker.component.scss index fd83122c1..d3ce861f1 100644 --- a/src/app/file-browser/components/location-picker/location-picker.component.scss +++ b/src/app/file-browser/components/location-picker/location-picker.component.scss @@ -4,7 +4,7 @@ display: block; flex: 1; max-width: 100%; - background-color: white; + background-color: $PR-brand-white; } .map-wrapper { @@ -19,7 +19,7 @@ left: 5px; padding: 0.5rem; max-width: 15rem; - background: white; + background: $PR-brand-white; font-size: $font-size-sm; box-shadow: $box-shadow-sm; } @@ -52,5 +52,5 @@ // } // } .dialog-content { - background-color: white; + background-color: $PR-brand-white; } diff --git a/src/app/file-browser/components/share-link-dropdown/share-link-dropdown.component.scss b/src/app/file-browser/components/share-link-dropdown/share-link-dropdown.component.scss index a2779d800..f9e8789e4 100644 --- a/src/app/file-browser/components/share-link-dropdown/share-link-dropdown.component.scss +++ b/src/app/file-browser/components/share-link-dropdown/share-link-dropdown.component.scss @@ -1,3 +1,5 @@ +@import 'colors'; + :host { position: relative; } @@ -9,8 +11,8 @@ display: flex; justify-content: space-between; box-shadow: - 0px 0px 2px 0px rgba(0, 0, 0, 0.12), - 0px 2px 2px 0px rgba(0, 0, 0, 0.24); + 0px 0px 2px 0px rgba($PR-brand-black, 0.12), + 0px 2px 2px 0px rgba($PR-brand-black, 0.24); & > .icon { transition: transform 0.3s ease; @@ -24,9 +26,9 @@ .share-link-options { position: absolute; box-shadow: - 0px 0px 2px 0px rgba(0, 0, 0, 0.12), - 0px 2px 2px 0px rgba(0, 0, 0, 0.24); - background-color: white; + 0px 0px 2px 0px rgba($PR-brand-black, 0.12), + 0px 2px 2px 0px rgba($PR-brand-black, 0.24); + background-color: $PR-brand-white; cursor: pointer; width: 300px; z-index: 100; @@ -34,7 +36,7 @@ .description { font-size: 12px; - color: rgba(100, 100, 100, 1); + color: rgba($gray-dark, 1); } .option { diff --git a/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.scss b/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.scss index f39d81c2f..764035da6 100644 --- a/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.scss +++ b/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.scss @@ -14,9 +14,9 @@ select.form-select { .dialog-body { overflow-y: visible !important; - background-color: white; + background-color: $PR-brand-white; border-radius: 0.3rem; - box-shadow: 0 0.5rem 1rem #0000004d; + box-shadow: 0 0.5rem 1rem rgba($PR-brand-black, 0.3); &-top { margin-bottom: 10px; } diff --git a/src/app/file-browser/components/sharing/sharing.component.scss b/src/app/file-browser/components/sharing/sharing.component.scss index 477c9888a..c9eadbc24 100644 --- a/src/app/file-browser/components/sharing/sharing.component.scss +++ b/src/app/file-browser/components/sharing/sharing.component.scss @@ -8,7 +8,7 @@ } .dialog-content { - background-color: white; + background-color: $PR-brand-white; } .share-link-button { diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss index 72ea5fae3..5eae2c1bb 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss @@ -42,7 +42,7 @@ background-color: $PR-blue-25; .pr-sidebar-date-picker-edit-icon { - color: $PR-blue; + color: $PR-blue-900; } } } @@ -67,7 +67,7 @@ align-items: center; gap: 4px; font-size: 14px; - color: $PR-blue; + color: $PR-blue-900; font-weight: 500; .pr-time-group { @@ -79,7 +79,7 @@ .pr-dot { font-size: 6px; - color: $PR-blue; + color: $PR-blue-900; vertical-align: middle; margin-left: 2px; } @@ -117,10 +117,10 @@ left: -16px; right: -16px; z-index: 20; - background: $white; + background: $PR-brand-white; border: 1px solid $PR-blue-100; border-radius: 12px; - box-shadow: 0 8px 24px rgba($black, 0.12); + box-shadow: 0 8px 24px rgba($PR-brand-black, 0.12); overflow: visible; } @@ -137,12 +137,12 @@ width: 151px; i { - color: $PR-blue; + color: $PR-blue-900; font-size: 16px; } span { - color: $PR-blue; + color: $PR-blue-900; font-size: 14px; } } @@ -161,7 +161,7 @@ cursor: pointer; font-size: 14px; font-weight: 500; - color: $PR-blue; + color: $PR-blue-900; padding: 0; &:hover { @@ -185,7 +185,7 @@ cursor: pointer; font-size: 14px; font-weight: 500; - color: $PR-blue; + color: $PR-blue-900; padding: 6px 12px; &:hover { @@ -197,11 +197,11 @@ display: flex; align-items: center; justify-content: center; - background: $PR-blue; + background: $PR-blue-900; border: none; border-radius: 6px; cursor: pointer; - color: $white; + color: $PR-brand-white; width: 36px; height: 36px; padding: 0;