@umituz/web-dashboard 5.0.0 → 5.0.1

package/README.md

@@ -50,8 +50,8 @@ resets: import the package stylesheet **after** your base layer.
 reads its variables, so theming has exactly one path: set the DS variables.
 Vanilla-CSS hosts define `--app-*` slots via the design system's `bridge.css`;
 Tailwind hosts override `--color-*` from their own `@theme`. Dashboard-only
-knobs (`--udb-font-size-*`, `--udb-sidebar-*`, `--udb-header-height`,
-`--udb-border-strong`) can be overridden anywhere in the cascade.
+knobs (`--udb-font-size-*`, `--udb-space-*`, `--udb-sidebar-*`,
+`--udb-header-height`, `--udb-border-strong`, `--udb-radius-pill`) can be overridden anywhere in the cascade.
 
 ## Entry points
 
@@ -211,7 +211,8 @@ npm run test:watch
    `--u-color-surface-muted` → `--color-muted`, `--u-color-danger` →
    `--color-destructive`) and dashboard knobs to their `--udb-*` names
    (`--u-font-size-*` → `--udb-font-size-*`, `--u-color-border-strong` →
-   `--udb-border-strong`, `--u-sidebar-*` → `--udb-sidebar-*`).
+   `--udb-border-strong`, `--u-sidebar-*` → `--udb-sidebar-*`, `--u-space-*` →
+   `--udb-space-*`).
 4. Dark mode: replace `data-udb-theme="dark"` with the design-system
    convention (`[data-theme="dark"]` / `.dark` + dark DS variable values).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Installable app skeleton for the fleet — layouts, auth, analytics (dependency-free SVG charts), calendar, i18n via @umituz/web-localization, permissions/session/module registry; udb-* stylesheet on design-system tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/styles/dashboard.css

@@ -9,6 +9,15 @@
   --udb-font-size-2xl: 24px;
   --udb-font-size-3xl: 30px;
   --udb-font-size-4xl: 36px;
+  --udb-space-1: 4px;
+  --udb-space-2: 8px;
+  --udb-space-3: 12px;
+  --udb-space-4: 16px;
+  --udb-space-5: 20px;
+  --udb-space-6: 24px;
+  --udb-space-7: 32px;
+  --udb-space-8: 40px;
+  --udb-radius-pill: 9999px;
   --udb-border-strong: #cbd5e1;
   --udb-sidebar-width: 240px;
   --udb-sidebar-width-collapsed: 64px;
