From 968a0e45652b06ea568a92ed4a6cd5935917d522 Mon Sep 17 00:00:00 2001
From: spartanicus <arlen@dogenmedia.com>
Date: Thu, 14 Oct 2021 17:13:56 -0400
Subject: [PATCH 1/2] Refactor CSS colors (CO-2241)

---
 app/webroot/css/co-base.css       | 263 ++++++++++++++----------------
 app/webroot/css/co-color.css      |  88 +++++++---
 app/webroot/css/co-responsive.css |   4 +-
 3 files changed, 194 insertions(+), 161 deletions(-)

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index eb909463c..26a6afed2 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -32,12 +32,12 @@ html * {
   font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif;
 }
 body {
-  color: var(--cmg-color-text-dark-low);
+  color: var(--cmg-color-gray-001);
   -webkit-overflow-scrolling: touch; /* for dialog boxes */
   font-size: 14px; /* base font size */ 
 }
 h1,h2,h3,h4,h5 {
-  color: var(--cmg-color-text-dark-mid);
+  color: var(--cmg-color-gray-002);
 }
 h1 {
   font-size: 2em;
@@ -67,12 +67,12 @@ h3 {
   margin: 0;
 }
 a {
-  color: var(--cmg-color-link-primary);
+  color: var(--cmg-color-blue-001);
   text-decoration: none;
 }
 #main a:active,
 #main a:hover {
-  color: var(--cmg-color-link-primary-hover);
+  color: var(--cmg-color-blue-002);
   text-decoration: underline;
 }
 #main a.ui-widget:active,
@@ -90,7 +90,7 @@ a {
 }
 #skip-to-content {
   position: relative;
-  background-color: var(--cmg-color-link-primary);
+  background-color: var(--cmg-color-blue-001);
   color: var(--cmg-color-white);
   padding: 0 1em 0.25em ;
   border-bottom-left-radius: 10px;
@@ -101,7 +101,7 @@ a {
 #skip-to-content:focus {
   top: 0;
   transition: top 0.1s ease-in 0s, background 0.5s linear 0s;
-  background-color: #4796CC;
+  background-color: var(--cmg-color-blue-003);
 }
 /* HEADER */
 #banner {
@@ -109,7 +109,7 @@ a {
   justify-content: space-between;
   padding: 1em;
   margin: 0;
-  background-color: var(--cmg-color-banner);
+  background-color: var(--cmg-color-green-001);
   color: var(--cmg-color-white);
 }
 /* TOP MENU (BLACK BAR) */
@@ -117,7 +117,7 @@ a {
   position: relative;
   line-height: 1.5em;
   height: 30px;
-  background-color: var(--cmg-color-text-dark-low);
+  background-color: var(--cmg-color-gray-001);
 }
 /* LOGO */
 #logo {
@@ -189,9 +189,9 @@ body.logged-in #top-menu {
   right: 0;
   top: 27px;
   z-index: 200;
-  color: var(--cmg-color-text-dark-low);
-  background-color: var(--cmg-color-gray-light-high);
-  border: 1px solid var(--cmg-color-gray-light-low);
+  color: var(--cmg-color-gray-001);
+  background-color: var(--cmg-color-lightgray-002);
+  border: 1px solid var(--cmg-color-lightgray-006);
   padding: 1em;
   min-width: calc(100vw - 50px);
   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);
@@ -211,7 +211,7 @@ body.logged-in #top-menu {
   word-wrap:break-word;
 }
 #user-panel-user-info { /* mobile only styling */
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--cmg-color-lightgray-007);
   margin-top: 1em;
   padding-top: 1em;
 }
@@ -223,20 +223,20 @@ body.logged-in #top-menu {
   padding-left: 2em;
 }
 #user-panel .co-info-topbox {
-  background-color: var(--cmg-color-gray-light-mid);
+  background-color: var(--cmg-color-lightgray-004);
   margin-top: 2em;
 }
 #user-panel .co-info-topbox strong {
   font-weight: normal;
 }
 #user-panel #co-profile-link:hover {
-  background-color: var(--cmg-color-gray-light-low);
+  background-color: var(--cmg-color-lightgray-006);
 }
 #user-panel #co-profile-link .material-icons {
   vertical-align: middle;
   margin-right: 0.25em;
   font-size: 16px;
-  color: var(--cmg-color-gray-dark-mid);
+  color: var(--cmg-color-gray-002);
 }
 #user-panel h2 {
   font-size: 1.1em;
@@ -324,14 +324,14 @@ body.logged-in #top-menu {
 .co-info-topbox {
   clear: both;
   padding: 1em;
-  background-color: var(--cmg-color-infobox-yellow);
+  background-color: var(--cmg-color-yellow-002);
   margin-bottom: 1em;
 }
 #lastLogin p {
   margin-bottom: 0;
 }
 #content .co-info-topbox .material-icons {
-  color: #0b6623;
+  color: var(--cmg-color-green-002);
   font-size: 26px;
   vertical-align: bottom;
   float: left;
@@ -339,7 +339,7 @@ body.logged-in #top-menu {
   margin-top: -0.1em;
 }
 .material-icons.error {
-  color: #c00;
+  color: var(--cmg-color-red-002);
 }
 /* NAVIGATION / SIDE DRAWER */
 #navigation {
