coer-elements 2.0.5 → 2.0.7

package/styles/coer-elements.css

@@ -36,10 +36,15 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   --success-inner: var(--success, var(--green));
   --warning-inner: var(--warning, var(--yellow));
   --danger-inner: var(--danger, var(--red));
-  --background-inner: var(--background, var(--smoke));
-  --sidenav-inner: var(--sidenav, var(--black));
   --navigation-inner: var(--navigation, var(--orange));
-  --container-inner: var(--container, var(--white));
+  --information-inner: var(--information, var(--blue));
+  --breadcrumbs-inner: var(--app-breadcrumbs, var(--blue));
+  --background-inner: var(--app-background, var(--smoke));
+  --containers-inner: var(--app-containers, var(--white));
+  --sidenav-inner: var(--app-sidenav, var(--black));
+  --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
+  --toolbar-inner: var(--app-toolbar, var(--smoke));
+  --toolbar-text-inner: var(--app-toolbar-text, var(--black));
 }
 
 .text-blue {
@@ -47,9 +52,30 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
 }
 
 .text-blue-bold {
+  color: var(--blue) !important;
   font-weight: bold !important;
 }
 
+.border-blue {
+  border-color: var(--blue) !important;
+}
+
+.border-top-blue {
+  border-top-color: var(--blue) !important;
+}
+
+.border-right-blue {
+  border-right-color: var(--blue) !important;
+}
+
+.border-bottom-blue {
+  border-bottom-color: var(--blue) !important;
+}
+
+.border-left-blue {
+  border-left-color: var(--blue) !important;
+}
+
 .background-blue {
   background-color: var(--blue) !important;
 }
@@ -59,10 +85,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--blue) !important;
 }
 
-.border-blue {
-  border-color: var(--blue) !important;
-}
-
 .text-gray {
   color: var(--gray) !important;
 }
@@ -72,6 +94,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-gray {
+  border-color: var(--gray) !important;
+}
+
+.border-top-gray {
+  border-top-color: var(--gray) !important;
+}
+
+.border-right-gray {
+  border-right-color: var(--gray) !important;
+}
+
+.border-bottom-gray {
+  border-bottom-color: var(--gray) !important;
+}
+
+.border-left-gray {
+  border-left-color: var(--gray) !important;
+}
+
 .background-gray {
   background-color: var(--gray) !important;
 }
@@ -81,10 +123,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--gray) !important;
 }
 
-.border-gray {
-  border-color: var(--gray) !important;
-}
-
 .text-green {
   color: var(--green) !important;
 }
@@ -94,6 +132,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-green {
+  border-color: var(--green) !important;
+}
+
+.border-top-green {
+  border-top-color: var(--green) !important;
+}
+
+.border-right-green {
+  border-right-color: var(--green) !important;
+}
+
+.border-bottom-green {
+  border-bottom-color: var(--green) !important;
+}
+
+.border-left-green {
+  border-left-color: var(--green) !important;
+}
+
 .background-green {
   background-color: var(--green) !important;
 }
@@ -103,10 +161,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--green) !important;
 }
 
-.border-green {
-  border-color: var(--green) !important;
-}
-
 .text-yellow {
   color: var(--yellow) !important;
 }
@@ -116,6 +170,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-yellow {
+  border-color: var(--yellow) !important;
+}
+
+.border-top-yellow {
+  border-top-color: var(--yellow) !important;
+}
+
+.border-right-yellow {
+  border-right-color: var(--yellow) !important;
+}
+
+.border-bottom-yellow {
+  border-bottom-color: var(--yellow) !important;
+}
+
+.border-left-yellow {
+  border-left-color: var(--yellow) !important;
+}
+
 .background-yellow {
   background-color: var(--yellow) !important;
 }
@@ -125,10 +199,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--yellow) !important;
 }
 
-.border-yellow {
-  border-color: var(--yellow) !important;
-}
-
 .text-red {
   color: var(--red) !important;
 }
