From 41cc5264d3d5d817713186d45bb12ea386fcb0b2 Mon Sep 17 00:00:00 2001 From: cnathe Date: Thu, 30 Apr 2026 15:59:15 -0500 Subject: [PATCH 01/29] Link blue #2980B9 change to #0F72C2 --- packages/components/releaseNotes/components.md | 4 ++++ packages/components/src/theme/announcements.scss | 4 ++-- packages/components/src/theme/app/variables.scss | 3 ++- packages/components/src/theme/detail.scss | 2 +- packages/components/src/theme/variables.scss | 2 +- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md index f2827c087f..8ac81d6b86 100644 --- a/packages/components/releaseNotes/components.md +++ b/packages/components/releaseNotes/components.md @@ -1,6 +1,10 @@ # @labkey/components Components, models, actions, and utility functions for LabKey applications and pages +### version TBD +*Released*: TBD +- Accessibility improvements for app pages: Colors + ### version 7.33.2 *Released*: 29 April 2026 - GitHub Issue #598: Wrap text for long file names in various app locations diff --git a/packages/components/src/theme/announcements.scss b/packages/components/src/theme/announcements.scss index f950c07120..4f2a8412c4 100644 --- a/packages/components/src/theme/announcements.scss +++ b/packages/components/src/theme/announcements.scss @@ -62,11 +62,11 @@ $editor-padding-horizontal: 15px; } .clickable-text { cursor: pointer; - color: #2980B9; + color: $link-color; &:hover { text-decoration: underline; - color: color.adjust(#2980B9, $lightness: -15%); + color: color.adjust($link-color, $lightness: -15%); } } .discussions-container__title { diff --git a/packages/components/src/theme/app/variables.scss b/packages/components/src/theme/app/variables.scss index 6b2ded6f91..cdd4df926d 100644 --- a/packages/components/src/theme/app/variables.scss +++ b/packages/components/src/theme/app/variables.scss @@ -7,7 +7,8 @@ // -------------------------------------------------- //== Colors -$brand-primary: #2980b9; +$brand-primary: #2980b9; +$link-color: #0F72C2; $cyan: #33e0ff; //== Scaffolding diff --git a/packages/components/src/theme/detail.scss b/packages/components/src/theme/detail.scss index b50aeba7a7..6aed171bcb 100644 --- a/packages/components/src/theme/detail.scss +++ b/packages/components/src/theme/detail.scss @@ -239,7 +239,7 @@ } .header-details-link { - color: $blue-highlight; + color: $link-color; cursor: pointer; } diff --git a/packages/components/src/theme/variables.scss b/packages/components/src/theme/variables.scss index 291a4b1e80..380a9e3a09 100644 --- a/packages/components/src/theme/variables.scss +++ b/packages/components/src/theme/variables.scss @@ -29,7 +29,7 @@ $blue-dark: #1e4f6f; $text-color-gray: #9d9d9d; $text-color: $gray-dark !default; -$link-hover-color: color.adjust($brand-primary, $lightness: 15%) !default; +$link-hover-color: color.adjust($link-color, $lightness: 15%) !default; $font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !default; From 5cbcf91285e64982b80b49fe61ee27e784dc7884 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 09:10:07 -0500 Subject: [PATCH 02/29] Change usages of #777 and $gray-light to $text-color-light --- packages/components/src/theme/announcements.scss | 4 ++-- packages/components/src/theme/attachment-card.scss | 6 +++--- packages/components/src/theme/breadcrumb.scss | 2 +- packages/components/src/theme/cards.scss | 6 +++--- packages/components/src/theme/choiceList.scss | 4 ++-- packages/components/src/theme/collapsiblePanel.scss | 2 +- packages/components/src/theme/container.scss | 6 +++--- packages/components/src/theme/domainproperties.scss | 2 +- packages/components/src/theme/fields.scss | 10 +++++----- packages/components/src/theme/filter.scss | 2 +- packages/components/src/theme/form.scss | 2 +- packages/components/src/theme/grid.scss | 6 +++--- packages/components/src/theme/lineage.scss | 2 +- packages/components/src/theme/list.scss | 2 +- packages/components/src/theme/navbar.scss | 2 +- packages/components/src/theme/notification.scss | 2 +- packages/components/src/theme/ontologybrowser.scss | 8 ++++---- packages/components/src/theme/product-navigation.scss | 10 +++++----- packages/components/src/theme/submenu.scss | 2 +- packages/components/src/theme/tabs.scss | 2 +- packages/components/src/theme/timeline.scss | 2 +- packages/components/src/theme/utils.scss | 2 +- packages/components/src/theme/variables.scss | 1 + 23 files changed, 44 insertions(+), 43 deletions(-) diff --git a/packages/components/src/theme/announcements.scss b/packages/components/src/theme/announcements.scss index 4f2a8412c4..07d91bddbc 100644 --- a/packages/components/src/theme/announcements.scss +++ b/packages/components/src/theme/announcements.scss @@ -85,7 +85,7 @@ $editor-padding-horizontal: 15px; margin-bottom: 15px; } .thread-block-header__date { - color: #777; + color: $text-color-light; } .thread-block-header__menu { color: #555555; @@ -122,7 +122,7 @@ $editor-padding-horizontal: 15px; margin: 10px 0; } .thread-block__toggle-reply-msg { - color: #777; + color: $text-color-light; .fa-check-circle { color: #5CB85C; diff --git a/packages/components/src/theme/attachment-card.scss b/packages/components/src/theme/attachment-card.scss index 0cdffb1a19..991a684ca3 100644 --- a/packages/components/src/theme/attachment-card.scss +++ b/packages/components/src/theme/attachment-card.scss @@ -73,7 +73,7 @@ } .dropdown-toggle { - color: $gray-light; + color: $text-color-light; display: block; height: 100%; padding-left: 50%; @@ -93,11 +93,11 @@ white-space: nowrap; } .attachment-card__size { - color: $gray-light; + color: $text-color-light; font-size: 14px; } .attachment-card__description { - color: $gray-light; + color: $text-color-light; font-size: 12px; overflow-wrap: anywhere; } diff --git a/packages/components/src/theme/breadcrumb.scss b/packages/components/src/theme/breadcrumb.scss index 456b860978..23f72ef5cb 100644 --- a/packages/components/src/theme/breadcrumb.scss +++ b/packages/components/src/theme/breadcrumb.scss @@ -18,7 +18,7 @@ content: ''; } .breadcrumb > li.separator { - color: $gray-light; + color: $text-color-light; font-weight: bold; padding-left: 0; } diff --git a/packages/components/src/theme/cards.scss b/packages/components/src/theme/cards.scss index b507ca421b..9eab175c66 100644 --- a/packages/components/src/theme/cards.scss +++ b/packages/components/src/theme/cards.scss @@ -32,7 +32,7 @@ $circle-size: 12 * $scale; margin-bottom: $scale * 2; .cards__card-content { - color: $gray-light; + color: $text-color-light; margin: ($scale * 2) ($scale * 3); overflow: hidden; text-overflow: ellipsis; @@ -239,7 +239,7 @@ $circle-size: 12 * $scale; .filter-card__empty-content { padding-top: 63px; text-align: center; - color: $gray-light; + color: $text-color-light; font-weight: 300; font-size: 37px; } @@ -288,7 +288,7 @@ $circle-size: 12 * $scale; .filter-hint { padding-top: 10px; - color: $gray-light; + color: $text-color-light; font-weight: 400; font-size: 22px; text-align: center; diff --git a/packages/components/src/theme/choiceList.scss b/packages/components/src/theme/choiceList.scss index 24cfc35771..c01bd2bf2d 100644 --- a/packages/components/src/theme/choiceList.scss +++ b/packages/components/src/theme/choiceList.scss @@ -16,7 +16,7 @@ .choice-details__name { font-size: 18px; - color: $gray-light; + color: $text-color-light; } .choice-metadata-item { @@ -25,7 +25,7 @@ .choice-metadata-item__name { margin-right: 8px; - color: $gray-light; + color: $text-color-light; } .choices-list { diff --git a/packages/components/src/theme/collapsiblePanel.scss b/packages/components/src/theme/collapsiblePanel.scss index bb34f5058a..052225a2d2 100644 --- a/packages/components/src/theme/collapsiblePanel.scss +++ b/packages/components/src/theme/collapsiblePanel.scss @@ -7,7 +7,7 @@ } .collapsible-panel-expand-btn { - color: $gray-light; + color: $text-color-light; &:hover { color: $gray-base; diff --git a/packages/components/src/theme/container.scss b/packages/components/src/theme/container.scss index e313abd09b..c514093a78 100644 --- a/packages/components/src/theme/container.scss +++ b/packages/components/src/theme/container.scss @@ -134,7 +134,7 @@ .container-expandable-grey { width: 160px; &:hover { - color: $gray-light; + color: $text-color-light; } &:hover, &.container-expandable__active { @@ -142,10 +142,10 @@ } .container-expandable-child__chevron { - color: $gray-light; + color: $text-color-light; &:hover { - color: $gray-light; + color: $text-color-light; cursor: pointer; } } diff --git a/packages/components/src/theme/domainproperties.scss b/packages/components/src/theme/domainproperties.scss index f5c9d69cec..151b354e5f 100644 --- a/packages/components/src/theme/domainproperties.scss +++ b/packages/components/src/theme/domainproperties.scss @@ -294,7 +294,7 @@ margin: 25px 0px 20px 0px; padding: 15px 20px; border-radius: unset; - color: #777777; + color: $text-color-light; } .domain-row-expanded { diff --git a/packages/components/src/theme/fields.scss b/packages/components/src/theme/fields.scss index b92ed88215..3344dcc21f 100644 --- a/packages/components/src/theme/fields.scss +++ b/packages/components/src/theme/fields.scss @@ -12,7 +12,7 @@ } .field-icon { - color: $gray-light; + color: $text-color-light; padding: 5px 5px 0 20px; display: inline-block; @@ -71,14 +71,14 @@ } .edit-inline-field__label { - color: #777777; + color: $text-color-light; cursor: auto; font-size: 14px; padding-right: 5px; } .edit-inline-field__placeholder { - color: #777777; + color: $text-color-light; } .edit-inline-field__toggle { @@ -131,7 +131,7 @@ color: $brand-primary; } i.fa-toggle-off { - color: $gray-light; + color: $text-color-light; } } .toggle-group-icon.disabled i { @@ -167,7 +167,7 @@ } .identifying_field_label { - color: #777777 + color: $text-color-light; } // GitHub Issue 985: Improve readability of identifying fields diff --git a/packages/components/src/theme/filter.scss b/packages/components/src/theme/filter.scss index 5fadb0708d..ba727c29e2 100644 --- a/packages/components/src/theme/filter.scss +++ b/packages/components/src/theme/filter.scss @@ -145,7 +145,7 @@ } .field-modal__empty-msg { - color: $gray-light; + color: $text-color-light; font-size: 16px; } diff --git a/packages/components/src/theme/form.scss b/packages/components/src/theme/form.scss index 53bd0795d0..0c38a28321 100644 --- a/packages/components/src/theme/form.scss +++ b/packages/components/src/theme/form.scss @@ -279,7 +279,7 @@ textarea.form-control { padding-left: 4px; } .color-picker__placeholder { - color: #808080; // match select input placeholder text color + color: $text-color-light; } .color-icon__circle-small { diff --git a/packages/components/src/theme/grid.scss b/packages/components/src/theme/grid.scss index e7c93e00e6..5bcd865087 100644 --- a/packages/components/src/theme/grid.scss +++ b/packages/components/src/theme/grid.scss @@ -416,14 +416,14 @@ $table-cell-padding: 4px 2px; } .cell-placeholder { - color: $gray-light; + color: $text-color-light; } .cell-read-only { background-color: $light-gray; &.cell-placeholder { - color: $gray-light + color: $text-color-light; } } @@ -431,7 +431,7 @@ $table-cell-padding: 4px 2px; background-color: $light-gray; &.cell-placeholder { - color: $gray-light + color: $text-color-light; } } diff --git a/packages/components/src/theme/lineage.scss b/packages/components/src/theme/lineage.scss index d3f8928967..e9be97fe90 100644 --- a/packages/components/src/theme/lineage.scss +++ b/packages/components/src/theme/lineage.scss @@ -55,7 +55,7 @@ .lineage-data-link--text { line-height: 1; - color: $gray-light; + color: $text-color-light; font-size: 75%; font-weight: 400; cursor: pointer; diff --git a/packages/components/src/theme/list.scss b/packages/components/src/theme/list.scss index 365b15a80a..2856933883 100644 --- a/packages/components/src/theme/list.scss +++ b/packages/components/src/theme/list.scss @@ -17,7 +17,7 @@ } .list__properties__checkbox-unchecked { - color: $gray-light; + color: $text-color-light; } .list__properties__checkbox-row { diff --git a/packages/components/src/theme/navbar.scss b/packages/components/src/theme/navbar.scss index d4083621b6..8faa619ded 100644 --- a/packages/components/src/theme/navbar.scss +++ b/packages/components/src/theme/navbar.scss @@ -589,7 +589,7 @@ left: 18px; top: 8px; margin-left: 5px; - color: $gray-light; + color: $text-color-light; z-index: 10; } diff --git a/packages/components/src/theme/notification.scss b/packages/components/src/theme/notification.scss index 2e9252146a..5ef9a94e17 100644 --- a/packages/components/src/theme/notification.scss +++ b/packages/components/src/theme/notification.scss @@ -66,7 +66,7 @@ } .server-notification-data { - color: $gray-light; + color: $text-color-light; max-width: 200px; text-overflow: ellipsis; overflow: hidden; diff --git a/packages/components/src/theme/ontologybrowser.scss b/packages/components/src/theme/ontologybrowser.scss index 1c191155cf..da10aec328 100644 --- a/packages/components/src/theme/ontologybrowser.scss +++ b/packages/components/src/theme/ontologybrowser.scss @@ -102,7 +102,7 @@ display: flex; .col { - color: $gray-light; + color: $text-color-light; padding: 10px; border-right: 1px solid $gray-border; display: flex; @@ -121,7 +121,7 @@ } .result-footer { - color: $gray-light; + color: $text-color-light; font-size: 12px; padding: 10px; } @@ -138,7 +138,7 @@ .none-selected { font-size: 20px; - color: $gray-light; + color: $text-color-light; } .title, .description-title, .description-text, .synonyms-title, .synonyms-text { @@ -205,7 +205,7 @@ .none-selected, .no-path-info { font-size: 20px; - color: $gray-light; + color: $text-color-light; } } diff --git a/packages/components/src/theme/product-navigation.scss b/packages/components/src/theme/product-navigation.scss index 525eb92c3c..4722db0cd9 100644 --- a/packages/components/src/theme/product-navigation.scss +++ b/packages/components/src/theme/product-navigation.scss @@ -32,10 +32,10 @@ cursor: pointer; &.labkey-page-nav-disabled { - color: $gray-light; + color: $text-color-light; cursor: default; &:hover, &:hover .product-subtitle, &:hover .nav-icon { - color: $gray-light; + color: $text-color-light; } } @@ -63,7 +63,7 @@ .nav-icon { float: right; - color: $gray-light; + color: $text-color-light; font-size: 18px; padding: 8px 15px 0 10px; } @@ -96,7 +96,7 @@ .nav-icon { display: inline-block; float: right; - color: $gray-light; + color: $text-color-light; padding-left: 5px; .fa { @@ -130,7 +130,7 @@ padding: 7px 0; .empty { - color: $gray-light; + color: $text-color-light; padding: 8px 10px 8px 15px; } diff --git a/packages/components/src/theme/submenu.scss b/packages/components/src/theme/submenu.scss index ec396fe2a0..dcbee169ee 100644 --- a/packages/components/src/theme/submenu.scss +++ b/packages/components/src/theme/submenu.scss @@ -58,7 +58,7 @@ } .disabled a { - color: $gray-light; + color: $text-color-light; } } diff --git a/packages/components/src/theme/tabs.scss b/packages/components/src/theme/tabs.scss index 38a2329b7d..b9509f5687 100644 --- a/packages/components/src/theme/tabs.scss +++ b/packages/components/src/theme/tabs.scss @@ -32,7 +32,7 @@ & > li.disabled { & > a { - color: $gray-light; + color: $text-color-light; } } } diff --git a/packages/components/src/theme/timeline.scss b/packages/components/src/theme/timeline.scss index 9219782a23..15492297fe 100644 --- a/packages/components/src/theme/timeline.scss +++ b/packages/components/src/theme/timeline.scss @@ -131,7 +131,7 @@ } .timeline-info-icon { - color: $gray-light; + color: $text-color-light; } .old-audit-value, .new-audit-value { diff --git a/packages/components/src/theme/utils.scss b/packages/components/src/theme/utils.scss index b320d93e85..aceeaadcf5 100644 --- a/packages/components/src/theme/utils.scss +++ b/packages/components/src/theme/utils.scss @@ -156,7 +156,7 @@ } .gray-text { - color: $gray-light; + color: $text-color-light; } .display-light { diff --git a/packages/components/src/theme/variables.scss b/packages/components/src/theme/variables.scss index 380a9e3a09..6ddc874fb4 100644 --- a/packages/components/src/theme/variables.scss +++ b/packages/components/src/theme/variables.scss @@ -27,6 +27,7 @@ $blue-icon-background: #CCE5FF; $blue-dark: #1e4f6f; $text-color-gray: #9d9d9d; +$text-color-light: #6B6B6B; $text-color: $gray-dark !default; $link-hover-color: color.adjust($link-color, $lightness: 15%) !default; From 04202474b84c03e5d95243a662457af0b5ad1e15 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 09:11:08 -0500 Subject: [PATCH 03/29] 7.33.2-fb-accessibilityColors.0 --- packages/components/package-lock.json | 4 ++-- packages/components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json index cff279a1ab..6809865800 100644 --- a/packages/components/package-lock.json +++ b/packages/components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@labkey/components", - "version": "7.33.2", + "version": "7.33.2-fb-accessibilityColors.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@labkey/components", - "version": "7.33.2", + "version": "7.33.2-fb-accessibilityColors.0", "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@hello-pangea/dnd": "18.0.1", diff --git a/packages/components/package.json b/packages/components/package.json index 4de7086cce..556c83ee4f 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@labkey/components", - "version": "7.33.2", + "version": "7.33.2-fb-accessibilityColors.0", "description": "Components, models, actions, and utility functions for LabKey applications and pages", "sideEffects": false, "files": [ From ff9535f15c1038bc23039c9b643a93020a2afab8 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 11:58:15 -0500 Subject: [PATCH 04/29] Light gray text colors and icons to use $text-color-light and $gray-dark for hover --- packages/components/src/theme/fields.scss | 6 +++--- packages/components/src/theme/filter.scss | 6 +++++- packages/components/src/theme/grid.scss | 4 ++-- packages/components/src/theme/modal.scss | 10 ++++++++++ packages/components/src/theme/navbar.scss | 2 +- packages/components/src/theme/query-model.scss | 6 +++++- 6 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/components/src/theme/fields.scss b/packages/components/src/theme/fields.scss index 3344dcc21f..3979284492 100644 --- a/packages/components/src/theme/fields.scss +++ b/packages/components/src/theme/fields.scss @@ -85,7 +85,7 @@ cursor: pointer; .fa { - color: $light-gray; + color: $text-color-light; padding-left: 5px; } @@ -100,7 +100,7 @@ cursor: pointer; .fa { - color: $light-gray; + color: $text-color-light; padding-left: 8px; } @@ -114,7 +114,7 @@ cursor: default; &:hover { .fa { - color: $light-gray; + color: $text-color-light; } } } diff --git a/packages/components/src/theme/filter.scss b/packages/components/src/theme/filter.scss index ba727c29e2..c112abb41e 100644 --- a/packages/components/src/theme/filter.scss +++ b/packages/components/src/theme/filter.scss @@ -21,6 +21,10 @@ color: $white; font-weight: bold; } + .list-group-item.active .fa-pencil, + .list-group-item.active .fa-times { + color: $white; + } .list-group-item .field-caption { flex: 1; @@ -32,7 +36,7 @@ } .list-group-item .field-expand-icon { - color: $light-gray; + color: $text-color-light; height: 16px; width: 16px; margin-right: 5px; diff --git a/packages/components/src/theme/grid.scss b/packages/components/src/theme/grid.scss index 5bcd865087..9f7349837d 100644 --- a/packages/components/src/theme/grid.scss +++ b/packages/components/src/theme/grid.scss @@ -401,7 +401,7 @@ $table-cell-padding: 4px 2px; .cell-menu-selector { position: absolute; bottom: -8px; - color: $light-gray; + color: $text-color-light; min-height: 30px; font-size: 12px; right: 7px; @@ -411,7 +411,7 @@ $table-cell-padding: 4px 2px; } &:hover { - color: $gray; + color: $gray-dark; } } diff --git a/packages/components/src/theme/modal.scss b/packages/components/src/theme/modal.scss index c2b2514f6f..499ba15fc0 100644 --- a/packages/components/src/theme/modal.scss +++ b/packages/components/src/theme/modal.scss @@ -19,6 +19,16 @@ line-height: 33px; } +.lk-modal .close, .modal .close { + color: $text-color-light; + opacity: 1; + + &:hover { + color: $gray-dark; + opacity: 1; + } +} + .title-help-link { font-weight: normal; font-size: 14px; diff --git a/packages/components/src/theme/navbar.scss b/packages/components/src/theme/navbar.scss index 8faa619ded..5f4de64298 100644 --- a/packages/components/src/theme/navbar.scss +++ b/packages/components/src/theme/navbar.scss @@ -352,7 +352,7 @@ .empty-section { font-style: italic; - color: $light-gray; + color: $text-color-light; } .empty-section-link { diff --git a/packages/components/src/theme/query-model.scss b/packages/components/src/theme/query-model.scss index 28379f65ab..4ff7e0da2b 100644 --- a/packages/components/src/theme/query-model.scss +++ b/packages/components/src/theme/query-model.scss @@ -63,12 +63,16 @@ margin-right: 8px; } .grid-panel__menu-toggle { - color: $light-gray; + color: $text-color-light; font-size: 12px; span { vertical-align: middle; } + + &:hover { + color: $gray-dark; + } } .grid-panel__search-form { From abd4888f201a133cb669bbb9a2fe9ff2d22816c4 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 11:59:53 -0500 Subject: [PATCH 05/29] Replace usages of light blue (btn-info) --- .../components/domainproperties/NameExpressionGenIdBanner.tsx | 4 ++-- .../components/domainproperties/samples/UniqueIdBanner.tsx | 2 +- .../components/src/public/files/TemplateDownloadButton.tsx | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx b/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx index 41510b2767..367dcec512 100644 --- a/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx +++ b/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx @@ -126,7 +126,7 @@ export const NameExpressionGenIdBanner: FC = props => Current genId: {currentGenId} {canReset && currentGenId > 1 && ( diff --git a/packages/components/src/public/files/TemplateDownloadButton.tsx b/packages/components/src/public/files/TemplateDownloadButton.tsx index fd63d03483..cce0e5167a 100644 --- a/packages/components/src/public/files/TemplateDownloadButton.tsx +++ b/packages/components/src/public/files/TemplateDownloadButton.tsx @@ -123,7 +123,6 @@ const TemplateDownloadButtonImpl: FC = memo(props => { return ( Date: Fri, 1 May 2026 12:00:16 -0500 Subject: [PATCH 06/29] Link blue #2980B9 change to #0F72C2 --- packages/components/src/theme/navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/theme/navbar.scss b/packages/components/src/theme/navbar.scss index 5f4de64298..d9d947eee5 100644 --- a/packages/components/src/theme/navbar.scss +++ b/packages/components/src/theme/navbar.scss @@ -357,7 +357,7 @@ .empty-section-link { a { - color: $brand-primary !important; + color: $link-color !important; } } From c7cd30fa3e45ae6648a6e595f5b7326fa7fd08da Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 12:01:35 -0500 Subject: [PATCH 07/29] Change orange badge color $badge-color to #D43F3A --- packages/components/src/theme/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/theme/variables.scss b/packages/components/src/theme/variables.scss index 6ddc874fb4..065232668e 100644 --- a/packages/components/src/theme/variables.scss +++ b/packages/components/src/theme/variables.scss @@ -19,7 +19,7 @@ $brand-secondary: #236fa0; $brand-success: #5cb85c; $border-color: #cccccc; $navbar-border-color: #cbccce; -$badge-color: #FA6400; +$badge-color: #D43F3A; $blue-highlight: #2980B9; $gray-no-highlight: $gray-lighten; From 2bce7b9d6e7ee0ccb96bba7758504afc6a5a95c0 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 12:08:51 -0500 Subject: [PATCH 08/29] Green icon and button #5CB85C change to #5AA54A ($brand-success) --- packages/components/src/theme/announcements.scss | 2 +- packages/components/src/theme/domainproperties.scss | 2 +- packages/components/src/theme/variables.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/theme/announcements.scss b/packages/components/src/theme/announcements.scss index 07d91bddbc..ca4291089f 100644 --- a/packages/components/src/theme/announcements.scss +++ b/packages/components/src/theme/announcements.scss @@ -125,7 +125,7 @@ $editor-padding-horizontal: 15px; color: $text-color-light; .fa-check-circle { - color: #5CB85C; + color: $brand-success; } } .thread-editor-preview { diff --git a/packages/components/src/theme/domainproperties.scss b/packages/components/src/theme/domainproperties.scss index 151b354e5f..7baa8de4d1 100644 --- a/packages/components/src/theme/domainproperties.scss +++ b/packages/components/src/theme/domainproperties.scss @@ -695,7 +695,7 @@ } .domain-panel-status-icon-green { - color: green; + color: $brand-success; } .domain-panel-status-icon-blue { diff --git a/packages/components/src/theme/variables.scss b/packages/components/src/theme/variables.scss index 065232668e..b7ddafc652 100644 --- a/packages/components/src/theme/variables.scss +++ b/packages/components/src/theme/variables.scss @@ -16,7 +16,7 @@ $brand-danger: #d9534f; $brand-warning: #f0ad4e; $brand-primary: #2980b9; $brand-secondary: #236fa0; -$brand-success: #5cb85c; +$brand-success: #5AA54A; $border-color: #cccccc; $navbar-border-color: #cbccce; $badge-color: #D43F3A; From 3d5b335c57514ada0ae3346c0b207328b2e19489 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 14:51:03 -0500 Subject: [PATCH 09/29] Blue banner, status tag, and filter pill updates to colors --- .../src/internal/components/forms/input/SelectInput.tsx | 8 ++++---- packages/components/src/theme/app/variables.scss | 5 +++++ packages/components/src/theme/pills.scss | 6 +++--- packages/components/src/theme/variables.scss | 6 +++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/components/src/internal/components/forms/input/SelectInput.tsx b/packages/components/src/internal/components/forms/input/SelectInput.tsx index 5b9d9a0a9a..387f613315 100644 --- a/packages/components/src/internal/components/forms/input/SelectInput.tsx +++ b/packages/components/src/internal/components/forms/input/SelectInput.tsx @@ -55,7 +55,7 @@ const _customStyles = { } else if (state.data?.notFound) { backgroundColor = WARN_BG_COLOR; } else { - backgroundColor = '#F2F9FC'; + backgroundColor = '#F1F9FC'; } return { ...styles, backgroundColor }; @@ -67,7 +67,7 @@ const _customStyles = { } else if (state.data?.notFound) { color = WARN_COLOR; } else { - color = '#08C'; + color = '#0B73B7'; } return { ...styles, color }; @@ -82,7 +82,7 @@ const _customStyles = { style.color = WARN_COLOR; style[':hover'] = { backgroundColor: WARN_COLOR, color: WARN_BG_COLOR }; } else { - style.color = '#08C'; + style.color = '#0B73B7'; style[':hover'] = { backgroundColor: '#2980B9', color: '#FFF' }; } @@ -103,7 +103,7 @@ const _customTheme = theme => ({ danger: '#D9534F', primary: '#2980B9', primary75: '#009BF9', - primary50: '#F2F9FC', + primary50: '#F1F9FC', primary25: 'rgba(41, 128, 185, 0.1)', }, }); diff --git a/packages/components/src/theme/app/variables.scss b/packages/components/src/theme/app/variables.scss index cdd4df926d..c24d0eabf5 100644 --- a/packages/components/src/theme/app/variables.scss +++ b/packages/components/src/theme/app/variables.scss @@ -51,4 +51,9 @@ $breadcrumb-separator: ">" !default; $gray-border: #CCC; $gray-shadow: #F3F3F4; +// Alert +$alert-info-bg: #F1F9FC; +$alert-info-text: #0B73B7; +$alert-info-border: #C9E6F2; + @import "bootstrap-sass/assets/stylesheets/bootstrap/_variables"; diff --git a/packages/components/src/theme/pills.scss b/packages/components/src/theme/pills.scss index 12969c7365..819bc76c0f 100644 --- a/packages/components/src/theme/pills.scss +++ b/packages/components/src/theme/pills.scss @@ -49,9 +49,9 @@ &.info, &.in-progress, &.needs-changes { - color: #0088CC; - background-color: #F1F9FC; - border-color: #C9E6F2; + color: $alert-info-text; + background-color: $alert-info-bg; + border-color: $alert-info-border; } &.template { background-color: #E8DAFF; diff --git a/packages/components/src/theme/variables.scss b/packages/components/src/theme/variables.scss index b7ddafc652..4b275839a8 100644 --- a/packages/components/src/theme/variables.scss +++ b/packages/components/src/theme/variables.scss @@ -71,9 +71,9 @@ $blue-bkgrd-selected: rgba(41, 128, 185, 0.1); border-top-left-radius: $radius; } -$grid-action-item-color: #0088cc; // pale blue -$grid-action-item-bg: #f1f9fc; -$grid-action-item-border-color: #c9e6f2; +$grid-action-item-color: $alert-info-text; +$grid-action-item-bg: $alert-info-bg; +$grid-action-item-border-color: $alert-info-border; $grid-action-item-hover-bg: color.adjust($grid-action-item-bg, $lightness: 5%); $grid-action-item-disabled-color: #333; $grid-action-item-disabled-bg: #fcfcfc; From a05388d402d7c9fa0cac2345c04dfb96ac1b18a5 Mon Sep 17 00:00:00 2001 From: cnathe Date: Fri, 1 May 2026 14:51:37 -0500 Subject: [PATCH 10/29] Search panel button to use btn-success instead of custom colors --- .../src/internal/components/search/SearchPanel.tsx | 2 +- packages/components/src/theme/search.scss | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/components/src/internal/components/search/SearchPanel.tsx b/packages/components/src/internal/components/search/SearchPanel.tsx index 6a51c519b1..512daffd59 100644 --- a/packages/components/src/internal/components/search/SearchPanel.tsx +++ b/packages/components/src/internal/components/search/SearchPanel.tsx @@ -116,7 +116,7 @@ export const SearchPanelImpl: FC = memo(props => {