@aortl/admin-css 0.14.1 → 0.15.1

package/dist/admin.css

@@ -165,10 +165,13 @@
     --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));
+    --color-primary: light-dark(var(--color-black), var(--color-paper));
+    --color-primary-hover: light-dark(var(--color-base-800), var(--color-base-200));
+    --color-primary-muted: light-dark(var(--color-base-150), var(--color-base-800));
     --color-primary-content: light-dark(var(--color-paper), var(--color-black));
+    --color-link: light-dark(var(--color-blue-600), var(--color-blue-400));
+    --color-link-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
+    --color-focus: light-dark(var(--color-blue-600), var(--color-blue-400));
     --color-system-accent: light-dark(var(--color-base-600), var(--color-base-400));
     --color-system-accent-hover: color-mix(
     in oklch,
@@ -207,9 +210,9 @@
     --color-warning-hover: light-dark(var(--color-yellow-500), var(--color-yellow-300));
     --color-warning-muted: light-dark(var(--color-yellow-50), var(--color-yellow-950));
     --color-warning-content: var(--color-black);
-    --color-info: light-dark(var(--color-cyan-600), var(--color-cyan-400));
-    --color-info-hover: light-dark(var(--color-cyan-700), var(--color-cyan-300));
-    --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
+    --color-info: light-dark(var(--color-blue-600), var(--color-blue-400));
+    --color-info-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
+    --color-info-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
     --color-info-content: light-dark(var(--color-paper), var(--color-black));
   }
 }
