@aortl/admin-css 0.9.0 → 0.11.0

package/dist/admin.scoped.css

@@ -275,6 +275,8 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -416,6 +418,8 @@
     --color-text-muted: light-dark(var(--color-base-600), var(--color-base-500));
     --color-border: light-dark(var(--color-base-150), var(--color-base-850));
     --color-border-strong: light-dark(var(--color-base-300), var(--color-base-700));
+    --color-code-surface: light-dark(var(--color-base-150), var(--color-base-950));
+    --color-code-text: light-dark(var(--color-base-800), var(--color-base-200));
     --color-primary: light-dark(var(--color-blue-600), var(--color-blue-400));
     --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
     --color-primary-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
@@ -797,7 +801,7 @@
     color: var(--color-success);
   }
 :scope._ao-alert-warning ._ao-alert-title, :scope ._ao-alert-warning ._ao-alert-title, :scope._ao-alert-warning > :is(i, svg):first-child, :scope ._ao-alert-warning > :is(i, svg):first-child {
-    color: var(--color-warning);
+    color: var(--color-text);
   }
 :scope._ao-alert-danger ._ao-alert-title, :scope ._ao-alert-danger ._ao-alert-title, :scope._ao-alert-danger > :is(i, svg):first-child, :scope ._ao-alert-danger > :is(i, svg):first-child {
     color: var(--color-danger);
@@ -843,6 +847,34 @@
       display: none;
     }
   }
+:scope._ao-container, :scope ._ao-container {
+    margin-inline: auto;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 6);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 6);
+    max-width: var(--container-max, 90rem);
+  }
+:scope._ao-container-sm, :scope ._ao-container-sm {
+    --container-max: 60rem;
+  }
+:scope._ao-container-lg, :scope ._ao-container-lg {
+    --container-max: 115rem;
+  }
+:scope._ao-container-fluid, :scope ._ao-container-fluid {
+    --container-max: none;
+  }
+:scope._ao-container-compact, :scope ._ao-container-compact {
+    gap: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 4);
+  }
+@media (max-width: 48rem) {
+    :scope._ao-container, :scope ._ao-container {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
 :scope._ao-badge, :scope ._ao-badge {
     display: inline-flex;
     height: calc(var(--spacing) * 5);
@@ -853,6 +885,7 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
+    background-color: var(--color-surface-strong);
     padding-inline: calc(var(--spacing) * 2);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -861,9 +894,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     white-space: nowrap;
-  }
-:scope._ao-badge-neutral, :scope ._ao-badge-neutral {
-    background-color: var(--color-surface-strong);
     color: var(--color-text);
   }
 :scope._ao-badge-info, :scope ._ao-badge-info {
@@ -879,7 +909,7 @@
 :scope._ao-badge-warning, :scope ._ao-badge-warning {
     border-color: var(--color-warning-muted);
     background-color: var(--color-warning-muted);
-    color: var(--color-warning);
+    color: var(--color-text);
   }
 :scope._ao-badge-danger, :scope ._ao-badge-danger {
     border-color: var(--color-danger-muted);
@@ -1400,7 +1430,8 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: transparent;
+    border-color: var(--color-border);
+    background-color: var(--color-surface-muted);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
@@ -1409,6 +1440,7 @@
     line-height: 1;
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
+    color: var(--color-text);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -1416,6 +1448,11 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-strong);
+      }
+    }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1437,6 +1474,7 @@
     }
   }
 :scope._ao-btn-primary, :scope ._ao-btn-primary {
+    border-color: transparent;
     background-color: var(--color-primary);
     color: var(--color-primary-content);
     &:hover {
@@ -1445,17 +1483,8 @@
       }
     }
   }
-:scope._ao-btn-secondary, :scope ._ao-btn-secondary {
-    border-color: var(--color-border);
-    background-color: var(--color-surface-muted);
-    color: var(--color-text);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-surface-strong);
-      }
-    }
-  }
 :scope._ao-btn-ghost, :scope ._ao-btn-ghost {
+    border-color: transparent;
     background-color: transparent;
     color: var(--color-text);
     &:hover {
@@ -1465,6 +1494,7 @@
     }
   }
 :scope._ao-btn-danger, :scope ._ao-btn-danger {
+    border-color: transparent;
     background-color: var(--color-danger);
     color: var(--color-danger-content);
     &:hover {
@@ -1594,7 +1624,7 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: transparent;
+    border-color: var(--color-border);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
@@ -1611,6 +1641,11 @@
     &::placeholder {
       color: var(--color-text-muted);
     }
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1628,16 +1663,14 @@
       opacity: 50%;
     }
   }
-:scope._ao-input-bordered, :scope ._ao-input-bordered {
-    border-color: var(--color-border);
+:scope._ao-input-ghost, :scope ._ao-input-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-:scope._ao-input-ghost, :scope ._ao-input-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -1646,6 +1679,11 @@
   }
 :scope._ao-input-danger, :scope ._ao-input-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -1716,7 +1754,7 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: transparent;
