@mcp-elements/css 0.1.0 → 0.1.2

package/base.css

@@ -23,7 +23,16 @@
   --color-card-foreground: oklch(0.145 0 0);
   --color-popover: oklch(1 0 0);
   --color-popover-foreground: oklch(0.145 0 0);
-  --color-overlay: oklch(0 0 0 / 0.8);
+  --color-overlay: oklch(0 0 0 / 0.55);
+
+  /* Semantic status hues — shared by every component so success/warning/
+     danger read identically across tool-call, server-status, alerts, etc.
+     Components tint these with color-mix() for backgrounds and borders. */
+  --color-success: oklch(0.62 0.16 150);
+  --color-warning: oklch(0.68 0.15 70);
+  --color-danger: oklch(0.585 0.22 25);
+  --color-brand: oklch(0.62 0.21 5);
+  --color-brand-2: oklch(0.68 0.18 35);
 
   /* Radius scale */
   --radius-sm: 0.25rem;
@@ -83,6 +92,13 @@
     --color-card-foreground: oklch(0.985 0 0);
     --color-popover: oklch(0.205 0.015 286);
     --color-popover-foreground: oklch(0.985 0 0);
-    --color-overlay: oklch(0 0 0 / 0.8);
+    --color-overlay: oklch(0 0 0 / 0.6);
+
+    /* Brighter status hues for dark surfaces */
+    --color-success: oklch(0.74 0.17 150);
+    --color-warning: oklch(0.82 0.16 75);
+    --color-danger: oklch(0.70 0.19 22);
+    --color-brand: oklch(0.71 0.22 5);
+    --color-brand-2: oklch(0.76 0.18 35);
   }
 }

package/components/ai-badge.css

@@ -3,15 +3,24 @@
     @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium
            [&_svg]:size-3 [&_svg]:shrink-0;
   }
+  /* Brand pink → coral, not the violet AI-template cliché. */
   .mcpe-ai-badge-default {
-    background: linear-gradient(135deg, oklch(0.541 0.281 293.009 / 0.15), oklch(0.627 0.265 303.9 / 0.15));
-    @apply text-[oklch(0.641_0.181_293.009)] border border-[oklch(0.541_0.281_293.009_/_0.2)];
+    background: linear-gradient(135deg,
+      color-mix(in oklab, var(--color-brand) 16%, transparent),
+      color-mix(in oklab, var(--color-brand-2) 16%, transparent));
+    color: var(--color-brand);
+    border: 1px solid color-mix(in oklab, var(--color-brand) 24%, transparent);
   }
   .mcpe-ai-badge-prominent {
-    background: linear-gradient(135deg, oklch(0.541 0.281 293.009), oklch(0.627 0.265 303.9));
-    @apply text-white shadow-sm;
+    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
+    color: oklch(1 0 0);
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.22),
+      0 1px 2px 0 oklch(0 0 0 / 0.15);
   }
   .mcpe-ai-badge-subtle {
-    @apply border border-[oklch(0.541_0.281_293.009_/_0.3)] text-[oklch(0.641_0.181_293.009)] bg-transparent;
+    background: transparent;
+    color: var(--color-brand);
+    border: 1px solid color-mix(in oklab, var(--color-brand) 30%, transparent);
   }
 }

package/components/alert.css

@@ -11,11 +11,15 @@
     @apply border-destructive/50 text-destructive [&>svg]:text-destructive;
   }
   .mcpe-alert-success {
-    @apply border-green-500/50 text-green-600 [&>svg]:text-green-600;
+    border-color: color-mix(in oklab, var(--color-success) 45%, transparent);
+    color: var(--color-success);
   }
+  .mcpe-alert-success > svg { color: var(--color-success); }
   .mcpe-alert-warning {
-    @apply border-yellow-500/50 text-yellow-600 [&>svg]:text-yellow-600;
+    border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
+    color: var(--color-warning);
   }