@@ -138,6 +208,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-red {
+  border-color: var(--red) !important;
+}
+
+.border-top-red {
+  border-top-color: var(--red) !important;
+}
+
+.border-right-red {
+  border-right-color: var(--red) !important;
+}
+
+.border-bottom-red {
+  border-bottom-color: var(--red) !important;
+}
+
+.border-left-red {
+  border-left-color: var(--red) !important;
+}
+
 .background-red {
   background-color: var(--red) !important;
 }
@@ -147,30 +237,42 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--red) !important;
 }
 
-.border-red {
-  border-color: var(--red) !important;
+.text-smoke {
+  color: var(--smoke) !important;
 }
 
-.text-white {
-  color: var(--white) !important;
+.text-smoke-bold {
+  color: var(--smoke) !important;
+  font-weight: bold !important;
 }
 
-.text-white-bold {
-  color: var(--white) !important;
-  font-weight: bold !important;
+.border-smoke {
+  border-color: var(--smoke) !important;
 }
 
-.background-white {
-  background-color: var(--white) !important;
+.border-top-smoke {
+  border-top-color: var(--smoke) !important;
 }
 
-.background-border-white {
-  background-color: var(--white) !important;
-  border-color: var(--white) !important;
+.border-right-smoke {
+  border-right-color: var(--smoke) !important;
 }
 
-.border-white {
-  border-color: var(--white) !important;
+.border-bottom-smoke {
+  border-bottom-color: var(--smoke) !important;
+}
+
+.border-left-smoke {
+  border-left-color: var(--smoke) !important;
+}
+
+.background-smoke {
+  background-color: var(--smoke) !important;
+}
+
+.background-border-smoke {
+  background-color: var(--smoke) !important;
+  border-color: var(--smoke) !important;
 }
 
 .text-black {
@@ -182,6 +284,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-black {
+  border-color: var(--black) !important;
+}
+
+.border-top-black {
+  border-top-color: var(--black) !important;
+}
+
+.border-right-black {
+  border-right-color: var(--black) !important;
+}
+
+.border-bottom-black {
+  border-bottom-color: var(--black) !important;
+}
+
+.border-left-black {
+  border-left-color: var(--black) !important;
+}
+
 .background-black {
   background-color: var(--black) !important;
 }
@@ -191,10 +313,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--black) !important;
 }
 
-.border-black {
-  border-color: var(--black) !important;
-}
-
 .text-orange {
   color: var(--orange) !important;
 }
@@ -204,6 +322,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-orange {
+  border-color: var(--orange) !important;
+}
+
+.border-top-orange {
+  border-top-color: var(--orange) !important;
+}
+
+.border-right-orange {
+  border-right-color: var(--orange) !important;
+}
+
+.border-bottom-orange {
+  border-bottom-color: var(--orange) !important;
+}
+
+.border-left-orange {
+  border-left-color: var(--orange) !important;
+}
+
 .background-orange {
   background-color: var(--orange) !important;
 }
@@ -213,8 +351,80 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--orange) !important;
 }
 
-.border-orange {
-  border-color: var(--orange) !important;
+.text-white {
+  color: var(--white) !important;
+}
+
+.text-white-bold {
+  color: var(--white) !important;
+  font-weight: bold !important;
+}
+
+.border-white {
+  border-color: var(--white) !important;
+}
+
+.border-top-white {
+  border-top-color: var(--white) !important;
+}
+
+.border-right-white {
+  border-right-color: var(--white) !important;
+}
+
+.border-bottom-white {
+  border-bottom-color: var(--white) !important;
+}
+
+.border-left-white {
+  border-left-color: var(--white) !important;
+}
+
+.background-white {
+  background-color: var(--white) !important;
+}
+
+.background-border-white {
+  background-color: var(--white) !important;
+  border-color: var(--white) !important;
+}
+
+.text-purple {
+  color: var(--purple) !important;
+}
+
+.text-purple-bold {
+  color: var(--purple) !important;
+  font-weight: bold !important;
+}
+
+.border-purple {
+  border-color: var(--purple) !important;
+}
+
+.border-top-purple {
+  border-top-color: var(--purple) !important;
+}
+
+.border-right-purple {
+  border-right-color: var(--purple) !important;
+}
+
+.border-bottom-purple {
+  border-bottom-color: var(--purple) !important;
+}
+
+.border-left-purple {
+  border-left-color: var(--purple) !important;
+}
+
+.background-purple {
+  background-color: var(--purple) !important;
+}
+
+.background-border-purple {
+  background-color: var(--purple) !important;
+  border-color: var(--purple) !important;
 }
 
 .text-primary {
@@ -226,6 +436,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-primary {
+  border-color: var(--primary-inner) !important;
+}
+
+.border-top-primary {
+  border-top-color: var(--primary-inner) !important;
+}
+
+.border-right-primary {
+  border-right-color: var(--primary-inner) !important;
+}
+
+.border-bottom-primary {
+  border-bottom-color: var(--primary-inner) !important;
+}
+
+.border-left-primary {
+  border-left-color: var(--primary-inner) !important;
+}
+
 .background-primary {
   background-color: var(--primary-inner) !important;
 }
@@ -235,10 +465,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--primary-inner) !important;
 }
 
-.border-primary {
-  border-color: var(--primary-inner) !important;
-}
-
 .text-secondary {
   color: var(--secondary-inner) !important;
 }
@@ -248,6 +474,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-secondary {
+  border-color: var(--secondary-inner) !important;
+}
+
+.border-top-secondary {
+  border-top-color: var(--secondary-inner) !important;
+}
+
+.border-right-secondary {
+  border-right-color: var(--secondary-inner) !important;
+}
+
+.border-bottom-secondary {
+  border-bottom-color: var(--secondary-inner) !important;
+}
+
+.border-left-secondary {
+  border-left-color: var(--secondary-inner) !important;
+}
+
 .background-secondary {
   background-color: var(--secondary-inner) !important;
 }
@@ -257,10 +503,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--secondary-inner) !important;
 }
 
-.border-secondary {
-  border-color: var(--secondary-inner) !important;
-}
-
 .text-success {
   color: var(--success-inner) !important;
 }
@@ -270,6 +512,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-success {
+  border-color: var(--success-inner) !important;
+}
+
+.border-top-success {
+  border-top-color: var(--success-inner) !important;
+}
+
+.border-right-success {
+  border-right-color: var(--success-inner) !important;
+}
+
+.border-bottom-success {
+  border-bottom-color: var(--success-inner) !important;
+}
+
+.border-left-success {
+  border-left-color: var(--success-inner) !important;
+}
+
 .background-success {
   background-color: var(--success-inner) !important;
 }
@@ -279,10 +541,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--success-inner) !important;
 }
 
