Theme updates

src/assets/css/theme-dark.css

@@ -13,4 +13,16 @@ body {
     --card-header-color: #000;
     --wizard-step-color: #6c757d;
     --link-color: #007bff;
+
+    --ui-focus-ring-color: #93c5fd;
+    --ui-interactive-hover-bg: rgba(147, 197, 253, 0.18);
+    --ui-interactive-active-bg: rgba(147, 197, 253, 0.28);
+    --ui-interactive-active-text: #e0ecff;
+    --ui-control-background: #374151;
+    --ui-control-border-color: #d3c9c9;
+    --ui-control-disabled-background: rgba(148, 163, 184, 0.22);
+    --ui-surface-card-bg: #374151;
+    --ui-surface-card-border: #d3c9c9;
+    --ui-badge-bg: rgba(147, 197, 253, 0.24);
+    --ui-badge-color: #dbeafe;
 }

src/assets/css/theme-light.css

@@ -1,16 +1,40 @@
 body {
-    --app-body-background: #e4e5e6;
-    --app-background: #fff;
-    --app-border-color: rgba(184, 184, 184, 0.67);
-    --app-header-background: rgba(165, 198, 228, 0.61);
-    --app-header-text: #858484;
-    --sidebar-color: #fff;
-    --sidebar-icon-color: rgba(152, 191, 227, 0.79);
-    --sidebar-background: #fafafa;
-    --sidebar-title-color: rgba(4, 55, 92, 0.61);
-    --sidebar-sub-background: rgba(165, 198, 228, 0.61);
-    --card-header-background: rgba(152, 191, 227, 0.53);
-    --card-header-color: #7a90df;
-    --wizard-step-color: #6c757d;
-    --link-color: #012445;
+    --app-body-background: #f3f7fb;
+    --app-background: #ffffff;
+    --app-border-color: #d2dfeb;
+    --app-header-background: #eaf3fa;
+    --app-header-text: #0b3f65;
+    --app-text-muted-color: #64748b;
+    --sidebar-color: #ffffff;
+    --sidebar-icon-color: #0d4f7f;
+    --sidebar-background: #f9fbfd;
+    --sidebar-title-color: #0d4f7f;
+    --sidebar-sub-background: #eaf3fa;
+    --card-header-background: #eaf3fa;
+    --card-header-color: #0b3f65;
+    --wizard-step-color: #64748b;
+    --link-color: #0d4f7f;
+
+    --ui-focus-ring-color: #17877c;
+    --ui-interactive-hover-bg: rgba(13, 79, 127, 0.1);
+    --ui-interactive-active-bg: rgba(13, 79, 127, 0.18);
+    --ui-interactive-active-text: #082e4a;
+    --ui-control-background: #ffffff;
+    --ui-control-border-color: #d2dfeb;
+    --ui-control-disabled-background: rgba(100, 116, 139, 0.16);
+    --ui-surface-card-bg: #ffffff;
+    --ui-surface-card-border: #d2dfeb;
+    --ui-badge-bg: rgba(13, 79, 127, 0.12);
+    --ui-badge-color: #0b3f65;
+
+    --primary-color: #0d4f7f;
+    --dark-primary-color: #0b3f65;
+    --secondary-color: #32b39a;
+    --dark-secondary-color: #17877c;
+    --success-color: #1f8a5b;
+    --dark-success-color: #166a45;
+    --warning-color: #b7791f;
+    --dark-warning-color: #8a5d17;
+    --info-color: #13659d;
+    --dark-info-color: #0e4d78;
 }

src/assets/css/theme-navy.css