+  .mcpe-alert-warning > svg { color: var(--color-warning); }
   .mcpe-alert-title {
     @apply mb-1 font-medium leading-none tracking-tight;
   }

package/components/button.css

@@ -1,21 +1,35 @@
 @layer components {
   .mcpe-btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium
-           whitespace-nowrap transition-all cursor-pointer active:scale-[0.98]
-           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+    @apply inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium
+           whitespace-nowrap cursor-pointer active:scale-[0.985]
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
            disabled:pointer-events-none disabled:opacity-50
            [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+    transition: background-color 120ms ease, border-color 120ms ease,
+                box-shadow 120ms ease, transform 120ms ease, color 120ms ease;
   }
-  /* Variants */
-  .mcpe-btn-primary   { @apply bg-primary text-primary-foreground shadow hover:bg-primary/90; }
-  .mcpe-btn-secondary { @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80; }
-  .mcpe-btn-outline   { @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground; }
-  .mcpe-btn-ghost     { @apply hover:bg-accent hover:text-accent-foreground; }
-  .mcpe-btn-destructive { @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90; }
-  .mcpe-btn-link      { @apply text-primary underline-offset-4 hover:underline; }
+  /* Variants — filled buttons carry a top inset highlight so they read as lit
+     surfaces (Linear/Vercel), not flat blocks. */
+  .mcpe-btn-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90;
+    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.15), 0 1px 2px 0 oklch(0 0 0 / 0.12);
+  }
+  .mcpe-btn-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.06), 0 1px 2px 0 oklch(0 0 0 / 0.08);
+  }
+  .mcpe-btn-outline {
+    @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground;
+  }
+  .mcpe-btn-ghost { @apply hover:bg-accent hover:text-accent-foreground; }
+  .mcpe-btn-destructive {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 0.15), 0 1px 2px 0 oklch(0 0 0 / 0.12);
+  }
+  .mcpe-btn-link { @apply text-primary underline-offset-4 hover:underline; }
   /* Sizes */
   .mcpe-btn-sm   { @apply h-8 rounded-md px-3 text-xs; }
   .mcpe-btn-md   { @apply h-9 px-4 py-2; }
-  .mcpe-btn-lg   { @apply h-10 rounded-md px-8; }
+  .mcpe-btn-lg   { @apply h-10 px-8; }
   .mcpe-btn-icon { @apply h-9 w-9; }
 }

package/components/card.css

@@ -1,6 +1,17 @@
 @layer components {
   .mcpe-card {
-    @apply rounded-xl border bg-card text-card-foreground shadow;
+    @apply relative border bg-card text-card-foreground;
+    border-radius: 0.75rem; /* 12px */
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.04),
+      0 1px 2px 0 oklch(0 0 0 / 0.06),
+      0 8px 24px -12px oklch(0 0 0 / 0.12);
+  }
+  [data-theme='dark'] .mcpe-card {
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.04),
+      0 1px 2px 0 oklch(0 0 0 / 0.24),
+      0 12px 28px -12px oklch(0 0 0 / 0.40);
   }
   .mcpe-card-header {
     @apply flex flex-col space-y-1.5 p-6;

package/components/dialog.css

@@ -1,26 +1,61 @@
 @layer components {
+  /* Overlay centers the content via flexbox — no transform-based centering,
+     so the entrance animation can't fight the positioning. */
   .mcpe-dialog-overlay {
-    @apply fixed inset-0 z-50 bg-[var(--color-overlay)];
+    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+    background-color: var(--color-overlay);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    animation: mcpe-dialog-overlay-in 160ms ease-out;
   }
+
   .mcpe-dialog-content {
-    @apply fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2
-           gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
+    @apply relative z-50 grid w-full max-w-md gap-5 border bg-popover p-6 text-popover-foreground;
+    border-radius: 0.875rem; /* 14px — modern modal, not bubbly */
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.05),
+      0 24px 48px -12px oklch(0 0 0 / 0.45),
+      0 8px 16px -8px oklch(0 0 0 / 0.30);
+    animation: mcpe-dialog-content-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    transform-origin: center;
   }
+
   .mcpe-dialog-header {
-    @apply flex flex-col space-y-1.5 text-center sm:text-left;
+    @apply flex flex-col gap-1.5 pr-8 text-left;
   }
+
   .mcpe-dialog-footer {
-    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
+    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
   }
+
   .mcpe-dialog-title {
-    @apply text-lg font-semibold leading-none tracking-tight;
+    @apply text-base font-semibold leading-tight tracking-tight;
   }
+
   .mcpe-dialog-description {
-    @apply text-sm text-muted-foreground;
+    @apply text-sm leading-relaxed text-muted-foreground;
   }
+
   .mcpe-dialog-close {
-    @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity
-           hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+    @apply absolute right-3.5 top-3.5 inline-flex h-8 w-8 items-center justify-center
+           rounded-md text-muted-foreground transition-colors
+           hover:bg-accent hover:text-foreground
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover
            disabled:pointer-events-none;
   }
 }