@@ -49,7 +58,7 @@
 .udb-stack {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--udb-space-5);
 }
 .udb-row {
   display: flex;
@@ -57,14 +66,14 @@
 }
 .udb-grid {
   display: grid;
-  gap: 20px;
+  gap: var(--udb-space-5);
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
 .udb-card--sm {
-  padding: 16px;
+  padding: var(--udb-space-4);
 }
 .udb-card--lg {
-  padding: 40px;
+  padding: var(--udb-space-8);
 }
 .udb-layout {
   display: flex;
@@ -114,14 +123,14 @@
 .udb-layout__content {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: var(--udb-space-4);
 }
 @media (min-width: 768px) {
   .udb-layout__sidebar {
     display: flex;
   }
   .udb-layout__content {
-    padding: 32px;
+    padding: var(--udb-space-7);
   }
 }
 .udb-page-skeleton {
@@ -130,7 +139,7 @@
   max-width: 1280px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: var(--udb-space-6);
 }
 .udb-skeleton--title {
   height: 32px;
@@ -139,7 +148,7 @@
 }
 .udb-skeleton-grid {
   display: grid;
-  gap: 16px;
+  gap: var(--udb-space-4);
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 .udb-skeleton--card {
@@ -161,9 +170,9 @@
   display: flex;
   height: var(--udb-header-height);
   align-items: center;
-  gap: 12px;
+  gap: var(--udb-space-3);
   border-bottom: 1px solid var(--udb-sidebar-border);
-  padding: 0 16px;
+  padding: 0 var(--udb-space-4);
 }
 .udb-brand-logo {
   flex-shrink: 0;
@@ -181,8 +190,8 @@
   color: var(--udb-sidebar-text);
 }
 .udb-sidebar__brand-tagline {
-  margin-top: 8px;
-  margin-left: 4px;
+  margin-top: var(--udb-space-2);
+  margin-left: var(--udb-space-1);
   font-size: var(--udb-font-size-xs);
   font-weight: var(--font-weight-bold);
   text-transform: lowercase;
@@ -192,14 +201,14 @@
   user-select: none;
 }
 .udb-sidebar__create {
-  padding: 16px 12px;
+  padding: var(--udb-space-4) var(--udb-space-3);
   border-bottom: 1px solid var(--udb-sidebar-border);
 }
 .udb-sidebar__create-btn {
   width: 100%;
   height: 44px;
   justify-content: flex-start;
-  padding: 0 16px;
+  padding: 0 var(--udb-space-4);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
 }
@@ -222,25 +231,25 @@
 .udb-sidebar__nav {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 8px;
+  padding: var(--udb-space-3) var(--udb-space-2);
 }
 .udb-sidebar__groups {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: var(--udb-space-6);
 }
 .udb-sidebar__group {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--udb-space-1);
 }
 .udb-sidebar__group-toggle {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 4px;
-  padding: 8px 12px;
+  margin-bottom: var(--udb-space-1);
+  padding: var(--udb-space-2) var(--udb-space-3);
   border: none;
   border-radius: var(--radius-md);
   background: transparent;
@@ -269,8 +278,8 @@
 .udb-sidebar__item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
+  gap: var(--udb-space-3);
+  padding: 10px var(--udb-space-3);
   border-radius: var(--radius-md);
   font-size: var(--udb-font-size-md);
   font-weight: var(--font-weight-medium);
@@ -306,7 +315,7 @@
 }
 .udb-sidebar__footer {
   border-top: 1px solid var(--udb-sidebar-border);
-  padding: 12px;
+  padding: var(--udb-space-3);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -315,7 +324,7 @@
   justify-content: center;
 }
 .udb-sidebar__footer-label {
-  padding: 0 8px;
+  padding: 0 var(--udb-space-2);
   font-size: 10px;
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;
@@ -335,16 +344,16 @@
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
-  gap: 12px;
+  gap: var(--udb-space-3);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-card);
-  padding: 0 16px;
+  padding: 0 var(--udb-space-4);
   z-index: 30;
 }
 .udb-header__lead {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--udb-space-3);
   min-width: 0;
 }
 .udb-header__title {
@@ -373,7 +382,7 @@
 .udb-header__actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
 }
 .udb-header__icon-btn {
   height: 36px;
@@ -430,7 +439,7 @@
 .udb-header__divider {
   width: 1px;
   height: 24px;
-  margin: 0 4px;
+  margin: 0 var(--udb-space-1);
   background: var(--color-border);
 }
 .udb-overlay {
@@ -465,7 +474,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--udb-space-3) var(--udb-space-4);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-muted);
 }
@@ -495,7 +504,7 @@
   width: 100%;
   align-items: center;
   gap: 10px;
-  padding: 8px 12px;
+  padding: var(--udb-space-2) var(--udb-space-3);
   border: none;
   border-radius: var(--radius-md);
   background: transparent;
@@ -534,8 +543,8 @@
 .udb-notif__item {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-3) var(--udb-space-4);
   border-bottom: 1px solid var(--color-border);
 }
 .udb-notif__item:last-child {
@@ -560,8 +569,8 @@
 .udb-notif__meta {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin: 4px 0 0;
+  gap: var(--udb-space-1);
+  margin: var(--udb-space-1) 0 0;
   font-size: 10px;
   color: var(--color-muted-foreground);
 }
@@ -590,7 +599,7 @@
   height: 12px;
 }
 .udb-notif__empty {
-  padding: 40px 16px;
+  padding: var(--udb-space-8) var(--udb-space-4);
   text-align: center;
 }
 .udb-notif__empty-icon {
@@ -599,7 +608,7 @@
   height: 40px;
   align-items: center;
   justify-content: center;
-  margin: 0 auto 12px;
+  margin: 0 auto var(--udb-space-3);
   border-radius: 50%;
   background: var(--color-muted);
 }
