From cb7256aebc2e14d9198ae7bd4b475c02caf51ba8 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Thu, 12 Mar 2026 16:47:53 +0100
Subject: [PATCH] variablen und empty states

---
 i18n/default_de.json                          |  1 +
 i18n/default_en.json                          |  1 +
 pages/admin/departments/index(default).phtml  |  2 +-
 pages/admin/permissions/index(default).phtml  |  2 +-
 pages/admin/roles/index(default).phtml        |  2 +-
 pages/admin/tenants/index(default).phtml      |  2 +-
 pages/admin/users/index(default).phtml        |  2 +-
 .../partials/app-details-aside-actions.phtml  | 47 +++++++++
 templates/partials/app-details-titlebar.phtml | 52 ++++++++++
 templates/partials/app-empty-state.phtml      | 10 +-
 templates/partials/app-main-aside.phtml       | 49 ++++++----
 web/css/base/variables.base.css               | 50 +++++++++-
 web/css/base/variables.contrast.css           | 28 ++++++
 web/css/components/app-buttons.css            | 95 ++++++++++++++++---
 web/css/components/app-empty-state.css        | 29 +++++-
 15 files changed, 323 insertions(+), 49 deletions(-)

diff --git a/i18n/default_de.json b/i18n/default_de.json
index 760afeb..dd67c2b 100644
--- a/i18n/default_de.json
+++ b/i18n/default_de.json
@@ -521,6 +521,7 @@
   "Assigned departments": "Zugewiesene Abteilungen",
   "Select departments": "Abteilungen auswählen",
   "Departments for tenant": "Abteilungen für Mandant",
+  "No departments": "Keine Abteilungen",
   "No departments available for this tenant": "Für diesen Mandanten sind keine Abteilungen verfügbar",
   "Assign tenants first to select departments": "Bitte zuerst Mandanten zuweisen, um Abteilungen auszuwählen",
   "Department options refresh after save": "Abteilungsoptionen werden nach dem Speichern aktualisiert",
diff --git a/i18n/default_en.json b/i18n/default_en.json
index 8680d59..de67329 100644
--- a/i18n/default_en.json
+++ b/i18n/default_en.json
@@ -521,6 +521,7 @@
   "Assigned departments": "Assigned departments",
   "Select departments": "Select departments",
   "Departments for tenant": "Departments for tenant",
+  "No departments": "No departments",
   "No departments available for this tenant": "No departments available for this tenant",
   "Assign tenants first to select departments": "Assign tenants first to select departments",
   "Department options refresh after save": "Department options refresh after save",
diff --git a/pages/admin/departments/index(default).phtml b/pages/admin/departments/index(default).phtml
index 1459ca8..deb2d8f 100644
--- a/pages/admin/departments/index(default).phtml
+++ b/pages/admin/departments/index(default).phtml
@@ -25,7 +25,7 @@ $listTitle = t('Departments');
 ob_start();
 ?>
 <?php if ($canCreateDepartments): ?>
-  <a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/departments/create', Request::pathWithQuery())); ?>">
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/departments/create', Request::pathWithQuery())); ?>">
     <i class="bi bi-plus"></i> <?php e(t('Create department')); ?>
   </a>
 <?php endif; ?>
diff --git a/pages/admin/permissions/index(default).phtml b/pages/admin/permissions/index(default).phtml
index 34f6690..d6d299b 100644
--- a/pages/admin/permissions/index(default).phtml
+++ b/pages/admin/permissions/index(default).phtml
@@ -23,7 +23,7 @@ $listTitle = t('Permissions');
 ob_start();
 ?>
 <?php if ($canCreatePermissions): ?>
-  <a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/permissions/create', Request::pathWithQuery())); ?>">
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/permissions/create', Request::pathWithQuery())); ?>">
     <i class="bi bi-plus"></i> <?php e(t('Create permission')); ?>
   </a>
 <?php endif; ?>
diff --git a/pages/admin/roles/index(default).phtml b/pages/admin/roles/index(default).phtml
index ff0ab41..10d0deb 100644
--- a/pages/admin/roles/index(default).phtml
+++ b/pages/admin/roles/index(default).phtml
@@ -23,7 +23,7 @@ $listTitle = t('Roles');
 ob_start();
 ?>
 <?php if ($canCreateRoles): ?>
