@aortl/admin-css 0.10.0 → 0.12.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

@@ -755,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;
@@ -766,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));
@@ -774,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 {
@@ -1331,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);
@@ -1340,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));
@@ -1347,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;
@@ -1368,6 +1403,7 @@
     }
   }
   .btn-primary {
+    border-color: transparent;
     background-color: var(--color-primary);
     color: var(--color-primary-content);
     &:hover {
@@ -1376,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 {
@@ -1396,6 +1423,7 @@
     }
   }
   .btn-danger {
+    border-color: transparent;
     background-color: var(--color-danger);
     color: var(--color-danger-content);
     &:hover {
@@ -1529,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);
@@ -1546,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;
@@ -1563,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);
@@ -1581,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);
     }
@@ -1655,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);
@@ -1670,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;
@@ -1687,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);
@@ -1705,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);
     }
@@ -1994,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);
@@ -2011,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;
@@ -2037,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);
@@ -2055,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);
     }
@@ -2186,7 +2238,7 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-border);
-    background-color: var(--color-surface);
+    background-color: var(--color-surface-strong);
     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);
@@ -2242,21 +2294,46 @@
     --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);
   }
+  .card-muted {
+    background-color: var(--color-surface);
+  }
+  .card-primary {
+    border-color: var(--color-primary-muted);
+    background-color: var(--color-primary-muted);
+  }
+  .card-info {
+    border-color: var(--color-info-muted);
+    background-color: var(--color-info-muted);
+  }
+  .card-success {
+    border-color: var(--color-success-muted);
+    background-color: var(--color-success-muted);
+  }
+  .card-warning {
+    border-color: var(--color-warning-muted);
+    background-color: var(--color-warning-muted);
+  }
+  .card-danger {
+    border-color: var(--color-danger-muted);
+    background-color: var(--color-danger-muted);
+  }
+  .card-primary .card-title {
+    color: var(--color-primary);
+  }
+  .card-info .card-title {
+    color: var(--color-info);
+  }
+  .card-success .card-title {
+    color: var(--color-success);
+  }
+  .card-danger .card-title {
+    color: var(--color-danger);
+  }
 }
 @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;
@@ -2283,14 +2360,21 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
   }
-  .stat-card-compact {
+  .card-compact.stat-card {
     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);
+  .card-primary .stat-card-value {
+    color: var(--color-primary);
+  }
+  .card-info .stat-card-value {
+    color: var(--color-info);
+  }
+  .card-success .stat-card-value {
+    color: var(--color-success);
+  }
+  .card-danger .stat-card-value {
+    color: var(--color-danger);
   }
 }
 @layer components {
@@ -2487,7 +2571,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);
@@ -2541,6 +2625,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 {
@@ -2565,16 +2654,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);
@@ -2583,6 +2670,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);
     }
@@ -3419,10 +3511,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;
@@ -3432,7 +3524,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 {
@@ -3504,7 +3596,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;
@@ -3512,7 +3604,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);
   }
 }