@@ -1,16 +1,42 @@
 body {
-    --app-body-background: #c7e0f9;
-    --app-background: #fff;
-    --app-border-color: #192d3e;
-    --app-header-background: #002C51;
-    --app-header-text: #fff;
-    --sidebar-color: #fff;
-    --sidebar-icon-color: #74828e;
-    --sidebar-background: #002C51;
-    --sidebar-title-color: #b7deff;
-    --sidebar-sub-background: #002C51;
-    --card-header-background: #3f8cbf;
-    --card-header-color: #fff;
-    --wizard-step-color: #6c757d;
-    --link-color: #007bff;
+    --app-body-background: #061321;
+    --app-background: #0b2238;
+    --app-border-color: #4f7090;
+    --app-header-background: #082e4a;
+    --app-header-text: #eaf4ff;
+    --app-text-muted-color: #8fa8bf;
+
+    --sidebar-color: #dce9f6;
+    --sidebar-icon-color: #8fb1cb;
+    --sidebar-background: #08273f;
+    --sidebar-title-color: #9fe4d7;
+    --sidebar-sub-background: #0a2e4b;
+
+    --card-header-background: #123a5d;
+    --card-header-color: #eef6ff;
+    --wizard-step-color: #8fa8bf;
+    --link-color: #69b8ff;
+
+    --ui-focus-ring-color: #32b39a;
+    --ui-interactive-hover-bg: rgba(50, 179, 154, 0.16);
+    --ui-interactive-active-bg: rgba(50, 179, 154, 0.28);
+    --ui-interactive-active-text: #e9fffb;
+    --ui-control-background: #112a40;
+    --ui-control-border-color: #5b7c9a;
+    --ui-control-disabled-background: rgba(143, 168, 191, 0.22);
+    --ui-surface-card-bg: #0f263c;
+    --ui-surface-card-border: #577a99;
+    --ui-badge-bg: rgba(50, 179, 154, 0.2);
+    --ui-badge-color: #b8f4e9;
+
+    --primary-color: #0d4f7f;
+    --dark-primary-color: #0b3f65;
+    --secondary-color: #32b39a;
+    --dark-secondary-color: #17877c;
+    --success-color: #2ea86f;
+    --dark-success-color: #1f7d52;
+    --warning-color: #d39a3a;
+    --dark-warning-color: #a67525;
+    --info-color: #2f8fcb;
+    --dark-info-color: #1f6fa5;
 }

src/assets/css/theme.css

@@ -45,24 +45,129 @@
   }
 }
 
