diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index cb649bf0c5..3dc475b1a7 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.33.4",
+  "version": "7.34.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.33.4",
+      "version": "7.34.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 1ac1b4f662..b5f18ea532 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.33.4",
+  "version": "7.34.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
index ad9d579ae9..93374ac1b1 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 7.34.0
+*Released*: 5 May 2026
+- Accessibility improvements for app pages: Colors
+
 ### version 7.33.4
 *Released*: 3 May 2026
 - Consolidate Dataclass data update methods - use DIB for update only
diff --git a/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx b/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx
index e775805543..616a27b11f 100644
--- a/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx
+++ b/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx
@@ -12,7 +12,7 @@ export interface NameExpressionGenIdProps {
     containerPath?: string;
     dataTypeLSID?: string;
     dataTypeName: string; // sampletype or dataclass name
-    kindName: 'SampleSet' | 'DataClass';
+    kindName: 'DataClass' | 'SampleSet';
     rowId: number;
 }
 
@@ -126,7 +126,7 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             <Alert bsStyle="info" className="genid-alert">
                 Current genId: {currentGenId}
                 <button
-                    className="pull-right alert-button edit-genid-btn btn btn-info"
+                    className="pull-right alert-button edit-genid-btn btn btn-primary"
                     onClick={onEditClick}
                     type="button"
                 >
