@aortl/admin-css 0.9.0 → 0.11.0

package/README.md

@@ -22,7 +22,7 @@ Or grab it from a CDN — no install needed:
 <button class="btn btn-primary">Save</button>
 <button class="btn btn-ghost btn-sm">Cancel</button>
 
-<input class="input input-bordered" placeholder="Name" />
+<input class="input" placeholder="Name" />
 
 <div class="card">
   <div class="card-body">

package/dist/admin.css

@@ -19,6 +19,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;
@@ -160,6 +162,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));
@@ -702,7 +706,7 @@
     color: var(--color-success);
   }
   .alert-warning .alert-title, .alert-warning > :is(i, svg):first-child {
-    color: var(--color-warning);
+    color: var(--color-text);
   }
   .alert-danger .alert-title, .alert-danger > :is(i, svg):first-child {
     color: var(--color-danger);
@@ -751,6 +755,36 @@
     }
   }
 }
+@layer components {
+  .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);
+  }
+  .container-sm {
+    --container-max: 60rem;
+  }
+  .container-lg {
+    --container-max: 115rem;
+  }
+  .container-fluid {
+    --container-max: none;
+  }
+  .container-compact {
+    gap: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 4);
+  }
+  @media (max-width: 48rem) {
+    .container {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+}
 @layer components {
   .badge {
     display: inline-flex;
@@ -762,6 +796,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));
@@ -770,9 +805,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     white-space: nowrap;
-  }
-  .badge-neutral {
-    background-color: var(--color-surface-strong);
     color: var(--color-text);
   }
   .badge-info {
@@ -788,7 +820,7 @@
   .badge-warning {
     border-color: var(--color-warning-muted);
     background-color: var(--color-warning-muted);
-    color: var(--color-warning);
+    color: var(--color-text);
   }
   .badge-danger {
     border-color: var(--color-danger-muted);
@@ -1327,7 +1359,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);
@@ -1336,6 +1369,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));
@@ -1343,6 +1377,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;
@@ -1364,6 +1403,7 @@
     }
   }
   .btn-primary {
+    border-color: transparent;
     background-color: var(--color-primary);
     color: var(--color-primary-content);
     &:hover {
@@ -1372,17 +1412,8 @@
       }
     }
   }
-  .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);
-      }
-    }
-  }
   .btn-ghost {
+    border-color: transparent;
     background-color: transparent;
     color: var(--color-text);
     &:hover {
@@ -1392,6 +1423,7 @@
     }
   }
   .btn-danger {
+    border-color: transparent;
     background-color: var(--color-danger);
     color: var(--color-danger-content);
     &:hover {
@@ -1525,7 +1557,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);
@@ -1542,6 +1574,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;
@@ -1559,16 +1596,14 @@
       opacity: 50%;
     }
   }
-  .input-bordered {
-    border-color: var(--color-border);
+  .input-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-  .input-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -1577,6 +1612,11 @@
   }
   .input-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -1651,7 +1691,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);
@@ -1666,6 +1706,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;
@@ -1683,16 +1728,14 @@
       opacity: 50%;
     }
   }
-  .textarea-bordered {
-    border-color: var(--color-border);
+  .textarea-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-  .textarea-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -1701,6 +1744,11 @@
   }
   .textarea-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -1990,7 +2038,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);
@@ -2007,6 +2055,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;
@@ -2033,16 +2086,14 @@
   .select[data-placeholder] {
     color: var(--color-text-muted);
   }
-  .select-bordered {
-    border-color: var(--color-border);
+  .select-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-  .select-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -2051,6 +2102,11 @@
   }
   .select-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -2239,6 +2295,56 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
+@layer components {
+  .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);
+  }
+  .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);
+  }
+  .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,);
+  }
+  .stat-card-detail {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text-muted);
+  }
+  .stat-card-compact {
+    gap: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 3);
+  }
+  .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);
+  }
+}
 @layer components {
   .dialog {
     margin: auto;
@@ -2433,7 +2539,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);
@@ -2487,6 +2593,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 {
@@ -2511,16 +2622,14 @@
       opacity: 50%;
     }
   }
-  .file-input-bordered {
-    border-color: var(--color-border);
+  .file-input-ghost {
+    border-color: transparent;
+    background-color: transparent;
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-strong);
+        border-color: transparent;
       }
     }
-  }
-  .file-input-ghost {
-    background-color: transparent;
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-surface-muted);
@@ -2529,6 +2638,11 @@
   }
   .file-input-danger {
     border-color: var(--color-danger);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-danger);
+      }
+    }
     &:focus-visible {
       outline-color: var(--color-danger);
     }
@@ -3365,10 +3479,10 @@
     outline-offset: 2px;
     outline-color: var(--color-primary);
   }
-  .tabs-bordered .tab, .tabs:not(.tabs-boxed) .tab {
+  .tabs:not(.tabs-boxed) .tab {
     position: relative;
   }
-  .tabs-bordered .tab::after, .tabs:not(.tabs-boxed) .tab::after {
+  .tabs:not(.tabs-boxed) .tab::after {
     content: "";
     position: absolute;
     inset-inline: 0;
@@ -3378,7 +3492,7 @@
     transform: scaleX(0);
     transition: transform 150ms ease;
   }
-  .tabs-bordered .tab[data-selected]::after, .tabs-bordered .tab[aria-selected="true"]::after, .tabs-bordered .tab-input:checked + .tab::after, .tabs:not(.tabs-boxed) .tab[data-selected]::after, .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after, .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
+  .tabs:not(.tabs-boxed) .tab[data-selected]::after, .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after, .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
     transform: scaleX(1);
   }
   .tabs-boxed .tab-list {
@@ -3450,7 +3564,7 @@
     width: 100%;
     justify-content: flex-start;
   }
-  .tabs[data-orientation="vertical"].tabs-bordered .tab::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
+  .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
     inset-inline: auto;
     inset-inline-end: -1px;
     inset-block: 0;
@@ -3458,7 +3572,7 @@
     block-size: auto;
     transform: scaleY(0);
   }
-  .tabs[data-orientation="vertical"].tabs-bordered .tab[data-selected]::after, .tabs[data-orientation="vertical"].tabs-bordered .tab[aria-selected="true"]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
+  .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after, .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
     transform: scaleY(1);
   }
 }
@@ -3667,6 +3781,24 @@
     transition: opacity 150ms ease-out 200ms, visibility 0s linear 200ms;
   }
 }
+@layer components {
+  .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;
+  }
+  .code-block-nowrap {
+    white-space: pre;
+    word-wrap: normal;
+  }
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;