-  <a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/roles/create', Request::pathWithQuery())); ?>">
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/roles/create', Request::pathWithQuery())); ?>">
     <i class="bi bi-plus"></i> <?php e(t('Create role')); ?>
   </a>
 <?php endif; ?>
diff --git a/pages/admin/tenants/index(default).phtml b/pages/admin/tenants/index(default).phtml
index a57bced..bc7a2ef 100644
--- a/pages/admin/tenants/index(default).phtml
+++ b/pages/admin/tenants/index(default).phtml
@@ -23,7 +23,7 @@ $listTitle = t('Tenants');
 ob_start();
 ?>
 <?php if ($canCreateTenants): ?>
-  <a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/tenants/create', Request::pathWithQuery())); ?>">
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/tenants/create', Request::pathWithQuery())); ?>">
     <i class="bi bi-plus"></i> <?php e(t('Create tenant')); ?>
   </a>
 <?php endif; ?>
diff --git a/pages/admin/users/index(default).phtml b/pages/admin/users/index(default).phtml
index 7fc6235..d61315f 100644
--- a/pages/admin/users/index(default).phtml
+++ b/pages/admin/users/index(default).phtml
@@ -65,7 +65,7 @@ ob_start();
 </details>
 
 <?php if ($canCreateUser): ?>
-  <a role="button" class="primary" href="<?php e(requestPathWithReturnTarget('admin/users/create', Request::pathWithQuery())); ?>">
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('admin/users/create', Request::pathWithQuery())); ?>">
     <i class="bi bi-plus"></i> <?php e(t('Create user')); ?>
   </a>
 <?php endif; ?>
diff --git a/templates/partials/app-details-aside-actions.phtml b/templates/partials/app-details-aside-actions.phtml
index 5a8cd87..4568400 100644
--- a/templates/partials/app-details-aside-actions.phtml
+++ b/templates/partials/app-details-aside-actions.phtml
@@ -12,6 +12,38 @@ $asideActions = is_array($asideActions ?? null) ? $asideActions : [];
 if (!$asideActions) {
     return;
 }
+$appendCssClass = static function (string $baseClass, string $appendClass): string {
+    $combined = trim($baseClass . ' ' . $appendClass);
+    return preg_replace('/\s+/', ' ', $combined) ?? $combined;
+};
+$resolveToneClass = static function (string $tone, string $detailActionKind, string $name, string $value): string {
+    $normalizedTone = strtolower(trim($tone));
+    if ($normalizedTone === 'success') {
+        return 'app-action-success';
+    }
+    if ($normalizedTone === 'danger') {
+        return 'app-action-danger';
+    }
+    if ($normalizedTone === 'neutral') {
+        return '';
+    }
+
+    $normalizedActionKind = strtolower(trim($detailActionKind));
+    if (in_array($normalizedActionKind, ['delete', 'danger', 'purge', 'revoke'], true)) {
+        return 'app-action-danger';
+    }
+
+    $normalizedName = strtolower(trim($name));
+    $normalizedValue = strtolower(trim($value));
+    if (
+        $normalizedName === 'action'
+        && in_array($normalizedValue, ['create', 'create_close', 'save_close'], true)
+    ) {
+        return 'app-action-success';
+    }
+
+    return '';
+};
 ?>
 
 <details name="details-actions">