@@ -351,8 +351,8 @@ body.logged-in #top-menu {
   position: absolute;
   top: 30px;
   z-index: 20;
-  background-color: #fafafa;
-  border-right: 1px solid #ddd;
+  background-color: var(--cmg-color-lightgray-001);
+  border-right: 1px solid var(--cmg-color-lightgray-007);
   min-width: 160px;
 }
 /* show our custom navigation icon for shrinking and expanding the drawer
@@ -364,7 +364,7 @@ body.logged-in #top-menu {
   top: 3px;
   margin: 0;
   padding: 0 0 0 12px;
-  color: #f5f5f5;
+  color: var(--cmg-color-lightgray-003);
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
 }
@@ -379,7 +379,7 @@ body.logged-in #top-menu {
   list-style: none;
 }
 #main-menu > li {
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--cmg-color-lightgray-004);
 }
 #main-menu > li a {
   display: block;
@@ -387,7 +387,7 @@ body.logged-in #top-menu {
   margin: 0;
   padding: 8px 0 8px 12px;
   text-decoration: none;
-  color: #222;
+  color: var(--cmg-color-gray-001);
   position: relative;
   overflow:hidden;
 }
@@ -400,31 +400,28 @@ body.logged-in #top-menu {
   font-size: 0.9em;
   padding: 7px 8px 7px 16px;
   line-height: 1.4em;
-  color: #06c;
+  color: var(--cmg-color-blue-001);
   border: 1px solid transparent;
 }
 #main-menu > li a:hover,
 #main-menu > li a:focus {
-  background-color: #f2f2f2;
+  background-color: var(--cmg-color-lightgray-004);
 }
 #main-menu > li li a:focus {
-  border: 1px dotted #53B1F4;
+  border: 1px dotted var(--cmg-color-blue-005);
 }
 #main-menu a.selected {
-  background-color: #f5f5f5;
+  background-color: var(--cmg-color-lightgray-003);
 }
 #main-menu li li a.selected {
-  color: #06c;
-  background-color: #fafafa;
-  /* keep these if we find a better method of selecting sub-menu items:
-  color: #0067A3;
-  background-color: #e6f4ff; */
+  color: var(--cmg-color-blue-001);
+  background-color: var(--cmg-color-lightgray-005);
 }
 #main-menu .fa-fw {
   width: 2em;
 }
 #main-menu li.active a.menuTop {
-  background-color: #f2f2f2;
+  background-color: var(--cmg-color-lightgray-004);
 }
 #main-menu .menuTitleAdjust {
   margin-left: -4px;
@@ -437,7 +434,7 @@ body.logged-in #top-menu {
   font-size: 1.1em;
   position: relative;
   top: -2px;
-  color: #bbb;
+  color: var(--cmg-color-lightgray-009);
 }
 /* CONTENT */
 #siteTitle {
@@ -447,7 +444,7 @@ body.logged-in #top-menu {
   margin: 0;
 }
 #siteTitle a {
-  color: white;
+  color: var(--cmg-color-white);
   text-decoration: none;
 }
 #breadcrumbs {
@@ -463,8 +460,8 @@ body.logged-in #top-menu {
 }
 .pageTitle .deleted,
 .pageTitle .archived {
-  background-color: #e33;
-  color: white;
+  background-color: var(--cmg-color-red-003);
+  color: var(--cmg-color-white);
   font-size: 0.7em;
   font-weight: 600;
   letter-spacing: 0.8px;
@@ -473,7 +470,7 @@ body.logged-in #top-menu {
   text-transform: uppercase;
 }
 .pageTitle .archived {
-  background-color: #808083;
+  background-color: var(--cmg-color-gray-003);
 }
 /* TOP CONTENT LINKS (contextual) */
 #topLinks {
@@ -491,10 +488,10 @@ body.logged-in #top-menu {
   text-decoration: none;
   border: none;
   background: none;
-  background-color: white;
+  background-color: var(--cmg-color-white);
 }
 #topLinks a:hover {
-  color: #222;
+  color: var(--cmg-color-gray-001);
 }
 #main #topLinks a:active,
 #main #topLinks a:hover {
@@ -534,14 +531,14 @@ body.logged-in #top-menu {
   position: relative;
   padding: 0.5em 0.5em 0;
   margin: 0;
-  background-color: #f5f5f5;
+  background-color: var(--cmg-color-lightgray-003);
 }
 .top-search.open fieldset {
   padding-bottom: 0.5em;
 }
 .top-search legend {
   width: 100%;
-  background-color: #f5f5f5;
+  background-color: var(--cmg-color-lightgray-003);
   margin: 0 -0.5em;
   padding: 0.5em 0.5em 0;
   line-height: 1.8em;
@@ -567,8 +564,8 @@ body.logged-in #top-menu {
   margin: 0 0 0.5em 0;
   height: 28px;
   padding: 2px 4px;
-  border: 1px solid #ddd;
-  background-color: #fff;
+  border: 1px solid var(--cmg-color-lightgray-007);
+  background-color: var(--cmg-color-white);
 }
 .top-search label {
   margin-bottom: 0;
@@ -581,7 +578,7 @@ body.logged-in #top-menu {
 }
 .top-search input[type=text]:focus,
 .side-search input[type=text]:focus {
-  background-color: #ffd;
+  background-color: var(--cmg-color-yellow-003);
 }
 .top-search .submit-button,
 .top-search .clear-button,
