From 513f927c44d1d69084987085cd8d0dd7549a7c52 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Tue, 5 Jul 2022 15:05:22 -0400
Subject: [PATCH] Replace Toast messages with Alerts; create AlertsHelper;
 update colors for new theme; (CFM-172)

---
 app/resources/locales/en_US/information.po |   6 +-
 app/src/View/Helper/AlertHelper.php        |  96 ++++++++++++++++
 app/src/View/Helper/FieldHelper.php        |   9 +-
 app/templates/Cos/select.php               |   5 +-
 app/templates/Standard/add-edit-view.php   |  27 +++--
 app/templates/Standard/index.php           |  32 +++---
 app/templates/element/flash/default.php    |  25 +----
 app/templates/element/flash/error.php      |  20 +---
 app/templates/element/flash/success.php    |  23 +---
 app/templates/layout/default.php           |   9 --
 app/webroot/css/co-base.css                | 123 +++++++++------------
 app/webroot/css/co-color.css               |  41 ++++---
 12 files changed, 217 insertions(+), 199 deletions(-)
 create mode 100644 app/src/View/Helper/AlertHelper.php

diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
index 835cddf26..7e18b4997 100644
--- a/app/resources/locales/en_US/information.po
+++ b/app/resources/locales/en_US/information.po
@@ -37,13 +37,13 @@ msgid "cos.select"
 msgstr "Please select the collaboration (CO) you wish to manage."
 
 msgid "flash.default"
-msgstr "Notice"
+msgstr "Notice: "
 
 msgid "flash.error"
-msgstr "Error"
+msgstr "Error: "
 
 msgid "flash.success"
-msgstr "Success"
+msgstr "Success: "
 
 msgid "pagination.format"
 msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"
