@svadmin/ui 0.85.0 → 0.88.0

package/dist/page-chrome.css

@@ -6,7 +6,7 @@
    * the host application's utility CSS implementation.
    */
   [data-svadmin-skip-link] {
-    transform: translateY(calc(-100% - 1rem));
+    transform: translateY(calc(-100% - var(--svadmin-space-4)));
   }
   [data-svadmin-skip-link]:focus,
   [data-svadmin-skip-link]:focus-visible {
@@ -14,24 +14,17 @@
   }
 
   .svadmin-page-header {
-    --svadmin-page-header-gap: 0.5rem;
+    --svadmin-page-header-gap: var(--svadmin-space-2);
     min-width: 0;
   }
-  .svadmin-page-header[data-density="compact"] {
-    --svadmin-page-header-gap: 0.375rem;
-  }
   .svadmin-page-header__breadcrumbs {
-    margin-bottom: 1rem;
-  }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__breadcrumbs {
-    margin-bottom: 0.375rem;
-    font-size: 0.75rem;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-page-header__row, .svadmin-filter-toolbar__row {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__row {
     gap: var(--svadmin-page-header-gap);
@@ -40,7 +33,7 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    gap: 0.625rem;
+    gap: var(--svadmin-space-3);
   }
   .svadmin-page-header__text {
     min-width: 0;
@@ -50,7 +43,7 @@
     flex-wrap: wrap;
     align-items: center;
     min-width: 0;
-    gap: 0.5rem;
+    gap: var(--svadmin-space-2);
   }
   .svadmin-page-header__tags, .svadmin-page-header__actions {
     max-width: 100%;
@@ -59,24 +52,17 @@
   .svadmin-page-header__title {
     min-width: 0;
     color: var(--foreground);
-    font-size: 1.25rem;
+    font-size: var(--svadmin-text-title);
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: var(--svadmin-leading-tight);
     overflow-wrap: anywhere;
   }
   .svadmin-page-header__description {
     color: var(--muted-foreground);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--svadmin-text-body);
+    line-height: var(--svadmin-leading-body);
     overflow-wrap: anywhere;
   }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__title {
-    font-size: 1.125rem;
-  }
-  .svadmin-page-header[data-density="compact"] .svadmin-page-header__description {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
   .svadmin-page-header .svadmin-page-header__back {
     flex-shrink: 0;
     color: var(--muted-foreground);
@@ -85,14 +71,14 @@
     color: var(--foreground);
   }
   .svadmin-page-header .svadmin-page-header__back-icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--svadmin-space-4);
+    height: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs {
     min-width: 0;
   }
   .svadmin-breadcrumbs--spaced {
-    margin-bottom: 1rem;
+    margin-bottom: var(--svadmin-space-4);
   }
   .svadmin-breadcrumbs__item {
     display: inline-flex;
@@ -103,16 +89,11 @@
     color: var(--muted-foreground);
   }
   .svadmin-filter-toolbar {
-    --svadmin-filter-control-height: 2.25rem;
-    --svadmin-filter-control-font: 0.875rem;
-    --svadmin-filter-search-icon-size: 1rem;
+    --svadmin-filter-control-height: var(--svadmin-control-h);
+    --svadmin-filter-control-font: var(--svadmin-text-body);
+    --svadmin-filter-search-icon-size: var(--svadmin-space-4);
     min-width: 0;
   }
-  .svadmin-filter-toolbar[data-density="compact"] {
-    --svadmin-filter-control-height: 2rem;
-    --svadmin-filter-control-font: 0.75rem;
-    --svadmin-filter-search-icon-size: 0.875rem;
-  }
   .svadmin-filter-toolbar__search {
     position: relative;
     min-width: 0;
@@ -120,60 +101,57 @@
   .svadmin-filter-toolbar__search-icon {
     position: absolute;
     top: 50%;
-    inset-inline-start: 0.75rem;
+    inset-inline-start: var(--svadmin-space-3);
     width: var(--svadmin-filter-search-icon-size);
     height: var(--svadmin-filter-search-icon-size);
     color: var(--muted-foreground);
     transform: translateY(-50%);
     pointer-events: none;
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__input {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__input[data-slot="input"] {
     height: var(--svadmin-filter-control-height);
-    padding-inline: 2.25rem;
+    padding-inline: calc(var(--svadmin-space-5) + var(--svadmin-space-3));
     font-size: var(--svadmin-filter-control-font);
-    line-height: 1rem;
+    line-height: var(--svadmin-leading-tight);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__clear {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__clear {
     position: absolute;
-    top: 50%;
-    inset-inline-end: 0.25rem;
-    transform: translateY(-50%);
+    inset-block: 0;
+    inset-inline-end: var(--svadmin-space-1);
+    margin-block: auto;
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__toggle {
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__toggle {
     flex-shrink: 0;
-    gap: 0.375rem;
+    gap: var(--svadmin-space-2);
     height: var(--svadmin-filter-control-height);
     font-size: var(--svadmin-filter-control-font);
     max-width: 100%;
     white-space: normal;
     overflow-wrap: anywhere;
   }
-  .svadmin-filter-toolbar[data-density="compact"] .svadmin-filter-toolbar__toggle {
-    padding-inline: 0.625rem;
-  }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__control-icon {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar__chevron {
-    width: 0.75rem;
-    height: 0.75rem;
-    margin-inline-start: 0.125rem;
+    width: var(--svadmin-space-3);
+    height: var(--svadmin-space-3);
+    margin-inline-start: var(--svadmin-space-1);
     color: var(--muted-foreground);
   }
-  .svadmin-filter-toolbar[data-density] .svadmin-filter-toolbar__count {
-    height: 1rem;
-    min-height: 1rem;
-    min-width: 1rem;
-    margin-inline-start: 0.125rem;
-    padding: 0 0.25rem;
-    font-size: 0.625rem;
+  .svadmin-filter-toolbar .svadmin-filter-toolbar__count {
+    height: var(--svadmin-space-4);
+    min-height: var(--svadmin-space-4);
+    min-width: var(--svadmin-space-4);
+    margin-inline-start: var(--svadmin-space-1);
+    padding: 0 var(--svadmin-space-1);
+    font-size: var(--svadmin-text-caption);
     font-weight: 600;
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
   .svadmin-filter-toolbar .svadmin-filter-toolbar-advanced {
-    margin-top: 0.5rem;
+    margin-top: var(--svadmin-space-2);
     border: 1px solid var(--border);
     @supports (color: color-mix(in lab, red, red)) {
       border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
@@ -183,7 +161,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in oklch, var(--muted) 20%, transparent);
     }
-    padding: 0.75rem;
+    padding: var(--svadmin-space-3);
     overflow-wrap: anywhere;
   }
   @media (min-width: 640px) {
@@ -196,10 +174,10 @@
       justify-content: space-between;
     }
     .svadmin-page-header__heading {
-      flex: 1 1 16rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
     .svadmin-filter-toolbar__search {
-      flex: 1 1 14rem;
+      flex: 1 1 var(--svadmin-chrome-basis);
     }
   }
 }

package/dist/recipes.d.ts

@@ -124,9 +124,7 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
         compact: {
             root: string;
         };
-        comfortable: {
-            root: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -146,9 +144,7 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
         compact: {
             root: string;
         };
-        comfortable: {
-            root: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -168,9 +164,7 @@ declare const contentPageRecipeStyles: import("tailwind-variants").TVReturnType<
         compact: {
             root: string;
         };
-        comfortable: {
-            root: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -185,14 +179,7 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
             description: string;
             actions: string;
         };
-        comfortable: {
-            root: string;
-            row: string;
-            heading: string;
-            title: string;
-            description: string;
-            actions: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -214,14 +201,7 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
             description: string;
             actions: string;
         };
-        comfortable: {
-            root: string;
-            row: string;
-            heading: string;
-            title: string;
-            description: string;
-            actions: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -243,14 +223,7 @@ declare const contentHeaderRecipeStyles: import("tailwind-variants").TVReturnTyp
             description: string;
             actions: string;
         };
-        comfortable: {
-            root: string;
-            row: string;
-            heading: string;
-            title: string;
-            description: string;
-            actions: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -655,10 +628,7 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             card: string;
             state: string;
         };
-        comfortable: {
-            card: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -693,10 +663,7 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             card: string;
             state: string;
         };
-        comfortable: {
-            card: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -731,10 +698,7 @@ declare const surfaceMetricRecipeStyles: import("tailwind-variants").TVReturnTyp
             card: string;
             state: string;
         };
-        comfortable: {
-            card: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -751,13 +715,7 @@ declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType
             cell: string;
             state: string;
         };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -775,13 +733,7 @@ declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType
             cell: string;
             state: string;
         };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;
@@ -799,13 +751,7 @@ declare const surfaceTableRecipeStyles: import("tailwind-variants").TVReturnType
             cell: string;
             state: string;
         };
-        comfortable: {
-            header: string;
-            content: string;
-            head: string;
-            cell: string;
-            state: string;
-        };
+        comfortable: {};
     };
 }, {
     root: string;

package/dist/recipes.js

@@ -55,7 +55,7 @@ const buttonRecipeDefaults = { variant: "default", size: "default" };
 const badgeRecipeDefaults = { variant: "default" };
 const textareaRecipeStyles = tv({ base: "svadmin-textarea" });
 const contentPageRecipeStyles = tv({
-    slots: { root: `${semantic.page} svadmin-content-page` },
+    slots: { root: `${semantic.page} svadmin-content-page space-y-[var(--svadmin-space-5)]` },
     variants: {
         width: {
             narrow: { root: "max-w-3xl" },
@@ -63,42 +63,35 @@ const contentPageRecipeStyles = tv({
             wide: { root: "max-w-[92rem]" },
         },
         density: {
-            compact: { root: "space-y-4" },
-            comfortable: { root: "space-y-6" },
+            compact: { root: "space-y-[var(--svadmin-space-4)]" },
+            comfortable: {},
         },
     },
     defaultVariants: { width: "default", density: "comfortable" },
 });
 const contentHeaderRecipeStyles = tv({
     slots: {
-        root: "svadmin-content-header",
-        breadcrumbs: `${semantic.group} text-xs text-muted-foreground`,
+        root: "svadmin-content-header space-y-[var(--svadmin-space-3)]",
+        breadcrumbs: `${semantic.group} text-[length:var(--svadmin-text-caption)] text-muted-foreground`,
         currentCrumb: "text-foreground",
-        row: "flex flex-col sm:flex-row sm:items-start sm:justify-between",
-        heading: "min-w-0",
-        eyebrow: "text-xs font-medium text-muted-foreground",
-        title: "font-semibold leading-tight text-foreground",
-        description: "max-w-2xl text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center",
+        row: "flex flex-col gap-[var(--svadmin-space-5)] sm:flex-row sm:items-start sm:justify-between",
+        heading: "min-w-0 space-y-[var(--svadmin-space-1)]",
+        eyebrow: "text-[length:var(--svadmin-text-caption)] font-medium text-muted-foreground",
+        title: "text-[length:var(--svadmin-text-title)] font-semibold leading-[var(--svadmin-leading-tight)] text-foreground",
+        description: "max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-body)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
     variants: {
         density: {
             compact: {
-                root: "space-y-2",
-                row: "gap-3",
-                heading: "space-y-0.5",
-                title: "text-lg leading-tight",
-                description: "text-[0.8125rem] leading-5",
-                actions: "gap-1.5",
-            },
-            comfortable: {
-                root: "space-y-3",
-                row: "gap-6",
-                heading: "space-y-1",
-                title: "text-xl leading-tight",
-                description: "text-sm leading-6",
-                actions: "gap-2",
+                root: "space-y-[var(--svadmin-space-2)]",
+                row: "gap-[var(--svadmin-space-3)]",
+                heading: "space-y-[var(--svadmin-space-1)]",
+                title: "text-[length:var(--svadmin-text-section)] leading-[var(--svadmin-leading-tight)]",
+                description: "text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)]",
+                actions: "gap-[var(--svadmin-space-1)]",
             },
+            comfortable: {},
         },
     },
     defaultVariants: { density: "comfortable" },
@@ -127,18 +120,18 @@ const metricBlockRecipeStyles = tv({
 });
 const productSectionRecipeStyles = tv({
     slots: {
-        root: "flex flex-wrap items-start justify-between gap-3",
-        heading: "min-w-0 flex-[1_1_16rem]",
-        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
-        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
+        root: "flex flex-wrap items-start justify-between gap-[var(--svadmin-space-3)]",
+        heading: "min-w-0 flex-[1_1_var(--svadmin-chrome-basis)]",
+        title: "m-0 text-[length:var(--svadmin-text-section)] font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-[var(--svadmin-space-1)] max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
 });
 const productToolbarRecipeStyles = tv({
     slots: {
-        root: "flex flex-wrap items-center justify-between gap-3 border-b border-border py-3",
-        leading: "flex min-w-0 flex-[1_1_16rem] flex-wrap items-center gap-2",
-        trailing: "ms-auto flex min-w-0 flex-wrap items-center gap-2",
+        root: "flex flex-wrap items-center justify-between gap-[var(--svadmin-space-3)] border-b border-border py-[var(--svadmin-space-3)]",
+        leading: "flex min-w-0 flex-[1_1_var(--svadmin-chrome-basis)] flex-wrap items-center gap-[var(--svadmin-space-2)]",
+        trailing: "ms-auto flex min-w-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
     },
 });
 const productWorkspaceRecipeStyles = tv({
@@ -155,12 +148,12 @@ const productWorkspaceRecipeStyles = tv({
 const productSettingsRecipeStyles = tv({
     slots: {
         root: `${semantic.body} min-w-0`,
-        header: "flex flex-wrap items-start justify-between gap-3 border-b border-border py-4",
-        heading: "min-w-0 flex-[1_1_16rem]",
-        title: "m-0 text-base font-semibold text-foreground [overflow-wrap:anywhere]",
-        description: "mt-1 max-w-[65ch] text-[0.8125rem] leading-6 text-muted-foreground",
-        actions: "flex shrink-0 flex-wrap items-center gap-2",
-        body: "min-w-0 py-1",
+        header: "flex flex-wrap items-start justify-between gap-[var(--svadmin-space-3)] border-b border-border py-[var(--svadmin-space-4)]",
+        heading: "min-w-0 flex-[1_1_var(--svadmin-chrome-basis)]",
+        title: "m-0 text-[length:var(--svadmin-text-section)] font-semibold text-foreground [overflow-wrap:anywhere]",
+        description: "mt-[var(--svadmin-space-1)] max-w-[var(--svadmin-measure)] text-[length:var(--svadmin-text-label)] leading-[var(--svadmin-leading-body)] text-muted-foreground",
+        actions: "flex shrink-0 flex-wrap items-center gap-[var(--svadmin-space-2)]",
+        body: "min-w-0 py-[var(--svadmin-space-1)]",
     },
 });
 const productSettingsRowRecipeStyles = tv({
@@ -190,9 +183,9 @@ const productStatusRecipeStyles = tv({
 const surfaceMetricRecipeStyles = tv({
     slots: {
         root: "surface-metric__root min-w-0",
-        card: "surface-metric__card border-s-[3px] border-solid",
+        card: "surface-metric__card border-s-[3px] border-solid p-5",
         description: "surface-metric__description text-muted-foreground",
-        state: "surface-metric__state [--svadmin-metric-state-border-width:3px]",
+        state: "surface-metric__state [--svadmin-metric-state-border-width:3px] [--svadmin-metric-state-padding:1.25rem] [--svadmin-metric-state-height:6rem]",
     },
     variants: {
         tone: {
@@ -203,8 +196,11 @@ const surfaceMetricRecipeStyles = tv({
             info: { card: "border-s-info", state: "[--svadmin-metric-state-accent:var(--info)]" },
         },
         density: {
-            compact: { card: "p-3", state: "[--svadmin-metric-state-padding:0.75rem] [--svadmin-metric-state-height:4.5rem]" },
-            comfortable: { card: "p-5", state: "[--svadmin-metric-state-padding:1.25rem] [--svadmin-metric-state-height:6rem]" },
+            compact: {
+                card: "p-3",
+                state: "[--svadmin-metric-state-padding:var(--svadmin-space-3)] [--svadmin-metric-state-height:4.5rem]",
+            },
+            comfortable: {},
         },
     },
     defaultVariants: { tone: "neutral", density: "comfortable" },
@@ -212,16 +208,22 @@ const surfaceMetricRecipeStyles = tv({
 const surfaceTableRecipeStyles = tv({
     slots: {
         root: "surface-table__root min-w-0",
-        header: "surface-table__header",
-        content: "surface-table__content",
-        head: "surface-table__head",
-        cell: "surface-table__cell",
-        state: "surface-table__state text-muted-foreground",
+        header: "surface-table__header px-[var(--svadmin-space-4)]",
+        content: "surface-table__content px-[var(--svadmin-space-4)]",
+        head: "surface-table__head [&[data-slot=table-head]]:py-[var(--svadmin-space-2)] [&[data-slot=table-head]]:text-[length:var(--svadmin-text-body)]",
+        cell: "surface-table__cell [&[data-slot=table-cell]]:py-[var(--svadmin-space-2)] [&[data-slot=table-cell]]:text-[length:var(--svadmin-text-body)]",
+        state: "surface-table__state text-muted-foreground [--svadmin-table-state-height:var(--svadmin-table-state-min-h)]",
     },
     variants: {
         density: {
-            compact: { header: "px-3", content: "px-3", head: "[&[data-slot=table-head]]:py-1 [&[data-slot=table-head]]:text-xs", cell: "[&[data-slot=table-cell]]:py-1 [&[data-slot=table-cell]]:text-xs", state: "[--svadmin-table-state-height:6rem]" },
-            comfortable: { header: "px-4", content: "px-4", head: "[&[data-slot=table-head]]:py-2 [&[data-slot=table-head]]:text-sm", cell: "[&[data-slot=table-cell]]:py-2 [&[data-slot=table-cell]]:text-sm", state: "[--svadmin-table-state-height:8rem]" },
+            compact: {
+                header: "px-[var(--svadmin-space-3)]",
+                content: "px-[var(--svadmin-space-3)]",
+                head: "[&[data-slot=table-head]]:py-[var(--svadmin-space-1)] [&[data-slot=table-head]]:text-[length:var(--svadmin-text-caption)]",
+                cell: "[&[data-slot=table-cell]]:py-[var(--svadmin-space-1)] [&[data-slot=table-cell]]:text-[length:var(--svadmin-text-caption)]",
+                state: "[--svadmin-table-state-height:var(--svadmin-table-state-min-h-compact)]",
+            },
+            comfortable: {},
         },
     },
     defaultVariants: { density: "comfortable" },

package/dist/styles/recipes.css

@@ -424,6 +424,7 @@
 .svadmin-surface-metric__card {
       border-inline-start-style: solid;
       border-inline-start-width: 3px;
+      padding: var(--svadmin-spacing-lg);
 }
 
 .svadmin-surface-metric__description {
@@ -432,14 +433,28 @@
 
 .svadmin-surface-metric__state {
       --svadmin-metric-state-border-width: 3px;
+      --svadmin-metric-state-padding: 1.25rem;
+      --svadmin-metric-state-height: 6rem;
 }
 
 .svadmin-surface-table__root {
       min-width: 0;
 }
 
+.svadmin-surface-table__header,
+.svadmin-surface-table__content {
+      padding-inline: var(--svadmin-spacing-md);
+}
+
+.svadmin-surface-table__head[data-slot="table-head"],
+.svadmin-surface-table__cell[data-slot="table-cell"] {
+      padding-block: 0.5rem;
+      font-size: var(--svadmin-font-sizes-body);
+}
+
 .svadmin-surface-table__state {
       color: var(--svadmin-colors-muted);
+      --svadmin-table-state-height: 8rem;
 }
 
 :where(.svadmin-content-header__root > :not(:last-child)) {
@@ -1007,10 +1022,6 @@
       border-color: var(--svadmin-colors-border);
 }
 
-.svadmin-product-list__table [data-table-density=comfortable] [data-slot=table-cell] {
-      padding-block: calc(var(--spacing, 0.25rem) * 4);
-}
-
 .svadmin-product-list__table [data-slot=table] {
       border-collapse: collapse;
       font-size: var(--svadmin-font-sizes-body);
@@ -1120,15 +1131,6 @@
     --svadmin-metric-state-accent: var(--svadmin-colors-border);
 }
 
-.svadmin-surface-metric__card--density_comfortable {
-    padding: var(--svadmin-spacing-lg);
-}
-
-.svadmin-surface-metric__state--density_comfortable {
-    --svadmin-metric-state-padding: 1.25rem;
-    --svadmin-metric-state-height: 6rem;
-}
-
 .svadmin-surface-metric__card--tone_success {
     border-inline-start-color: var(--svadmin-colors-success);
 }
@@ -1161,41 +1163,6 @@
     --svadmin-metric-state-accent: var(--svadmin-colors-info);
 }
 
-.svadmin-surface-metric__card--density_compact {
-    padding: var(--svadmin-spacing-sm);
-}
-
-.svadmin-surface-metric__state--density_compact {
-    --svadmin-metric-state-padding: 0.75rem;
-    --svadmin-metric-state-height: 4.5rem;
-}
-
-.svadmin-surface-table__header--density_comfortable,.svadmin-surface-table__content--density_comfortable {
-    padding-inline: var(--svadmin-spacing-md);
-}
-
-.svadmin-surface-table__head--density_comfortable[data-slot="table-head"],.svadmin-surface-table__cell--density_comfortable[data-slot="table-cell"] {
-    padding-block: 0.5rem;
-    font-size: var(--svadmin-font-sizes-body);
-}
-
-.svadmin-surface-table__state--density_comfortable {
-    --svadmin-table-state-height: 8rem;
-}
-
-.svadmin-surface-table__header--density_compact,.svadmin-surface-table__content--density_compact {
-    padding-inline: var(--svadmin-spacing-sm);
-}
-
-.svadmin-surface-table__head--density_compact[data-slot="table-head"],.svadmin-surface-table__cell--density_compact[data-slot="table-cell"] {
-    padding-block: var(--svadmin-spacing-xs);
-    font-size: var(--svadmin-font-sizes-compact);
-}
-
-.svadmin-surface-table__state--density_compact {
-    --svadmin-table-state-height: 6rem;
-}
-
 .svadmin-content-page__root--width_default {
     max-width: var(--svadmin-sizes-content-default);
 }