@@ -631,10 +628,10 @@ body.logged-in #top-menu {
 .top-search-active-filters-remove button {
   margin-left: 2em;
   font-size: 0.9em;
-  background-color: #f5f5f5;
+  background-color: var(--cmg-color-lightgray-003);
 }
 .top-search-active-filters-remove button:hover {
-  background-color: var(--cmg-color-gray-light-low);
+  background-color: var(--cmg-color-lightgray-006);
 }
 /* RECONCILE TABLE */
 #reconcile-table {
@@ -644,26 +641,26 @@ body.logged-in #top-menu {
 }
 #reconcile-table td,
 #reconcile-table th {
-  border: 1px solid #ddd;
+  border: 1px solid var(--cmg-color-lightgray-007);
 }
 #reconcile-table th {
   font-weight: normal;
 }
 #reconcile-table th.col-names {
   text-align: center;
-  background-color: white;
+  background-color: var(--cmg-color-white);
   border: none;
   font-weight: bold;
 }
 #reconcile-table td.empty {
-  background-color: white !important;
+  background-color: var(--cmg-color-white) !important;
   border: none;
   font-size: 0.5em;
 }
 #reconcile-table tbody td.reference-ids {
   text-align: center;
   word-break: break-all;
-  background-color: #f5f5f5 !important;
+  background-color: var(--cmg-color-lightgray-003) !important;
 }
 #reconcile-table td.reconcile-actions {
   text-align: center;
@@ -673,26 +670,26 @@ body.logged-in #top-menu {
 }
 #reconcile-table th.attr-title {
   border: none;
-  background-color: white;
+  background-color: var(--cmg-color-white);
   text-align: right;
 }
 /* set the borders on the "new" reference id */
 #reconcile-table tbody td:nth-child(2) {
-  border-left: 2px solid #ccc;
-  border-right: 2px solid #ccc;
+  border-left: 2px solid var(--cmg-color-lightgray-008);
+  border-right: 2px solid var(--cmg-color-lightgray-008);
 }
 #reconcile-table tbody tr:first-child td:nth-child(2) {
-  border-top: 2px solid #ccc;
+  border-top: 2px solid var(--cmg-color-lightgray-008);
 }
 #reconcile-table tbody tr:last-child td:nth-child(2) {
-  border-bottom: 2px solid #ccc;
+  border-bottom: 2px solid var(--cmg-color-lightgray-008);
 }
 /* no zebra for this table */
 #reconcile-table tr:nth-child(2n+1) td {
-  background-color: white; 
+  background-color: var(--cmg-color-white); 
 }
 #reconcile-table tr.match td {
-  background-color: #dfd;
+  background-color: var(--cmg-color-green-003);
 }
 /* MATCHGRID MANAGEMENT */
 #matchgrid-management {
@@ -716,7 +713,7 @@ body.logged-in #top-menu {
   padding-left: 2em;
 }
 #matchgrid-config-menu a .material-icons {
-  color: #222;
+  color: var(--cmg-color-gray-001);
   margin-right: 0.5em;
 }
 /* MATCHGRID RECORDS INDEX */
@@ -738,7 +735,7 @@ th.actions {
 }
 .field-actions a.dropdown-item {
   padding: 0.5em 1em;
-  color: var(--cmg-color-link-primary);
+  color: var(--cmg-color-blue-001);
 }
 #main .field-actions a.dropdown-item:hover {
   color: var(--cmg-color-black);
@@ -749,8 +746,8 @@ th.actions {
   margin: 0;
   min-height: 1.5em;
   padding: 0.5em 1em;
-  background-color: #282;
-  color: white;
+  background-color: var(--cmg-color-green-004);
+  color: var(--cmg-color-white);
   text-align: center;
 }
 #pagination ul,
@@ -761,10 +758,10 @@ th.actions {
   padding: 0;
 }
 #pagination a {
-  color: white;
+  color: var(--cmg-color-white);
 }
 #pagination a:hover {
-  color: #f8f8f8;
+  color: var(--cmg-color-lightgray-002);
   text-decoration: underline;
 }
 #pagination .paginationNumbers a {
@@ -797,8 +794,8 @@ th.actions {
   margin: 0;
   padding: 2px;
   font-size: 0.9em;
-  background-color: #f2f2f2;
-  border: 1px solid #030;
+  background-color: var(--cmg-color-lightgray-004);
+  border: 1px solid var(--cmg-color-green-005);
   text-align: center;
 }
 #pagination .pagination-form select {
@@ -829,23 +826,12 @@ th.actions {
   top: 1px;
 }
 #pagination .btn-primary {
-  background-color: #040;
-  border-color: #030;
+  background-color: var(--cmg-color-green-006);
+  border-color: var(--cmg-color-green-005);
 }
 #pagination .btn-primary:hover {
-  background-color: #222 !important;
-  border-color: #000;
-}
-/* general jquery overrides to fix color contrast WCAG AA */
-.ui-state-default a,
-.ui-state-default a:link,
-.ui-state-default a:visited,
-a.ui-button,
-a.ui-button:link,
-a.ui-button:visited,
-.ui-button {
-  color: #06b;
-  text-decoration: none;
+  background-color: var(--cmg-color-gray-001) !important;
+  border-color: var(--cmg-color-black);
 }
 ::-webkit-input-placeholder,
 ::-moz-placeholder,