+    border-color: var(--color-border);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
@@ -1731,6 +1769,11 @@
     &::placeholder {
       color: var(--color-text-muted);
     }
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -1748,16 +1791,14 @@
       opacity: 50%;
     }
   }
-:scope._ao-textarea-bordered, :scope ._ao-textarea-bordered {
-    border-color: var(--color-border);
+:scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-:scope._ao-textarea-ghost, :scope ._ao-textarea-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -1766,6 +1807,11 @@
   }
 :scope._ao-textarea-danger, :scope ._ao-textarea-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -2047,7 +2093,7 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: transparent;
+    border-color: var(--color-border);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
@@ -2064,6 +2110,11 @@
     transition-duration: 150ms;
     -webkit-user-select: none;
     user-select: none;
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
@@ -2090,16 +2141,14 @@
 :scope._ao-select[data-placeholder], :scope ._ao-select[data-placeholder] {
     color: var(--color-text-muted);
   }
-:scope._ao-select-bordered, :scope ._ao-select-bordered {
-    border-color: var(--color-border);
+:scope._ao-select-ghost, :scope ._ao-select-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-:scope._ao-select-ghost, :scope ._ao-select-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -2108,6 +2157,11 @@
   }
 :scope._ao-select-danger, :scope ._ao-select-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -2293,6 +2347,54 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+:scope._ao-stat-card, :scope ._ao-stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-xl);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding: calc(var(--spacing) * 4);
+    color: var(--color-text);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+:scope._ao-stat-card-label, :scope ._ao-stat-card-label {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-muted);
+  }
+:scope._ao-stat-card-value, :scope ._ao-stat-card-value {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+:scope._ao-stat-card-detail, :scope ._ao-stat-card-detail {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text-muted);
+  }
+:scope._ao-stat-card-compact, :scope ._ao-stat-card-compact {
+    gap: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 3);
+  }
+:scope._ao-stat-card-bordered, :scope ._ao-stat-card-bordered {
+    border-color: var(--color-border-strong);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
 :scope._ao-dialog, :scope ._ao-dialog {
     margin: auto;
     flex-direction: column;
@@ -2482,7 +2584,7 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: transparent;
+    border-color: var(--color-border);
     background-color: var(--color-surface);
     padding-right: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
@@ -2536,6 +2638,11 @@
     &::file-selector-button {
       color: var(--color-text);
     }
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-border-strong);
+      }
+    }
     &:hover {
       @media (hover: hover) {
         &::file-selector-button {
@@ -2560,16 +2667,14 @@
       opacity: 50%;
     }
   }
-:scope._ao-file-input-bordered, :scope ._ao-file-input-bordered {
-    border-color: var(--color-border);
+:scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-:scope._ao-file-input-ghost, :scope ._ao-file-input-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -2578,6 +2683,11 @@
   }
 :scope._ao-file-input-danger, :scope ._ao-file-input-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -3404,10 +3514,10 @@
     outline-offset: 2px;
     outline-color: var(--color-primary);
   }
-:scope._ao-tabs-bordered ._ao-tab, :scope ._ao-tabs-bordered ._ao-tab, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
+:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
     position: relative;
   }
-:scope._ao-tabs-bordered ._ao-tab::after, :scope ._ao-tabs-bordered ._ao-tab::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
+:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
     content: "";
     position: absolute;
     inset-inline: 0;
@@ -3417,7 +3527,7 @@
     transform: scaleX(0);
     transition: transform 150ms ease;
   }
-:scope._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope ._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs-bordered ._ao-tab-input:checked + ._ao-tab::after, :scope ._ao-tabs-bordered ._ao-tab-input:checked + ._ao-tab::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after {
+:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked + ._ao-tab::after {
     transform: scaleX(1);
   }
 :scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list {
@@ -3489,7 +3599,7 @@
     width: 100%;
     justify-content: flex-start;
   }
-:scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
+:scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab::after {
     inset-inline: auto;
     inset-inline-end: -1px;
     inset-block: 0;
@@ -3497,7 +3607,7 @@
     block-size: auto;
     transform: scaleY(0);
   }
-:scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[data-selected]::after, :scope._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs[data-orientation="vertical"]._ao-tabs-bordered ._ao-tab[aria-selected="true"]::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after {
+:scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[data-selected]::after, :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab[aria-selected="true"]::after {
     transform: scaleY(1);
   }
 :scope._ao-table, :scope ._ao-table {
@@ -3701,6 +3811,22 @@
     opacity: 100%;
     transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
   }
+:scope._ao-code-block, :scope ._ao-code-block {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-code-surface);
+    padding: calc(var(--spacing) * 3);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-code-text);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow: auto;
+  }
+:scope._ao-code-block-nowrap, :scope ._ao-code-block-nowrap {
+    white-space: pre;
+    word-wrap: normal;
+  }
 :scope._ao-collapse, :scope ._ao-collapse {
     visibility: collapse;
   }