@aortl/admin-react 0.14.0 → 0.15.0

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);
@@ -2452,7 +2447,7 @@
 :scope._ao-card, :scope ._ao-card {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow: auto;
     border-radius: var(--radius-xl);
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2491,6 +2486,9 @@
     align-items: center;
     gap: calc(var(--spacing) * 1);
   }
+:scope._ao-card-toolbar :is(i, svg), :scope ._ao-card-toolbar :is(i, svg) {
+    font-size: 1.25rem;
+  }
 :scope._ao-card-description, :scope ._ao-card-description {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2723,7 +2721,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
   }
 :scope._ao-field, :scope ._ao-field {
@@ -2859,7 +2857,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -2971,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 {
@@ -3001,7 +2999,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3210,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] {
@@ -3250,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 {
@@ -3373,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] {
@@ -3458,7 +3456,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     list-style: none;
   }
@@ -3534,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] {
@@ -3586,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: "";
@@ -3690,7 +3688,7 @@
       outline-offset: 2px;
     }
     &:focus-visible {
-      outline-color: var(--color-primary);
+      outline-color: var(--color-focus);
     }
     &:disabled {
       cursor: not-allowed;
@@ -3722,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;
@@ -3925,7 +3923,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;
@@ -4042,7 +4040,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React component library for the admin design system. Pairs with @aortl/admin-css.",
   "keywords": [
     "components",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@base-ui/react": "1.4.1",
     "clsx": "2.1.1",
-    "@aortl/admin-css": "0.14.0"
+    "@aortl/admin-css": "0.15.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.1",