@@ -42,7 +74,14 @@ if (!$asideActions) {
         $itemTarget = (string) ($item['target'] ?? '');
         $itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
         $itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
+        $itemTone = (string) ($item['tone'] ?? '');
+        $itemName = (string) ($item['name'] ?? '');
+        $itemValue = (string) ($item['value'] ?? '');
         $itemFields = is_array($item['fields'] ?? null) ? $item['fields'] : [];
+        $itemButtonClass = $appendCssClass(
+          $itemButtonClass,
+          $resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
+        );
         ?>
         <?php if ($itemAction !== ''): ?>
           <form
@@ -77,6 +116,14 @@ if (!$asideActions) {
         $itemLinkClass = (string) ($item['class'] ?? 'secondary outline small');
         $itemTarget = (string) ($item['target'] ?? '');
         $itemRel = (string) ($item['rel'] ?? '');
+        $itemTone = (string) ($item['tone'] ?? '');
+        $itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
+        $itemName = (string) ($item['name'] ?? '');
+        $itemValue = (string) ($item['value'] ?? '');
+        $itemLinkClass = $appendCssClass(
+          $itemLinkClass,
+          $resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
+        );
         ?>
         <?php if ($itemHref !== ''): ?>
           <a
diff --git a/templates/partials/app-details-titlebar.phtml b/templates/partials/app-details-titlebar.phtml
index 43ac363..7a97a24 100644
--- a/templates/partials/app-details-titlebar.phtml
+++ b/templates/partials/app-details-titlebar.phtml
@@ -23,6 +23,38 @@ $unsavedIndicatorLabelMany = (string) ($titlebar['unsavedIndicatorLabelMany'] ??
 $actionPolicyEnabled = !array_key_exists('actionPolicy', $titlebar) ? true : !empty($titlebar['actionPolicy']);
 $actions = is_array($titlebar['actions'] ?? null) ? $titlebar['actions'] : [];
 $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] : [];
+$appendCssClass = static function (string $baseClass, string $appendClass): string {
+    $combined = trim($baseClass . ' ' . $appendClass);
+    return preg_replace('/\s+/', ' ', $combined) ?? $combined;
+};
+$resolveToneClass = static function (string $tone, string $detailActionKind, string $name, string $value): string {
+    $normalizedTone = strtolower(trim($tone));
+    if ($normalizedTone === 'success') {
+        return 'app-action-success';
+    }
+    if ($normalizedTone === 'danger') {
+        return 'app-action-danger';
+    }
+    if ($normalizedTone === 'neutral') {
+        return '';
+    }
+
+    $normalizedActionKind = strtolower(trim($detailActionKind));
+    if (in_array($normalizedActionKind, ['delete', 'danger', 'purge', 'revoke'], true)) {
+        return 'app-action-danger';
+    }
+
+    $normalizedName = strtolower(trim($name));
+    $normalizedValue = strtolower(trim($value));
+    if (
+        $normalizedName === 'action'
+        && in_array($normalizedValue, ['create', 'create_close', 'save_close'], true)
+    ) {
+        return 'app-action-success';
+    }
+
+    return '';
+};
 
 ?>
 <div
@@ -69,7 +101,14 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
                 $itemTarget = (string) ($item['target'] ?? '');
                 $itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
                 $itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
+                $itemTone = (string) ($item['tone'] ?? '');
+                $itemName = (string) ($item['name'] ?? '');
+                $itemValue = (string) ($item['value'] ?? '');
                 $itemFields = is_array($item['fields'] ?? null) ? $item['fields'] : [];
+                $itemButtonClass = $appendCssClass(
+                  $itemButtonClass,
+                  $resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
+                );
                 ?>
                 <?php if ($itemAction !== ''): ?>
                   <form
@@ -104,6 +143,14 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
                 $itemLinkClass = (string) ($item['class'] ?? 'transparent');
                 $itemTarget = (string) ($item['target'] ?? '');
                 $itemRel = (string) ($item['rel'] ?? '');
+                $itemTone = (string) ($item['tone'] ?? '');
+                $itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
+                $itemName = (string) ($item['name'] ?? '');
+                $itemValue = (string) ($item['value'] ?? '');
+                $itemLinkClass = $appendCssClass(
+                  $itemLinkClass,
+                  $resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
+                );
                 ?>
                 <?php if ($itemHref !== ''): ?>
                   <a role="button" class="<?php e($itemLinkClass); ?>" href="<?php e($itemHref); ?>"
@@ -139,6 +186,7 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
       $itemConfirmFocus = strtolower(trim((string) ($item['confirmFocus'] ?? '')));
       $itemDetailActionKind = strtolower(trim((string) ($item['detailActionKind'] ?? '')));
       $itemDetailSubmitLock = strtolower(trim((string) ($item['detailSubmitLock'] ?? '')));
+      $itemTone = (string) ($item['tone'] ?? '');
       $itemDisabled = !empty($item['disabled']);
       $itemDetailSavePrimary = false;
       if (array_key_exists('detailSavePrimary', $item)) {
@@ -156,6 +204,10 @@ $menuItems = is_array($titlebar['menuItems'] ?? null) ? $titlebar['menuItems'] :
               $itemDetailActionKind = 'save-close';
           }
       }
+      $itemClass = $appendCssClass(
+        $itemClass,
+        $resolveToneClass($itemTone, $itemDetailActionKind, $itemName, $itemValue)
+      );
       ?>
       <button
         type="<?php e($itemType); ?>"
diff --git a/templates/partials/app-empty-state.phtml b/templates/partials/app-empty-state.phtml
index dc32266..9571aa3 100644
--- a/templates/partials/app-empty-state.phtml
+++ b/templates/partials/app-empty-state.phtml
@@ -14,7 +14,7 @@ if ($emptyMessage === '') {
 
 $emptyHint = trim((string) ($emptyState['hint'] ?? ''));
 $emptySize = strtolower(trim((string) ($emptyState['size'] ?? 'default')));
-if (!in_array($emptySize, ['default', 'compact'], true)) {
+if (!in_array($emptySize, ['default', 'compact', 'small'], true)) {
     $emptySize = 'default';
 }
 
@@ -23,6 +23,8 @@ if (!in_array($emptyAlign, ['center', 'left'], true)) {
     $emptyAlign = 'center';
 }
 
+$emptyShowIcon = (bool) ($emptyState['icon'] ?? true);
+
 $emptyAction = is_array($emptyState['action'] ?? null) ? $emptyState['action'] : [];
 $emptyActionLabel = trim((string) ($emptyAction['label'] ?? ''));
 $emptyActionHref = trim((string) ($emptyAction['href'] ?? ''));
@@ -34,6 +36,12 @@ $showAction = $emptyActionLabel !== '' && ($emptyActionHref !== '' || $emptyActi
 
 ?>
 <div class="app-empty-state" data-size="<?php e($emptySize); ?>" data-align="<?php e($emptyAlign); ?>">
+  <?php if ($emptyShowIcon): ?>
+    <svg class="app-empty-state-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
+    </svg>
+  <?php endif; ?>
   <p class="app-empty-state-message"><?php e($emptyMessage); ?></p>
   <?php if ($emptyHint !== ''): ?>
     <small class="app-empty-state-hint"><?php e($emptyHint); ?></small>
diff --git a/templates/partials/app-main-aside.phtml b/templates/partials/app-main-aside.phtml
index 60007d3..56d7edb 100644
--- a/templates/partials/app-main-aside.phtml
+++ b/templates/partials/app-main-aside.phtml
@@ -420,27 +420,38 @@ $csrfToken = (string) ($layoutNav['csrfToken'] ?? '');
                                         </a>
                                     </small>
                                     <ul>
-                                        <?php foreach ($departments as $department): ?>
-                                            <?php
-                                            $departmentId = (int) ($department['id'] ?? 0);
-                                            if ($departmentId <= 0) {
-                                                continue;
-                                            }
-                                            $departmentName = (string) ($department['description'] ?? '');
-                                            $href = $baseHref . '&departments=' . $departmentId;
-                                            $isActive = $addressBookActive['isActive']
-                                                && in_array($tenantUuid, $activeAddressTenants, true)
-                                                && in_array($departmentId, $activeAddressDepartments, true);
-                                            ?>
+                                        <?php if (!$departments): ?>
                                             <li>
-                                                <a href="<?php e($href); ?>" class="<?php e($isActive ? 'active' : ''); ?>"
-                                                    <?php echo $isActive ? 'aria-current="page"' : ''; ?>>
-                                                    
-                                                        <?php e($departmentName); ?>
-                                                    
-                                                </a>
+                                                <?php
+                                                $emptyState = [
+                                                    'message' => t('No departments'),
+                                                    'size' => 'small',
+                                                    'align' => 'center',
+                                                ];
+                                                require templatePath('partials/app-empty-state.phtml');
+                                                ?>
                                             </li>
-                                        <?php endforeach; ?>
+                                        <?php else: ?>
+                                            <?php foreach ($departments as $department): ?>
+                                                <?php
+                                                $departmentId = (int) ($department['id'] ?? 0);
+                                                if ($departmentId <= 0) {
+                                                    continue;
+                                                }
+                                                $departmentName = (string) ($department['description'] ?? '');
+                                                $href = $baseHref . '&departments=' . $departmentId;
+                                                $isActive = $addressBookActive['isActive']
+                                                    && in_array($tenantUuid, $activeAddressTenants, true)
+                                                    && in_array($departmentId, $activeAddressDepartments, true);
+                                                ?>
+                                                <li>
+                                                    <a href="<?php e($href); ?>" class="<?php e($isActive ? 'active' : ''); ?>"
+                                                        <?php echo $isActive ? 'aria-current="page"' : ''; ?>>
+                                                        <?php e($departmentName); ?>
+                                                    </a>
+                                                </li>
+                                            <?php endforeach; ?>
+                                        <?php endif; ?>
                                     </ul>
                             </li>
                         <?php endforeach; ?>
diff --git a/web/css/base/variables.base.css b/web/css/base/variables.base.css
index e4d36c8..bcf6b60 100644
--- a/web/css/base/variables.base.css
+++ b/web/css/base/variables.base.css
@@ -70,6 +70,10 @@
   --tooltip-radius: 8px;
   --tooltip-offset: 8px;
   --app-badge-background-color: coral;
+  --app-empty-border-color: var(--app-muted-border-color);
+  --app-empty-bg: var(--app-card-background-color);
+  --app-empty-text: var(--app-color);
+  --app-empty-hint: var(--app-muted-color);
 }
 
 /* Icons */
@@ -293,6 +297,20 @@
   --app-notice-error-color: var(--app-form-element-invalid-border-color);
   --app-notice-error-border-color: var(--app-form-element-invalid-border-color);
   --app-notice-error-background-color: rgb(255 0 0 / 13%);
+  --app-action-success-background: #1f7a45;
+  --app-action-success-border: #1f7a45;
+  --app-action-success-color: #fff;
+  --app-action-success-hover-background: #176238;
+  --app-action-success-hover-border: #176238;
+  --app-action-success-focus-color: rgba(31, 122, 69, 0.45);
+  --app-action-success-outline-background: rgba(31, 122, 69, 0.14);
+  --app-action-danger-background: #b33636;
+  --app-action-danger-border: #b33636;
+  --app-action-danger-color: #fff;
+  --app-action-danger-hover-background: #952d2d;
+  --app-action-danger-hover-border: #952d2d;
+  --app-action-danger-focus-color: rgba(179, 54, 54, 0.45);
+  --app-action-danger-outline-background: rgba(179, 54, 54, 0.14);
   --app-switch-background-color: #bfc7d9;
   --app-switch-checked-background-color: var(--app-primary-background);
   --app-switch-color: #fff;
@@ -311,10 +329,6 @@
   --app-card-box-shadow: var(--app-box-shadow);
   --app-card-sectioning-background-color: rgb(251, 251.5, 252.25);
   --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
-  --app-empty-border-color: var(--app-muted-border-color);
-  --app-empty-bg: var(--app-card-background-color);
-  --app-empty-text: var(--app-color);
-  --app-empty-hint: var(--app-muted-color);
   --app-dropdown-background-color: #fff;
   --app-dropdown-border-color: #eff1f4;
   --app-dropdown-box-shadow: var(--app-box-shadow);
@@ -531,6 +545,20 @@
     --app-form-element-valid-focus-color: var(
       --app-form-element-valid-active-border-color
     );
+    --app-action-success-background: #1f7a45;
+    --app-action-success-border: #1f7a45;
+    --app-action-success-color: #fff;
+    --app-action-success-hover-background: #176238;
+    --app-action-success-hover-border: #176238;
+    --app-action-success-focus-color: rgba(31, 122, 69, 0.5);
+    --app-action-success-outline-background: rgba(31, 122, 69, 0.2);
+    --app-action-danger-background: #b33636;
+    --app-action-danger-border: #b33636;
+    --app-action-danger-color: #fff;
+    --app-action-danger-hover-background: #952d2d;
+    --app-action-danger-hover-border: #952d2d;
+    --app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
+    --app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
     --app-switch-background-color: #333c4e;
     --app-switch-checked-background-color: var(--app-primary-background);
     --app-switch-color: #fff;
@@ -766,6 +794,20 @@
   --app-notice-error-color: var(--app-form-element-invalid-border-color);
   --app-notice-error-border-color: var(--app-form-element-invalid-border-color);
   --app-notice-error-background-color: rgba(149.5, 74, 80, 0.2);
+  --app-action-success-background: #1f7a45;
+  --app-action-success-border: #1f7a45;
+  --app-action-success-color: #fff;
+  --app-action-success-hover-background: #176238;
+  --app-action-success-hover-border: #176238;
+  --app-action-success-focus-color: rgba(31, 122, 69, 0.5);
+  --app-action-success-outline-background: rgba(31, 122, 69, 0.2);
+  --app-action-danger-background: #b33636;
+  --app-action-danger-border: #b33636;
+  --app-action-danger-color: #fff;
+  --app-action-danger-hover-background: #952d2d;
+  --app-action-danger-hover-border: #952d2d;
+  --app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
+  --app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
   --app-switch-background-color: #333c4e;
   --app-switch-checked-background-color: var(--app-primary-background);
   --app-switch-color: #fff;
diff --git a/web/css/base/variables.contrast.css b/web/css/base/variables.contrast.css
index 5f5d2ab..6b16da2 100644
--- a/web/css/base/variables.contrast.css
+++ b/web/css/base/variables.contrast.css
@@ -21,6 +21,20 @@ html[data-contrast="high"][data-theme="light"],
   --app-blockquote-border-color: var(--app-muted-border-color);
   --app-tooltip-background-color: #000;
   --app-tooltip-color: #fff;
+  --app-action-success-background: #0f5f00;
+  --app-action-success-border: #0f5f00;
+  --app-action-success-color: #fff;
+  --app-action-success-hover-background: #084700;
+  --app-action-success-hover-border: #084700;
+  --app-action-success-focus-color: rgba(15, 95, 0, 0.65);
+  --app-action-success-outline-background: rgba(15, 95, 0, 0.2);
+  --app-action-danger-background: #8f0000;
+  --app-action-danger-border: #8f0000;
+  --app-action-danger-color: #fff;
+  --app-action-danger-hover-background: #6f0000;
+  --app-action-danger-hover-border: #6f0000;
+  --app-action-danger-focus-color: rgba(143, 0, 0, 0.65);
+  --app-action-danger-outline-background: rgba(143, 0, 0, 0.2);
 }
 
 html[data-contrast="high"][data-theme^="dark"],
@@ -42,5 +56,19 @@ html[data-contrast="high"][data-theme^="dark"],
   --app-blockquote-border-color: var(--app-muted-border-color);
   --app-tooltip-background-color: #fff;
   --app-tooltip-color: #0b0f14;
+  --app-action-success-background: #0f5f00;
+  --app-action-success-border: #0f5f00;
+  --app-action-success-color: #fff;
+  --app-action-success-hover-background: #084700;
+  --app-action-success-hover-border: #084700;
+  --app-action-success-focus-color: rgba(15, 95, 0, 0.7);
+  --app-action-success-outline-background: rgba(15, 95, 0, 0.24);
+  --app-action-danger-background: #8f0000;
+  --app-action-danger-border: #8f0000;
+  --app-action-danger-color: #fff;
+  --app-action-danger-hover-background: #6f0000;
+  --app-action-danger-hover-border: #6f0000;
+  --app-action-danger-focus-color: rgba(143, 0, 0, 0.7);
+  --app-action-danger-outline-background: rgba(143, 0, 0, 0.24);
 }
 }
