branch with oregon branding

app/javascript/css/admin_navbar.scss

@@ -144,14 +144,14 @@
   }
 
   ul.dropdown-menu li a:hover, ul.dropdown-menu li a:focus {
-    background-color: var(--complete-tint);
+    background-color: var(--tertiary-tint);
     font-weight: 600;
     transition: all 0.3s ease 0s;
   }
 
   .message-unread {
     padding: ($spacer / 3) ($spacer / 2);
-    background: var(--enrollment-status-yellow);
+    background: var(--tab-active-border);
     color: var(--default-font-color);
     margin-left: $spacer / 3;
   }

app/javascript/css/colors.scss

@@ -53,25 +53,27 @@
   --text-secondary: hsla(30, 2%, 37%, 1);
 
   //palette
-  --primary-color: #3d5d6f;
-  --primary-color-dark: #314a59;
-  --primary-color-darker: #253843;
+  --primary-color: #293352;
+  --primary-color-dark: #293352;
+  --primary-color-darker: #293352;
   --default-font-color: #323130;
   --placeholder-color: #676767;
   --placeholder-font-weight: 400;
   --floatlabel-color: #767676;
   --floatlabel-onclick-color: #676767;
   --input-text-color: #454545;
   --form-element-text-color: #454545;
-  --tertiary-tint: #e0e5d8;
+  --tertiary-tint: #fffbce;
 
-  --secondary-color: #3b6b90;
-  --secondary-color-dark: #2e5470;
-  --secondary-color-darker: #213c50;
+  --secondary-color: #005595;
+  --secondary-color-dark: #004C86;
+  --secondary-color-darker: #004477;
 
-  --tertiary-color: #5a7334;
-  --tertiary-color-dark: #465929;
-  --tertiary-color-darker: #32401d;
+  --tertiary-color: #c60778;
+  --tertiary-color-dark: #b2066c;
+  --tertiary-color-darker: #9e0560;
+
+  --quaternary-color: #96e6eb;
 
   //fundamentals
   --primary-hover-color: var(--primary-color-dark);
@@ -105,20 +107,108 @@
   --enrollment-status-red: #a21e1f;
   --enrollment-status-green: #027314;
   --enrollment-status-yellow: #e5a900;
-  --enrollment-status-blue: #003260;
-  --enrollment-status-grey: #3b3a39;
+  --enrollment-status-blue: #293352;
+  --enrollment-status-grey: #3B3A39;
 
