@aortl/admin-css 0.14.1 → 0.15.1

package/dist/admin.scoped.css

@@ -436,10 +436,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,
@@ -478,9 +481,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));
   }
 :scope, :scope *, :scope::after, :scope ::after, :scope::before, :scope ::before, :scope::backdrop, :scope ::backdrop, :scope::file-selector-button, :scope ::file-selector-button {
@@ -713,7 +716,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -796,39 +799,31 @@
     min-width: 0;
   }
 :scope._ao-alert-info, :scope ._ao-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);
   }
 :scope._ao-alert-success, :scope ._ao-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);
   }
 :scope._ao-alert-warning, :scope ._ao-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);
   }
 :scope._ao-alert-danger, :scope ._ao-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);
   }
 :scope._ao-alert-title, :scope ._ao-alert-title {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-:scope._ao-alert-info ._ao-alert-title, :scope ._ao-alert-info ._ao-alert-title, :scope._ao-alert-info > :is(i, svg):first-child, :scope ._ao-alert-info > :is(i, svg):first-child {
-    color: var(--color-info);
-  }
-:scope._ao-alert-success ._ao-alert-title, :scope ._ao-alert-success ._ao-alert-title, :scope._ao-alert-success > :is(i, svg):first-child, :scope ._ao-alert-success > :is(i, svg):first-child {
-    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-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);
-  }
 :scope._ao-alert-description, :scope ._ao-alert-description {
-    color: var(--color-text-muted);
+    opacity: 0.85;
   }
 :scope._ao-app-shell, :scope ._ao-app-shell {
     --app-shell-sidebar-w: 240px;
@@ -921,24 +916,24 @@
     flex-shrink: 0;
   }
 :scope._ao-badge-info, :scope ._ao-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);
   }
 :scope._ao-badge-success, :scope ._ao-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);
   }
 :scope._ao-badge-warning, :scope ._ao-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);
   }
 :scope._ao-badge-danger, :scope ._ao-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);
   }
 :scope._ao-badge-primary, :scope ._ao-badge-primary {
     background-color: var(--color-primary);
@@ -1144,7 +1139,7 @@
     border-radius: 9999px;
     overflow: hidden;
     background-color: var(--color-surface-strong);
-    color: var(--color-primary);
+    color: var(--color-info);
   }
 :scope._ao-progress::-webkit-progress-bar, :scope ._ao-progress::-webkit-progress-bar {
     background-color: var(--color-surface-strong);
@@ -1233,7 +1228,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-breadcrumb-item[aria-current="page"], :scope ._ao-breadcrumb-item[aria-current="page"] {
@@ -1314,7 +1309,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       pointer-events: none;
@@ -1424,7 +1419,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     display: none;
     flex-shrink: 0;
@@ -1492,7 +1487,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       pointer-events: none;
@@ -1674,7 +1669,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;
@@ -1684,7 +1679,7 @@
     transition-duration: 150ms;
     &:hover {
       @media (hover: hover) {
-        color: var(--color-primary-hover);
+        color: var(--color-link-hover);
       }
     }
     &:focus-visible {
@@ -1695,7 +1690,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-link > :is(i, svg), :scope ._ao-link > :is(i, svg) {
@@ -1750,7 +1745,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -1911,7 +1906,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2021,7 +2016,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2094,7 +2089,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2177,7 +2172,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2289,7 +2284,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2302,7 +2297,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
 :scope._ao-select[data-placeholder], :scope ._ao-select[data-placeholder] {
     color: var(--color-text-muted);
@@ -2726,7 +2721,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-field, :scope ._ao-field {
@@ -2862,7 +2857,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2974,7 +2969,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-footer-meta, :scope ._ao-footer-meta {
@@ -3004,7 +2999,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3213,7 +3208,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-navbar-item[aria-current="page"], :scope ._ao-navbar-item[aria-current="page"], :scope._ao-navbar-item[data-active], :scope ._ao-navbar-item[data-active] {
@@ -3253,7 +3248,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-navbar-mobile-toggle::before, :scope ._ao-navbar-mobile-toggle::before {
@@ -3376,7 +3371,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-sidebar-item[aria-current="page"], :scope ._ao-sidebar-item[aria-current="page"], :scope._ao-sidebar-item[data-active], :scope ._ao-sidebar-item[data-active] {
@@ -3461,7 +3456,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3537,7 +3532,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-sidebar-subitem[aria-current="page"], :scope ._ao-sidebar-subitem[aria-current="page"], :scope._ao-sidebar-subitem[data-active], :scope ._ao-sidebar-subitem[data-active] {
@@ -3589,7 +3584,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
 :scope._ao-sidebar-collapse-toggle::before, :scope ._ao-sidebar-collapse-toggle::before {
     content: "";
@@ -3693,7 +3688,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -3725,7 +3720,7 @@
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
     outline-offset: 2px;
-    outline-color: var(--color-primary);
+    outline-color: var(--color-focus);
   }
 :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab {
     position: relative;
@@ -3753,6 +3748,8 @@
     padding: calc(var(--spacing) * 0.5);
   }
 :scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab {
+    position: relative;
+    z-index: 1;
     border-radius: 0.25rem;
   }
 :scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab {
@@ -3761,6 +3758,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) {
+    :scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
+      anchor-scope: --tab-thumb;
+    }
+    :scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected="true"], :scope ._ao-tabs ._ao-tab[aria-selected="true"], :scope._ao-tabs ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked + ._ao-tab {
+      anchor-name: --tab-thumb;
+    }
+    :scope._ao-tabs ._ao-tab-list::before, :scope ._ao-tabs ._ao-tab-list::before {
+      content: "";
+      position: absolute;
+      position-anchor: --tab-thumb;
+    }
+    :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
+      display: none;
+    }
+    :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list::before, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-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;
+    }
+    :scope._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-tab-list::before, :scope ._ao-tabs[data-orientation="vertical"]:not(._ao-tabs-boxed) ._ao-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;
+    }
+    :scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked + ._ao-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);
+    }
+    :scope._ao-tabs-boxed ._ao-tab-list::before, :scope ._ao-tabs-boxed ._ao-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;
+    }
+  }
 :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
     display: flex;
     width: 100%;
@@ -3823,6 +3870,11 @@
 :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);
   }
+@media (prefers-reduced-motion: reduce) {
+    :scope._ao-tabs ._ao-tab-list::before, :scope ._ao-tabs ._ao-tab-list::before, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab::after {
+      transition: none;
+    }
+  }
 :scope._ao-table, :scope ._ao-table {
     width: 100%;
     border-collapse: collapse;
@@ -3928,7 +3980,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);
   }
 :scope._ao-tooltip, :scope ._ao-tooltip {
     pointer-events: none;
@@ -4045,7 +4097,7 @@
     --chart-height: 8rem;
     --chart-size: 8rem;
     --chart-gap: 0.25rem;
-    color: var(--color-primary);
+    color: var(--color-info);
   }
 :scope._ao-chart-success, :scope ._ao-chart-success {
     color: var(--color-success);