@@ -617,10 +626,10 @@
 .udb-profile-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 4px;
+  gap: var(--udb-space-2);
+  padding: var(--udb-space-1);
   border: none;
-  border-radius: 9999px;
+  border-radius: var(--udb-radius-pill);
   background: transparent;
   cursor: pointer;
 }
@@ -658,12 +667,12 @@
 }
 .udb-profile-menu {
   width: 224px;
-  padding: 8px;
+  padding: var(--udb-space-2);
 }
 .udb-profile-menu__id {
-  padding: 8px 12px;
+  padding: var(--udb-space-2) var(--udb-space-3);
   border-bottom: 1px solid var(--color-border);
-  margin-bottom: 4px;
+  margin-bottom: var(--udb-space-1);
 }
 .udb-profile-menu__name {
   margin: 0;
@@ -685,7 +694,7 @@
 }
 .udb-profile-menu__separator {
   height: 1px;
-  margin: 8px 0;
+  margin: var(--udb-space-2) 0;
   background: var(--color-border);
 }
 .udb-auth {
@@ -698,13 +707,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 16px 24px;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-4) var(--udb-space-6);
 }
 .udb-auth__brand {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
 }
 .udb-auth__brand-name {
   font-size: var(--udb-font-size-lg);
@@ -726,7 +735,7 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding: 24px 16px;
+  padding: var(--udb-space-6) var(--udb-space-4);
 }
 .udb-auth__column {
   display: flex;
@@ -739,10 +748,10 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
-  padding: 40px 32px;
+  padding: var(--udb-space-8) var(--udb-space-7);
 }
 .udb-auth__tagline {
-  margin: 0 0 20px;
+  margin: 0 0 var(--udb-space-5);
   text-align: center;
   font-size: var(--udb-font-size-xs);
   font-weight: var(--font-weight-bold);
@@ -751,16 +760,16 @@
   color: var(--color-primary);
 }
 .udb-auth__social {
-  margin-top: 20px;
+  margin-top: var(--udb-space-5);
 }
 .udb-auth__footer {
-  padding: 16px 24px;
+  padding: var(--udb-space-4) var(--udb-space-6);
 }
 .udb-auth__footer-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   text-align: center;
   font-size: var(--udb-font-size-xs);
   color: var(--color-muted-foreground);
@@ -773,7 +782,7 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: var(--udb-space-4);
 }
 .udb-auth__footer-link {
   font-size: var(--udb-font-size-xs);
@@ -787,8 +796,8 @@
 .udb-divider-row {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin: 20px 0;
+  gap: var(--udb-space-3);
+  margin: var(--udb-space-5) 0;
 }
 .udb-divider-row::before,
 .udb-divider-row::after {
@@ -808,7 +817,7 @@
 .udb-social-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  gap: var(--udb-space-3);
 }
 .udb-social-grid__btn {
   width: 100%;
@@ -822,9 +831,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   height: 40px;
-  padding: 0 12px;
+  padding: 0 var(--udb-space-3);
   border: 1px solid var(--udb-border-strong);
   border-radius: var(--radius-md);
   background: var(--color-card);
@@ -858,13 +867,13 @@
 .udb-form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--udb-space-4);
   width: 100%;
 }
 .udb-form__header {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--udb-space-1);
   text-align: center;
 }
 .udb-form__title {
@@ -891,7 +900,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--udb-space-3);
   font-size: var(--udb-font-size-md);
 }
 .udb-form__footer-text {
@@ -903,7 +912,7 @@
 .udb-form__group {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--udb-space-3);
 }
 .udb-field {
   display: flex;
@@ -927,8 +936,8 @@
 .udb-form-alert {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: var(--udb-space-2);
+  padding: 10px var(--udb-space-3);
   border-radius: var(--radius-md);
   background: var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
   color: var(--color-destructive);
@@ -943,7 +952,7 @@
 .udb-check-label {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   font-size: var(--udb-font-size-md);
   color: var(--color-muted-foreground);
   cursor: pointer;
@@ -988,7 +997,7 @@
 }
 .udb-submit-btn--pill {
   height: 48px;
-  border-radius: 9999px;
+  border-radius: var(--udb-radius-pill);
 }
 .udb-btn__spinner {
   animation: udb-spin 1s linear infinite;
@@ -1022,16 +1031,16 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  margin-top: 4px;
+  margin-top: var(--udb-space-1);
 }
 .udb-strength__bars {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
+  gap: var(--udb-space-2);
 }
 .udb-strength__bar {
   height: 4px;
-  border-radius: 9999px;
+  border-radius: var(--udb-radius-pill);
   background: var(--udb-border-strong);
   transition: background-color 0.2s ease;
 }
@@ -1070,7 +1079,7 @@
   justify-content: center;
   width: 48px;
   height: 48px;
-  margin: 0 auto 16px;
+  margin: 0 auto var(--udb-space-4);
   border-radius: 50%;
   background: var(--color-success-soft, color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent));
 }