-.border-success {
-  border-color: var(--success-inner) !important;
-}
-
 .text-warning {
   color: var(--warning-inner) !important;
 }
@@ -292,6 +550,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-warning {
+  border-color: var(--warning-inner) !important;
+}
+
+.border-top-warning {
+  border-top-color: var(--warning-inner) !important;
+}
+
+.border-right-warning {
+  border-right-color: var(--warning-inner) !important;
+}
+
+.border-bottom-warning {
+  border-bottom-color: var(--warning-inner) !important;
+}
+
+.border-left-warning {
+  border-left-color: var(--warning-inner) !important;
+}
+
 .background-warning {
   background-color: var(--warning-inner) !important;
 }
@@ -301,10 +579,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--warning-inner) !important;
 }
 
-.border-warning {
-  border-color: var(--warning-inner) !important;
-}
-
 .text-danger {
   color: var(--danger-inner) !important;
 }
@@ -314,6 +588,26 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   font-weight: bold !important;
 }
 
+.border-danger {
+  border-color: var(--danger-inner) !important;
+}
+
+.border-top-danger {
+  border-top-color: var(--danger-inner) !important;
+}
+
+.border-right-danger {
+  border-right-color: var(--danger-inner) !important;
+}
+
+.border-bottom-danger {
+  border-bottom-color: var(--danger-inner) !important;
+}
+
+.border-left-danger {
+  border-left-color: var(--danger-inner) !important;
+}
+
 .background-danger {
   background-color: var(--danger-inner) !important;
 }