diff --git a/app/src/View/Helper/AlertHelper.php b/app/src/View/Helper/AlertHelper.php
new file mode 100644
index 000000000..a936fba04
--- /dev/null
+++ b/app/src/View/Helper/AlertHelper.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * COmanage Registry Alert Helper
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+declare(strict_types=1);
+
+namespace App\View\Helper;
+
+use \Cake\View\Helper;
+use phpDocumentor\Reflection\Types\Boolean;
+
+/**
+ * Helper which will produce Bootstrap based alert
+ *
+ * @param string $message          Alert message
+ * @param string $type             Define the type of Alert. The value should be one of
+ *                                 [success,warning,danger,info]. Defaults to 'warning'
+ * @param boolean $dismissable     Can the Alert be dismissed? Defaults to false.
+ * @param string|null $title       Title to display (typically "Success", "Error", or "Warning"). Defaults to null.
+ * @param boolean $dis_text_dark   Disable dark-text fonts for light|info color mode.
+ * @return mixed - a constructed HTML block
+ * @since  COmanage Registry v5.0.0
+ */
+class AlertHelper extends Helper {
+  
+  public $helpers = ['Html'];
+  
+  public function alert(
+    string $message,
+    string $type = 'warning',
+    bool $dismissable = false,
+    string $title = null ) {
+    
+    $closeButton = '';
+    $dismissableClass = '';
+    if($dismissable) {
+      $closeButton = '
+        <span class="alert-button">
+          <button type="button" class="btn-close nospin" data-bs-dismiss="alert" aria-label="Close"></button>
+        </span>
+      ';
+      $dismissableClass = ' alert-dismissible';
+    }
+  
+    $titleMarkup = '';
+    if(!empty($title)) {
+      $titleMarkup = '<span class="alert-title-text">' . $title . '</span>';
+    }
+    
+    return '
+      <div class="alert alert-' . $type . $dismissableClass . ' co-alert" role="alert">
+        <div class="alert-body d-flex align-items-center">
+          <span class="alert-title d-flex align-items-center">
+            ' . $this->getAlertIcon($type) . $titleMarkup .  '
+          </span>
+          <span class="alert-message">        
+            ' . $message . '
+          </span>
+          ' . $closeButton . '
+        </div>
+      </div>
+    ';
+  }
+  
+  public function getAlertIcon(string $type) {
+    switch($type) {
+      case('success'): return '<span class="material-icons-outlined alert-icon">check_circle</span>';
+      case('info'): return '<span class="material-icons-outlined alert-icon">info</span>';
+      default: return '<span class="material-icons-outlined alert-icon">report_problem</span>';
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 8ed937619..a1c04693f 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -34,7 +34,7 @@
 use Cake\View\Helper;
 
 class FieldHelper extends Helper {
-  public $helpers = ['Form', 'Html', 'Url'];
+  public $helpers = ['Form', 'Html', 'Url', 'Alert'];
   
   // Is this read-only or read-write?
   protected $editable = true;
@@ -57,10 +57,9 @@ class FieldHelper extends Helper {
    */
   
   public function banner(string $info) {
-    return '<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  ' . $info . '
-</div>';
+    return '<li class="alert-banner">' .
+      $this->Alert->alert($info, 'warning')
+    . '</li>';
   }
   
   /**
diff --git a/app/templates/Cos/select.php b/app/templates/Cos/select.php
index 0993a734d..2f61d5bbf 100644
--- a/app/templates/Cos/select.php
+++ b/app/templates/Cos/select.php
@@ -35,10 +35,7 @@
 </div>
 
 <?php if(count($vv_available_cos) == 0): ?>
-  <div class="co-info-topbox">
-    <em class="material-icons">info</em>
-    <?= __d('information','cos.none'); ?>
-  </div>
+  <?=  $this->Alert->alert(__d('information','cos.none'), 'warning') ?>
 <?php else: // vv_available_cos ?>
   <p><?= __d('information', 'cos.select'); ?></p>
   <div id="fpList" class="co-grid co-grid-with-header container">
diff --git a/app/templates/Standard/add-edit-view.php b/app/templates/Standard/add-edit-view.php
index b2c4f4186..7f8f43ef6 100644
--- a/app/templates/Standard/add-edit-view.php
+++ b/app/templates/Standard/add-edit-view.php
@@ -77,19 +77,24 @@
     }
   ?>
 </div>
-<?php
-// XXX this doesn't work yet because we don't include fields.inc until later
-//     either create a second file to include earlier, or use a function to emit
-//     the fields (which would be more consistent with how Views render...)
-if(!empty($banners)) {
-  foreach($banners as $b): ?>  
-<div class="co-info-topbox">
-  <em class="material-icons">info</em>
-  <?php print $b; ?>
+
+<!-- Flash Messages and defined Info Banners -->
+<div class="alert-container" id="flash-messages">
+  <?= $this->Flash->render() ?>
+
+  <?php
+  // XXX this doesn't work yet because we don't include fields.inc until later
+  //     either create a second file to include earlier, or use a function to emit
+  //     the fields (which would be more consistent with how Views render...)
+  if(!empty($banners)) {
+    foreach($banners as $b) {
+      print $this->Alert->alert($b, 'warning');
+    }
+  }
+  ?>
 </div>
-<?php endforeach; // $banners
-}
 
+<?php
 // By default, the form will POST to the current controller
 // Note we need to open the form for view so Cake will autopopulate values
 print $this->Form->create($vv_obj);
diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
index 6d5136e8f..582d498e7 100644
--- a/app/templates/Standard/index.php
+++ b/app/templates/Standard/index.php
@@ -139,23 +139,23 @@ function _column_key($modelsName, $c, $tz=null) {
   }
   ?>
 </div>
-<?php if(!empty($indexBanners)): ?>
-  <?php foreach($indexBanners as $b): ?>
-    <div class="co-info-topbox">
-      <em class="material-icons">info</em>
-      <?= $b; ?>
-    </div>
-  <?php endforeach; // $indexBanners ?>
-<?php endif; // $indexBanners ?>
 
-<?php if(!empty($banners)): ?>
-  <?php foreach($banners as $b): ?>
-    <div class="co-info-topbox">
-      <em class="material-icons">info</em>
-      <?= $b; ?>
-    </div>
-  <?php endforeach; // $banners ?>
-<?php endif; // $banners ?>
+<!-- Flash Messages and defined Info Banners -->
+<div class="alert-container" id="flash-messages">
+  <?= $this->Flash->render() ?>
+
+  <?php if(!empty($indexBanners)): ?>
+    <?php foreach($indexBanners as $b): ?>
+      <?=  $this->Alert->alert($b, 'warning') ?>
+    <?php endforeach; // $indexBanners ?>
+  <?php endif; // $indexBanners ?>
+
+  <?php if(!empty($banners)): ?>
+    <?php foreach($banners as $b): ?>
+      <?=  $this->Alert->alert($b, 'warning') ?>
+    <?php endforeach; // $banners ?>
+  <?php endif; // $banners ?>
+</div>
 
 <!-- Search block -->
 <?php if(isset($vv_searchable_attributes)): ?>
diff --git a/app/templates/element/flash/default.php b/app/templates/element/flash/default.php
index c4e4a2f4b..b395c63de 100644
--- a/app/templates/element/flash/default.php
+++ b/app/templates/element/flash/default.php
@@ -1,4 +1,5 @@
 <?php
+  // XXX are these classes set anywhere? Are they in use?
   $class = 'message';
   if (!empty($params['class'])) {
     $class .= ' ' . $params['class'];
@@ -7,30 +8,8 @@
     $message = h($message);
   }
 ?>
-<?php /*
-<div class="<?= h($class) ?>" onclick="this.classList.add('hidden');"><?= $message ?></div>
-*/ ?>
-
 
 <?php if(!empty($message)): ?>
-  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.default'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'warning', true, __d('information','flash.default')) ?>
 <?php endif; ?>
 
diff --git a/app/templates/element/flash/error.php b/app/templates/element/flash/error.php
index 1d047dd32..2188d8162 100644
--- a/app/templates/element/flash/error.php
+++ b/app/templates/element/flash/error.php
@@ -8,23 +8,5 @@
 */ ?>
 
 <?php if(!empty($message)): ?>
-  <div class="toast error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.error'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'danger', true, __d('information','flash.error')) ?>
 <?php endif; ?>
diff --git a/app/templates/element/flash/success.php b/app/templates/element/flash/success.php
index b021443f1..f4c80a68e 100644
--- a/app/templates/element/flash/success.php
+++ b/app/templates/element/flash/success.php
@@ -3,28 +3,7 @@
     $message = h($message);
 }
 ?>
-<?php /*
-<div class="message success" onclick="this.classList.add('hidden')"><?= $message ?></div>
-*/ ?>
 
 <?php if(!empty($message)): ?>
-  <div class="toast success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
-    <div class="toast-header">
-      <?= $this->Html->image("COmanage-Gears-SM.png", array('alt' => __('registry.meta.logo'))); ?>
-      <span class="me-auto"><?= __('product.comanage'); ?></span>
-      <small><?= __d('information','flash.success'); ?></small>
-      <button type="button" class="btn-close nospin" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      <?= h($message); ?>
-    </div>
-  </div>
-  
-  <script>
-    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
-    var toastList = toastElList.map(function(toastEl) {
-      return new bootstrap.Toast(toastEl);
-    });
-    toastList.forEach(toast => toast.show());
-  </script>
+  <?= $this->Alert->alert(h($message), 'success', true, __d('information','flash.success')) ?>
 <?php endif; ?>
\ No newline at end of file
diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
index cf2deb5ee..c1cd1fa83 100644
--- a/app/templates/layout/default.php
+++ b/app/templates/layout/default.php
@@ -197,15 +197,6 @@
 
     <!-- loading animation -->
     <div id="co-loading"><span></span><span></span><span></span></div>
-    
-    <!-- informational messages -->
-    <div 
-      class="toast-container" 
-      id="flash-messages" 
-      aria-live="polite" 
-      aria-atomic="true" >
-      <?= $this->Flash->render() ?>
-    </div>
 
     <!-- modal dialog box -->
     <?= $this->element('dialog') ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 33a3c27fa..96d306890 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -100,7 +100,7 @@ a {
 #skip-to-content:focus {
   top: 0;
   transition: top 0.1s ease-in 0s, background 0.5s linear 0s;
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
 }
 /* HEADER */
 #banner {
@@ -346,66 +346,47 @@ body.logged-in #top-menu {
   clear: both;
   padding: 1em 0;
 }
-/* NOTICES */
+/* ALERT MESSAGES */
 #flash-messages {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: 1em auto;
-  z-index: 100;
-}
-#flash-messages .toast-header img {
-  width: 20px;
-  margin-right: 0.3em;
+  margin: 0;
 }
-#flash-messages .toast.success .toast-header {
-  background-color: var(--cmg-color-green-003);
-  color: white;
+.co-alert {
+  margin: 0 auto 1em;
+  border-radius: 0;
 }
-#flash-messages .toast.error .toast-header {
-  background-color: var(--cmg-color-red-002);
-  color: white;
+.co-alert.alert-success {
+  background-color: var(--cmg-color-green-001);
+  border-color: var(--cmg-color-green-003);
 }
-#flash-messages .toast.default .toast-header {
+.co-alert.alert-warning {
   background-color: var(--cmg-color-yellow-001);
-  color: black;
+  color: var(--cmg-color-yellow-002);
+  border-color: var(--cmg-color-yellow-003);
 }
-#flash-messages .material-icons {
-  font-size: 20px !important;
-  padding: 0;
-  margin: 0 4px 0 -10px;
-  vertical-align: text-bottom;
+.co-alert.alert-danger {
+  background-color: var(--cmg-color-red-001);
+  color: var(--cmg-color-red-006);
+  border-color: var(--cmg-color-red-007);
 }
-/* General icon and box styling */
-.co-info { /* info icon */
-  float: left;
-  margin: 0.3em 0.3em 0 0;
+.co-alert .alert-icon {
+  margin-right: 0.1rem;
 }
-.co-alert { /* alert icon */
-  float:left;
-  margin:0 7px 20px 0;
+.co-alert .alert-title-text {
+  margin-right: 0.25em;
 }
-.co-info-topbox {
-  clear: both;
-  padding: 1em;
-  background-color: var(--cmg-color-yellow-002);
-  margin-bottom: 1em;
+/* Alerts in the add-edit form: */
+ul.form-list li.alert-banner {
+  display: block;
+  padding: 0;
+}
+ul.form-list li.alert-banner .co-alert {
+  margin: 0;
+  border: none;
 }
 #lastLogin p {
   margin-bottom: 0;
 }
-#content .co-info-topbox .material-icons {
-  color: var(--cmg-color-green-001);
-  font-size: 26px;
-  vertical-align: bottom;
-  float: left;
-  margin-right: 0.25em;
-  margin-top: -0.1em;
-}
-.material-icons.error {
-  color: var(--cmg-color-red-002);
-}
+/* MAIN NAVIGATION and CONTENT */
 #main-wrapper {
   position: relative;
 }
@@ -538,7 +519,7 @@ body.logged-in #top-menu {
 #main-menu ul.menu-panel-lists ul li a {
   display: inline;
   padding: 0;
-  color: var(--cmg-color-blue-003);
+  color: var(--cmg-color-blue-002);
 }
 #main-menu ul.menu-panel-lists ul li a:hover {
   text-decoration: underline;