@@ -1082,15 +1091,15 @@
 .udb-steps-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin: 16px 0 0;
+  gap: var(--udb-space-3);
+  margin: var(--udb-space-4) 0 0;
   padding: 0;
   list-style: none;
 }
 .udb-steps-list__item {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: var(--udb-space-2);
   font-size: var(--udb-font-size-md);
   color: var(--color-foreground);
 }
@@ -1105,7 +1114,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-top: 16px;
+  margin-top: var(--udb-space-4);
   border: none;
   padding: 0;
   background: transparent;
@@ -1145,8 +1154,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding: 16px;
+  gap: var(--udb-space-2);
+  padding: var(--udb-space-4);
   border-bottom: 1px solid var(--color-border);
 }
 .udb-settings__sidebar-title {
@@ -1173,7 +1182,7 @@
 .udb-settings__nav {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 8px;
+  padding: var(--udb-space-3) var(--udb-space-2);
 }
 .udb-settings__mobile {
   position: fixed;
@@ -1207,15 +1216,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-3) var(--udb-space-4);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-card);
 }
 .udb-settings__mobile-lead {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   min-width: 0;
 }
 .udb-settings__mobile-title {
@@ -1230,18 +1239,18 @@
 .udb-settings__content {
   flex: 1;
   overflow-y: auto;
-  padding: 20px 16px;
+  padding: var(--udb-space-5) var(--udb-space-4);
 }
 .udb-settings__skeleton {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--udb-space-4);
   max-width: 640px;
 }
 .udb-settings__skeleton-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--udb-space-2);
 }
 .udb-settings__skeleton-row {
   height: 14px;
@@ -1257,17 +1266,17 @@
     display: none;
   }
   .udb-settings__content {
-    padding: 40px;
+    padding: var(--udb-space-8);
   }
 }
 .udb-settings-nav {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: var(--udb-space-5);
 }
 .udb-settings-nav__title {
   margin: 0;
-  padding: 0 12px;
+  padding: 0 var(--udb-space-3);
   font-size: 10px;
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;
@@ -1283,8 +1292,8 @@
   display: flex;
   width: 100%;
   align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-2) var(--udb-space-3);
   border: none;
   border-radius: var(--radius-md);
   background: transparent;