@@ -863,10 +849,10 @@ ul.data-list li {
   margin: 0 0 2px !important;
   overflow: hidden;
   padding: 2px 0 3px 0;
-  background-color: #F5F5F5;
+  background-color: var(--cmg-color-lightgray-003);
 }
 ul.data-list li:nth-child(2n) {
-  background-color: #ededed; /* note that this is slightly lighter than the .form-list zebra */
+  background-color: var(--cmg-color-lightgray-010); /* note that this is slightly lighter than the .form-list zebra */
 }
 ul.data-table li {
   background-color: unset;
@@ -892,18 +878,23 @@ ul.fields li {
 ul.form-list {
   clear: both;
   padding: 0;
+  border-top: 1px solid var(--cmg-color-lightgray-006);
 }
 ul.form-list li {
-  background-color: #f5f5f5;
-  margin: 0 0 2px;
+  background-color: var(--cmg-color-lightgray-001);
+  border-left: 1px solid var(--cmg-color-lightgray-006);
+  border-bottom: 1px solid var(--cmg-color-lightgray-006);
+  border-right: 1px solid var(--cmg-color-lightgray-006);
+  margin: 0;
   padding: 0.5em;
   list-style: none;
 }
 ul.form-list li:nth-child(even) {
-  background-color: #e5e5e5;
+  background-color: var(--cmg-color-white);
 }
 ul.form-list li.fields-submit {
   background-color: unset;
+  border: none;
 }
 ul.form-list .field-name {
   display: block;
@@ -919,7 +910,7 @@ ul.form-list .field-desc {
   font-style: italic;
 }
 ul.form-list .fields-header {
-  background-color: #fff;
+  background-color: var(--cmg-color-white);
 }
 ul.form-list input[type="text"],
 ul.form-list input[type="number"],
@@ -929,13 +920,13 @@ ul.form-list input[type="password"] {
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
-  border: 1px solid #ddd;
+  border: 1px solid ;
   padding: 4px 6px;
 }
 ul.form-list input[type="text"]:focus,
 ul.form-list input[type="number"]:focus,
 ul.form-list input[type="password"]:focus {
-  background-color: #ffd;
+  background-color: var(--cmg-color-yellow-003);
 }
 ul.form-list select {
   font-size: 0.9em;
@@ -949,18 +940,18 @@ ul.field-children {
 }
 ul.field-children li {
   margin: 0;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  border-left: 1px solid var(--cmg-color-lightgray-008);
+  border-right: 1px solid var(--cmg-color-lightgray-008);
+  border-bottom: 1px solid var(--cmg-color-lightgray-008);
 }
 ul.field-children li:nth-child(1) {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--cmg-color-lightgray-008);
 }
 ul.field-children li:nth-child(odd) {
-  background-color: #f8f8f8;
+  background-color: var(--cmg-color-lightgray-002);
 }
 ul.field-children li:nth-child(even) {
-  background-color: #ddd;
+  background-color: var(--cmg-color-lightgray-007);
 }
 ul.form-list li.field-stack .field-name,
 ul.form-list li.field-stack .field-info {
@@ -1027,7 +1018,7 @@ ul.form-list li.field-stack textarea {
 }
 /* DIALOG BOX */
 #dialog .modal-header {
-  background-color: var(--cmg-color-gray-light-mid);
+  background-color: var(--cmg-color-lightgray-004);
   border-bottom: none;
 }
 #dialog .modal-footer {
@@ -1058,7 +1049,7 @@ p { /* MDL override */
   font-size: 0.9em;
 }
 .required {
-  color: #c00;
+  color: var(--cmg-color-red-002);
 }
 .center {
   text-align: center;
@@ -1068,11 +1059,11 @@ p { /* MDL override */
 }
 .warn-level-a,
 .warn-level-a td {
-  background-color: #fcc;
+  background-color: var(--cmg-color-red-001);
 }
 .warn-level-b,
 .warn-level-b td {
-  background-color: #f5f5bb;
+  background-color: var(--cmg-color-yellow-001);
 }
 .asc, .desc {
   font-style: italic;
@@ -1090,14 +1081,6 @@ a.asc::before {
 a.desc::before {
   content: "▼"; /*\25bc in escaped hex*/
 }
-.ui-widget-header {
-  /*background-color: #9FC6E2;*/
-  background-color: #186696;
-}
-.ui-button {
-  font-size: 0.9em !important;
-  padding: 0.3em 0.75em 0.3em 0.5em;
-}
 .co-grid {
   clear: both;
   max-width: 100%; /* used with Bootstrap .container */
@@ -1109,17 +1092,17 @@ a.desc::before {
   padding: 1em;
 }
 .co-grid .co-grid-header {
-  background-color: #e8e8e8 !important;
+  background-color: var(--cmg-color-lightgray-011) !important;
   font-weight: bold;
 }
 .co-grid .co-row {
-  border-top: 1px solid var(--cmg-color-gray-light-low);
+  border-top: 1px solid var(--cmg-color-lightgray-006);
 }
 .co-grid .co-row:nth-child(even) {
-  background-color: #f8f8f8;
+  background-color: var(--cmg-color-lightgray-002);
 }
 .co-grid > div:nth-child(2) {
-  border-top: 1px solid #e8e8e8;
+  border-top: 1px solid var(--cmg-color-lightgray-011);
 }
 code,
 .fixed-width * {
@@ -1129,8 +1112,8 @@ code,
 table {
   width: 100%;
   border-collapse: collapse;
-  border-left: 1px solid var(--cmg-color-gray-light-low);
-  border-right: 1px solid var(--cmg-color-gray-light-low);
+  border-left: 1px solid var(--cmg-color-lightgray-006);
+  border-right: 1px solid var(--cmg-color-lightgray-006);
 }
 .table-container {
   overflow: auto;
@@ -1142,20 +1125,20 @@ th, td {
   font-weight: normal;
 }
 th {
-  background-color: var(--cmg-color-gray-light-low);
-  color: black;
+  background-color: var(--cmg-color-lightgray-006);
+  color: var(--cmg-color-black);
   font-weight: 600;
 }
 th a {
-  color: black;
+  color: var(--cmg-color-black);
   text-decoration: underline;
 }
 th a:hover {
-  color: #555 !important;
+  color: var(--cmg-color-gray-002) !important;
   text-decoration: none !important;
 }
 td {
-  border-bottom: 1px solid var(--cmg-color-gray-light-low);
+  border-bottom: 1px solid var(--cmg-color-lightgray-006);
 }
 tr th:first-child,
 tr td:first-child {
@@ -1169,20 +1152,20 @@ tr.noborder td {
   border: none;
 }
 tr:nth-child(odd) td {
-  background-color: #f8f8f8;
+  background-color: var(--cmg-color-lightgray-002);
 }
 tr:nth-child(even) td {
-  background-color: #fff;
+  background-color: var(--cmg-color-white);
 }
 td.indented {
-  border-left: 3em solid #fff;
+  border-left: 3em solid var(--cmg-color-white);
 }
 .linked-row {
   cursor: pointer !important;
 }
 .linked-row:hover,
 .linked-row:hover td {
-  background-color: var(--cmg-color-gray-light-low) !important;
+  background-color: var(--cmg-color-lightgray-006) !important;
 }
 .menuitembutton {
   width: 250px;
@@ -1207,8 +1190,8 @@ td.indented {
   padding: 2em 0;
   line-height: 0;
   text-align: center;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  background-color: var(--cmg-color-white);
+  border: 1px solid var(--cmg-color-lightgray-007);
   border-radius: 60px;
 }
 #co-loading-redirect {
@@ -1229,7 +1212,7 @@ td.indented {
 #co-loading-redirect span,
 .co-loading-mini span {
   animation: 1.2s linear infinite both loading;
-  background-color: var(--cmg-color-spinner-blue);
+  background-color: var(--cmg-color-blue-004);
   display: inline-block;
 }
 #co-loading span {
@@ -1269,7 +1252,7 @@ td.indented {
   padding: 0.5em 1.5em;
 }
 .btn:focus {
-  border: 1px dotted black;
+  border: 1px dotted var(--cmg-color-black);
 }
 .btn.btn-sm {
   font-size: 0.9em;
@@ -1278,44 +1261,44 @@ td.indented {
 .btn-primary,
 .btn-primary:focus,
 .btn-primary:active {
-  background-color: var(--cmg-color-blue-primary);
-  color: white;
-  border-color: var(--cmg-color-blue-primary);
+  background-color: var(--cmg-color-blue-003);
+  color: var(--cmg-color-white);
+  border-color: var(--cmg-color-blue-003);
 }
 .btn-primary,
 .btn-primary:active {
   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-primary:hover {
-  background-color: black;
-  color: white !important;
+  background-color: var(--cmg-color-black);
+  color: var(--cmg-color-white) !important;
   text-decoration: none !important;
 }
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #fff;
-  background-color: #0c75c0;
-  border-color: #0c75c0;
+  color: var(--cmg-color-white);
+  background-color: var(--cmg-color-blue-003);
+  border-color: var(--cmg-color-blue-003);
   opacity: 0.4;
 }
 .btn-default,
 .btn-default:active {
-  background-color: var(--cmg-color-gray-light-low);
+  background-color: var(--cmg-color-lightgray-006);
   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-primary);
-  color: white !important;
+  background-color: var(--cmg-color-blue-003);
+  color: var(--cmg-color-white) !important;
   text-decoration: none !important;
 }
 .btn-secondary {
-  background-color: #c33; /* red */
-  color: white;
+  background-color: var(--cmg-color-red-004);
+  color: var(--cmg-color-white);
 }
 .btn.link {
   font-size: 1em;
   text-decoration: underline;
-  color: var(--cmg-color-blue-primary);
+  color: var(--cmg-color-blue-003);
   border: none;
 }
 /* Call to Action Blocks */
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index e2d157a31..b5028a919 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -1,21 +1,71 @@
+/**
+ * COmanage Match Default Colors
+ *
+ * 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       match
+ * @since         COmanage Match v1.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ *
+ * Colors use the convention --cmg-color-hue-number with optional comments to describe
+ * how they are used. "number" does not imply color value.
+ */
+
 :root {
-  --cmg-color-blue-primary: #0c75c0;
-  --cmg-color-banner: #2a2; /* green for Match */
-  --cmg-color-spinner-blue: #9fc6e2;
-  --cmg-color-spinner-green: #2a2;
-  --cmg-color-infobox-yellow: #fbec88;
-  --cmg-color-warn-yellow: #fcc;
-  --cmg-color-warn-red: #f5f5bb;
-  --cmg-color-text-dark-low: #222;
-  --cmg-color-text-dark-mid: #555;
-  --cmg-color-link-primary: #06c; /* accessible on backgrounds down to #e7e7e7 */
-  --cmg-color-link-primary-hover: #0067A3; /* accessible on backgrounds down to #dfdfdf */ 
-  --cmg-color-gray-light-high: #f8f8f8;
-  --cmg-color-gray-light-mid: #f3f3f3;
-  --cmg-color-gray-light-low: #eee;
-  --cmg-color-gray-dark-mid: #666;
-  --cmg-color-gray-secondary: #555;
-  --cmg-color-gray-disabled: #666;
-  --cmg-color-white: #fff;
-  --cmg-color-black: #000;
+  --cmg-color-blue-001: #06c;        /* primary hyperlink color; accessible on backgrounds down to #e7e7e7 */
+  --cmg-color-blue-002: #0067A3;     /* primary hyperlink hover color; 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-gray-001: #222;        /* body text */
+  --cmg-color-gray-002: #555;        /* headings text */
+  --cmg-color-gray-003: #666;        /* disabled text or form fields */
+
+  --cmg-color-lightgray-001: #fafafa; /* background color, drawer */
+  --cmg-color-lightgray-002: #f8f8f8; /* background color */
+  --cmg-color-lightgray-003: #f5f5f5; /* background color, hamburger */
+  --cmg-color-lightgray-004: #f2f2f2; /* background color */
+  --cmg-color-lightgray-005: #fafafa; /* background color */
+  --cmg-color-lightgray-006: #eee;    /* background color */
+  --cmg-color-lightgray-007: #ddd;    /* border color */
+  --cmg-color-lightgray-008: #ccc;    /* border color */
+  --cmg-color-lightgray-009: #bbb;    /* icon color */
+  --cmg-color-lightgray-010: #ededed; /* data-list background color */
+  --cmg-color-lightgray-011: #e8e8e8; /* co-grid background color */
+
+  --cmg-color-green-001: #2a2;       /* banner */
+  --cmg-color-green-002: #0b6623;    /* infobox icon color */
+  --cmg-color-green-003: #dfd;       /* matching fields for reconciliation */
+  --cmg-color-green-004: #282;       /* pagination */
+  --cmg-color-green-005: #030;       /* pagination border color */
+  --cmg-color-green-006: #040;       /* pagination button color */
+  
+  --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 */
+  --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-white: #fff;            /* white */
+  --cmg-color-black: #000;            /* black */
 }
\ No newline at end of file
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 9333a8717..caee6d9bf 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -48,7 +48,7 @@
   }
   #logout {
     display: block;
-    color: white;
+    color: var(--cmg-color-white);
   }
   #top-menu {
     right: 15px;
@@ -229,7 +229,7 @@
     padding: 0 0.5em;
   }
   #main .field-actions a.dropdown-item:hover {
-    color: var(--cmg-color-link-primary);
+    color: var(--cmg-color-blue-001);
     text-decoration: underline;
   }
   .field-actions a.dropdown-item:hover {

From ea44c3264a8cd0d5a22520edd65950ea6e4a0fa6 Mon Sep 17 00:00:00 2001
From: spartanicus <arlen@dogenmedia.com>
Date: Fri, 15 Oct 2021 17:09:41 -0400
Subject: [PATCH 2/2] Further simplification to CSS colors and updated
 description of naming convention (CO-2241)

---
 app/webroot/css/co-base.css  | 75 ++++++++++++++++++------------------
 app/webroot/css/co-color.css | 15 ++++----
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 26a6afed2..01cfe6bfd 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -191,7 +191,7 @@ body.logged-in #top-menu {
   z-index: 200;
   color: var(--cmg-color-gray-001);
   background-color: var(--cmg-color-lightgray-002);
-  border: 1px solid var(--cmg-color-lightgray-006);
+  border: 1px solid var(--cmg-color-lightgray-005);
   padding: 1em;
   min-width: calc(100vw - 50px);
   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);
@@ -211,7 +211,7 @@ body.logged-in #top-menu {
   word-wrap:break-word;
 }
 #user-panel-user-info { /* mobile only styling */
-  border-top: 1px solid var(--cmg-color-lightgray-007);
+  border-top: 1px solid var(--cmg-color-lightgray-006);
   margin-top: 1em;
   padding-top: 1em;
 }
@@ -230,7 +230,7 @@ body.logged-in #top-menu {
   font-weight: normal;
 }
 #user-panel #co-profile-link:hover {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
 }
 #user-panel #co-profile-link .material-icons {
   vertical-align: middle;
@@ -352,7 +352,7 @@ body.logged-in #top-menu {
   top: 30px;
   z-index: 20;
   background-color: var(--cmg-color-lightgray-001);
-  border-right: 1px solid var(--cmg-color-lightgray-007);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
   min-width: 160px;
 }
 /* show our custom navigation icon for shrinking and expanding the drawer
@@ -415,7 +415,7 @@ body.logged-in #top-menu {
 }
 #main-menu li li a.selected {
   color: var(--cmg-color-blue-001);
-  background-color: var(--cmg-color-lightgray-005);
+  background-color: var(--cmg-color-lightgray-003);
 }
 #main-menu .fa-fw {
   width: 2em;
@@ -434,7 +434,7 @@ body.logged-in #top-menu {
   font-size: 1.1em;
   position: relative;
   top: -2px;
-  color: var(--cmg-color-lightgray-009);
+  color: var(--cmg-color-lightgray-008);
 }
 /* CONTENT */
 #siteTitle {
@@ -509,6 +509,7 @@ body.logged-in #top-menu {
 .top-search {
   margin-top: 0.5em;
   padding: 0;
+  border: 1px solid var(--cmg-color-lightgray-005);
 }
 .top-search legend .material-icons {
   vertical-align: middle;
@@ -531,14 +532,14 @@ body.logged-in #top-menu {
   position: relative;
   padding: 0.5em 0.5em 0;
   margin: 0;
-  background-color: var(--cmg-color-lightgray-003);
+  background-color: var(--cmg-color-lightgray-001);
 }
 .top-search.open fieldset {
   padding-bottom: 0.5em;
 }
 .top-search legend {
   width: 100%;
-  background-color: var(--cmg-color-lightgray-003);
+  background-color: var(--cmg-color-lightgray-001);
   margin: 0 -0.5em;
   padding: 0.5em 0.5em 0;
   line-height: 1.8em;
@@ -564,7 +565,7 @@ body.logged-in #top-menu {
   margin: 0 0 0.5em 0;
   height: 28px;
   padding: 2px 4px;
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
   background-color: var(--cmg-color-white);
 }
 .top-search label {
@@ -631,7 +632,7 @@ body.logged-in #top-menu {
   background-color: var(--cmg-color-lightgray-003);
 }
 .top-search-active-filters-remove button:hover {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
 }
 /* RECONCILE TABLE */
 #reconcile-table {
@@ -641,7 +642,7 @@ body.logged-in #top-menu {
 }
 #reconcile-table td,
 #reconcile-table th {
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
 }
 #reconcile-table th {
   font-weight: normal;
@@ -675,14 +676,14 @@ body.logged-in #top-menu {
 }
 /* set the borders on the "new" reference id */
 #reconcile-table tbody td:nth-child(2) {
-  border-left: 2px solid var(--cmg-color-lightgray-008);
-  border-right: 2px solid var(--cmg-color-lightgray-008);
+  border-left: 2px solid var(--cmg-color-lightgray-007);
+  border-right: 2px solid var(--cmg-color-lightgray-007);
 }
 #reconcile-table tbody tr:first-child td:nth-child(2) {