@@ -323,102 +617,377 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--danger-inner) !important;
 }
 
-.border-danger {
-  border-color: var(--danger-inner) !important;
+.text-navigation {
+  color: var(--navigation-inner) !important;
+}
+
+.text-navigation-bold {
+  color: var(--navigation-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-navigation {
+  border-color: var(--navigation-inner) !important;
+}
+
+.border-top-navigation {
+  border-top-color: var(--navigation-inner) !important;
+}
+
+.border-right-navigation {
+  border-right-color: var(--navigation-inner) !important;
+}
+
+.border-bottom-navigation {
+  border-bottom-color: var(--navigation-inner) !important;
+}
+
+.border-left-navigation {
+  border-left-color: var(--navigation-inner) !important;
+}
+
+.background-navigation {
+  background-color: var(--navigation-inner) !important;
+}
+
+.background-border-navigation {
+  background-color: var(--navigation-inner) !important;
+  border-color: var(--navigation-inner) !important;
+}
+
+.text-information {
+  color: var(--information-inner) !important;
+}
+
+.text-information-bold {
+  color: var(--information-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-information {
+  border-color: var(--information-inner) !important;
+}
+
+.border-top-information {
+  border-top-color: var(--information-inner) !important;
+}
+
+.border-right-information {
+  border-right-color: var(--information-inner) !important;
+}
+
+.border-bottom-information {
+  border-bottom-color: var(--information-inner) !important;
+}
+
+.border-left-information {
+  border-left-color: var(--information-inner) !important;
+}
+
+.background-information {
+  background-color: var(--information-inner) !important;
+}
+
+.background-border-information {
+  background-color: var(--information-inner) !important;
+  border-color: var(--information-inner) !important;
+}
+
+.text-breadcrumbs {
+  color: var(--breadcrumbs-inner) !important;
+}
+
+.text-breadcrumbs-bold {
+  color: var(--breadcrumbs-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-breadcrumbs {
+  border-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-top-breadcrumbs {
+  border-top-color: var(--breadcrumbs-inner) !important;
 }
 
-.text-background {
+.border-right-breadcrumbs {
+  border-right-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-bottom-breadcrumbs {
+  border-bottom-color: var(--breadcrumbs-inner) !important;
+}
+
+.border-left-breadcrumbs {
+  border-left-color: var(--breadcrumbs-inner) !important;
+}
+
+.background-breadcrumbs {
+  background-color: var(--breadcrumbs-inner) !important;
+}
+
+.background-border-breadcrumbs {
+  background-color: var(--breadcrumbs-inner) !important;
+  border-color: var(--breadcrumbs-inner) !important;
+}
+
+.text-app-background {
   color: var(--background-inner) !important;
 }
 
-.text-background-bold {
+.text-app-background-bold {
   color: var(--background-inner) !important;
   font-weight: bold !important;
 }
 
-.background-background {
+.border-app-background {
+  border-color: var(--background-inner) !important;
+}
+
+.border-top-app-background {
+  border-top-color: var(--background-inner) !important;
+}
+
+.border-right-app-background {
+  border-right-color: var(--background-inner) !important;
+}
+
+.border-bottom-app-background {
+  border-bottom-color: var(--background-inner) !important;
+}
+
+.border-left-app-background {
+  border-left-color: var(--background-inner) !important;
+}
+
+.background-app-background {
   background-color: var(--background-inner) !important;
 }
 
-.background-border-background {
+.background-border-app-background {
   background-color: var(--background-inner) !important;
   border-color: var(--background-inner) !important;
 }
 
-.border-background {
-  border-color: var(--background-inner) !important;
+.text-app-container {
+  color: var(--containers-inner) !important;
+}
+
+.text-app-container-bold {
+  color: var(--containers-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-app-container {
+  border-color: var(--containers-inner) !important;
+}
+
+.border-top-app-container {
+  border-top-color: var(--containers-inner) !important;
+}
+
+.border-right-app-container {
+  border-right-color: var(--containers-inner) !important;
+}
+
+.border-bottom-app-container {
+  border-bottom-color: var(--containers-inner) !important;
+}
+
+.border-left-app-container {
+  border-left-color: var(--containers-inner) !important;
 }
 
-.text-sidenav {
+.background-app-container {
+  background-color: var(--containers-inner) !important;
+}
+
+.background-border-app-container {
+  background-color: var(--containers-inner) !important;
+  border-color: var(--containers-inner) !important;
+}
+
+.text-app-sidenav {
   color: var(--sidenav-inner) !important;
 }
 
-.text-blue-sidenav {
+.text-app-sidenav-bold {
   color: var(--sidenav-inner) !important;
   font-weight: bold !important;
 }
 
-.background-sidenav {
+.border-app-sidenav {
+  border-color: var(--sidenav-inner) !important;
+}
+
+.border-top-app-sidenav {
+  border-top-color: var(--sidenav-inner) !important;
+}
+
+.border-right-app-sidenav {
+  border-right-color: var(--sidenav-inner) !important;
+}
+
+.border-bottom-app-sidenav {
+  border-bottom-color: var(--sidenav-inner) !important;
+}
+
+.border-left-app-sidenav {
+  border-left-color: var(--sidenav-inner) !important;
+}
+
+.background-app-sidenav {
   background-color: var(--sidenav-inner) !important;
 }
 
-.background-border-sidenav {
+.background-border-app-sidenav {
   background-color: var(--sidenav-inner) !important;
   border-color: var(--sidenav-inner) !important;
 }
 
-.border-sidenav {
-  border-color: var(--sidenav-inner) !important;
+.text-app-sidenav-text {
+  color: var(--sidenav-text-inner) !important;
 }
 
-.text-navigation {
-  color: var(--navigation-inner) !important;
+.text-app-sidenav-text-bold {
+  color: var(--sidenav-text-inner) !important;
+  font-weight: bold !important;
 }
 
-.text-navigation-bold {
-  color: var(--navigation-inner) !important;
+.border-app-sidenav-text {
+  border-color: var(--sidenav-text-inner) !important;
+}
+
+.border-top-app-sidenav-text {
+  border-top-color: var(--sidenav-text-inner) !important;
+}
+
+.border-right-app-sidenav-text {
+  border-right-color: var(--sidenav-text-inner) !important;
+}
+
+.border-bottom-app-sidenav-text {
+  border-bottom-color: var(--sidenav-text-inner) !important;
+}
+
+.border-left-app-sidenav-text {
+  border-left-color: var(--sidenav-text-inner) !important;
+}
+
+.background-app-sidenav-text {
+  background-color: var(--sidenav-text-inner) !important;
+}
+
+.background-border-app-sidenav-text {
+  background-color: var(--sidenav-text-inner) !important;
+  border-color: var(--sidenav-text-inner) !important;
+}
+
+.text-app-toolbar {
+  color: var(--toolbar-inner) !important;
+}
+
+.text-app-toolbar-bold {
+  color: var(--toolbar-inner) !important;
   font-weight: bold !important;
 }
 
-.background-navigation {
-  background-color: var(--navigation-inner) !important;
+.border-app-toolbar {
+  border-color: var(--toolbar-inner) !important;
 }
 
-.background-border-navigation {
-  background-color: var(--navigation-inner) !important;
-  border-color: var(--navigation-inner) !important;
+.border-top-app-toolbar {
+  border-top-color: var(--toolbar-inner) !important;
 }
 
-.border-navigation {
-  border-color: var(--navigation-inner) !important;
+.border-right-app-toolbar {
+  border-right-color: var(--toolbar-inner) !important;
+}
+
+.border-bottom-app-toolbar {
+  border-bottom-color: var(--toolbar-inner) !important;
+}
+
+.border-left-app-toolbar {
+  border-left-color: var(--toolbar-inner) !important;
+}
+
+.background-app-toolbar {
+  background-color: var(--toolbar-inner) !important;
 }
 
-.text-container {
-  color: var(--container-inner) !important;
+.background-border-app-toolbar {
+  background-color: var(--toolbar-inner) !important;
+  border-color: var(--toolbar-inner) !important;
 }
 
-.text-container-bold {
-  color: var(--container-inner) !important;
+.text-app-toolbar-text {
+  color: var(--toolbar-text-inner) !important;
+}
+
+.text-app-toolbar-text-bold {
+  color: var(--toolbar-text-inner) !important;
   font-weight: bold !important;
 }
 
-.background-container {
-  background-color: var(--container-inner) !important;
+.border-app-toolbar-text {
+  border-color: var(--toolbar-text-inner) !important;
+}
+
+.border-top-app-toolbar-text {
+  border-top-color: var(--toolbar-text-inner) !important;
+}
+
+.border-right-app-toolbar-text {
+  border-right-color: var(--toolbar-text-inner) !important;
+}
+
+.border-bottom-app-toolbar-text {
+  border-bottom-color: var(--toolbar-text-inner) !important;
 }
 
-.background-border-container {
-  background-color: var(--container-inner) !important;
-  border-color: var(--container-inner) !important;
+.border-left-app-toolbar-text {
+  border-left-color: var(--toolbar-text-inner) !important;
 }
 
-.border-container {
-  border-color: var(--container-inner) !important;
+.background-app-toolbar-text {
+  background-color: var(--toolbar-text-inner) !important;
+}
+
+.background-border-app-toolbar-text {
+  background-color: var(--toolbar-text-inner) !important;
+  border-color: var(--toolbar-text-inner) !important;
 }
 
 .text-transparent {
   color: transparent !important;
 }
 
+.text-transparent-bold {
+  color: transparent !important;
+  font-weight: bold !important;
+}
+
+.border-transparent {
+  border-color: transparent !important;
+}
+
+.border-top-transparent {
+  border-top-color: transparent !important;
+}
+
+.border-right-transparent {
+  border-right-color: transparent !important;
+}
+
+.border-bottom-transparent {
+  border-bottom-color: transparent !important;
+}
+
+.border-left-transparent {
+  border-left-color: transparent !important;
+}
+
 .background-transparent {
   background-color: transparent !important;
 }
@@ -428,10 +997,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: transparent !important;
 }
 
-.border-transparent {
-  border-color: transparent !important;
-}
-
 coer-button {
   display: contents !important;
 }
@@ -442,6 +1007,7 @@ div.coer-button {
 div.coer-button a {
   display: inline-block !important;
   height: fit-content !important;
+  text-decoration: none !important;
 }
 div.coer-button a.animate__disabled {
   animation-duration: 0s !important;
@@ -451,6 +1017,9 @@ div.coer-button button {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 div.coer-button .slot {
   width: 100px !important;
@@ -480,7 +1049,7 @@ div.coer-button button.danger-filled {
   color: var(--smoke) !important;
 }
 div.coer-button button.navigation-filled {
-  background-color: var(--orange) !important;
+  background-color: var(--navigation-inner) !important;
   color: var(--smoke) !important;
 }
 div.coer-button button.dark-filled {
@@ -515,7 +1084,7 @@ div.coer-button button.danger-outline {
 div.coer-button button.navigation-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--navigation-inner) !important;
-  color: var(---navigation-inner) !important;
+  color: var(--navigation-inner) !important;
 }
 div.coer-button button.dark-outline {
   background-color: var(--white) !important;
@@ -602,7 +1171,9 @@ div.coer-button a.loading {
   cursor: wait !important;
 }
 div.coer-button i {
-  vertical-align: middle !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 div.coer-button i.spinner-border {
   width: 15px !important;
@@ -1237,7 +1808,7 @@ header.coer-page-title nav {
   height: auto;
   min-height: 25px;
   font-size: small;
-  background-color: rgb(239.05, 239.05, 239.05) !important;
+  background-color: color-mix(in srgb, var(--gray), white 90%) !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1249,7 +1820,7 @@ header.coer-page-title ol, header.coer-page-title a {
   margin: 0px;
   padding-left: 5px;
   text-decoration: none;
-  color: var(--primary-inner) !important;
+  color: var(--breadcrumbs-inner) !important;
   font-weight: normal !important;
   cursor: pointer !important;
 }
@@ -1518,10 +2089,10 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container {
   justify-content: center !important;
   font-size: 16px !important;
   border-bottom: 1px solid rgba(245, 245, 245, 0.041) !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
   color: var(--navigation-inner) !important;
@@ -1548,7 +2119,7 @@ mat-nav-list.coer-menu-option mat-list-item {
   padding: 0px 35px 0px 10px !important;
   display: inline-flex !important;
   height: 48px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   display: inline-flex !important;
@@ -1557,7 +2128,7 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   height: 48px !important;
   min-width: 20px !important;
   max-width: 20px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container i {
   min-height: 16px !important;
@@ -1567,14 +2138,14 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container {
   display: inline-flex !important;
   height: auto !important;
   margin-left: 10px !important;
-  color: var(--background-inner);
+  color: var(--sidenav-text-inner);
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
 mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
   color: var(--navigation-inner) !important;
 }
 mat-nav-list.coer-menu-option mat-list-item:hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 
 mat-accordion.coer-tree-accordion div, mat-accordion.coer-tree-accordion span {
@@ -1630,7 +2201,7 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
   color: var(--navigation-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover {
-  background-color: rgb(47.2, 47.2, 47.2) !important;
+  background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 
 div.coer-switch {
@@ -1951,19 +2522,19 @@ aside.toast-container button {
 }
 aside.toast-container div#alert-success div.toast-header,
 aside.toast-container div#alert-success div.toast-body {
-  background-color: var(--success-inner);
+  background-color: var(--success);
 }
 aside.toast-container div#alert-info div.toast-header,
 aside.toast-container div#alert-info div.toast-body {
-  background-color: var(--primary-inner);
+  background-color: var(--information);
 }
 aside.toast-container div#alert-error div.toast-header,
 aside.toast-container div#alert-error div.toast-body {
-  background-color: var(--danger-inner);
+  background-color: var(--danger);
 }
 aside.toast-container div#alert-warning div.toast-header,
 aside.toast-container div#alert-warning div.toast-body {
-  background-color: var(--warning-inner);
+  background-color: var(--warning);
   border-color: var(--black);
   color: var(--black);
 }
@@ -2017,7 +2588,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2029,7 +2600,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2042,7 +2613,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2058,7 +2629,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2071,7 +2642,7 @@ aside.toast-container > * {
   padding: 10px;
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
-  background-color: var(--container-inner);
+  background-color: var(--containers-inner);
   animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
@@ -2244,21 +2815,3 @@ input[type=file] {
 .no-selection::selection {
   background-color: transparent !important;
 }
-
-div#coer-tool-bar coer-button * {
-  color: var(--orange) !important;
-}
-div#coer-tool-bar coer-dropdown coer-button * {
-  color: transparent !important;
-}
-div#coer-tool-bar coer-dropdown ul {
-  right: 0px !important;
-  width: auto !important;
-  top: 2px !important;
-  border-top: 0px !important;
-  background-color: whitesmoke !important;
-}
-div#coer-tool-bar coer-dropdown ul li:not(.no-options):hover {
-  color: black !important;
-  background-color: rgb(240.618852459, 246.3831967213, 254.881147541) !important;
-}