@@ -620,7 +623,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -705,39 +708,31 @@
     min-width: 0;
   }
   .alert-info {
-    border-color: var(--color-info-muted);
-    background-color: var(--color-info-muted);
+    border-color: var(--color-info);
+    background-color: var(--color-info);
+    color: var(--color-info-content);
   }
   .alert-success {
-    border-color: var(--color-success-muted);
-    background-color: var(--color-success-muted);
+    border-color: var(--color-success);
+    background-color: var(--color-success);
+    color: var(--color-success-content);
   }
   .alert-warning {
-    border-color: var(--color-warning-muted);
-    background-color: var(--color-warning-muted);
+    border-color: var(--color-warning);
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
   }
   .alert-danger {
-    border-color: var(--color-danger-muted);
-    background-color: var(--color-danger-muted);
+    border-color: var(--color-danger);
+    background-color: var(--color-danger);
+    color: var(--color-danger-content);
   }
   .alert-title {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .alert-info .alert-title, .alert-info > :is(i, svg):first-child {
-    color: var(--color-info);
-  }
-  .alert-success .alert-title, .alert-success > :is(i, svg):first-child {
-    color: var(--color-success);
-  }
-  .alert-warning .alert-title, .alert-warning > :is(i, svg):first-child {
-    color: var(--color-text);
-  }
-  .alert-danger .alert-title, .alert-danger > :is(i, svg):first-child {
-    color: var(--color-danger);
-  }
   .alert-description {
-    color: var(--color-text-muted);
+    opacity: 0.85;
   }
 }
 @layer components {
@@ -836,24 +831,24 @@
     flex-shrink: 0;
   }
   .badge-info {
-    border-color: var(--color-info-muted);
-    background-color: var(--color-info-muted);
-    color: var(--color-info);
+    border-color: var(--color-info);
+    background-color: var(--color-info);
+    color: var(--color-info-content);
   }
   .badge-success {
-    border-color: var(--color-success-muted);
-    background-color: var(--color-success-muted);
-    color: var(--color-success);
+    border-color: var(--color-success);
+    background-color: var(--color-success);
+    color: var(--color-success-content);
   }
   .badge-warning {
-    border-color: var(--color-warning-muted);
-    background-color: var(--color-warning-muted);
-    color: var(--color-text);
+    border-color: var(--color-warning);
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
   }
   .badge-danger {
-    border-color: var(--color-danger-muted);
-    background-color: var(--color-danger-muted);
-    color: var(--color-danger);
+    border-color: var(--color-danger);
+    background-color: var(--color-danger);
+    color: var(--color-danger-content);
   }
   .badge-primary {
     background-color: var(--color-primary);
@@ -1069,7 +1064,7 @@
     border-radius: 9999px;
     overflow: hidden;
     background-color: var(--color-surface-strong);
-    color: var(--color-primary);
+    color: var(--color-info);
   }
   .progress::-webkit-progress-bar {
     background-color: var(--color-surface-strong);
@@ -1160,7 +1155,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .breadcrumb-item[aria-current="page"] {
@@ -1243,7 +1238,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       pointer-events: none;
@@ -1355,7 +1350,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     display: none;
     flex-shrink: 0;
@@ -1425,7 +1420,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       pointer-events: none;
@@ -1611,7 +1606,7 @@
     align-items: center;
     gap: calc(var(--spacing) * 1);
     border-radius: var(--radius-sm);
-    color: var(--color-primary);
+    color: var(--color-link);
     text-decoration-line: underline;
     text-underline-offset: 2px;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -1621,7 +1616,7 @@
     transition-duration: 150ms;
     &:hover {
       @media (hover: hover) {
-        color: var(--color-primary-hover);
+        color: var(--color-link-hover);
       }
     }
     &:focus-visible {
@@ -1632,7 +1627,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .link > :is(i, svg) {
@@ -1689,7 +1684,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -1854,7 +1849,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -1966,7 +1961,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2041,7 +2036,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2126,7 +2121,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2240,7 +2235,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2253,7 +2248,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
   .select[data-placeholder] {
     color: var(--color-text-muted);
@@ -2683,7 +2678,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 }
@@ -2823,7 +2818,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2937,7 +2932,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .footer-meta {
@@ -2969,7 +2964,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3180,7 +3175,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .navbar-item[aria-current="page"], .navbar-item[data-active] {
@@ -3220,7 +3215,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .navbar-mobile-toggle::before {
@@ -3345,7 +3340,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .sidebar-item[aria-current="page"], .sidebar-item[data-active] {
@@ -3430,7 +3425,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3506,7 +3501,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
   .sidebar-subitem[aria-current="page"], .sidebar-subitem[data-active] {
@@ -3558,7 +3553,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
   .sidebar-collapse-toggle::before {
     content: "";
@@ -3664,7 +3659,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -3696,7 +3691,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
   .tabs:not(.tabs-boxed) .tab {
     position: relative;
@@ -3724,6 +3719,8 @@
     padding: calc(var(--spacing) * 0.5);
   }
   .tabs-boxed .tab {
+    position: relative;
+    z-index: 1;
     border-radius: 0.25rem;
   }
   .tabs-boxed .tab[data-selected], .tabs-boxed .tab[aria-selected="true"], .tabs-boxed .tab-input:checked + .tab {
@@ -3732,6 +3729,56 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  @supports (anchor-scope: --x) {
+    .tabs .tab-list {
+      anchor-scope: --tab-thumb;
+    }
+    .tabs .tab[data-selected], .tabs .tab[aria-selected="true"], .tabs .tab-input:checked + .tab {
+      anchor-name: --tab-thumb;
+    }
+    .tabs .tab-list::before {
+      content: "";
+      position: absolute;
+      position-anchor: --tab-thumb;
+    }
+    .tabs:not(.tabs-boxed) .tab::after {
+      display: none;
+    }
+    .tabs:not(.tabs-boxed) .tab-list::before {
+      background-color: var(--color-primary);
+      left: anchor(left);
+      right: anchor(right);
+      inset-block-end: -1px;
+      block-size: 2px;
+      transition: left 180ms ease, right 180ms ease;
+    }
+    .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab-list::before {
+      inset-inline: auto;
+      inset-inline-end: -1px;
+      inline-size: 2px;
+      top: anchor(top);
+      bottom: anchor(bottom);
+      block-size: auto;
+      transition: top 180ms ease, bottom 180ms ease;
+    }
+    .tabs-boxed .tab[data-selected], .tabs-boxed .tab[aria-selected="true"], .tabs-boxed .tab-input:checked + .tab {
+      background-color: transparent;
+      --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);
+    }
+    .tabs-boxed .tab-list::before {
+      top: anchor(top);
+      right: anchor(right);
+      bottom: anchor(bottom);
+      left: anchor(left);
+      z-index: 0;
+      border-radius: 0.25rem;
+      background-color: var(--color-surface);
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      transition: top 180ms ease, right 180ms ease, bottom 180ms ease, left 180ms ease;
+    }
+  }
   .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
     display: flex;
     width: 100%;
@@ -3794,6 +3841,11 @@
   .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);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .tabs .tab-list::before, .tabs:not(.tabs-boxed) .tab::after {
+      transition: none;
+    }
+  }
 }
 @layer components {
   .table {
@@ -3901,7 +3953,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: calc(2px * -1);
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
 }
 @layer components {
@@ -4024,7 +4076,7 @@
     --chart-height: 8rem;
     --chart-size: 8rem;
     --chart-gap: 0.25rem;
-    color: var(--color-primary);
+    color: var(--color-info);
   }
   .chart-success {
     color: var(--color-success);