@@ -1320,8 +1329,8 @@
   text-overflow: ellipsis;
 }
 .udb-settings-nav__badge {
-  padding: 1px 8px;
-  border-radius: 9999px;
+  padding: 1px var(--udb-space-2);
+  border-radius: var(--udb-radius-pill);
   background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
   color: var(--color-primary);
   font-size: 10px;
@@ -1336,7 +1345,7 @@
 .udb-analytics {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: var(--udb-space-6);
   width: 100%;
 }
 .udb-analytics__header {
@@ -1344,7 +1353,7 @@
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: var(--udb-space-3);
 }
 .udb-analytics__heading {
   min-width: 0;
@@ -1358,7 +1367,7 @@
   color: var(--color-foreground);
 }
 .udb-analytics__description {
-  margin: 4px 0 0;
+  margin: var(--udb-space-1) 0 0;
   font-size: var(--udb-font-size-md);
   color: var(--color-muted-foreground);
 }
@@ -1366,7 +1375,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--udb-space-2);
 }
 .udb-analytics__action-icon {
   width: 16px;
@@ -1376,7 +1385,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px 0;
+  padding: var(--udb-space-8) 0;
 }
 .udb-analytics__loading-spinner {
   width: 48px;
@@ -1386,12 +1395,12 @@
 .udb-analytics__metrics {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 16px;
+  gap: var(--udb-space-4);
 }
 .udb-analytics__charts {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 24px;
+  gap: var(--udb-space-6);
 }
 @media (min-width: 640px) {
   .udb-analytics__metrics {
@@ -1409,9 +1418,9 @@
 .udb-period-select {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   height: 36px;
-  padding: 0 12px;
+  padding: 0 var(--udb-space-3);
   border: 1px solid var(--udb-border-strong);
   border-radius: var(--radius-md);
   background: var(--color-card);
@@ -1436,7 +1445,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: var(--udb-space-3);
   min-height: 192px;
 }
 .udb-analytics-card__status--error {
@@ -1457,7 +1466,7 @@
   font-size: var(--udb-font-size-md);
 }
 .udb-analytics-card__header {
-  margin-bottom: 24px;
+  margin-bottom: var(--udb-space-6);
 }
 .udb-analytics-card__title {
   margin: 0;
@@ -1466,15 +1475,15 @@
   color: var(--color-foreground);
 }
 .udb-analytics-card__description {
-  margin: 4px 0 0;
+  margin: var(--udb-space-1) 0 0;
   font-size: var(--udb-font-size-sm);
   color: var(--color-muted-foreground);
 }
 .udb-analytics-card__metrics {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-  margin-top: 16px;
+  gap: var(--udb-space-4);
+  margin-top: var(--udb-space-4);
 }
 .udb-chart {
   position: relative;
@@ -1486,7 +1495,7 @@
   justify-content: center;
   height: 100%;
   min-height: 192px;
-  padding: 24px;
+  padding: var(--udb-space-6);
   text-align: center;
   font-size: var(--udb-font-size-md);
   color: var(--color-muted-foreground);
@@ -1509,13 +1518,13 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 12px;
+  gap: var(--udb-space-3);
+  margin-top: var(--udb-space-3);
 }
 .udb-chart__chip {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--udb-space-2);
   font-size: var(--udb-font-size-sm);
   color: var(--color-muted-foreground);
 }
@@ -1530,8 +1539,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  padding: 40px 24px;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-8) var(--udb-space-6);
   text-align: center;
   color: var(--color-muted-foreground);
 }
@@ -1574,7 +1583,7 @@
   font-size: var(--udb-font-size-md);
 }
 .udb-table__th {
-  padding: 8px 12px;
+  padding: var(--udb-space-2) var(--udb-space-3);
   border-bottom: 1px solid var(--udb-border-strong);
   text-align: left;
   font-size: var(--udb-font-size-xs);
@@ -1590,7 +1599,7 @@
   letter-spacing: 0;
 }
 .udb-table__td {
-  padding: 12px;
+  padding: var(--udb-space-3);
   border-bottom: 1px solid var(--color-border);
   color: var(--color-foreground);
 }
@@ -1624,7 +1633,7 @@
   color: var(--color-muted-foreground);
 }
 .udb-org-menu {
-  padding: 8px;
+  padding: var(--udb-space-2);
 }
 .udb-org-menu__label {
   flex: 1;
@@ -1686,8 +1695,8 @@
 .udb-audit__item {
   display: flex;
   align-items: baseline;
-  gap: 16px;
-  padding: 12px 16px;
+  gap: var(--udb-space-4);
+  padding: var(--udb-space-3) var(--udb-space-4);
   border-bottom: 1px solid var(--color-border);
   font-size: var(--udb-font-size-md);
 }
@@ -1730,7 +1739,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--udb-space-3);
   padding: 14px 18px 4px;
   flex-wrap: wrap;
 }