diff --git a/web/css/components/app-buttons.css b/web/css/components/app-buttons.css
index 78c36db..3dd50b0 100644
--- a/web/css/components/app-buttons.css
+++ b/web/css/components/app-buttons.css
@@ -1,8 +1,54 @@
 @layer components {
-.danger:is(button, [type="submit"], [type="button"], [role="button"]) {
-  --app-background-color: var(--app-notice-error-border-color);
-  --app-border-color: var(--app-notice-error-border-color);
-  --app-color: var(--app-secondary-inverse);
+.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
+  --app-background-color: var(--app-action-success-background);
+  --app-border-color: var(--app-action-success-border);
+  --app-color: var(--app-action-success-color);
+}
+
+.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):is(
+    [aria-current]:not([aria-current="false"]),
+    :hover,
+    :active,
+    :focus
+  ) {
+  --app-background-color: var(--app-action-success-hover-background);
+  --app-border-color: var(--app-action-success-hover-border);
+  --app-color: var(--app-action-success-color);
+}
+
+.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]).outline {
+  --app-background-color: transparent;
+  --app-border-color: var(--app-action-success-border);
+  --app-color: var(--app-action-success-border);
+}
+
+.app-action-success:is(
+    button,
+    [type="submit"],
+    [type="button"],
+    [role="button"]
+  ).outline:is(
+    [aria-current]:not([aria-current="false"]),
+    :hover,
+    :active,
+    :focus
+  ) {
+  --app-background-color: var(--app-action-success-outline-background);
+  --app-border-color: var(--app-action-success-border);
+  --app-color: var(--app-action-success-border);
+}
+
+.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):focus {
+  --app-box-shadow:
+    var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    0 0 0 var(--app-outline-width) var(--app-action-success-focus-color);
+}
+
+.danger:is(button, [type="submit"], [type="button"], [role="button"]),
+.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]) {
+  --app-background-color: var(--app-action-danger-background);
+  --app-border-color: var(--app-action-danger-border);
+  --app-color: var(--app-action-danger-color);
 }
 
 .danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