@@ -134,7 +134,7 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
                 </button>
                 {canReset && currentGenId > 1 && (
                     <button
-                        className="pull-right alert-button reset-genid-btn btn btn-info"
+                        className="pull-right alert-button reset-genid-btn btn btn-primary"
                         onClick={onResetClick}
                         type="button"
                     >
@@ -144,8 +144,8 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             </Alert>
             {showResetDialog && (
                 <Modal
-                    confirmText="Reset"
                     confirmClass="btn-danger"
+                    confirmText="Reset"
                     onCancel={onResetCancel}
                     onConfirm={onResetConfirm}
                     title={`Are you sure you want to reset genId for ${dataTypeName}?`}
@@ -159,8 +159,8 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             )}
             {showEditDialog && (
                 <Modal
-                    confirmText="Update"
                     confirmClass="btn-danger"
+                    confirmText="Update"
                     onCancel={onEditCancel}
                     onConfirm={onEditConfirm}
                     title={`Are you sure you want to update genId for ${dataTypeName}?`}
@@ -177,12 +177,12 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
                                 aria-label="GenId value"
                                 className="form-control update-genId-input "
                                 min={minNewGenId}
-                                step={1}
                                 name="newgenidval"
                                 onChange={(event: any) => setNewGenId(event?.target?.value)}
+                                placeholder="Enter new genId..."
+                                step={1}
                                 type="number"
                                 value={newGenId ?? minNewGenId}
-                                placeholder="Enter new genId..."
                             />
                         </div>
                         <div className="col-xs-7" />
diff --git a/packages/components/src/internal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap b/packages/components/src/internal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap
index db68782107..f3b2530ef2 100644
--- a/packages/components/src/internal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap
+++ b/packages/components/src/internal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`NameExpressionGenIdBanner with existing data 1`] = `
     Current genId: 
     124
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
@@ -27,7 +27,7 @@ exports[`NameExpressionGenIdBanner without existing data, genId = 1 (0) 1`] = `
     Current genId: 
     1
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
@@ -45,13 +45,13 @@ exports[`NameExpressionGenIdBanner without existing data, genId > 1 1`] = `
     Current genId: 
     124
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
     </button>
     <button
-      class="pull-right alert-button reset-genid-btn btn btn-info"
+      class="pull-right alert-button reset-genid-btn btn btn-primary"
       type="button"
     >
       Reset genId
diff --git a/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx b/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx
index 95d55ea304..d24bd7e97b 100644
--- a/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx
+++ b/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx
@@ -119,7 +119,13 @@ export const QCStatesInput: FC<InputProps> = memo(props => (
         }
         label="QC States"
     >
-        <input aria-label="QC States" checked={props.model.qcEnabled} id={FORM_IDS.QC_ENABLED} onChange={props.onChange} type="checkbox" />
+        <input
+            aria-label="QC States"
+            checked={props.model.qcEnabled}
+            id={FORM_IDS.QC_ENABLED}
+            onChange={props.onChange}
+            type="checkbox"
+        />
     </AssayPropertiesInput>
 ));
 QCStatesInput.displayName = 'QCStatesInput';
@@ -227,7 +233,13 @@ export const AssayStatusInput: FC<InputProps> = memo(props => (
         hideAdvancedProperties={props.hideAdvancedProperties}
         label="Active"
     >
-        <input aria-label="Active" checked={props.model.isActive()} id={FORM_IDS.STATUS} onChange={props.onChange} type="checkbox" />
+        <input
+            aria-label="Active"
+            checked={props.model.isActive()}
+            id={FORM_IDS.STATUS}
+            onChange={props.onChange}
+            type="checkbox"
+        />
     </AssayPropertiesInput>
 ));
 AssayStatusInput.displayName = 'AssayStatusInput';
@@ -585,7 +597,8 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
 
     toggleRunOnCheckboxes = (e: React.ChangeEvent<HTMLInputElement>, field: string): void => {
         const { model } = this.props;
-        const index = parseInt(e.target.id.split(FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS).pop(), 10);
+        const fieldId = FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-' + field;
+        const index = parseInt(e.target.id.split(fieldId).pop(), 10);
         const curr = model.protocolTransformScripts.get(index);
 
         this.props.onChange(
@@ -638,7 +651,7 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
                                             <input
                                                 aria-label="Run on Import"
                                                 checked={attachment.runOnImport}
-                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-onImport' + i}
+                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-runOnImport' + i}
                                                 onChange={this.onCheckRunOnImport}
                                                 type="checkbox"
                                             />
@@ -650,7 +663,7 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
                                                 aria-label="Run on Edit"
                                                 checked={attachment.runOnEdit}
                                                 disabled={!model.editableResults}
-                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-onEdit' + i}
+                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-runOnEdit' + i}
                                                 onChange={this.onCheckRunOnEdit}
                                                 type="checkbox"
                                             />
diff --git a/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx b/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx
index e975cddac2..cdff2d7640 100644
--- a/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx
+++ b/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx
@@ -7,8 +7,8 @@ import { UNIQUE_ID_TYPE } from '../PropDescType';
 import { SampleTypeModel } from './models';
 
 interface Props {
-    model: SampleTypeModel;
     isFieldsPanel: boolean;
+    model: SampleTypeModel;
     onAddField: (fieldConfig: Partial<IDomainField>) => void;
 }
 
@@ -37,7 +37,7 @@ export const UniqueIdBanner: FC<Props> = memo(({ model, isFieldsPanel, onAddFiel
             return (
                 <Alert bsStyle="info" className="uniqueid-alert">
                     {ADD_NEW_UNIQUE_ID_MSG}
-                    <button className="pull-right alert-button btn btn-info" onClick={onClick} type="button">
+                    <button className="pull-right alert-button btn btn-primary" onClick={onClick} type="button">
                         Yes, Add Unique ID Field
                     </button>
                 </Alert>
diff --git a/packages/components/src/internal/components/forms/input/SelectInput.tsx b/packages/components/src/internal/components/forms/input/SelectInput.tsx
index 6f0434a472..ad15ed3105 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,8 +82,8 @@ const _customStyles = {
             style.color = WARN_COLOR;
             style[':hover'] = { backgroundColor: WARN_COLOR, color: WARN_BG_COLOR };
         } else {
-            style.color = '#08C';
-            style[':hover'] = { backgroundColor: '#2980B9', color: '#FFF' };
+            style.color = '#0B73B7';
+            style[':hover'] = { backgroundColor: '#2679AD', color: '#FFF' };
         }
 
         return { ...styles, ...style };
@@ -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/internal/components/search/SearchPanel.tsx b/packages/components/src/internal/components/search/SearchPanel.tsx
index 81097225f2..10f3ca69fb 100644
--- a/packages/components/src/internal/components/search/SearchPanel.tsx
+++ b/packages/components/src/internal/components/search/SearchPanel.tsx
@@ -91,14 +91,14 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
     const hasPages = totalHits > pageSize;
 
     const helpLink = (
-        <HelpLink topic={SEARCH_HELP_TOPIC} className="search-form__help-link">
+        <HelpLink className="search-form__help-link" topic={SEARCH_HELP_TOPIC}>
             <i className="fa fa-question-circle search-form__help-icon" />
             Help with search
         </HelpLink>
     );
 
     return (
-        <Section panelClassName="test-loc-search-panel" title={title} context={helpLink}>
+        <Section context={helpLink} panelClassName="test-loc-search-panel" title={title}>
             <div className="search-form panel-body">
                 <form onSubmit={onSubmit}>
                     <span className="input-group">
@@ -117,7 +117,7 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
                     </span>
                 </form>
                 <button
-                    className="margin-left success submit-button btn btn-default"
+                    className="margin-left success submit-button btn btn-success"
                     onClick={onSearchClick}
                     type="submit"
                 >
@@ -126,16 +126,16 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
                 {hasPages && (
                     <div className="page-buttons">
                         <PaginationButtons
-                            total={totalHits}
                             currentPage={currentPage}
+                            nextPage={pageForward}
                             perPage={pageSize}
                             previousPage={pageBack}
-                            nextPage={pageForward}
+                            total={totalHits}
                         />
                     </div>
                 )}
             </div>
-            {searchTerm && <SearchResultsPanel model={model} emptyResultDisplay={emptyTextMessage} offset={offset} />}
+            {searchTerm && <SearchResultsPanel emptyResultDisplay={emptyTextMessage} model={model} offset={offset} />}
         </Section>
     );
 });
@@ -228,6 +228,6 @@ export const SearchPanel: FC<SearchPanelProps> = memo(props => {
         [search, searchTerm, pageSize, offset]
     );
 
-    return <SearchPanelImpl {...props} search={search} model={model} onPageChange={onPage} offset={offset} />;
+    return <SearchPanelImpl {...props} model={model} offset={offset} onPageChange={onPage} search={search} />;
 });
 SearchPanel.displayName = 'SearchPanel';
diff --git a/packages/components/src/public/files/TemplateDownloadButton.test.tsx b/packages/components/src/public/files/TemplateDownloadButton.test.tsx
index 12b8552b4b..e2403308ee 100644
--- a/packages/components/src/public/files/TemplateDownloadButton.test.tsx
+++ b/packages/components/src/public/files/TemplateDownloadButton.test.tsx
@@ -76,7 +76,7 @@ describe('TemplateDownloadButton', () => {
             expect(document.querySelectorAll('span.fa-download')).toHaveLength(1);
         });
 
-        const button = document.querySelector('button.btn-info');
+        const button = document.querySelector('button.btn');
         expect(button).toHaveTextContent('Template');
         await userEvent.click(button);
 
@@ -105,7 +105,7 @@ describe('TemplateDownloadButton', () => {
             expect(document.querySelectorAll('span.fa-download')).toHaveLength(1);
         });
 
-        const button = document.querySelector('button.btn-info');
+        const button = document.querySelector('button.btn');
         expect(button).toHaveTextContent('Template');
         await userEvent.click(button);
 
@@ -123,9 +123,9 @@ describe('TemplateDownloadButton', () => {
     test('editor, with custom properties', () => {
         const { container } = renderWithAppContext(
             <TemplateDownloadButton
+                className="custom-styling"
                 onDownloadDefault={jest.fn()}
                 text="Test Text"
-                className="custom-styling"
                 user={TEST_USER_EDITOR}
             />
         );
diff --git a/packages/components/src/public/files/TemplateDownloadButton.tsx b/packages/components/src/public/files/TemplateDownloadButton.tsx
index fd63d03483..8927918cf4 100644
--- a/packages/components/src/public/files/TemplateDownloadButton.tsx
+++ b/packages/components/src/public/files/TemplateDownloadButton.tsx
@@ -123,7 +123,6 @@ const TemplateDownloadButtonImpl: FC<Props> = memo(props => {
 
     return (
         <DropdownButton
-            bsStyle="info"
             buttonClassName={buttonClassName}
             buttonTitle={TITLE}
             className={className}
@@ -142,7 +141,7 @@ const TemplateDownloadButtonImpl: FC<Props> = memo(props => {
             {customTemplates.map(template => {
                 if (template.url.endsWith('(unavailable)')) {
                     return (
-                        <DisableableMenuItem key={template.label} disabled disabledMessage="File not found">
+                        <DisableableMenuItem disabled disabledMessage="File not found" key={template.label}>
                             {template.label}
                         </DisableableMenuItem>
                     );
@@ -167,7 +166,7 @@ export const TemplateDownloadButton: FC<Props> = memo(props => {
     if (!onDownloadDefault && !defaultTemplateUrl?.length) return null;
 
     return (
-        <RequiresPermission perms={[PermissionTypes.Insert, PermissionTypes.Update]} permissionCheck="any" user={user}>
+        <RequiresPermission permissionCheck="any" perms={[PermissionTypes.Insert, PermissionTypes.Update]} user={user}>
             <TemplateDownloadButtonImpl {...props} />
         </RequiresPermission>
     );
diff --git a/packages/components/src/theme/announcements.scss b/packages/components/src/theme/announcements.scss
index f950c07120..ca4291089f 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 {
@@ -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,10 +122,10 @@ $editor-padding-horizontal: 15px;
     margin: 10px 0;
 }
 .thread-block__toggle-reply-msg {
-    color: #777;
+    color: $text-color-light;
 
     .fa-check-circle {
-        color: #5CB85C;
+        color: $brand-success;
     }
 }
 .thread-editor-preview {
diff --git a/packages/components/src/theme/app/variables.scss b/packages/components/src/theme/app/variables.scss
index 6b2ded6f91..b98a37ac40 100644
--- a/packages/components/src/theme/app/variables.scss
+++ b/packages/components/src/theme/app/variables.scss
@@ -7,7 +7,12 @@
 // --------------------------------------------------
 
 //== Colors
-$brand-primary:         #2980b9;
+$brand-primary: #2679AD;
+$brand-secondary: #116596;
+$brand-danger:    #D43F3A;
+$brand-warning:   #f0ad4e;
+$brand-success: #5AA54A;
+$link-color: #0F72C2;
 $cyan: #33e0ff;
 
 //== Scaffolding
@@ -45,9 +50,22 @@ $breadcrumb-bg:                 transparent;
 $breadcrumb-color:              #999 !default;
 //** Textual separator for between breadcrumb elements
 $breadcrumb-separator:          ">" !default;
+//** Margin bottom for breadcrumbs
+$breadcrumb-margin-bottom: 0;
 
 // Domain properties variables
 $gray-border:           #CCC;
 $gray-shadow:           #F3F3F4;
 
+// Alert
+$alert-info-bg: #F1F9FC;
+$alert-info-text: #0B73B7;
+$alert-info-border: #C9E6F2;
+$alert-danger-bg: #FDE6E6;
+$alert-danger-text: #BF3939;
+$alert-danger-border: #FBD1D0;
+
+// Button
+$btn-disabled-opacity: .4;
+
 @import "bootstrap-sass/assets/stylesheets/bootstrap/_variables";
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/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/domainproperties.scss b/packages/components/src/theme/domainproperties.scss
index f5c9d69cec..7baa8de4d1 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 {
@@ -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/fields.scss b/packages/components/src/theme/fields.scss
index b92ed88215..3979284492 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,21 +71,21 @@
 }
 
 .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 {
     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;
             }
         }
     }
@@ -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..304878d6a3 100644
--- a/packages/components/src/theme/filter.scss
+++ b/packages/components/src/theme/filter.scss
@@ -21,6 +21,9 @@
         color: $white;
         font-weight: bold;
     }
+    .list-group-item.active .fa {
+        color: $white;
+    }
 
     .list-group-item .field-caption {
         flex: 1;
@@ -32,7 +35,7 @@
     }
 
     .list-group-item .field-expand-icon {
-        color: $light-gray;
+        color: $text-color-light;
         height: 16px;
         width: 16px;
         margin-right: 5px;
@@ -53,6 +56,7 @@
         width: 15px;
         line-height: 15px;
         background-color: $badge-color;
+        border: 1px solid $white;
         display: inline-block;
         margin-top: 4px;
     }
@@ -62,6 +66,7 @@
         width: 10px;
         border-radius: 50%;
         background-color: $badge-color;
+        border: 1px solid $white;
         display: inline-block;
         margin-top: 6px;
     }
@@ -145,7 +150,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..4c2239d645 100644
--- a/packages/components/src/theme/grid.scss
+++ b/packages/components/src/theme/grid.scss
@@ -358,13 +358,13 @@ $table-cell-padding: 4px 2px;
     }
 
     .cell-error {
-      background-color: $panel-danger-heading-bg;
+      background-color: $alert-danger-bg;
 
       &:after {
         background-image: linear-gradient(225deg, $brand-danger, $brand-danger 6px, transparent 6px, transparent);
       }
       &.cell-selected {
-        background-color: $state-danger-bg;
+        background-color: $alert-danger-bg;
       }
     }
 
@@ -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,19 +411,19 @@ $table-cell-padding: 4px 2px;
         }
 
         &:hover {
-            color: $gray;
+            color: $gray-dark;
         }
     }
 
     .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/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 d4083621b6..d9d947eee5 100644
--- a/packages/components/src/theme/navbar.scss
+++ b/packages/components/src/theme/navbar.scss
@@ -352,12 +352,12 @@
 
 .empty-section {
   font-style: italic;
-  color: $light-gray;
+  color: $text-color-light;
 }
 
 .empty-section-link {
   a {
-    color: $brand-primary !important;
+    color: $link-color !important;
   }
 }
 
@@ -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..661df66b0f 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;
@@ -105,6 +105,7 @@
         display: inline-block;
         padding-left: 6px;
         background: $badge-color;
+        border: 1px solid $white;
     }
 }
 
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/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/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/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 {
diff --git a/packages/components/src/theme/search.scss b/packages/components/src/theme/search.scss
index ff7e7c407e..3c3b74070e 100644
--- a/packages/components/src/theme/search.scss
+++ b/packages/components/src/theme/search.scss
@@ -91,12 +91,6 @@
         border-radius: 4px;
     }
 
-    .submit-button {
-        float: left;
-        background: #67ab58;
-        color: white;
-    }
-
     .page-buttons {
         margin-left: auto;
     }
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 291a4b1e80..4a1ed49b4f 100644
--- a/packages/components/src/theme/variables.scss
+++ b/packages/components/src/theme/variables.scss
@@ -1,5 +1,11 @@
 @use "sass:color";
 
+$brand-primary: #2679AD;
+$brand-secondary: #116596;
+$brand-danger:    #D43F3A;
+$brand-warning:   #f0ad4e;
+$brand-success: #5AA54A;
+
 $light-gray: #d3d3d3;
 $white: #fff;
 
@@ -11,15 +17,9 @@ $gray-light:             color.adjust($gray-base, $lightness: 46.7%) !default; /
 $gray-lighten:           color.adjust($gray-base, $lightness: 60%)   !default; // #999
 $gray-lighter:           color.adjust($gray-base, $lightness: 93.5%) !default; // #eee
 
-//TODO: how to set or get these from the app instead or make sure the app can override them?
-$brand-danger:    #d9534f;
-$brand-warning:   #f0ad4e;
-$brand-primary:   #2980b9;
-$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;
@@ -27,12 +27,22 @@ $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($brand-primary, $lightness: 15%) !default;
+$link-color: #0F72C2;
+$link-hover-color:      color.adjust($link-color, $lightness: 15%) !default;
 
 $font-family-sans-serif:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 
+// Alert variables
+$alert-info-bg: #F1F9FC;
+$alert-info-text: #0B73B7;
+$alert-info-border: #C9E6F2;
+$alert-danger-bg: #FDE6E6;
+$alert-danger-text: #BF3939;
+$alert-danger-border: #FBD1D0;
+
 // Domain properties variables
 $gray-border:           #cccccc;
 $gray-border-light:     #dddddd;
@@ -70,9 +80,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;