@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -27,11 +27,15 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: auto;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    padding: 8px 12px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     color: var(--memori-text-color);
@@ -40,7 +44,7 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .memori-copy-button:disabled {
@@ -54,23 +58,24 @@
 }
 
 .memori-copy-button:hover:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 28%, var(--memori-border-color));
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 .memori-copy-button:active:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 40%, var(--memori-border-color));
-    background: var(--memori-copy-surface-pressed);
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 22%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
 }
 
 .memori-copy-button--success {
-    border-color: #22c55e;
-    background: color-mix(in oklch, var(--memori-main-background) 82%, #22c55e 18%);
+    border-color: var(--memori-success-color);
+    background: color-mix(in oklch, var(--memori-main-background) 82%, var(--memori-success-color) 18%);
     color: var(--memori-text-color);
 }
 
 .memori-copy-button--error {
-    border-color: #ef4444;
-    background: color-mix(in oklch, var(--memori-main-background) 84%, #ef4444 16%);
+    border-color: var(--memori-error-color);
+    background: color-mix(in oklch, var(--memori-main-background) 84%, var(--memori-error-color) 16%);
     color: var(--memori-text-color);
 }
 
@@ -87,12 +92,16 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: 38px;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    padding-right: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    justify-content: center;
+    padding: 8px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-left-radius: 0px !important;
     border-top-left-radius: 0px !important;
     color: var(--memori-text-color);
@@ -101,7 +110,12 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.memori-copy-button--dropdown:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 /* Button Icons */
@@ -161,7 +175,7 @@
 /* Copy Menu Wrapper */
 .memori-copy-menu-wrapper {
     position: relative;
-    z-index: 10001;
+    z-index: 10;
     display: inline-block;
 }
 
@@ -169,95 +183,6 @@
     gap: var(--memori-spacing-sm);
 }
 
-/* Copy Dropdown */
-.memori-copy-dropdown {
-    position: absolute;
-    z-index: 10001;
-    top: 100%;
-    right: 0;
-    /* left: 0; */
-    overflow: hidden;
-    min-width: 280px;
-    max-width: 320px;
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
-    margin-top: var(--memori-spacing-xs);
-    background: var(--memori-secondary-background);
-    box-shadow: var(--memori-copy-shadow);
-}
-
-/* Responsive positioning */
-@media (max-width: 640px) {
-    .memori-copy-dropdown {
-        right: 0;
-        left: auto;
-        min-width: 260px;
-        max-width: calc(100vw - var(--memori-spacing-xl));
-    }
-}
-
-/* Headless UI Transition Classes */
-.memori-copy-dropdown-enter {
-    transition: all 0.15s ease-out;
-}
-
-.memori-copy-dropdown-enter-from {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.memori-copy-dropdown-enter-to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-
-.memori-copy-dropdown-leave {
-    transition: all 0.1s ease-in;
-}
-
-.memori-copy-dropdown-leave-from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-
-.memori-copy-dropdown-leave-to {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.memori-copy-dropdown-content {
-    padding: var(--memori-spacing-sm) 0;
-}
-
-.memori-copy-dropdown-header {
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md) var(--memori-spacing-xs);
-    border-bottom: 1px solid var(--memori-copy-border);
-    margin-bottom: var(--memori-spacing-xs);
-}
-
-.memori-copy-dropdown-title {
-    color: var(--memori-text-color);
-    font-size: 0.75rem;
-    font-weight: var(--memori-text-weight-semibold);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-}
-
-.memori-copy-dropdown-list {
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.memori-copy-dropdown-empty {
-    padding: var(--memori-spacing-md);
-    text-align: center;
-}
-
-.memori-copy-dropdown-empty-text {
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-}
-
 /* Copy Menu Item */
 .memori-copy-menu-item {
     position: relative;
@@ -426,11 +351,6 @@
 
 /* Responsive Design */
 @media (max-width: 640px) {
-    .memori-copy-dropdown {
-        min-width: 260px;
-        max-width: calc(100vw - var(--memori-spacing-xl));
-    }
-
     .memori-copy-toast {
         right: var(--memori-spacing-md);
         left: var(--memori-spacing-md);
@@ -439,7 +359,9 @@
 
     .memori-copy-button,
     .memori-copy-button--dropdown {
-        padding: calc(var(--memori-spacing-xs) + 2px) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+        height: 38px;
+        min-height: 38px;
+        padding: 8px;
         font-size: 13px;
     }
 
@@ -451,7 +373,6 @@
 /* Print Media Queries */
 @media print {
     .memori-copy-button-wrapper,
-    .memori-copy-dropdown,
     .memori-copy-toast {
         display: none !important;
     }
@@ -463,10 +384,6 @@
         border-width: 2px;
     }
 
-    .memori-copy-dropdown {
-        border-width: 2px;
-    }
-
     .memori-copy-menu-item:hover:not(:disabled) {
         background: var(--memori-copy-surface-pressed);
         color: var(--memori-text-color);
@@ -477,7 +394,6 @@
 @media (prefers-reduced-motion: reduce) {
     .memori-copy-button,
     .memori-copy-menu-item,
-    .memori-copy-dropdown,
     .memori-copy-toast {
         transition: none;
     }
@@ -487,10 +403,6 @@
         animation: none;
     }
 
-    .memori-copy-dropdown {
-        animation: none;
-    }
-
     .memori-copy-toast {
         animation: none;
     }