@@ -714,7 +695,7 @@ body.logged-in #top-menu {
 }
 .top-filters input[type=text]:focus,
 .side-search input[type=text]:focus {
-  background-color: var(--cmg-color-yellow-003);
+  background-color: var(--cmg-color-yellow-004);
 }
 .top-filters .submit-button,
 .top-filters .clear-button,
@@ -835,7 +816,7 @@ body.logged-in #top-menu {
   background-color: var(--cmg-color-white);
 }
 #reconcile-table tr.match td {
-  background-color: var(--cmg-color-green-002);
+  background-color: var(--cmg-color-green-004);
 }
 /* MATCHGRID MANAGEMENT */
 #matchgrid-management {
@@ -975,7 +956,7 @@ th.actions {
   top: 1px;
 }
 #pagination .btn-primary {
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
   border-color: var(--cmg-color-blue-002);
 }
 #pagination .btn-primary:hover,
@@ -1083,7 +1064,7 @@ ul.form-list input[type="password"] {
 ul.form-list input[type="text"]:focus,
 ul.form-list input[type="number"]:focus,
 ul.form-list input[type="password"]:focus {
-  background-color: var(--cmg-color-yellow-003);
+  background-color: var(--cmg-color-yellow-004);
 }
 ul.form-list select {
   font-size: 0.9em;
@@ -1255,7 +1236,7 @@ ul.form-list .cm-time-picker-vals li {
   margin: 0;
 }
 .cm-time-picker-vals button:focus {
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
   color: var(--cmg-color-white);
   border-radius: 14px;
 }
@@ -1457,7 +1438,7 @@ td.indented {
 #co-loading-redirect span,
 .co-loading-mini span {
   animation: 1.2s linear infinite both loading;
-  background-color: var(--cmg-color-blue-004);
+  background-color: var(--cmg-color-blue-003);
   display: inline-block;
 }
 #co-loading span {
@@ -1506,9 +1487,9 @@ td.indented {
 .btn-primary,
 .btn-primary:focus,
 .btn-primary:active {
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
   color: var(--cmg-color-white);
-  border-color: var(--cmg-color-blue-003);
+  border-color: var(--cmg-color-blue-002);
 }
 .btn-primary,
 .btn-primary:active {
@@ -1523,8 +1504,8 @@ td.indented {
 .btn-primary.disabled,
 .btn-primary:disabled {
   color: var(--cmg-color-white);
-  background-color: var(--cmg-color-blue-003);
-  border-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
+  border-color: var(--cmg-color-blue-002);
   opacity: 0.4;
 }
 .btn-default,
@@ -1533,7 +1514,7 @@ td.indented {
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .btn-default:hover {
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
   color: var(--cmg-color-white) !important;
   text-decoration: none !important;
 }
@@ -1544,7 +1525,7 @@ td.indented {
 .btn.link {
   font-size: 1em;
   text-decoration: underline;
-  color: var(--cmg-color-blue-003);
+  color: var(--cmg-color-blue-002);
   border: none;
 }
 /* Call to Action Blocks */
@@ -1579,34 +1560,34 @@ td.indented {
   border: 1px solid transparent;
 }
 .bg-warning {
-  background-color: var(--cmg-color-yellow-002);
+  background-color: var(--cmg-color-yellow-001);
 }
 .bg-primary {
-  background-color: var(--cmg-color-blue-003);
+  background-color: var(--cmg-color-blue-002);
 }
 .bg-secondary {
   background-color: var(--cmg-color-gray-002);
 }
 /* Bootstrap bg-outline */
 .bg-outline-primary {
-  color: var(--cmg-color-blue-003);
-  border: 1px solid var(--cmg-color-blue-003);
+  color: var(--cmg-color-blue-002);
+  border: 1px solid var(--cmg-color-blue-002);
 }
 .bg-outline-info {
-  color: var(--cmg-color-blue-006);
-  border: 1px solid var(--cmg-color-blue-006);
+  color: var(--cmg-color-blue-004);
+  border: 1px solid var(--cmg-color-blue-004);
 }
 .bg-outline-danger {
   color: var(--cmg-color-red-005);;
   border: 1px solid var(--cmg-color-red-005);;
 }
 .bg-outline-success {
-  color: var(--cmg-color-green-003);
-  border: 1px solid var(--cmg-color-green-003);
+  color: var(--cmg-color-green-002);
+  border: 1px solid var(--cmg-color-green-002);
 }
 .bg-outline-warning {
-  color: var(--cmg-color-yellow-002);
-  border: 1px solid var(--cmg-color-yellow-002);
+  color: var(--cmg-color-yellow-001);
+  border: 1px solid var(--cmg-color-yellow-001);
 }
 .bg-outline-light {
   color: var(--cmg-color-gray-004);
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index 7748a1bca..02412bea4 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -30,19 +30,20 @@
  */
 
 :root {
-  --cmg-color-blue-001: #06c;        /* primary hyperlink color; accessible on backgrounds down to #e7e7e7 */
-  --cmg-color-blue-002: #0067A3;     /* Registry v5.x banner color, primary hyperlink hover color; pagination; accessible on backgrounds down to #dfdfdf */
-  --cmg-color-blue-003: #0c75c0;     /* submit buttons, .btn-primary */
-  --cmg-color-blue-004: #9fc6e2;     /* spinner  */
-  /*--cmg-color-blue-005: #53B1F4;     !* link focus borders for keyboard nav *!*/
-  --cmg-color-blue-005: #0067A3;
-  --cmg-color-blue-006: #17a2b8;     /* info badge */
+  /* Blues */
+  --cmg-color-blue-001: #06c;        /* primary hyperlink color, spinner; accessible on backgrounds down to #e7e7e7 */
+  --cmg-color-blue-002: #115791;     /* Registry v5.x banner color, submit buttons, .btn-primary, 
+                                        primary hyperlink hover color; pagination; accessible on backgrounds down to #c9c9c9 */
+  --cmg-color-blue-003: #9fc6e2;     /* spinner  */
+  --cmg-color-blue-004: #17a2b8;     /* info badge; XXX check for deprecated */
 
+  /* Dark Grays */
   --cmg-color-gray-001: #222;        /* body text */
-  --cmg-color-gray-002: #555;        /* headings text */
+  --cmg-color-gray-002: #444;        /* headings text */
   --cmg-color-gray-003: #666;        /* disabled text or form fields */
   --cmg-color-gray-004: #212529;     /* badge light */
 
+  /* Light Grays */
   --cmg-color-lightgray-001: #fafafa; /* background color */
   --cmg-color-lightgray-002: #f8f8f8; /* background color */
   --cmg-color-lightgray-003: #f5f5f5; /* background color */
@@ -54,20 +55,28 @@
   --cmg-color-lightgray-009: #ededed; /* data-list background color */
   --cmg-color-lightgray-010: #e8e8e8; /* co-grid background color */
   
-  --cmg-color-green-001: #0b6623;    /* infobox icon color */
-  --cmg-color-green-002: #dfd;       /* highlight: matching fields for reconciliation */
-  --cmg-color-green-003: #28a745;    /* success badge */
+  /* Greens */
+  --cmg-color-green-001: #b4ffba;     /* alert: success */
+  --cmg-color-green-002: #28a745;     /* alert: success text color, badge outline */
+  --cmg-color-green-003: #acf4b2;     /* alert: success border color */
+  --cmg-color-green-004: #dfd;        /* highlight: matching fields for reconciliation */
 
-  --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
-  --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
-  --cmg-color-yellow-003: #ffd;       /* forms: focused input */
-
-  --cmg-color-red-001: #fcc;          /* red warning */
+  /* Yellows */
+  --cmg-color-yellow-001: #fffeb4;    /* alert: warning */
+  --cmg-color-yellow-002: #41412e;    /* alert: warning text color */
+  --cmg-color-yellow-003: #f6f5ae;    /* alert: warning border color */
+  --cmg-color-yellow-004: #ffd;       /* forms: focused input */
+  
+  /* Reds */
+  --cmg-color-red-001: #ffd4d4;       /* alert: danger */
   --cmg-color-red-002: #c00;          /* forms: error icons */
   --cmg-color-red-003: #e33;          /* title for deleted/archived */
   --cmg-color-red-004: #c33;          /* button */
   --cmg-color-red-005: #dc3545;       /* danger badge */
+  --cmg-color-red-006: #842029;       /* alert: danger text color */
+  --cmg-color-red-007: #f8cece;       /* alert: danger border color */
 
+  /* White and Black */
   --cmg-color-white: #fff;            /* white */
   --cmg-color-black: #000;            /* black */