@@ -10,16 +56,23 @@
     :hover,
     :active,
     :focus
+  ),
+.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
+    [aria-current]:not([aria-current="false"]),
+    :hover,
+    :active,
+    :focus
   ) {
-  --app-background-color: var(--app-form-element-invalid-active-border-color);
-  --app-border-color: var(--app-form-element-invalid-active-border-color);
-  --app-color: var(--app-secondary-inverse);
+  --app-background-color: var(--app-action-danger-hover-background);
+  --app-border-color: var(--app-action-danger-hover-border);
+  --app-color: var(--app-action-danger-color);
 }
 
-.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
+.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline,
+.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
   --app-background-color: transparent;
-  --app-border-color: var(--app-notice-error-border-color);
-  --app-color: var(--app-notice-error-border-color);
+  --app-border-color: var(--app-action-danger-border);
+  --app-color: var(--app-action-danger-border);
 }
 
 .danger:is(
@@ -32,15 +85,27 @@
     :hover,
     :active,
     :focus
+  ),
+.app-action-danger:is(
+    button,
+    [type="submit"],
+    [type="button"],
+    [role="button"]
+  ).outline:is(
+    [aria-current]:not([aria-current="false"]),
+    :hover,
+    :active,
+    :focus
   ) {
-  --app-background-color: var(--app-notice-error-background-color);
-  --app-border-color: var(--app-notice-error-border-color);
-  --app-color: var(--app-notice-error-border-color);
+  --app-background-color: var(--app-action-danger-outline-background);
+  --app-border-color: var(--app-action-danger-border);
+  --app-color: var(--app-action-danger-border);
 }
 
