@qfei-design/make-ai-assistant 0.2.4 → 0.2.5

package/dist/styles.css

@@ -1,20 +1,25 @@
 :where(.make-ai-assistant, .make-ai-artifact) {
-  --make-ai-internal-accent: var(--make-ai-accent, var(--make-color-primary, #5147f3));
-  --make-ai-internal-accent-strong: var(--make-ai-accent-strong, var(--make-color-primary-hover, #4037da));
+  --make-ai-internal-accent: var(--make-ai-theme-primary, var(--make-ai-accent, var(--make-color-primary, #5147f3)));
+  --make-ai-internal-accent-strong: var(--make-ai-theme-primary-hover, var(--make-ai-accent-strong, var(--make-color-primary-hover, color-mix(in srgb, var(--make-ai-internal-accent) 84%, var(--make-ai-internal-text)))));
+  --make-ai-internal-on-accent: var(--make-ai-theme-on-primary, var(--make-ai-on-accent, #fcfcff));
   --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg)));
-  --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #fcfcff));
-  --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f8f8fc));
-  --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f0f6));
-  --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #252631));
-  --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #666979));
-  --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e4e5ed));
+  --make-ai-internal-bg: var(--make-ai-theme-bg, var(--make-ai-bg, var(--make-color-bg, color-mix(in srgb, var(--make-ai-internal-accent) 2%, #fcfcff))));
+  --make-ai-internal-surface: var(--make-ai-theme-surface, var(--make-ai-surface, var(--make-color-bg-subtle, color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-bg)))));
+  --make-ai-internal-surface-strong: var(--make-ai-theme-surface-strong, var(--make-ai-surface-strong, var(--make-color-bg-muted, color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-bg)))));
+  --make-ai-internal-text: var(--make-ai-theme-text, var(--make-ai-text, var(--make-color-text, color-mix(in srgb, var(--make-ai-internal-accent) 12%, #252631))));
+  --make-ai-internal-text-secondary: var(--make-ai-theme-text-secondary, var(--make-ai-text-secondary, var(--make-color-text-secondary, color-mix(in srgb, var(--make-ai-internal-text) 74%, var(--make-ai-internal-accent)))));
+  --make-ai-internal-border: var(--make-ai-theme-border, var(--make-ai-border, var(--make-color-border, color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-bg)))));
   --make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
   --make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
   --make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
   --make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
-  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px rgb(30 31 43 / 12%));
+  --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent));
+  --make-ai-internal-overlay: var(--make-ai-theme-overlay, var(--make-ai-overlay, color-mix(in srgb, var(--make-ai-internal-text) 88%, var(--make-ai-internal-accent))));
+  --make-ai-internal-on-overlay: var(--make-ai-theme-on-overlay, var(--make-ai-on-overlay, #fcfcff));
+  --make-ai-internal-overlay-shadow: color-mix(in srgb, var(--make-ai-internal-accent) 18%, transparent);
+  --make-ai-internal-highlight: color-mix(in srgb, var(--make-ai-internal-bg) 58%, transparent);
   --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 432px);
-  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, #5147f3);
+  --make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, var(--make-ai-internal-accent));
   --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
   --make-ai-internal-font-size-body: var(--make-ai-font-size-body, .75rem);
   --make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .6875rem);
@@ -59,7 +64,7 @@
 .make-ai-assistant__launcher {
   align-items: center;
   background:
-    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 56%), transparent 31%),
+    radial-gradient(circle at 34% 24%, var(--make-ai-internal-highlight), transparent 31%),
     radial-gradient(
       circle at 70% 78%,
       color-mix(in srgb, var(--make-ai-internal-accent) 24%, transparent),
@@ -67,8 +72,8 @@
     ),
     linear-gradient(
       145deg,
-      color-mix(in srgb, var(--make-ai-internal-accent) 68%, #fcfcff),
-      color-mix(in srgb, var(--make-ai-internal-accent) 72%, #bdb8ff)
+      color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-bg)),
+      color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-bg))
     );
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, var(--make-ai-internal-border));
   border-radius: 50%;
@@ -76,8 +81,8 @@
   box-shadow:
     0 12px 26px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent),
     0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent),
-    inset 0 1px 0 rgb(255 255 255 / 58%);
-  color: #fcfcff;
+    inset 0 1px 0 var(--make-ai-internal-highlight);
+  color: var(--make-ai-internal-on-accent);
   cursor: pointer;
   display: flex;
   height: 50px;
@@ -99,7 +104,7 @@
   box-shadow:
     0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 17%, transparent),
     0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
