@svadmin/surface 0.9.0 → 0.11.0

package/dist/styles.css

@@ -1,1262 +1,43 @@
-:where(:root, :host, .svadmin-theme, .dark, [data-theme]) {
-    --svadmin-spacing-xs: 0.25rem;
-    --svadmin-spacing-sm: 0.75rem;
-    --svadmin-spacing-md: 1rem;
-    --svadmin-spacing-lg: 1.25rem;
-    --svadmin-spacing-content-stack: var(--spacing);
-    --svadmin-spacing-content-inline: calc(var(--spacing) * 2);
-    --svadmin-spacing-content-section: calc(var(--spacing) * 3);
-    --svadmin-spacing-content-panel: calc(var(--spacing) * 4);
-    --svadmin-spacing-content-page: calc(var(--spacing) * 6);
-    --svadmin-sizes-content-narrow: var(--container-3xl);
-    --svadmin-sizes-content-default: 74rem;
-    --svadmin-sizes-content-wide: 92rem;
-    --svadmin-sizes-content-description: var(--container-2xl);
-    --svadmin-sizes-content-skeleton-height: calc(var(--spacing) * 8);
-    --svadmin-sizes-content-skeleton-width: calc(var(--spacing) * 24);
-    --svadmin-font-sizes-compact: 0.75rem;
-    --svadmin-font-sizes-body: 0.875rem;
-    --svadmin-font-sizes-content-caption: var(--text-xs);
-    --svadmin-font-sizes-content-body: var(--text-sm);
-    --svadmin-font-sizes-content-title: var(--text-xl);
-    --svadmin-font-sizes-content-metric: var(--text-2xl);
-    --svadmin-line-heights-content-caption: var(--text-xs--line-height);
-    --svadmin-line-heights-content-body: var(--text-sm--line-height);
-    --svadmin-line-heights-content-title: var(--leading-tight);
-    --svadmin-line-heights-content-description: calc(var(--spacing) * 6);
-    --svadmin-line-heights-content-metric: var(--text-2xl--line-height);
-    --svadmin-font-weights-content-medium: var(--font-weight-medium);
-    --svadmin-font-weights-content-strong: var(--font-weight-semibold);
-    --svadmin-letter-spacings-content-normal: var(--tracking-normal);
-    --svadmin-shadows-content-card: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --svadmin-colors-surface: var(--card);
-    --svadmin-colors-foreground: var(--foreground);
-    --svadmin-colors-muted: var(--muted-foreground);
-    --svadmin-colors-border: var(--border);
-    --svadmin-colors-success: var(--success);
-    --svadmin-colors-warning: var(--warning);
-    --svadmin-colors-danger: var(--destructive);
-    --svadmin-colors-info: var(--info);
-    --svadmin-colors-content-foreground: var(--color-foreground);
-    --svadmin-colors-content-muted: var(--color-muted-foreground);
-    --svadmin-colors-content-card: var(--color-card);
-    --svadmin-colors-content-border: var(--color-border);
-    --svadmin-colors-content-positive: var(--color-success);
-    --svadmin-colors-content-negative: var(--color-destructive);
-    --svadmin-colors-content-warning: var(--color-warning-foreground);
-    --svadmin-radii-surface: var(--radius-lg);
-    --svadmin-radii-content-card: var(--radius-lg);
-}
-
-@layer components {
-
-.svadmin-ui-badge {
-      border: 1px solid transparent;
-      padding: 0.125rem 0.625rem;
-      gap: 0.25rem;
-      overflow: hidden;
-      border-radius: var(--radius-sm);
-      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-      font-weight: 600;
-      line-height: 1;
-      white-space: nowrap;
-      width: fit-content;
-      min-height: 1.25rem;
-}
-
-.svadmin-ui-badge > svg {
-      pointer-events: none;
-      width: 0.75rem;
-      height: 0.75rem;
-}
-
-.svadmin-ui-button {
-      border: 1px solid transparent;
-      gap: 0.375rem;
-      border-radius: var(--radius-md);
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      background-clip: padding-box;
-      -webkit-background-clip: padding-box;
-      font-size: 0.875rem;
-      font-weight: 500;
-      line-height: 1;
-      white-space: nowrap;
-      -webkit-user-select: none;
-      user-select: none;
-}
-
-.svadmin-ui-button > svg {
-      flex-shrink: 0;
-      pointer-events: none;
-      width: 1rem;
-      height: 1rem;
-}
-
-.svadmin-ui-button:disabled,.svadmin-ui-button[aria-disabled="true"] {
-      pointer-events: none;
-      opacity: 0.5;
-}
-
-.svadmin-ui-button:active {
-      transform: translateY(1px);
-}
-
-.svadmin-ui-textarea {
-      border: 1px solid var(--border);
-      padding: 0.5rem 0.75rem;
-      background: transparent;
-      font: inherit;
-      border-radius: 0.5rem;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
-      resize: vertical;
-      color: var(--foreground);
-      font-size: 0.875rem;
-      width: 100%;
-      min-height: 5rem;
-}
-
-.svadmin-ui-textarea[aria-invalid="true"] {
-      border-color: var(--destructive);
-      box-shadow: 0 0 0 3px var(--destructive);
-}
-
-.svadmin-ui-textarea:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-}
-
-.svadmin-ui-textarea::placeholder {
-      color: var(--muted-foreground);
-}
-
-.svadmin-ui-textarea:focus-visible {
-      border-color: var(--ring);
-      box-shadow: 0 0 0 3px var(--ring);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-      @layer components {
-      .svadmin-ui-textarea[aria-invalid="true"] {
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
-}
-
-      .svadmin-ui-textarea:focus-visible {
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_default {
-    background: var(--primary);
-    color: var(--primary-foreground);
-}
-
-.svadmin-ui-badge--variant_secondary {
-    background: var(--secondary);
-    color: var(--secondary-foreground);
-}
-
-.svadmin-ui-badge--variant_destructive {
-    background: var(--muted);
-    border-color: var(--destructive);
-    color: var(--foreground);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_destructive {
-      background: color-mix(in oklch, var(--destructive) 10%, transparent);
-      border-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-      color: var(--destructive);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_subtle {
-    background: var(--muted);
-    border-color: var(--primary);
-    color: var(--foreground);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_subtle {
-      background: color-mix(in oklch, var(--primary) 10%, transparent);
-      border-color: color-mix(in oklch, var(--primary) 20%, transparent);
-      color: var(--primary);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_subtle-success {
-    background: var(--muted);
-    border-color: var(--success);
-    color: var(--foreground);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_subtle-success {
-      background: color-mix(in oklch, var(--success) 10%, transparent);
-      border-color: color-mix(in oklch, var(--success) 20%, transparent);
-      color: var(--success);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_subtle-warning {
-    background: var(--muted);
-    border-color: var(--warning);
-    color: var(--foreground);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_subtle-warning {
-      background: color-mix(in oklch, var(--warning) 10%, transparent);
-      border-color: color-mix(in oklch, var(--warning) 20%, transparent);
-      color: var(--warning);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_subtle-destructive {
-    background: var(--muted);
-    border-color: var(--destructive);
-    color: var(--foreground);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_subtle-destructive {
-      background: color-mix(in oklch, var(--destructive) 10%, transparent);
-      border-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-      color: var(--destructive);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_subtle-pill {
-    background: var(--muted);
-    border-color: var(--border);
-    border-radius: 999px;
-    color: var(--muted-foreground);
-    font-weight: 500;
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-badge--variant_subtle-pill {
-      background: color-mix(in oklch, var(--muted) 70%, transparent);
-      border-color: color-mix(in oklch, var(--border) 80%, transparent);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-badge--variant_outline {
-    border-color: var(--color-border, var(--border));
-    color: var(--foreground);
-}
-
-.svadmin-ui-badge--variant_outline:hover,.svadmin-ui-badge--variant_ghost:hover {
-    background: var(--muted);
-    color: var(--muted-foreground);
-}
-
-.svadmin-ui-badge--variant_link {
-    text-decoration: underline;
-    color: var(--primary);
-    text-underline-offset: 0.25rem;
-}
-
-.svadmin-ui-button--variant_default {
-    background: var(--primary);
-    color: var(--primary-foreground);
-}
-
-.svadmin-ui-button--variant_default:hover {
-    background: var(--primary);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-button--variant_default:hover {
-      background: color-mix(in oklch, var(--primary) 80%, var(--foreground));
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-button--size_default {
-    padding: 0 0.75rem;
-    min-height: 2.25rem;
-}
-
-.svadmin-ui-button--variant_outline {
-    background: var(--background);
-    border-color: var(--color-border, var(--border));
-    color: var(--foreground);
-}
-
-.svadmin-ui-button--variant_outline:hover {
-    background: var(--muted);
-}
-
-.svadmin-ui-button--variant_secondary {
-    background: var(--secondary);
-    color: var(--secondary-foreground);
-}
-
-.svadmin-ui-button--variant_secondary:hover,.svadmin-ui-button--variant_ghost:hover,.svadmin-ui-button--variant_destructive {
-    background: var(--muted);
-    color: var(--foreground);
-}
-
-.svadmin-ui-button--variant_destructive {
-    border-color: var(--destructive);
-}
-
-.svadmin-ui-button--variant_destructive:hover {
-    background: var(--muted);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-    @layer components {
-    .svadmin-ui-button--variant_destructive {
-      background: color-mix(in oklch, var(--destructive) 10%, transparent);
-      border-color: transparent;
-      color: var(--destructive);
-}
-
-    .svadmin-ui-button--variant_destructive:hover {
-      background: color-mix(in oklch, var(--destructive) 20%, transparent);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-button--variant_link {
-    text-decoration: underline;
-    color: var(--primary);
-    text-underline-offset: 0.25rem;
-}
-
-.svadmin-ui-button--size_xs {
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    min-height: 1.5rem;
-}
-
-.svadmin-ui-button--size_sm {
-    padding: 0 0.75rem;
-    font-size: 0.8rem;
-    min-height: 2rem;
-}
-
-.svadmin-ui-button--size_lg {
-    padding: 0 1rem;
-    min-height: 2.5rem;
-}
-
-.svadmin-ui-button--size_icon {
-    width: 2.25rem;
-    height: 2.25rem;
-}
-
-.svadmin-ui-button--size_icon-xs {
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-.svadmin-ui-button--size_icon-sm {
-    width: 2rem;
-    height: 2rem;
-}
-
-.svadmin-ui-button--size_icon-lg {
-    width: 2.5rem;
-    height: 2.5rem;
-}
-}
-
-.svadmin-surface-metric__root {
-      min-width: 0;
-}
-
-.svadmin-surface-metric__card {
-      border-inline-start-style: solid;
-      border-inline-start-width: 3px;
-}
-
-.svadmin-surface-metric__description {
-      color: var(--svadmin-colors-muted);
-}
-
+/* 独立的有限语义样式；保持旧 UI peer 和无宿主编译器的消费方式。 */
+.svadmin-surface-metric__root,
+.svadmin-surface-table__root { min-width: 0; }
+.svadmin-surface-tone--neutral { --svadmin-surface-accent: var(--border); }
+.svadmin-surface-tone--success { --svadmin-surface-accent: var(--success); }
+.svadmin-surface-tone--warning { --svadmin-surface-accent: var(--warning); }
+.svadmin-surface-tone--danger { --svadmin-surface-accent: var(--destructive); }
+.svadmin-surface-tone--info { --svadmin-surface-accent: var(--info); }
+.svadmin-surface-density--compact {
+  --svadmin-surface-padding: 0.75rem;
+  --svadmin-surface-cell-padding: 0.25rem;
+  --svadmin-surface-cell-font: 0.75rem;
+  --svadmin-metric-state-padding: 0.75rem;
+  --svadmin-metric-state-height: 4.5rem;
+  --svadmin-table-state-height: 6rem;
+}
+.svadmin-surface-density--comfortable {
+  --svadmin-surface-padding: 1.25rem;
+  --svadmin-surface-cell-padding: 0.5rem;
+  --svadmin-surface-cell-font: 0.875rem;
+  --svadmin-metric-state-padding: 1.25rem;
+  --svadmin-metric-state-height: 6rem;
+  --svadmin-table-state-height: 8rem;
+}
+.svadmin-surface-metric__card.svadmin-surface-metric__card {
+  border-inline-start: 3px solid var(--svadmin-surface-accent);
+  padding: var(--svadmin-surface-padding);
+}
+.svadmin-surface-metric__description,
+.svadmin-surface-table__state { color: var(--muted-foreground); }
 .svadmin-surface-metric__state {
-      --svadmin-metric-state-border-width: 3px;
-}
-
-.svadmin-surface-table__root {
-      min-width: 0;
-}
-
-.svadmin-surface-table__state {
-      color: var(--svadmin-colors-muted);
-}
-
-:where(.svadmin-content-header__root > :not(:last-child)) {
-      margin-block-start: 0px;
-      margin-block-end: var(--svadmin-spacing-content-section);
-}
-
-.svadmin-content-header__breadcrumbs {
-      gap: var(--svadmin-spacing-content-inline);
-      display: flex;
-      align-items: center;
-      font-size: var(--svadmin-font-sizes-content-caption);
-      line-height: var(--svadmin-line-heights-content-caption);
-      color: var(--svadmin-colors-content-muted);
-}
-
-.svadmin-content-header__currentCrumb {
-      color: var(--svadmin-colors-content-foreground);
-}
-
-.svadmin-content-header__row {
-      gap: var(--svadmin-spacing-content-panel);
-      display: flex;
-      flex-direction: column;
-}
-
-.svadmin-content-header__heading {
-      min-width: 0px;
-}
-
-:where(.svadmin-content-header__heading > :not(:last-child)) {
-      margin-block-start: 0px;
-      margin-block-end: var(--svadmin-spacing-content-stack);
-}
-
-.svadmin-content-header__eyebrow {
-      font-size: var(--svadmin-font-sizes-content-caption);
-      line-height: var(--svadmin-line-heights-content-caption);
-      font-weight: var(--svadmin-font-weights-content-medium);
-      color: var(--svadmin-colors-content-muted);
-}
-
-.svadmin-content-header__title {
-      font-size: var(--svadmin-font-sizes-content-title);
-      line-height: var(--svadmin-line-heights-content-title);
-      font-weight: var(--svadmin-font-weights-content-strong);
-      letter-spacing: var(--svadmin-letter-spacings-content-normal);
-      color: var(--svadmin-colors-content-foreground);
-}
-
-.svadmin-content-header__description {
-      font-size: var(--svadmin-font-sizes-content-body);
-      line-height: var(--svadmin-line-heights-content-description);
-      color: var(--svadmin-colors-content-muted);
-      max-width: var(--svadmin-sizes-content-description);
-}
-
-.svadmin-content-header__actions {
-      gap: var(--svadmin-spacing-content-inline);
-      display: flex;
-      flex-shrink: 0;
-      flex-wrap: wrap;
-      align-items: center;
-}
-
-.svadmin-content-page__root {
-      margin-inline: auto;
-      width: 100%;
-}
-
-:where(.svadmin-content-page__root > :not(:last-child)) {
-      margin-block-start: 0px;
-      margin-block-end: var(--svadmin-spacing-content-page);
-}
-
-.svadmin-metric-block__root {
-      padding: var(--svadmin-spacing-content-panel);
-      border-radius: var(--svadmin-radii-content-card);
-      border-style: solid;
-      border-width: 1px;
-      border-color: var(--svadmin-colors-content-border);
-      background-color: var(--svadmin-colors-content-card);
-      box-shadow: var(--svadmin-shadows-content-card);
-      min-width: 0px;
-}
-
-.layout-clean-flat [data-svadmin-content-page] .svadmin-metric-block__root {
-      background: var(--svadmin-surface);
-      border-color: var(--svadmin-border);
-      border-radius: var(--svadmin-radii-content-card);
-      box-shadow: var(--svadmin-surface-shadow);
-      min-width: 0px;
-}
-
-.svadmin-metric-block__header {
-      gap: var(--svadmin-spacing-content-section);
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-}
-
-.svadmin-metric-block__label {
-      font-size: var(--svadmin-font-sizes-content-body);
-      line-height: var(--svadmin-line-heights-content-body);
-}
-
-.svadmin-metric-block__label,.svadmin-metric-block__icon {
-      color: var(--svadmin-colors-content-muted);
-}
-
-.svadmin-metric-block__skeleton {
-      margin-top: var(--svadmin-spacing-content-section);
-      height: var(--svadmin-sizes-content-skeleton-height);
-      width: var(--svadmin-sizes-content-skeleton-width);
-}
-
-.svadmin-metric-block__value {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: var(--svadmin-font-sizes-content-metric);
-      line-height: var(--svadmin-line-heights-content-metric);
-      font-weight: var(--svadmin-font-weights-content-strong);
-      letter-spacing: var(--svadmin-letter-spacings-content-normal);
-      color: var(--svadmin-colors-content-foreground);
-      font-variant-numeric: tabular-nums;
-      margin-top: var(--svadmin-spacing-content-inline);
-}
-
-.svadmin-metric-block__meta {
-      gap: var(--svadmin-spacing-content-inline);
-      display: flex;
-      flex-wrap: wrap;
-      font-size: var(--svadmin-font-sizes-content-caption);
-      line-height: var(--svadmin-line-heights-content-caption);
-      margin-top: var(--svadmin-spacing-content-inline);
-}
-
-.svadmin-metric-block__trend {
-      font-weight: var(--svadmin-font-weights-content-medium);
-      font-variant-numeric: tabular-nums;
-}
-
-.svadmin-metric-block__detail {
-      color: var(--svadmin-colors-content-muted);
-}
-
-.svadmin-product-toolbar__root {
-      gap: calc(var(--spacing, 0.25rem) * 3);
-      padding-block: calc(var(--spacing, 0.25rem) * 3);
-      border-bottom: 1px solid;
-      border-color: var(--svadmin-colors-border);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      min-width: 0;
-}
-
-.svadmin-product-toolbar__leading {
-      flex: 1 1 16rem;
-}
-
-.svadmin-product-toolbar__leading,.svadmin-product-toolbar__trailing {
-      gap: calc(var(--spacing, 0.25rem) * 2);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      min-width: 0;
-}
-
-.svadmin-product-toolbar__trailing {
-      margin-inline-start: auto;
-}
-
-.svadmin-product-section__root {
-      gap: calc(var(--spacing, 0.25rem) * 3);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: space-between;
-}
-
-.svadmin-product-section__heading {
-      flex: 1 1 16rem;
-      min-width: 0;
-}
-
-.svadmin-product-section__title {
-      margin: 0;
-      color: var(--svadmin-colors-foreground);
-      font-size: 1rem;
-      line-height: 1.5;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-}
-
-.svadmin-product-section__description {
-      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
-      color: var(--svadmin-colors-muted);
-      font-size: 0.8125rem;
-      line-height: 1.5;
-      max-width: 65ch;
-}
-
-.svadmin-product-section__actions {
-      gap: calc(var(--spacing, 0.25rem) * 2);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      flex-shrink: 0;
-      min-width: 0;
-}
-
-.svadmin-product-settings-row__root {
-      gap: calc(var(--spacing, 0.25rem) * 3);
-      padding-block: calc(var(--spacing, 0.25rem) * 5);
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      align-items: start;
-      min-width: 0;
-}
-
-.svadmin-product-settings-row__heading {
-      min-width: 0;
-}
-
-.svadmin-product-settings-row__label {
-      margin: 0;
-      color: var(--svadmin-colors-foreground);
-      font-size: var(--svadmin-font-sizes-body);
-      line-height: 1.5;
-      font-weight: 500;
-      overflow-wrap: anywhere;
-}
-
-.svadmin-product-settings-row__description {
-      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
-      color: var(--svadmin-colors-muted);
-      font-size: 0.8125rem;
-      line-height: 1.5;
-      overflow-wrap: anywhere;
-      max-width: 52ch;
-}
-
-.svadmin-product-settings-row__control {
-      min-width: 0;
-      max-width: 100%;
-}
-
-.svadmin-product-settings__root {
-      color: var(--svadmin-colors-foreground);
-      font-size: var(--svadmin-font-sizes-body);
-      line-height: 1.5;
-      min-width: 0;
-}
-
-.svadmin-product-settings__header {
-      gap: calc(var(--spacing, 0.25rem) * 3);
-      padding-block: calc(var(--spacing, 0.25rem) * 4);
-      border-bottom: 1px solid;
-      border-color: var(--svadmin-colors-border);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: space-between;
-}
-
-.svadmin-product-settings__heading {
-      flex: 1 1 16rem;
-      min-width: 0;
-}
-
-.svadmin-product-settings__title {
-      margin: 0;
-      color: var(--svadmin-colors-foreground);
-      font-size: 1rem;
-      line-height: 1.5;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-}
-
-.svadmin-product-settings__description {
-      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
-      color: var(--svadmin-colors-muted);
-      font-size: 0.8125rem;
-      line-height: 1.5;
-      max-width: 65ch;
-}
-
-.svadmin-product-settings__actions {
-      gap: calc(var(--spacing, 0.25rem) * 2);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      flex-shrink: 0;
-      min-width: 0;
-}
-
-.svadmin-product-settings__body {
-      padding-block: calc(var(--spacing, 0.25rem) * 1);
-      min-width: 0;
-}
-
-.svadmin-product-status__root {
-      --svadmin-status-color: var(--muted-foreground);
-}
-
-.svadmin-product-status__root[data-slot=badge] {
-      background: var(--muted);
-      border-color: var(--svadmin-status-color);
-      color: var(--foreground);
-      white-space: nowrap;
-}
-
-@supports (color: color-mix(in oklab, black, white)) {
-      .svadmin-product-status__root[data-slot=badge] {
-        background: color-mix(in oklab, var(--svadmin-status-color) 10%, var(--card));
-        border-color: color-mix(in oklab, var(--svadmin-status-color) 25%, var(--card));
-        color: color-mix(in oklab, var(--svadmin-status-color) 35%, var(--foreground));
-}
-}
-
-.svadmin-product-workspace__root {
-      gap: calc(var(--spacing, 0.25rem) * 6);
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-}
-
-.svadmin-product-workspace__summary {
-      min-width: 0;
-}
-
-.svadmin-product-workspace__columns {
-      gap: calc(var(--spacing, 0.25rem) * 8);
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      align-items: start;
-      min-width: 0;
-}
-
-.svadmin-product-workspace__primary {
-      min-width: 0;
-}
-
-.svadmin-product-workspace__secondary {
-      gap: calc(var(--spacing, 0.25rem) * 6);
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-}
-
-@layer components {
-
-.svadmin-ui-input__root {
-      position: relative;
-}
-
-.svadmin-ui-input__root,.svadmin-ui-input__control {
-      width: 100%;
-      min-width: 0;
-      height: 2.25rem;
-}
-
-.svadmin-ui-input__control {
-      border: 1px solid var(--border);
-      background: transparent;
-      border-radius: 0.5rem;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
-      color: var(--foreground);
-}
-
-.svadmin-ui-input__control:not([data-input-type="file"]) {
-      padding: 0.375rem 0.75rem;
-      font-size: 0.875rem;
-}
-
-.svadmin-ui-input__control[data-input-type="file"] {
-      inset: 0;
-      border: 0;
-      padding: 0;
-      position: absolute;
-      z-index: 1;
-      opacity: 0;
-      appearance: none;
-      -webkit-appearance: none;
-      cursor: pointer;
-      height: 100%;
-}
-
-.svadmin-ui-input__control[aria-invalid="true"] {
-      border-color: var(--destructive);
-      box-shadow: 0 0 0 3px var(--destructive);
-}
-
-.svadmin-ui-input__control:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-}
-
-.svadmin-ui-input__control::placeholder {
-      color: var(--muted-foreground);
-}
-
-.svadmin-ui-input__control[data-input-type="file"]:focus-visible + .svadmin-file-input__visual,.svadmin-ui-input__control:focus-visible {
-      border-color: var(--ring);
-      box-shadow: 0 0 0 3px var(--ring);
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-      @layer components {
-      .svadmin-ui-input__control[aria-invalid="true"] {
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
-}
-
-      .svadmin-ui-input__control[data-input-type="file"]:focus-visible + .svadmin-file-input__visual,.svadmin-ui-input__control:focus-visible {
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-input__visual {
-      border: 1px solid var(--border);
-      background: var(--card);
-      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
-      gap: 0.75rem;
-      overflow: hidden;
-      border-radius: 0.5rem;
-      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
-      display: flex;
-      align-items: center;
-      box-shadow: var(--shadow-control);
-      color: var(--muted-foreground);
-      pointer-events: none;
-      width: 100%;
-      height: 100%;
-}
-
-.svadmin-file-input[data-disabled="true"] .svadmin-ui-input__visual {
-      opacity: 0.5;
-}
-
-.svadmin-ui-input__button {
-      border: 1px solid var(--border);
-      padding: 0 0.625rem;
-      background: var(--muted);
-      font: inherit;
-      flex: 0 0 auto;
-      border-radius: 0.375rem;
-      display: inline-flex;
-      align-items: center;
-      color: var(--foreground);
-      font-size: 0.75rem;
-      white-space: nowrap;
-      height: 1.75rem;
-}
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-      @layer components {
-      .svadmin-ui-input__button {
-        border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
-}
-    }
-}
-
-@layer components {
-
-.svadmin-ui-input__name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-}
-}
-
-.svadmin-product-list__filters {
-      gap: calc(var(--spacing, 0.25rem) * 1);
-      border-bottom: 1px solid;
-      border-color: var(--svadmin-colors-border);
-      padding-bottom: calc(var(--spacing, 0.25rem) * 3);
-}
-
-.svadmin-product-list__filters,.svadmin-product-list__filter {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      min-width: 0;
-}
-
-.svadmin-product-list__filter {
-      border: 0;
-      background: transparent;
-      padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 3);
-      gap: calc(var(--spacing, 0.25rem) * 2);
-      border-radius: var(--radius-md);
-      color: var(--svadmin-colors-muted);
-      font-size: var(--svadmin-font-sizes-body);
-      font-weight: 500;
-      cursor: pointer;
-}
-
-.svadmin-product-list__filter[aria-pressed=true] {
-      background: var(--accent);
-      color: var(--accent-foreground);
-}
-
-.svadmin-product-list__filter:focus-visible {
-      outline: 2px solid var(--ring);
-      outline-offset: 2px;
-}
-
-.svadmin-product-list__filter:hover {
-      background: var(--muted);
-}
-
-.svadmin-product-list__filterCount {
-      font-size: var(--svadmin-font-sizes-compact);
-      font-variant-numeric: tabular-nums;
-      color: inherit;
-}
-
-.svadmin-product-list__table {
-      border-block: 1px solid;
-      border-color: var(--svadmin-colors-border);
-      min-width: 0;
-      max-width: 100%;
-      overflow-x: auto;
-}
-
-.svadmin-product-list__table [data-slot=table-head] {
-      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
-      border-bottom: 1px solid;
-      border-color: var(--svadmin-colors-border);
-      color: var(--svadmin-colors-muted);
-      font-size: 0.8125rem;
-      font-weight: 500;
-      text-align: start;
-      white-space: nowrap;
-}
-
-.svadmin-product-list__table [data-slot=table-cell] {
-      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
-      vertical-align: middle;
-}
-
-.svadmin-product-list__table [data-slot=table-caption] {
-      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
-      text-align: start;
-      color: var(--svadmin-colors-muted);
-      font-size: var(--svadmin-font-sizes-compact);
-}
-
-.svadmin-product-list__table > [data-slot=table-container] {
-      overflow: visible;
-}
-
-.svadmin-product-list__table tbody [data-slot=table-row]:not(:last-child) {
-      border-bottom: 1px solid;
-      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);
-      width: 100%;
-}
-
-.svadmin-product-list__table [data-align=end] {
-      text-align: end;
-}
-
-.svadmin-product-list__table:focus-visible {
-      outline: 2px solid var(--ring);
-      outline-offset: 2px;
-}
-
-.svadmin-product-list__table tbody [data-slot=table-row]:hover {
-      background: var(--muted);
-}
-
-.svadmin-product-list__identity {
-      gap: calc(var(--spacing, 0.25rem) * 3);
-      display: flex;
-      align-items: center;
-      min-width: 12rem;
-}
-
-.svadmin-product-list__avatar {
-      background: var(--muted);
-      border: 1px solid;
-      place-items: center;
-      border-color: var(--svadmin-colors-border);
-      border-radius: var(--radius-md);
-      display: grid;
-      flex-shrink: 0;
-      color: var(--svadmin-colors-muted);
-      font-size: var(--svadmin-font-sizes-compact);
-      font-weight: 600;
-      width: 2rem;
-      height: 2rem;
-}
-
-.svadmin-product-list__name {
-      color: var(--svadmin-colors-foreground);
-      font-size: var(--svadmin-font-sizes-body);
-      line-height: 1.5;
-      font-weight: 500;
-      white-space: normal;
-      overflow-wrap: anywhere;
-      max-width: 28rem;
-}
-
-.svadmin-product-list__secondary {
-      color: var(--svadmin-colors-muted);
-      font-size: var(--svadmin-font-sizes-compact);
-      line-height: 1.5;
-      display: block;
-      overflow-wrap: anywhere;
-}
-
-.svadmin-product-list__numeric {
-      font-variant-numeric: tabular-nums;
-      text-align: end;
-      white-space: nowrap;
-}
-
-.svadmin-product-list__footer {
-      gap: calc(var(--spacing, 0.25rem) * 2);
-      padding-block: calc(var(--spacing, 0.25rem) * 3);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      min-width: 0;
-}
-
-.svadmin-product-list__footer,.svadmin-product-list__help {
-      color: var(--svadmin-colors-muted);
-      font-size: 0.8125rem;
-}
-
-.svadmin-product-list__help {
-      margin: 0;
-      line-height: 1.5;
-      max-width: 65ch;
-}
-
-@media (width >= 40rem) {
-      .svadmin-content-header__row {
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-}
-}
-
-@media (min-width: 48rem) {
-      .svadmin-product-settings-row__root {
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-        column-gap: calc(var(--spacing, 0.25rem) * 6);
-}
-}
-
-.svadmin-surface-metric__card--tone_neutral {
-    border-inline-start-color: var(--svadmin-colors-border);
-}
-
-.svadmin-surface-metric__state--tone_neutral {
-    --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);
-}
-
-.svadmin-surface-metric__state--tone_success {
-    --svadmin-metric-state-accent: var(--svadmin-colors-success);
-}
-
-.svadmin-surface-metric__card--tone_warning {
-    border-inline-start-color: var(--svadmin-colors-warning);
-}
-
-.svadmin-surface-metric__state--tone_warning {
-    --svadmin-metric-state-accent: var(--svadmin-colors-warning);
-}
-
-.svadmin-surface-metric__card--tone_danger {
-    border-inline-start-color: var(--svadmin-colors-danger);
-}
-
-.svadmin-surface-metric__state--tone_danger {
-    --svadmin-metric-state-accent: var(--svadmin-colors-danger);
-}
-
-.svadmin-surface-metric__card--tone_info {
-    border-inline-start-color: var(--svadmin-colors-info);
-}
-
-.svadmin-surface-metric__state--tone_info {
-    --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);
-}
-
-.svadmin-content-page__root--width_narrow {
-    max-width: var(--svadmin-sizes-content-narrow);
-}
-
-.svadmin-content-page__root--width_wide {
-    max-width: var(--svadmin-sizes-content-wide);
-}
-
-.svadmin-metric-block__trend--trendTone_neutral {
-    color: var(--svadmin-colors-content-muted);
-}
-
-.svadmin-metric-block__trend--trendTone_positive {
-    color: var(--svadmin-colors-content-positive);
-}
-
-.svadmin-metric-block__trend--trendTone_negative {
-    color: var(--svadmin-colors-content-negative);
-}
-
-.svadmin-metric-block__trend--trendTone_warning {
-    color: var(--svadmin-colors-content-warning);
-}
-
-.svadmin-product-settings-row__root--separated_true {
-    border-top: 1px solid;
-    border-color: var(--svadmin-colors-border);
-}
-
-.svadmin-product-status__root--status_neutral {
-    --svadmin-status-color: var(--muted-foreground);
-}
-
-.svadmin-product-status__root--status_success {
-    --svadmin-status-color: var(--success);
-}
-
-.svadmin-product-status__root--status_warning {
-    --svadmin-status-color: var(--warning);
-}
-
-.svadmin-product-status__root--status_danger {
-    --svadmin-status-color: var(--destructive);
-}
-
-.svadmin-product-status__root--status_info {
-    --svadmin-status-color: var(--info);
-}
-
-@media (min-width: 64rem) {
-    .svadmin-product-workspace__columns--hasSecondary_true {
-      grid-template-columns: minmax(0, 1fr) minmax(0, var(--workspace-secondary-width, 22rem));
-}
-    .svadmin-product-workspace__primary--hasSecondary_true {
-      order: 1;
-}
-    .svadmin-product-workspace__secondary--hasSecondary_true {
-      order: 2;
-}
+  --svadmin-metric-state-border-width: 3px;
+  --svadmin-metric-state-accent: var(--svadmin-surface-accent);
+}
+.svadmin-surface-table__header.svadmin-surface-density--compact,
+.svadmin-surface-table__content.svadmin-surface-density--compact { padding-inline: 0.75rem; }
+.svadmin-surface-table__header.svadmin-surface-density--comfortable,
+.svadmin-surface-table__content.svadmin-surface-density--comfortable { padding-inline: 1rem; }
+.svadmin-surface-table__head[data-slot="table-head"],
+.svadmin-surface-table__cell[data-slot="table-cell"] {
+  padding-block: var(--svadmin-surface-cell-padding);
+  font-size: var(--svadmin-surface-cell-font);
 }