-.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
+.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,
+.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
   --app-box-shadow:
     var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-    0 0 0 var(--app-outline-width) var(--app-form-element-invalid-focus-color);
+    0 0 0 var(--app-outline-width) var(--app-action-danger-focus-color);
 }
 }
diff --git a/web/css/components/app-empty-state.css b/web/css/components/app-empty-state.css
index ee2b5f4..38dd9e6 100644
--- a/web/css/components/app-empty-state.css
+++ b/web/css/components/app-empty-state.css
@@ -4,25 +4,43 @@
     border-radius: var(--app-border-radius);
     background: var(--app-empty-bg);
     color: var(--app-empty-text);
-    padding: calc(var(--app-spacing) * 0.875) var(--app-spacing);
+    padding: calc(var(--app-spacing) * 1.5) var(--app-spacing);
     display: grid;
     gap: calc(var(--app-spacing) * 0.35);
     text-align: center;
+    justify-items: center;
   }
 
   .app-empty-state[data-size="compact"] {
-    padding: calc(var(--app-spacing) * 0.625) calc(var(--app-spacing) * 0.75);
+    padding: calc(var(--app-spacing) * 0.75) calc(var(--app-spacing) * 0.75);
     gap: calc(var(--app-spacing) * 0.25);
   }
+  .app-empty-state[data-size="small"] {
+    padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.5);
+    gap: calc(var(--app-spacing) * 0.15);
+  }
 
   .app-empty-state[data-align="left"] {
     text-align: left;
+    justify-items: start;
+  }
+
+  .app-empty-state-icon {
+    color: var(--app-empty-hint);
+    opacity: 0.5;
+    margin-bottom: calc(var(--app-spacing) * 0.15);
+  }
+
+  .app-empty-state[data-size="compact"] .app-empty-state-icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 0;
   }
 
   .app-empty-state-message {
     margin: 0;
-    color: var(--app-empty-text);
-    font-size: 0.95rem;
+    color: var(--app-empty-hint);
+    font-size: 12px;
     line-height: 1.4;
   }
 
@@ -31,11 +49,12 @@
     color: var(--app-empty-hint);
     font-size: 0.85rem;
     line-height: 1.3;
+    opacity: 0.75;
   }
 
   .app-empty-state-action {
     justify-self: center;
-    margin-top: calc(var(--app-spacing) * 0.15);
+    margin-top: calc(var(--app-spacing) * 0.25);
   }
 
   .app-empty-state[data-align="left"] .app-empty-state-action {