-  border-top: 2px solid var(--cmg-color-lightgray-008);
+  border-top: 2px solid var(--cmg-color-lightgray-007);
 }
 #reconcile-table tbody tr:last-child td:nth-child(2) {
-  border-bottom: 2px solid var(--cmg-color-lightgray-008);
+  border-bottom: 2px solid var(--cmg-color-lightgray-007);
 }
 /* no zebra for this table */
 #reconcile-table tr:nth-child(2n+1) td {
@@ -852,7 +853,7 @@ ul.data-list li {
   background-color: var(--cmg-color-lightgray-003);
 }
 ul.data-list li:nth-child(2n) {
-  background-color: var(--cmg-color-lightgray-010); /* note that this is slightly lighter than the .form-list zebra */
+  background-color: var(--cmg-color-lightgray-009); /* note that this is slightly lighter than the .form-list zebra */
 }
 ul.data-table li {
   background-color: unset;
@@ -878,13 +879,13 @@ ul.fields li {
 ul.form-list {
   clear: both;
   padding: 0;
-  border-top: 1px solid var(--cmg-color-lightgray-006);
+  border-top: 1px solid var(--cmg-color-lightgray-005);
 }
 ul.form-list li {
   background-color: var(--cmg-color-lightgray-001);
-  border-left: 1px solid var(--cmg-color-lightgray-006);
-  border-bottom: 1px solid var(--cmg-color-lightgray-006);
-  border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-left: 1px solid var(--cmg-color-lightgray-005);
+  border-bottom: 1px solid var(--cmg-color-lightgray-005);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
   margin: 0;
   padding: 0.5em;
   list-style: none;
@@ -940,18 +941,18 @@ ul.field-children {
 }
 ul.field-children li {
   margin: 0;
-  border-left: 1px solid var(--cmg-color-lightgray-008);
-  border-right: 1px solid var(--cmg-color-lightgray-008);
-  border-bottom: 1px solid var(--cmg-color-lightgray-008);
+  border-left: 1px solid var(--cmg-color-lightgray-007);
+  border-right: 1px solid var(--cmg-color-lightgray-007);
+  border-bottom: 1px solid var(--cmg-color-lightgray-007);
 }
 ul.field-children li:nth-child(1) {
-  border-top: 1px solid var(--cmg-color-lightgray-008);
+  border-top: 1px solid var(--cmg-color-lightgray-007);
 }
 ul.field-children li:nth-child(odd) {
   background-color: var(--cmg-color-lightgray-002);
 }
 ul.field-children li:nth-child(even) {
-  background-color: var(--cmg-color-lightgray-007);
+  background-color: var(--cmg-color-lightgray-006);
 }
 ul.form-list li.field-stack .field-name,
 ul.form-list li.field-stack .field-info {
@@ -1092,17 +1093,17 @@ a.desc::before {
   padding: 1em;
 }
 .co-grid .co-grid-header {
-  background-color: var(--cmg-color-lightgray-011) !important;
+  background-color: var(--cmg-color-lightgray-010) !important;
   font-weight: bold;
 }
 .co-grid .co-row {
-  border-top: 1px solid var(--cmg-color-lightgray-006);
+  border-top: 1px solid var(--cmg-color-lightgray-005);
 }
 .co-grid .co-row:nth-child(even) {
   background-color: var(--cmg-color-lightgray-002);
 }
 .co-grid > div:nth-child(2) {
-  border-top: 1px solid var(--cmg-color-lightgray-011);
+  border-top: 1px solid var(--cmg-color-lightgray-010);
 }
 code,
 .fixed-width * {
@@ -1112,8 +1113,8 @@ code,
 table {
   width: 100%;
   border-collapse: collapse;
-  border-left: 1px solid var(--cmg-color-lightgray-006);
-  border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-left: 1px solid var(--cmg-color-lightgray-005);
+  border-right: 1px solid var(--cmg-color-lightgray-005);
 }
 .table-container {
   overflow: auto;
@@ -1125,9 +1126,8 @@ th, td {
   font-weight: normal;
 }
 th {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
   color: var(--cmg-color-black);
-  font-weight: 600;
 }
 th a {
   color: var(--cmg-color-black);
@@ -1138,7 +1138,7 @@ th a:hover {
   text-decoration: none !important;
 }
 td {
-  border-bottom: 1px solid var(--cmg-color-lightgray-006);
+  border-bottom: 1px solid var(--cmg-color-lightgray-005);
 }
 tr th:first-child,
 tr td:first-child {
@@ -1152,7 +1152,7 @@ tr.noborder td {
   border: none;
 }
 tr:nth-child(odd) td {
-  background-color: var(--cmg-color-lightgray-002);
+  background-color: var(--cmg-color-lightgray-001);
 }
 tr:nth-child(even) td {
   background-color: var(--cmg-color-white);
@@ -1165,7 +1165,7 @@ td.indented {
 }
 .linked-row:hover,
 .linked-row:hover td {
-  background-color: var(--cmg-color-lightgray-006) !important;
+  background-color: var(--cmg-color-lightgray-002) !important;
 }
 .menuitembutton {
   width: 250px;
@@ -1191,7 +1191,7 @@ td.indented {
   line-height: 0;
   text-align: center;
   background-color: var(--cmg-color-white);
-  border: 1px solid var(--cmg-color-lightgray-007);
+  border: 1px solid var(--cmg-color-lightgray-006);
   border-radius: 60px;
 }
 #co-loading-redirect {
@@ -1272,6 +1272,7 @@ td.indented {
 .btn-primary:hover {
   background-color: var(--cmg-color-black);
   color: var(--cmg-color-white) !important;
+  border-color: var(--cmg-color-black);
   text-decoration: none !important;
 }
 .btn-primary.disabled,
@@ -1283,7 +1284,7 @@ td.indented {
 }
 .btn-default,
 .btn-default:active {
-  background-color: var(--cmg-color-lightgray-006);
+  background-color: var(--cmg-color-lightgray-005);
   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 {
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index b5028a919..1e513d28d 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -24,7 +24,9 @@
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  *
  * Colors use the convention --cmg-color-hue-number with optional comments to describe
- * how they are used. "number" does not imply color value.
+ * how they are used. Colors are mostly listed in order of prominence: the most pronounced colors
+ * are represented by the lowest numbers. The order is otherwise arbitrary and new colors can
+ * be added by appending to the list and incrementing the number.
  */
 
 :root {
@@ -42,12 +44,11 @@
   --cmg-color-lightgray-002: #f8f8f8; /* background color */
   --cmg-color-lightgray-003: #f5f5f5; /* background color, hamburger */
   --cmg-color-lightgray-004: #f2f2f2; /* background color */
-  --cmg-color-lightgray-005: #fafafa; /* background color */
-  --cmg-color-lightgray-006: #eee;    /* background color */
-  --cmg-color-lightgray-007: #ddd;    /* border color */
-  --cmg-color-lightgray-008: #ccc;    /* border color */
-  --cmg-color-lightgray-009: #bbb;    /* icon color */
-  --cmg-color-lightgray-010: #ededed; /* data-list background color */
+  --cmg-color-lightgray-005: #eee;    /* background color */
+  --cmg-color-lightgray-006: #ddd;    /* border color */
+  --cmg-color-lightgray-007: #ccc;    /* border color */
+  --cmg-color-lightgray-008: #bbb;    /* icon color */
+  --cmg-color-lightgray-009: #ededed; /* data-list background color */
   --cmg-color-lightgray-011: #e8e8e8; /* co-grid background color */
 
   --cmg-color-green-001: #2a2;       /* banner */