@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/src/toast/toast.module.css

@@ -1,8 +1,5 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   /* ─── Viewport ───────────────────────────────────────────────────── */
-
   .viewport {
     position: fixed;
     bottom: var(--space-4);
@@ -16,42 +13,35 @@
     pointer-events: none;
     outline: none;
   }
-
   /* List variant — toasts sit in a normal column */
   .viewport-list {
     gap: var(--space-2);
   }
-
   /* Stacked variant — toasts overlap; viewport height = frontmost toast */
   .viewport-stacked {
     gap: 0;
   }
-
   /* ─── Toast base ─────────────────────────────────────────────────── */
-
   .toast {
     display: flex;
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-3) var(--space-4);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-popover);
     pointer-events: auto;
     cursor: default;
     width: 100%;
   }
-
   @supports (backdrop-filter: blur(12px)) {
     .toast {
       backdrop-filter: blur(12px) saturate(1.5);
       -webkit-backdrop-filter: blur(12px) saturate(1.5);
     }
   }
-
   /* ─── List mode animations ───────────────────────────────────────── */
-
   .viewport-list .toast {
     transform-origin: bottom right;
     opacity: 1;
@@ -59,13 +49,11 @@
     transition:
       opacity 300ms var(--easing-ease-out),
       transform 300ms var(--easing-spring);
-
     @starting-style {
       opacity: 0;
       transform: translateX(calc(100% + var(--space-4)));
     }
   }
-
   .viewport-list .toast[data-ending-style] {
     opacity: 0;
     transform: translateX(calc(100% + var(--space-4)));
@@ -73,9 +61,7 @@
       opacity 200ms var(--easing-ease-in),
       transform 200ms var(--easing-ease-in);
   }
-
   /* ─── Stacked mode ───────────────────────────────────────────────── */
-
   /*
    * Base UI provides on each toast root (as inline styles):
    *   --toast-index   : plain integer, 0 = frontmost/newest
@@ -88,7 +74,6 @@
    * Collapsed: toasts sit at bottom:0, stacked via scale+translate.
    * Expanded (data-expanded): each toast moves to its offset position.
    */
-
   .viewport-stacked {
     height: calc(var(--toast-frontmost-height, 64px) + 20px);
     padding-top: 20px;
@@ -98,12 +83,10 @@
       clip-path 200ms var(--easing-ease-out),
       height 200ms var(--easing-ease-out);
   }
-
   .viewport-stacked[data-expanded] {
     clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
     height: calc(var(--toast-frontmost-height, 64px) + 20px);
   }
-
   /* Fill the gaps between expanded toasts so the mouse doesn't leave
      the viewport as it moves between them, which would collapse the stack */
   .viewport-stacked[data-expanded]::after {
@@ -113,31 +96,25 @@
     pointer-events: auto;
     z-index: 0;
   }
-
   .toast-stacked {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-
     z-index: calc(50 - var(--toast-index));
-
     transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));
     transform-origin: bottom center;
     opacity: calc(1 - var(--toast-index) * 0.15);
-
     transition:
       transform 200ms var(--easing-ease-out),
       opacity 200ms var(--easing-ease-out);
   }
-
   /* Expanded: each toast animates to its stacked position with a gap */
   .viewport-stacked[data-expanded] .toast-stacked {
     transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
     opacity: 1;
     pointer-events: auto;
   }
-
   /* Enter: new toast slides up from below */
   .viewport-stacked .toast-stacked {
     @starting-style {
@@ -145,7 +122,6 @@
       transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));
     }
   }
-
   /* Exit: dismissed toast slides right */
   .viewport-stacked .toast-stacked[data-ending-style] {
     opacity: 0;
@@ -154,34 +130,26 @@
       opacity 150ms var(--easing-ease-in),
       transform 150ms var(--easing-ease-in);
   }
-
   /* ─── Variant tints ──────────────────────────────────────────────── */
-
   .toast-success {
-    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
   }
-
   .toast-error {
-    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
   }
-
   .toast-warning {
-    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
   }
-
   .toast-info {
-    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
   }
-
   /* ─── Icon ───────────────────────────────────────────────────────── */
-
   .icon {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     margin-top: 1px;
   }
-
   .icon-success {
     color: var(--color-success-solid);
   }
@@ -194,9 +162,7 @@
   .icon-info {
     color: var(--color-info-solid);
   }
-
   /* ─── Content ────────────────────────────────────────────────────── */
-
   .content {
     flex: 1;
     display: flex;
@@ -204,24 +170,20 @@
     gap: var(--space-0-5);
     min-width: 0;
   }
-
   .title {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
   }
-
   .description {
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
-
   /* ─── Close button ───────────────────────────────────────────────── */
-
   .close {
     flex-shrink: 0;
     width: 20px;
@@ -229,7 +191,7 @@
     border-radius: var(--radius-sm);
     border: none;
     background: transparent;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -240,12 +202,10 @@
       color var(--duration-fast) var(--easing-standard);
     margin-top: 1px;
   }
-
   .close:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
-
   .close:focus-visible {
     box-shadow: var(--shadow-focus);
   }

package/src/tooltip/tooltip.module.css

@@ -1,67 +1,56 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .positioner {
     z-index: var(--z-tooltip);
   }
-
   .popup {
     background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-sm);
     padding: var(--space-1) var(--space-2);
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
     max-width: 240px;
     word-break: break-word;
-
     transform-origin: var(--transform-origin);
     transition:
-      opacity 125ms var(--easing-ease-out),
-      transform 125ms var(--easing-ease-out);
+      opacity 150ms var(--easing-ease-out),
+      transform 300ms var(--easing-spring);
   }
-
   /* Skip animation when moving between tooltips quickly */
   .popup[data-instant] {
     transition-duration: 0ms;
   }
-
   .popup[data-starting-style] {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scale(0.85);
   }
-
   .popup[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.95);
     transition:
       opacity 75ms var(--easing-ease-in),
       transform 75ms var(--easing-ease-in);
   }
-
   @media (prefers-reduced-motion: reduce) {
     .popup {
       transition: opacity 125ms var(--easing-ease-out);
     }
-
     .popup[data-ending-style] {
       transition: opacity 75ms var(--easing-ease-in);
     }
-
     .popup[data-starting-style],
     .popup[data-ending-style] {
       transform: none;
     }
   }
-
   .arrow {
     width: 8px;
     height: 8px;
     fill: var(--color-surface-3);
-    stroke: var(--color-border-base);
+    stroke: var(--color-line);
     stroke-width: 1;
   }
 }