-  --button-primary-color: #3d5d6f;
-  --button-primary-hover-color: #314a59;
-  --button-primary-active-color: #253843;
+  --button-primary-color: #293352;
+  --button-primary-hover-color: #293352;
+  --button-primary-active-color: #293352;
+
+  --button-secondary-color: #005595;
+  --button-secondary-hover-color: var(--secondary-color-dark);
+  --button-secondary-active-color: var(--secondary-color-darker);
+
+  --button-tertiary-color: var(--tertiary-color);
+  --button-tertiary-hover-color: var(--tertiary-color-dark);
+  --button-tertiary-active-color: var(--tertiary-color-darker);
+
+  --button-error-color: #a21e1f;
+  --button-error-hover-color: #85191a;
+  --button-error-active-color: #671314;
+
+  --badge-current-bg: hsla(206, 30%, 82%, 1);
+  --badge-current-border: hsla(206, 33%, 66%, 1);
+  --badge-standard-bg: hsla(321, 19%, 80%, 1);
+  --badge-standard-border: hsla(317, 33%, 38%, 1);
+
+  --tab-active-border: #fff26c;
+  --nav-dropdown-drop-shadow: hsla(0, 0%, 0%, 0.13);
+  --subnav-bg: #f5f7fa;
+}
+
+[data-theme='or'] {
+  --default-font-color: #323130;
+  --text-secondary: hsla(30, 2%, 37%, 1);
+
+  //palette
+  --primary-color: #293352;
+  --primary-color-dark: #293352;
+  --primary-color-darker: #293352;
+  --default-font-color: #323130;
+  --placeholder-color: #676767;
+  --placeholder-font-weight: 400;
+  --floatlabel-color: #767676;
+  --floatlabel-onclick-color: #676767;
+  --input-text-color: #454545;
+  --form-element-text-color: #454545;
+  --tertiary-tint: #fffbce;
+
+  --secondary-color: #005595;
+  --secondary-color-dark: #004C86;
+  --secondary-color-darker: #004477;
+
+  --tertiary-color: #c60778;
+  --tertiary-color-dark: #b2066c;
+  --tertiary-color-darker: #9e0560;
+
+  --quaternary-color: #96e6eb;
+
+  //fundamentals
+  --primary-hover-color: var(--primary-color-dark);
+  --primary-active-color: var(--primary-color-darker);
+  --primary-focus-color: var(--primary-color-dark);
+
+  --secondary-hover-color: var(--secondary-color-dark);
+  --secondary-active-color: var(--secondary-color-darker);
+  --secondary-focus-color: var(--secondary-color-dark);
+
+  --tertiary-hover-color: var(--tertiary-color-dark);
+  --tertiary-active-color: var(--tertiary-color-darker);
+  --tertiary-focus-color: var(--tertiary-color-dark);
+
+  //semantic
+  --body-color: var(--grey-005);
+  --placeholder-color: #676767;
+  --placeholder-font-weight: 400;
+  --floatlabel-color: #767676;
+  --floatlabel-onclick-color: #676767;
+  --input-text-color: #454545;
+  --form-element-text-color: #454545;
+
+  --button-default-color: var(--primary-color);
+  --button-default-hover-color: var(--primary-hover-color);
+  --button-default-active-color: var(--primary-color-darker);
+
+  --button-outline-hover-bg: #e2e9ee;
+  --button-outline-active-bg: #cedae3;
+
+  --enrollment-status-red: #a21e1f;
+  --enrollment-status-green: #027314;
+  --enrollment-status-yellow: #e5a900;
+  --enrollment-status-blue: #293352;
+  --enrollment-status-grey: #3B3A39;
+
+  --button-primary-color: #293352;
+  --button-primary-hover-color: #293352;
+  --button-primary-active-color: #293352;
 
-  --button-secondary-color: #3b6b90;
-  --button-secondary-hover-color: #345f80;
-  --button-secondary-active-color: #274760;
+  --button-secondary-color: #005595;
+  --button-secondary-hover-color: var(--secondary-color-dark);
+  --button-secondary-active-color: var(--secondary-color-darker);
 
-  --button-tertiary-color: #647f3a;
-  --button-tertiary-hover-color: #50662e;
-  --button-tertiary-active-color: #3c4c23;
+  --button-tertiary-color: var(--tertiary-color);
+  --button-tertiary-hover-color: var(--tertiary-color-dark);
+  --button-tertiary-active-color: var(--tertiary-color-darker);
 
   --button-error-color: #a21e1f;
   --button-error-hover-color: #85191a;
@@ -129,9 +219,9 @@
   --badge-standard-bg: hsla(321, 19%, 80%, 1);
   --badge-standard-border: hsla(317, 33%, 38%, 1);
 
-  --tab-active-border: #A2B289;
+  --tab-active-border: #fff26c;
   --nav-dropdown-drop-shadow: hsla(0, 0%, 0%, 0.13);
-  --subnav-bg: #EBEEF0;
+  --subnav-bg: #f5f7fa;
 }
 
 [data-theme='dc'] {
@@ -172,17 +262,17 @@
   --button-error-hover-color: #85191a;
   --button-error-active-color: #671314;
 
-  --tab-active-border: #A2B289;
+  --tab-active-border: #fff26c;
   --nav-dropdown-drop-shadow: hsla(0, 0%, 0%, 0.13);
 }
 
 [data-contrast='true'] {
   --secondary-font-color: #676c72; //secondary text gray
   --bold-font-color: #323130; //bold text
-  --theme-primary-blue: #3b6b90; //primary blue
-  --theme-secondary: #425c6e; //secondary dark blue
-  --primary-red: #d42537; //primary red
-  --background-light-red: #f9f1f1; //error notice background color
+  --theme-primary-blue: var(--primary-color); //primary blue
+  --theme-secondary: var(--secondary-color); //secondary dark blue
+  --primary-red: #D42537; //primary red
+  --background-light-red: #F9F1F1; //error notice background color
   --primary-green: #5a7334; //green continue buttons
   --secondary-green: #738c4a; //green for continue button hover
   --success-green-background: #e3f9e6; //green for success pill
@@ -210,21 +300,21 @@
   --input-text-color: #454545;
   --form-element-text-color: #454545;
 
-  --button-default-color: #3d5d6f;
-  --button-default-hover-color: #314a59;
-  --button-default-active-color: #253843;
+  --button-default-color: #293352;
+  --button-default-hover-color: #293352;
+  --button-default-active-color: #293352;
 
-  --button-primary-color: #3d5d6f;
+  --button-primary-color: #181e49;
   --button-primary-hover-color: #314a59;
   --button-primary-active-color: #253843;
 
-  --button-secondary-color: #3b6b90;
-  --button-secondary-hover-color: #345f80;
-  --button-secondary-active-color: #274760;
+  --button-secondary-color: var(--secondary-color);
+  --button-secondary-hover-color: var(--secondary-color-dark);
+  --button-secondary-active-color: var(--secondary-color-darker);
 
-  --button-tertiary-color: #647f3a;
-  --button-tertiary-hover-color: #50662e;
-  --button-tertiary-active-color: #3c4c23;
+  --button-tertiary-color: var(--tertiary-color);
+  --button-tertiary-hover-color: var(--tertiary-color-dark);
+  --button-tertiary-active-color: var(--tertiary-color-darker);
 
   --button-error-color: var(--status-red);
   --button-error-hover-color: var(--status-red-hover);

app/javascript/css/contrast_level_aa.scss

@@ -2,15 +2,14 @@
 // all contents of this file must be nested within the data-contrast="true" selector to make sure they don't leak to other themes.
 // These will only be applied if the contrast level is set to true in the layout.
 [data-contrast='true'] {
-  --font: Barlow, sans-serif;
 
   // these colors should be remove from this file and added to the colors.scss file
   // once bootstrap is turned on in production
   --placeholder-font-weight: 400;
   --secondary-font-color: #676c72; //secondary text gray
   --bold-font-color: #323130; //bold text
-  --theme-primary-blue: #3b6b90; //primary blue
-  --theme-secondary: #425c6e; //secondary dark blue
+  --theme-primary-blue: #293352; //primary blue
+  --theme-secondary: #005595; //secondary dark blue
   --primary-red: #d42537; //primary red
   --background-light-red: #f9f1f1; //error notice background color
   --primary-green: #5a7334; //green continue buttons
@@ -40,21 +39,21 @@
   --input-text-color: #454545;
   --form-element-text-color: #454545;
 
-  --button-default-color: #3d5d6f;
-  --button-default-hover-color: #314a59;
-  --button-default-active-color: #253843;
+  --button-default-color: #181e49;
+  --button-default-hover-color: #13183a;
+  --button-default-active-color: #0c0f24;
 
-  --button-primary-color: #3d5d6f;
-  --button-primary-hover-color: #314a59;
-  --button-primary-active-color: #253843;
+  --button-primary-color: #181e49;
+  --button-primary-hover-color: #13183a;
+  --button-primary-active-color: #0c0f24;
 
-  --button-secondary-color: #3b6b90;
-  --button-secondary-hover-color: #345f80;
-  --button-secondary-active-color: #274760;
+  --button-secondary-color: #005595;
+  --button-secondary-hover-color: #004C86;
+  --button-secondary-active-color: #004477;
 
-  --button-tertiary-color: #647f3a;
-  --button-tertiary-hover-color: #50662e;
-  --button-tertiary-active-color: #3c4c23;
+  --button-tertiary-color: #c60778;
+  --button-tertiary-hover-color: #b2066c;
+  --button-tertiary-active-color: #9e0560;
 
   --button-error-color: var(--status-red);
   --button-error-hover-color: var(--status-red-hover);

app/javascript/css/main.scss

@@ -329,7 +329,7 @@ a.btn-nav-accordion, a.btn-nav-accordion:hover {
 
     &:hover,
     &:focus {
-      background-color: var(--complete-tint);
+      background-color: var(--tertiary-tint);
       font-weight: 600;
     }
 

app/javascript/css/me.scss

@@ -1,5 +1,5 @@
 // these styles will be loaded for client "me" only
 // all contents of this file must be nested within the data-theme="me" selector to make sure they don't leak to other clients.
 [data-theme="me"] {
-  --font: Barlow, sans-serif;
+  --font: Helvetica Neue,Helvetica,Arial,sans-serif;
 }

app/javascript/css/nav.scss

@@ -2,7 +2,7 @@
 header.navbar-primary {
   font-size: 14px;
   background-color: var(--grey-000);
-  border-bottom: solid 3px var(--theme-primary-blue, #007bc4);
+  border-bottom: solid 3px var(--quaternary-color, #007bc4);
 
   .navbar-brand img {
     max-height: 40px;
@@ -229,15 +229,15 @@ ul.breadcrumbs {
 
   .message-unread {
     padding: ($spacer / 3) ($spacer / 2);
-    background: var(--enrollment-status-yellow);
+    background: var(--tab-active-border);
     color: var(--default-font-color);
     margin-left: $spacer / 3;
   }
 
   .verifications-warning-icon {
     width: 20px;
     height: 20px;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M7.35631 2.13451C8.44557 -0.0448384 11.5544 -0.0448359 12.6437 2.13451L19.6841 16.2208C20.6668 18.1868 19.2377 20.5 17.0405 20.5H2.95955C0.762308 20.5 -0.666776 18.1868 0.315858 16.2208L7.35631 2.13451Z" fill="%23E5A900"/><path d="M10.8408 13.6846H9.17285L8.82422 7.00586H11.1895L10.8408 13.6846ZM8.79688 16.0225C8.79688 15.6396 8.89941 15.3503 9.10449 15.1543C9.30957 14.9583 9.60807 14.8604 10 14.8604C10.3783 14.8604 10.6699 14.9606 10.875 15.1611C11.0846 15.3617 11.1895 15.6488 11.1895 16.0225C11.1895 16.3825 11.0846 16.6673 10.875 16.877C10.6654 17.082 10.3737 17.1846 10 17.1846C9.61719 17.1846 9.32096 17.0843 9.11133 16.8838C8.90169 16.6787 8.79688 16.3916 8.79688 16.0225Z" fill="%23201F1E"/></svg>');
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M7.35631 2.13451C8.44557 -0.0448384 11.5544 -0.0448359 12.6437 2.13451L19.6841 16.2208C20.6668 18.1868 19.2377 20.5 17.0405 20.5H2.95955C0.762308 20.5 -0.666776 18.1868 0.315858 16.2208L7.35631 2.13451Z" fill="%23fff26c"/><path d="M10.8408 13.6846H9.17285L8.82422 7.00586H11.1895L10.8408 13.6846ZM8.79688 16.0225C8.79688 15.6396 8.89941 15.3503 9.10449 15.1543C9.30957 14.9583 9.60807 14.8604 10 14.8604C10.3783 14.8604 10.6699 14.9606 10.875 15.1611C11.0846 15.3617 11.1895 15.6488 11.1895 16.0225C11.1895 16.3825 11.0846 16.6673 10.875 16.877C10.6654 17.082 10.3737 17.1846 10 17.1846C9.61719 17.1846 9.32096 17.0843 9.11133 16.8838C8.90169 16.6787 8.79688 16.3916 8.79688 16.0225Z" fill="%23201F1E"/></svg>');
     background-repeat: no-repeat;
     background-position: center;
     color: transparent !important;
@@ -260,7 +260,7 @@ ul.breadcrumbs {
 
 .message-unread {
   padding: ($spacer / 3) ($spacer / 2);
-  background: var(--enrollment-status-yellow);
+  background: var(--tab-active-border);
   color: var(--default-font-color);
   margin-left: $spacer / 3;
 }
@@ -301,7 +301,11 @@ footer {
 
 footer.page-footer {
   font-size: 16px;
-  background-color: var(--grey-040);
+  background-color: var(--subnav-bg);
+  //border-top: 3px solid var(--quaternary-color);
+  box-shadow:
+  0 0 0 -4px var(--primary-color),
+  0 0 0 -5px var(--quaternary-color);
   color: var(--grey-150);
 
   .footer-column {
@@ -314,8 +318,9 @@ footer.page-footer {
     gap: 8px;
 
     @include media-breakpoint-up(sm) {
-      background-color: var(--grey-030);
+      background-color: var(--grey-000);
       border-radius: 999px;
+      border: 3px solid var(--quaternary-color);
     }
 
     .btn-group {

app/javascript/css/or.scss

@@ -0,0 +1,5 @@
+// these styles will be loaded for client "me" only
+// all contents of this file must be nested within the data-theme="me" selector to make sure they don't leak to other clients.
+[data-theme="or"] {
+  --font: Helvetica Neue,Helvetica,Arial,sans-serif;
+}