+
+@keyframes mcpe-dialog-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes mcpe-dialog-content-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mcpe-dialog-overlay,
+  .mcpe-dialog-content { animation: none; }
+}

package/components/dropdown-menu.css

@@ -1,10 +1,16 @@
 @layer components {
   .mcpe-dropdown-menu-content {
-    @apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
-           text-popover-foreground shadow-md;
+    @apply z-50 min-w-[8rem] overflow-hidden border bg-popover p-1
+           text-popover-foreground;
+    border-radius: 0.625rem; /* 10px */
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.05),
+      0 4px 12px -2px oklch(0 0 0 / 0.12),
+      0 16px 32px -8px oklch(0 0 0 / 0.22);
+    animation: mcpe-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   .mcpe-dropdown-menu-item {
-    @apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5
+    @apply relative flex cursor-default select-none items-center rounded-md px-2 py-1.5
            text-sm outline-none transition-colors;
   }
   .mcpe-dropdown-menu-item-active {

package/components/feedback.css

@@ -11,7 +11,8 @@
     @apply ring-1 ring-ring;
   }
   .mcpe-feedback-btn-up.mcpe-feedback-btn-selected {
-    @apply text-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/15;
+    color: var(--color-success);
+    background-color: color-mix(in oklab, var(--color-success) 12%, transparent);
   }
   .mcpe-feedback-btn-down.mcpe-feedback-btn-selected {
     @apply text-destructive bg-destructive/10 hover:bg-destructive/15;

package/components/mcp-consent-dialog.css

@@ -1,51 +1,99 @@
 @layer components {
+  /* Root — consistent vertical rhythm between identity, scopes, actions */
+  .mcpe-mcp-consent-dialog {
+    @apply flex flex-col gap-4;
+  }
+
+  /* Server identity row */
   .mcpe-mcp-consent-dialog-server {
-    @apply flex items-center gap-3 pb-4;
-    border-bottom: 1px solid var(--color-border);
+    @apply flex items-center gap-3;
   }
 
   .mcpe-mcp-consent-dialog-icon {
-    @apply h-10 w-10 rounded-lg overflow-hidden flex items-center justify-center text-lg font-bold shrink-0;
+    @apply flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden text-base font-semibold;
+    border-radius: 0.625rem; /* 10px */
     background-color: var(--color-accent);
     color: var(--color-accent-foreground);
+    border: 1px solid var(--color-border);
+  }
+  .mcpe-mcp-consent-dialog-icon img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
   }
 
+  .mcpe-mcp-consent-dialog-server-text {
+    @apply min-w-0;
+  }
   .mcpe-mcp-consent-dialog-server-name {
-    @apply font-semibold text-base;
+    @apply text-sm font-semibold leading-tight;
+    color: var(--color-foreground);
   }
-
   .mcpe-mcp-consent-dialog-server-meta {
-    @apply text-xs;
+    @apply text-xs leading-tight;
+    margin-top: 0.125rem;
     color: var(--color-muted-foreground);
   }
 
+  /* Scope list */
   .mcpe-mcp-consent-dialog-scopes {
-    @apply flex flex-col gap-2 py-3;
+    @apply flex flex-col gap-1.5;
   }
 
   .mcpe-mcp-consent-dialog-scope-item {
-    @apply flex items-start gap-2 rounded-lg p-3;
+    @apply flex items-center justify-between gap-3;
+    padding: 0.625rem 0.75rem; /* 10px / 12px */
+    border-radius: 0.5rem; /* 8px */
     background-color: var(--color-muted);
-    border: 1px solid var(--color-border);
+    border: 1px solid transparent;
+    transition: border-color 140ms var(--mcpe-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+                background-color 140ms ease,
+                transform 140ms var(--mcpe-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+                box-shadow 140ms ease;
+  }
+  .mcpe-mcp-consent-dialog-scope-item:hover {
+    border-color: var(--color-border);
+    background-color: color-mix(in oklab, var(--color-muted) 60%, var(--color-accent));
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px -4px oklch(0 0 0 / 0.30);
   }
 
   .mcpe-mcp-consent-dialog-scope-resource {
-    @apply font-mono text-xs font-semibold;
-    color: var(--color-primary);
+    @apply truncate font-mono text-[0.8125rem] font-medium;
+    color: var(--color-foreground);
   }
 
   .mcpe-mcp-consent-dialog-scope-perms {
-    @apply flex flex-wrap gap-1 mt-0.5;
+    @apply flex shrink-0 flex-wrap items-center gap-1;
   }
 
+  /* Permission badge — neutral by default; elevated perms (write/admin/…)
+     get a warning tint so risky grants stand out at a glance. */
   .mcpe-mcp-consent-dialog-scope-perm {
-    @apply rounded px-1.5 py-0.5 text-[10px] font-medium font-mono uppercase;
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
+    @apply inline-flex items-center font-mono text-[0.625rem] font-semibold uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.3125rem; /* 5px */
+    background-color: color-mix(in oklab, var(--color-foreground) 8%, transparent);
+    color: var(--color-muted-foreground);
+    border: 1px solid transparent;
+  }
+  .mcpe-mcp-consent-dialog-scope-perm[data-perm='write'],
+  .mcpe-mcp-consent-dialog-scope-perm[data-perm='admin'],
+  .mcpe-mcp-consent-dialog-scope-perm[data-perm='delete'],
+  .mcpe-mcp-consent-dialog-scope-perm[data-perm='manage'] {
+    background-color: color-mix(in oklab, var(--color-warning) 16%, transparent);
+    color: var(--color-warning);
+    border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
   }
 
+  /* Actions — separated from the content by a divider + generous spacing */
   .mcpe-mcp-consent-dialog-actions {
-    @apply flex gap-2 pt-2;
+    @apply flex items-center gap-2.5 pt-4;
+    margin-top: 0.25rem;
     border-top: 1px solid var(--color-border);
   }
+  .mcpe-mcp-consent-dialog-actions > .mcpe-btn {
+    flex: 1 1 0%;
+  }
 }

package/components/mcp-resource-browser.css

@@ -4,13 +4,17 @@
   }
 
   .mcpe-mcp-resource-browser-item {
-    @apply flex items-center gap-3 rounded-lg px-3 py-2.5 cursor-pointer transition-colors;
+    @apply flex items-center gap-3 rounded-lg px-3 py-2.5 cursor-pointer;
     border: 1px solid transparent;
+    transition: background-color 140ms ease, border-color 140ms ease,
+                transform 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms ease;
   }
 
   .mcpe-mcp-resource-browser-item:hover {
     background-color: var(--color-accent);
     border-color: var(--color-border);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px -4px oklch(0 0 0 / 0.30);
   }
 
   .mcpe-mcp-resource-browser-item-selected {

package/components/mcp-scope-inspector.css

@@ -11,6 +11,7 @@
   .mcpe-mcp-scope-inspector-trigger {
     @apply flex w-full items-center justify-between px-4 py-3 text-left;
     background-color: var(--color-card);
+    transition: background-color 140ms ease;
   }
 
   .mcpe-mcp-scope-inspector-trigger:hover {
@@ -26,9 +27,21 @@
   }
 
   .mcpe-mcp-scope-inspector-perm {
-    @apply rounded px-1.5 py-0.5 text-[10px] font-mono font-medium uppercase;
-    background-color: var(--color-secondary);
-    color: var(--color-secondary-foreground);
+    @apply inline-flex items-center font-mono text-[0.625rem] font-semibold uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.3125rem; /* 5px */
+    background-color: color-mix(in oklab, var(--color-foreground) 8%, transparent);
+    color: var(--color-muted-foreground);
+    border: 1px solid transparent;
+  }
+  .mcpe-mcp-scope-inspector-perm[data-perm='write'],
+  .mcpe-mcp-scope-inspector-perm[data-perm='admin'],
+  .mcpe-mcp-scope-inspector-perm[data-perm='delete'],
+  .mcpe-mcp-scope-inspector-perm[data-perm='manage'] {
+    background-color: color-mix(in oklab, var(--color-warning) 16%, transparent);
+    color: var(--color-warning);
+    border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
   }
 
   .mcpe-mcp-scope-inspector-chevron {

package/components/mcp-server-status.css

@@ -10,43 +10,44 @@
 
   /* Connected */
   .mcpe-mcp-server-status-connected {
-    background-color: oklch(0.72 0.17 145 / 0.12);
-    border-color: oklch(0.72 0.17 145 / 0.3);
-    color: oklch(0.72 0.17 145);
+    background-color: color-mix(in oklab, var(--color-success) 12%, transparent);
+    border-color: color-mix(in oklab, var(--color-success) 30%, transparent);
+    color: var(--color-success);
   }
   .mcpe-mcp-server-status-connected .mcpe-mcp-server-status-dot {
-    background-color: oklch(0.72 0.17 145);
+    background-color: var(--color-success);
+    box-shadow: 0 0 6px color-mix(in oklab, var(--color-success) 70%, transparent);
   }
 
   /* Connecting */
   .mcpe-mcp-server-status-connecting {
-    background-color: oklch(0.82 0.18 85 / 0.12);
-    border-color: oklch(0.82 0.18 85 / 0.3);
-    color: oklch(0.82 0.18 85);
+    background-color: color-mix(in oklab, var(--color-warning) 12%, transparent);
+    border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
+    color: var(--color-warning);
   }
   .mcpe-mcp-server-status-connecting .mcpe-mcp-server-status-dot {
-    background-color: oklch(0.82 0.18 85);
+    background-color: var(--color-warning);
     animation: mcpe-pulse 1.5s ease-in-out infinite;
   }
 
   /* Disconnected */
   .mcpe-mcp-server-status-disconnected {
-    background-color: oklch(0.5 0 0 / 0.08);
-    border-color: oklch(0.5 0 0 / 0.2);
-    color: oklch(0.55 0.012 286);
+    background-color: color-mix(in oklab, var(--color-muted-foreground) 10%, transparent);
+    border-color: color-mix(in oklab, var(--color-muted-foreground) 22%, transparent);
+    color: var(--color-muted-foreground);
   }
   .mcpe-mcp-server-status-disconnected .mcpe-mcp-server-status-dot {
-    background-color: oklch(0.55 0.012 286);
+    background-color: var(--color-muted-foreground);
   }
 
   /* Error */
   .mcpe-mcp-server-status-error {
-    background-color: oklch(0.62 0.22 25 / 0.12);
-    border-color: oklch(0.62 0.22 25 / 0.3);
-    color: oklch(0.62 0.22 25);
+    background-color: color-mix(in oklab, var(--color-danger) 12%, transparent);
+    border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
+    color: var(--color-danger);
   }
   .mcpe-mcp-server-status-error .mcpe-mcp-server-status-dot {
-    background-color: oklch(0.62 0.22 25);
+    background-color: var(--color-danger);
   }
 
   @keyframes mcpe-pulse {

package/components/mcp-tool-call.css

@@ -48,15 +48,15 @@
   }
 
   .mcpe-mcp-tool-call-result-done {
-    background-color: oklch(0.72 0.17 145 / 0.08);
-    border: 1px solid oklch(0.72 0.17 145 / 0.25);
-    color: oklch(0.72 0.17 145);
+    background-color: color-mix(in oklab, var(--color-success) 9%, transparent);
+    border: 1px solid color-mix(in oklab, var(--color-success) 25%, transparent);
+    color: var(--color-success);
   }
 
   .mcpe-mcp-tool-call-result-error {
-    background-color: oklch(0.62 0.22 25 / 0.08);
-    border: 1px solid oklch(0.62 0.22 25 / 0.25);
-    color: oklch(0.62 0.22 25);
+    background-color: color-mix(in oklab, var(--color-danger) 9%, transparent);
+    border: 1px solid color-mix(in oklab, var(--color-danger) 25%, transparent);
+    color: var(--color-danger);
   }
 
   .mcpe-mcp-tool-call-footer {
@@ -75,18 +75,18 @@
 
   .mcpe-mcp-tool-call-badge-pending,
   .mcpe-mcp-tool-call-badge-running {
-    background-color: oklch(0.82 0.18 85 / 0.15);
-    color: oklch(0.82 0.18 85);
+    background-color: color-mix(in oklab, var(--color-warning) 15%, transparent);
+    color: var(--color-warning);
   }
 
   .mcpe-mcp-tool-call-badge-done {
-    background-color: oklch(0.72 0.17 145 / 0.15);
-    color: oklch(0.72 0.17 145);
+    background-color: color-mix(in oklab, var(--color-success) 15%, transparent);
+    color: var(--color-success);
   }
 
   .mcpe-mcp-tool-call-badge-error {
-    background-color: oklch(0.62 0.22 25 / 0.15);
-    color: oklch(0.62 0.22 25);
+    background-color: color-mix(in oklab, var(--color-danger) 15%, transparent);
+    color: var(--color-danger);
   }
 
   .mcpe-mcp-tool-call-badge-cancelled {

package/components/popover.css

@@ -1,5 +1,16 @@
+@keyframes mcpe-pop-in {
+  from { opacity: 0; transform: scale(0.97) translateY(-2px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
 @layer components {
   .mcpe-popover-content {
-    @apply z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none;
+    @apply z-50 w-72 border bg-popover p-4 text-popover-foreground outline-none;
+    border-radius: 0.75rem; /* 12px */
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.05),
+      0 4px 12px -2px oklch(0 0 0 / 0.12),
+      0 16px 32px -8px oklch(0 0 0 / 0.22);
+    animation: mcpe-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 }

package/components/select.css

@@ -30,8 +30,14 @@
     color: var(--color-foreground);
   }
   .mcpe-select-content {
-    @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border
-           bg-popover text-popover-foreground shadow-md;
+    @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden border
+           bg-popover text-popover-foreground;
+    border-radius: 0.625rem; /* 10px */
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.05),
+      0 4px 12px -2px oklch(0 0 0 / 0.12),
+      0 16px 32px -8px oklch(0 0 0 / 0.22);
+    animation: mcpe-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   .mcpe-select-viewport {
     @apply p-1;

package/components/toast.css

@@ -1,46 +1,75 @@
+@keyframes mcpe-toast-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 @layer components {
   .mcpe-toaster {
-    @apply fixed z-[100] flex flex-col gap-2 p-4;
-  }
-  .mcpe-toaster-top-right {
-    @apply top-0 right-0;
-  }
-  .mcpe-toaster-bottom-right {
-    @apply bottom-0 right-0;
-  }
-  .mcpe-toaster-top-left {
-    @apply top-0 left-0;
-  }
-  .mcpe-toaster-bottom-left {
-    @apply bottom-0 left-0;
+    @apply fixed z-[100] flex flex-col gap-2.5 p-4;
   }
+  .mcpe-toaster-top-right { @apply top-0 right-0; }
+  .mcpe-toaster-bottom-right { @apply bottom-0 right-0; }
+  .mcpe-toaster-top-left { @apply top-0 left-0; }
+  .mcpe-toaster-bottom-left { @apply bottom-0 left-0; }
+
+  /* Elevated neutral surface + a colored status icon — not a saturated fill.
+     Layered shadow reads like a real floating surface (Sonner/Linear). */
   .mcpe-toast {
-    @apply pointer-events-auto relative flex w-full items-center justify-between space-x-2
-           overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all
-           bg-background text-foreground;
+    @apply pointer-events-auto relative flex w-full items-start gap-2.5
+           py-3 pl-3.5 pr-9;
+    min-width: 20rem;
+    border-radius: 0.75rem; /* 12px */
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    border: 1px solid var(--color-border);
+    box-shadow:
+      inset 0 1px 0 0 oklch(1 0 0 / 0.04),
+      0 1px 2px 0 oklch(0 0 0 / 0.20),
+      0 12px 28px -8px oklch(0 0 0 / 0.40);
+    animation: mcpe-toast-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .mcpe-toast-icon {
+    @apply mt-px flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center;
+    color: var(--color-muted-foreground);
   }
+  .mcpe-toast-icon svg { height: 100%; width: 100%; }
+
   .mcpe-toast-destructive {
-    @apply border-destructive bg-destructive text-destructive-foreground;
+    border-color: color-mix(in oklab, var(--color-danger) 26%, var(--color-border));
+    background-color: color-mix(in oklab, var(--color-danger) 6%, var(--color-popover));
   }
+  .mcpe-toast-destructive .mcpe-toast-icon { color: var(--color-danger); }
+
   .mcpe-toast-success {
-    @apply border-green-500/50 bg-green-500/10 text-green-600;
+    border-color: color-mix(in oklab, var(--color-success) 26%, var(--color-border));
+    background-color: color-mix(in oklab, var(--color-success) 6%, var(--color-popover));
   }
+  .mcpe-toast-success .mcpe-toast-icon { color: var(--color-success); }
+
+  .mcpe-toast-body { @apply flex min-w-0 flex-col gap-0.5; }
+
   .mcpe-toast-title {
-    @apply text-sm font-semibold;
+    @apply text-sm font-semibold leading-tight;
+    color: var(--color-foreground);
   }
   .mcpe-toast-description {
-    @apply text-sm opacity-90;
+    @apply text-[0.8125rem] leading-snug;
+    color: var(--color-muted-foreground);
   }
   .mcpe-toast-close {
-    @apply absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity
-           hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none;
+    @apply absolute right-2 top-2.5 inline-flex h-6 w-6 items-center justify-center rounded-md
+           text-muted-foreground opacity-0 transition-all
+           hover:bg-accent hover:text-foreground
+           focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
   }
-  .mcpe-toast:hover .mcpe-toast-close {
+  .mcpe-toast:hover .mcpe-toast-close,
+  .mcpe-toast:focus-within .mcpe-toast-close {
     @apply opacity-100;
   }
   .mcpe-toast-action {
-    @apply inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent
-           px-3 text-sm font-medium transition-colors hover:bg-secondary
-           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+    @apply ml-auto inline-flex h-7 shrink-0 items-center justify-center self-center rounded-md border bg-transparent
+           px-2.5 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
   }
 }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@mcp-elements/css",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "exports": {
+    ".": "./base.css",
     "./base.css": "./base.css",
     "./base": "./base.css",
     "./components/*.css": "./components/*.css",