-    inset 0 1px 0 rgb(255 255 255 / 64%);
+    inset 0 1px 0 var(--make-ai-internal-highlight);
   transform: translateY(-50%) scale(1.04);
 }
 
@@ -145,7 +150,7 @@
 }
 
 .make-ai-assistant__launcher-orbit::before {
-  background: color-mix(in srgb, var(--make-ai-internal-accent) 52%, #fcfcff);
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 52%, var(--make-ai-internal-bg));
   border-radius: 50%;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
   content: "";
@@ -327,10 +332,10 @@
 }
 
 .make-ai-assistant__read-only-tag {
-  background: color-mix(in srgb, var(--make-ai-internal-success) 10%, var(--make-ai-internal-bg));
-  border: 1px solid color-mix(in srgb, var(--make-ai-internal-success) 24%, var(--make-ai-internal-border));
+  background: color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg));
+  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 24%, var(--make-ai-internal-border));
   border-radius: 5px;
-  color: color-mix(in srgb, var(--make-ai-internal-success) 82%, var(--make-ai-internal-text));
+  color: color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-text));
   flex: 0 0 auto;
   font-size: .625rem;
   font-weight: 650;
@@ -378,10 +383,10 @@
 }
 
 .make-ai-assistant__header-context-tooltip {
-  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+  background: var(--make-ai-internal-overlay);
   border-radius: 8px;
-  box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
-  color: #fcfcff;
+  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
+  color: var(--make-ai-internal-on-overlay);
   font-size: 11px;
   font-weight: 500;
   line-height: 1.5;
@@ -1004,11 +1009,11 @@
 
 .make-ai-assistant__reply-action[data-tooltip]::after,
 .make-ai-assistant__send[data-tooltip]::after {
-  background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
+  background: var(--make-ai-internal-overlay);
   border-radius: 8px;
   bottom: calc(100% + 7px);
-  box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
-  color: #fcfcff;
+  box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
+  color: var(--make-ai-internal-on-overlay);
   content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 600;
@@ -1056,7 +1061,7 @@
   border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 16%, var(--make-ai-internal-border));
   border-radius: 999px;
   bottom: 94px;
-  box-shadow: 0 10px 24px rgb(30 31 43 / 11%);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--make-ai-internal-accent) 11%, transparent);
   color: color-mix(in srgb, var(--make-ai-internal-accent) 86%, var(--make-ai-internal-text));
   cursor: pointer;
   display: inline-flex;
@@ -1073,7 +1078,7 @@
 .make-ai-assistant__back-to-latest:hover {
   background: var(--make-ai-internal-bg);
   border-color: color-mix(in srgb, var(--make-ai-internal-accent) 30%, var(--make-ai-internal-border));
-  box-shadow: 0 12px 28px rgb(30 31 43 / 13%);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-accent) 13%, transparent);
   transform: translateY(-1px);
 }
 
@@ -1119,7 +1124,7 @@
   background: var(--make-ai-internal-accent);
   border-color: var(--make-ai-internal-accent);
   border-radius: 9px;
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
   font-weight: 650;
   margin-top: 0;
   min-height: 40px;
@@ -1141,7 +1146,7 @@
   background: color-mix(in srgb, var(--make-ai-internal-bg) 94%, var(--make-ai-internal-surface));
   border-top: 1px solid var(--make-ai-internal-border);
   grid-row: 3;
-  box-shadow: 0 -8px 18px rgb(30 31 43 / 3%);
+  box-shadow: 0 -8px 18px color-mix(in srgb, var(--make-ai-internal-accent) 3%, transparent);
   padding: 10px var(--make-ai-internal-panel-gutter) 9px;
 }
 
@@ -1186,7 +1191,7 @@
   border-color: color-mix(in srgb, var(--make-ai-internal-accent) 42%, var(--make-ai-internal-border));
   box-shadow:
     0 0 0 2px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent),
-    0 8px 18px rgb(30 31 43 / 5%);
+    0 8px 18px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent);
 }
 
 .make-ai-assistant__composer textarea {
@@ -1216,7 +1221,7 @@
   background: var(--make-ai-internal-accent);
   border: 0;
   border-radius: 50%;
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
   cursor: pointer;
   display: flex;
   flex: 0 0 auto;
@@ -1352,7 +1357,7 @@
 
 .make-ai-artifact__action--primary {
   background: var(--make-ai-internal-accent);
-  color: #fcfcff;
+  color: var(--make-ai-internal-on-accent);
 }
 
 .make-ai-artifact__action--secondary {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qfei-design/make-ai-assistant",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
   "type": "module",
   "sideEffects": [