@maildeno/editor 0.1.2 → 0.1.4

package/dist/element-scoped-styles.css

@@ -759,23 +759,32 @@ to {
 }
 }
 
-/* ===== DESIGN SYSTEM TOKENS ===== */
-.desktop-gate[data-v-561a092b] {
-  --brand-primary: #4a7c59;
-  --brand-primary-dark: #3a5a40;
-  --brand-primary-light: #3a5a40;
-  --brand-gradient-start: #4a7c59;
-  --brand-gradient-end: #3a5a40;
-  --gray-50: #f9fafb;
-  --gray-100: #f3f4f6;
-  --gray-200: #e5e7eb;
-  --gray-300: #d1d5db;
-  --gray-400: #9ca3af;
-  --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #1f2937;
-  --gray-900: #111827;
+/* ===== DESIGN SYSTEM TOKENS =====
+ * Each token reads from the shared --md-* custom properties (see theme.ts)
+ * and falls back to this component's original hardcoded value when the
+ * host hasn't set that property. That means an untouched app looks exactly
+ * as before, and a host calling setEditorTheme() re-themes this notice too,
+ * without editing this file again. */
+.desktop-gate[data-v-f2e384b2] {
+  --brand-primary: var(--md-primary, #4a7c59);
+  --brand-primary-dark: var(--md-primary-hover, #3a5a40);
+  --brand-primary-light: var(--md-primary-hover, #3a5a40);
+  --brand-gradient-start: var(--md-primary, #4a7c59);
+  --brand-gradient-end: var(--md-primary-hover, #3a5a40);
+  --gate-surface: var(--md-surface, #ffffff);
+  --gate-backdrop: var(--md-background, #f9fafb);
+  --gate-on-primary: var(--md-on-primary, #ffffff);
+  --gate-warning: var(--md-warning, #f59e0b);
+  --gray-50: var(--md-background, #f9fafb);
+  --gray-100: var(--md-surface-muted, #f3f4f6);
+  --gray-200: var(--md-border, #e5e7eb);
+  --gray-300: var(--md-border-strong, #d1d5db);
+  --gray-400: var(--md-text-subtle, #9ca3af);
+  --gray-500: var(--md-text-subtle, #6b7280);
+  --gray-600: var(--md-text-muted, #4b5563);
+  --gray-700: var(--md-text-muted, #374151);
+  --gray-800: var(--md-text, #1f2937);
+  --gray-900: var(--md-text, #111827);
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg:
@@ -786,35 +795,31 @@ to {
 }
 
 /* ===== MAIN LAYOUT ===== */
-.desktop-gate[data-v-561a092b] {
+.desktop-gate[data-v-f2e384b2] {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.98) 0%,
-    rgba(249, 250, 251, 0.98) 100%
-  );
+  background: color-mix(in srgb, var(--gate-backdrop) 98%, transparent);
   backdrop-filter: blur(2px);
   padding: 1.5rem;
 }
-.gate-container[data-v-561a092b] {
+.gate-container[data-v-f2e384b2] {
   max-width: 520px;
   width: 100%;
-  background: white;
+  background: var(--gate-surface);
   border-radius: 2rem;
   padding: 2.5rem;
   text-align: center;
   box-shadow: var(--shadow-2xl);
-  animation: fadeInUp-561a092b 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: fadeInUp-f2e384b2 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid var(--gray-200);
 }
 
 /* ===== BRAND BADGE ===== */
-.brand-badge[data-v-561a092b] {
+.brand-badge[data-v-f2e384b2] {
   position: relative;
   width: 80px;
   height: 80px;
@@ -823,7 +828,7 @@ to {
   align-items: center;
   justify-content: center;
 }
-.badge-ring[data-v-561a092b] {
+.badge-ring[data-v-f2e384b2] {
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -832,13 +837,13 @@ to {
     var(--brand-gradient-start),
     var(--brand-gradient-end)
   );
-  animation: pulseRing-561a092b 2s ease-out infinite;
+  animation: pulseRing-f2e384b2 2s ease-out infinite;
 }
-.badge-icon[data-v-561a092b] {
+.badge-icon[data-v-f2e384b2] {
   position: relative;
   width: 56px;
   height: 56px;
-  background: white;
+  background: var(--gate-surface);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -847,19 +852,19 @@ to {
   box-shadow: var(--shadow-md);
   transition: transform 0.2s ease;
 }
-.gate-container:hover .badge-icon[data-v-561a092b] {
+.gate-container:hover .badge-icon[data-v-f2e384b2] {
   transform: scale(1.02);
 }
 
 /* ===== TYPOGRAPHY ===== */
-.gate-title[data-v-561a092b] {
+.gate-title[data-v-f2e384b2] {
   font-size: 1.875rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   margin: 0 0 1rem 0;
   color: var(--gray-900);
 }
-.brand-gradient[data-v-561a092b] {
+.brand-gradient[data-v-f2e384b2] {
   background: linear-gradient(
     135deg,
     var(--brand-gradient-start),
@@ -869,7 +874,7 @@ to {
   -webkit-background-clip: text;
   color: transparent;
 }
-.gate-description[data-v-561a092b] {
+.gate-description[data-v-f2e384b2] {
   font-size: 1rem;
   line-height: 1.5;
   color: var(--gray-600);
@@ -877,7 +882,7 @@ to {
 }
 
 /* ===== FEATURE GRID ===== */
-.feature-grid[data-v-561a092b] {
+.feature-grid[data-v-f2e384b2] {
   display: flex;
   justify-content: center;
   gap: 2rem;
@@ -886,7 +891,7 @@ to {
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
 }
-.feature-item[data-v-561a092b] {
+.feature-item[data-v-f2e384b2] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -895,7 +900,7 @@ to {
   font-weight: 500;
   color: var(--gray-700);
 }
-.feature-icon[data-v-561a092b] {
+.feature-icon[data-v-f2e384b2] {
   width: 36px;
   height: 36px;
   background: var(--gray-100);
@@ -906,14 +911,14 @@ to {
   color: var(--brand-primary);
   transition: all 0.2s ease;
 }
-.feature-item:hover .feature-icon[data-v-561a092b] {
+.feature-item:hover .feature-icon[data-v-f2e384b2] {
   background: var(--brand-primary);
-  color: white;
+  color: var(--gate-on-primary);
   transform: translateY(-2px);
 }
 
 /* ===== STATUS ===== */
-.detection-status[data-v-561a092b] {
+.detection-status[data-v-f2e384b2] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -924,16 +929,16 @@ to {
   font-weight: 500;
   color: var(--gray-600);
 }
-.status-dot[data-v-561a092b] {
+.status-dot[data-v-f2e384b2] {
   width: 8px;
   height: 8px;
-  background: #f59e0b;
+  background: var(--gate-warning);
   border-radius: 50%;
-  animation: pulse-561a092b 1.5s ease-out infinite;
+  animation: pulse-f2e384b2 1.5s ease-out infinite;
 }
 
 /* ===== FOOTER ===== */
-.gate-footer[data-v-561a092b] {
+.gate-footer[data-v-f2e384b2] {
   margin-top: 2rem;
   padding-top: 1.5rem;
   display: flex;
@@ -943,7 +948,7 @@ to {
   font-size: 0.75rem;
   color: var(--gray-400);
 }
-.brand-text[data-v-561a092b] {
+.brand-text[data-v-f2e384b2] {
   font-weight: 600;
   background: linear-gradient(
     135deg,
@@ -956,7 +961,7 @@ to {
 }
 
 /* ===== ANIMATIONS ===== */
-@keyframes fadeInUp-561a092b {
+@keyframes fadeInUp-f2e384b2 {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -966,7 +971,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes pulseRing-561a092b {
+@keyframes pulseRing-f2e384b2 {
 0% {
     opacity: 1;
     transform: scale(0.95);
@@ -980,7 +985,7 @@ to {
     transform: scale(1.25);
 }
 }
-@keyframes pulse-561a092b {
+@keyframes pulse-f2e384b2 {
 0%,
   100% {
     opacity: 1;
@@ -992,13 +997,13 @@ to {
 
 /* ===== RESPONSIVE TOUCH-UPS ===== */
 @media (max-width: 480px) {
-.gate-container[data-v-561a092b] {
+.gate-container[data-v-f2e384b2] {
     padding: 2rem 1.5rem;
 }
-.gate-title[data-v-561a092b] {
+.gate-title[data-v-f2e384b2] {
     font-size: 1.5rem;
 }
-.feature-grid[data-v-561a092b] {
+.feature-grid[data-v-f2e384b2] {
     gap: 1.25rem;
 }
 }

package/dist/element.js

@@ -1,2 +1,2 @@
-import { n as registerMaildenoEditorElement, t as MaildenoEditorElement } from "./element-DLJCEP_z.js";
+import { n as registerMaildenoEditorElement, t as MaildenoEditorElement } from "./element-CWjNN0lY.js";
 export { MaildenoEditorElement, registerMaildenoEditorElement };