+@layer app.theme {
+  body {
+    --ui-space-1: 0.25rem;
+    --ui-space-2: 0.5rem;
+    --ui-space-3: 0.75rem;
+    --ui-space-4: 1rem;
+
+    --ui-radius-control: 0.5rem;
+    --ui-radius-card: 0.75rem;
+    --ui-radius-badge: 999px;
+
+    --ui-font-size-xs: 0.75rem;
+    --ui-font-size-sm: 0.875rem;
+    --ui-font-size-md: 1rem;
+
+    --ui-control-padding-y: 0.45rem;
+    --ui-control-padding-x: 0.65rem;
+    --ui-control-min-height: 2.25rem;
+
+    --ui-focus-ring-width: 2px;
+    --ui-focus-ring-color: #2563eb;
+    --ui-focus-ring-shadow: color-mix(in srgb, var(--ui-focus-ring-color) 28%, transparent);
+
+    --ui-interactive-bg: transparent;
+    --ui-interactive-hover-bg: rgba(37, 99, 235, 0.12);
+    --ui-interactive-active-bg: rgba(37, 99, 235, 0.2);
+    --ui-interactive-text: inherit;
+    --ui-interactive-hover-text: inherit;
+    --ui-interactive-active-text: inherit;
+    --ui-interactive-disabled-bg: rgba(148, 163, 184, 0.16);
+    --ui-interactive-disabled-text: var(--app-text-muted-color);
+
+    --ui-control-background: var(--app-background);
+    --ui-control-border-color: var(--app-border-color);
+    --ui-control-disabled-background: rgba(148, 163, 184, 0.16);
+
+    --ui-surface-card-bg: var(--app-background);
+    --ui-surface-card-border: var(--app-border-color);
+
+    --ui-badge-bg: rgba(37, 99, 235, 0.14);
+    --ui-badge-color: #1e3a8a;
+  }
+
+  :where(button, a, input, textarea, select, [role='button'], [tabindex]:not([tabindex='-1'])):focus-visible {
+    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px var(--ui-focus-ring-shadow);
+  }
+
+  .ui-interactive-surface {
+    border-radius: var(--ui-radius-control);
+    color: var(--ui-interactive-text);
+    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+  }
+
+  .ui-interactive-surface:hover {
+    background: var(--ui-interactive-hover-bg);
+    color: var(--ui-interactive-hover-text);
+  }
+
+  .ui-interactive-surface:active {
+    background: var(--ui-interactive-active-bg);
+    color: var(--ui-interactive-active-text);
+  }
+
+  .ui-interactive-surface[aria-disabled='true'],
+  .ui-interactive-surface:disabled,
+  .ui-interactive-surface.is-disabled {
+    background: var(--ui-interactive-disabled-bg);
+    color: var(--ui-interactive-disabled-text);
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .ui-interactive-active {
+    background: var(--ui-interactive-active-bg);
+    color: var(--ui-interactive-active-text);
+    font-weight: 500;
+  }
+}
+
 @layer app.overrides {
   body {
     font-size: .875rem;
   }
 
   .p-inputtext {
-    padding: 0.45rem .65rem;
+    padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
+    min-height: var(--ui-control-min-height);
+    border-radius: var(--ui-radius-control);
+    border-color: var(--ui-control-border-color);
+    background: var(--ui-control-background);
+    font-size: var(--ui-font-size-sm);
   }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2rem;
   }
 
 
   .p-button {
-    padding: 0.45rem .65rem;
+    min-height: var(--ui-control-min-height);
+    padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
+    border-radius: var(--ui-radius-control);
+    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+
+    &:hover:not(:disabled):not(.p-disabled) {
+      filter: brightness(0.98);
+    }
+
+    &:active:not(:disabled):not(.p-disabled) {
+      filter: brightness(0.94);
+    }
+
+    &:disabled,
+    &.p-disabled {
+      background: var(--ui-interactive-disabled-bg);
+      border-color: var(--ui-control-border-color);
+      color: var(--ui-interactive-disabled-text);
+      opacity: 1;
+    }
 
     &.p-button-sm {
-      padding: 0.45rem .65rem;
+      padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
       font-size: .8rem;
     }
 
@@ -81,16 +186,53 @@
     }
   }
 
+  .p-inputtext:focus-visible,
+  .p-dropdown:focus-visible,
+  .p-button:focus-visible,
+  .p-dialog .p-dialog-header-icon:focus-visible {
+    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 3px var(--ui-focus-ring-shadow);
+  }
+
+  .p-inputtext:disabled,
+  .p-inputtextarea:disabled,
+  .p-dropdown.p-disabled {
+    background: var(--ui-control-disabled-background);
+    color: var(--ui-interactive-disabled-text);
+    opacity: 1;
+  }
+
   .p-breadcrumb {
     padding: .8rem;
   }
 
+  .p-card,
   .p-panel {
+    border: 1px solid var(--ui-surface-card-border);
+    border-radius: var(--ui-radius-card);
+    background: var(--ui-surface-card-bg);
+
     .p-panel-header {
       padding: 1rem 1.25rem;
     }
   }
 
+  .p-dialog {
+    border: 1px solid var(--ui-surface-card-border);
+    border-radius: var(--ui-radius-card);
+    overflow: hidden;
+  }
+
+  .p-badge,
+  .p-tag {
+    border-radius: var(--ui-radius-badge);
+    background: var(--ui-badge-bg);
+    color: var(--ui-badge-color);
+    font-size: var(--ui-font-size-xs);
+    font-weight: 600;
+  }
+
   .p-menu {
     .p-menuitem-link {
       display: inline-flex;