elseware-ui 3.0.7 → 3.0.9

package/dist/index.css

@@ -2895,6 +2895,9 @@ video {
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -8008,6 +8011,9 @@ video {
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -10593,79 +10599,198 @@ video {
 /* src/compositions/navigation/sidebar/sidebar.css */
 
 /* src/compositions/markdown/adapters/mdx-editor/mdx-adapter.css */
-.eui-markdown-mdx-adapter {
-  --eui-mdx-bg:#fff;
-  --eui-mdx-bg-soft:#f6f8fa;
-  --eui-mdx-bg-muted:#eaeef2;
-  --eui-mdx-border:#d0d7de;
-  --eui-mdx-border-strong:#afb8c1;
-  --eui-mdx-text:#1f2328;
-  --eui-mdx-heading:#1f2328;
-  --eui-mdx-muted:#57606a;
-  --eui-mdx-link:#0969da;
-  --eui-mdx-link-hover:#0550ae;
-  --eui-mdx-code-bg:rgba(175,184,193,.2);
-  --eui-mdx-focus:#3b82f6;
+.eui-markdown-mdx-adapter,
+.eui-markdown-mdx-adapter .eui-markdown-mdx-editor,
+.mdxeditor-popup-container.eui-markdown-mdx-editor {
+  --eui-mdx-surface:#fff;
+  --eui-mdx-surface-soft:#f9fafb;
+  --eui-mdx-surface-muted:#f3f4f6;
+  --eui-mdx-surface-raised:#fff;
+  --eui-mdx-border:#d1d5db;
+  --eui-mdx-border-strong:#9ca3af;
+  --eui-mdx-text:#1f2937;
+  --eui-mdx-heading:#111827;
+  --eui-mdx-muted:#6b7280;
+  --eui-mdx-placeholder:#9ca3af;
+  --eui-mdx-link:#2563eb;
+  --eui-mdx-link-hover:#1d4ed8;
+  --eui-mdx-accent:#0ea5e9;
+  --eui-mdx-accent-soft:#e0f2fe;
+  --eui-mdx-accent-muted:#bae6fd;
+  --eui-mdx-code-bg:#f3f4f6;
+  --eui-mdx-code-text:#111827;
+  --eui-mdx-pre-bg:#111827;
+  --eui-mdx-pre-border:#374151;
+  --eui-mdx-pre-text:#e5e7eb;
+  --eui-mdx-selection:rgba(14,165,233,.18);
+  --eui-mdx-shadow:0 18px 44px rgba(15,23,42,.16);
   --eui-mdx-danger:#dc2626;
-  --basePageBg:var(--eui-mdx-bg);
-  --baseBgSubtle:var(--eui-mdx-bg-soft);
-  --baseBg:var(--eui-mdx-bg-muted);
-  --baseText:var(--eui-mdx-text);
+  --basePageBg:var(--eui-mdx-surface);
+  --baseBase:var(--eui-mdx-surface);
+  --baseBgSubtle:var(--eui-mdx-surface-soft);
+  --baseBg:var(--eui-mdx-surface-muted);
+  --baseBgHover:#e5e7eb;
+  --baseBgActive:#dbeafe;
+  --baseLine:var(--eui-mdx-border);
+  --baseBorder:var(--eui-mdx-border);
+  --baseBorderHover:var(--eui-mdx-border-strong);
+  --baseSolid:#6b7280;
+  --baseSolidHover:#4b5563;
+  --baseText:var(--eui-mdx-muted);
   --baseTextContrast:var(--eui-mdx-heading);
+  --accentBase:#eff6ff;
+  --accentBgSubtle:var(--eui-mdx-accent-soft);
+  --accentBg:var(--eui-mdx-accent-muted);
+  --accentBgHover:#7dd3fc;
+  --accentBgActive:#38bdf8;
+  --accentLine:#7dd3fc;
+  --accentBorder:var(--eui-mdx-accent);
+  --accentBorderHover:#0284c7;
+  --accentSolid:var(--eui-mdx-accent);
+  --accentSolidHover:#0284c7;
+  --accentText:var(--eui-mdx-link);
+  --accentTextContrast:#0c4a6e;
+  --admonitionTipBg:#ecfdf5;
+  --admonitionTipBorder:#10b981;
+  --admonitionInfoBg:#eff6ff;
+  --admonitionInfoBorder:#3b82f6;
+  --admonitionCautionBg:#fffbeb;
+  --admonitionCautionBorder:#f59e0b;
+  --admonitionDangerBg:#fef2f2;
+  --admonitionDangerBorder:var(--eui-mdx-danger);
+  --admonitionNoteBg:var(--eui-mdx-surface-muted);
+  --admonitionNoteBorder:var(--eui-mdx-border-strong);
+  --error-color:var(--eui-mdx-danger);
+  color-scheme: light;
+}
+.dark .eui-markdown-mdx-adapter,
+.dark .eui-markdown-mdx-editor,
+.eui-markdown-mdx-adapter.dark,
+.eui-markdown-mdx-adapter.dark-theme,
+.eui-markdown-mdx-adapter[data-theme=dark],
+.eui-markdown-mdx-editor.dark,
+.eui-markdown-mdx-editor.dark-theme,
+.mdxeditor-popup-container.eui-markdown-mdx-editor.dark,
+.mdxeditor-popup-container.eui-markdown-mdx-editor.dark-theme {
+  --eui-mdx-surface:#121214;
+  --eui-mdx-surface-soft:#1a1a1d;
+  --eui-mdx-surface-muted:#27272a;
+  --eui-mdx-surface-raised:#18181b;
+  --eui-mdx-border:#3f3f46;
+  --eui-mdx-border-strong:#52525b;
+  --eui-mdx-text:#e4e4e7;
+  --eui-mdx-heading:#fafafa;
+  --eui-mdx-muted:#a1a1aa;
+  --eui-mdx-placeholder:#71717a;
+  --eui-mdx-link:#60a5fa;
+  --eui-mdx-link-hover:#93c5fd;
+  --eui-mdx-accent:#22d3ee;
+  --eui-mdx-accent-soft:rgba(8,145,178,.18);
+  --eui-mdx-accent-muted:rgba(34,211,238,.18);
+  --eui-mdx-code-bg:#27272a;
+  --eui-mdx-code-text:#f4f4f5;
+  --eui-mdx-pre-bg:#09090b;
+  --eui-mdx-pre-border:#3f3f46;
+  --eui-mdx-pre-text:#e4e4e7;
+  --eui-mdx-selection:rgba(34,211,238,.22);
+  --eui-mdx-shadow:0 22px 52px rgba(0,0,0,.46);
+  --eui-mdx-danger:#f87171;
+  --basePageBg:var(--eui-mdx-surface);
+  --baseBase:var(--eui-mdx-surface);
+  --baseBgSubtle:var(--eui-mdx-surface-soft);
+  --baseBg:var(--eui-mdx-surface-muted);
+  --baseBgHover:#2f2f34;
+  --baseBgActive:rgba(34,211,238,.14);
+  --baseLine:var(--eui-mdx-border);
   --baseBorder:var(--eui-mdx-border);
+  --baseBorderHover:var(--eui-mdx-border-strong);
+  --baseSolid:#71717a;
+  --baseSolidHover:#a1a1aa;
+  --baseText:var(--eui-mdx-muted);
+  --baseTextContrast:var(--eui-mdx-heading);
+  --accentBase:rgba(8,145,178,.12);
+  --accentBgSubtle:var(--eui-mdx-accent-soft);
+  --accentBg:var(--eui-mdx-accent-muted);
+  --accentBgHover:rgba(34,211,238,.24);
+  --accentBgActive:rgba(34,211,238,.3);
+  --accentLine:rgba(34,211,238,.38);
+  --accentBorder:var(--eui-mdx-accent);
+  --accentBorderHover:#67e8f9;
+  --accentSolid:#0891b2;
+  --accentSolidHover:#0e7490;
   --accentText:var(--eui-mdx-link);
-  --accentBorder:var(--eui-mdx-focus);
-  background: transparent;
+  --accentTextContrast:#cffafe;
+  --admonitionTipBg:rgba(16,185,129,.14);
+  --admonitionTipBorder:#34d399;
+  --admonitionInfoBg:rgba(59,130,246,.14);
+  --admonitionInfoBorder:#60a5fa;
+  --admonitionCautionBg:rgba(245,158,11,.14);
+  --admonitionCautionBorder:#fbbf24;
+  --admonitionDangerBg:hsla(0,91%,71%,.14);
+  --admonitionDangerBorder:var(--eui-mdx-danger);
+  --admonitionNoteBg:var(--eui-mdx-surface-muted);
+  --admonitionNoteBorder:var(--eui-mdx-border-strong);
+  --error-color:var(--eui-mdx-danger);
+  color-scheme: dark;
+}
+.eui-markdown-mdx-adapter {
+  background: var(--eui-mdx-surface);
   border: 1px solid var(--eui-mdx-border);
   border-radius: .5rem;
   color: var(--eui-mdx-text);
   overflow: hidden;
   position: relative;
-  transition: opacity .15s ease;
+  transition:
+    border-color .15s ease,
+    box-shadow .15s ease,
+    opacity .15s ease;
 }
-.dark .eui-markdown-mdx-adapter,
-.eui-markdown-mdx-adapter.dark,
-.eui-markdown-mdx-adapter.dark-theme {
-  --eui-mdx-bg:#030712;
-  --eui-mdx-bg-soft:#111827;
-  --eui-mdx-bg-muted:#1f2937;
-  --eui-mdx-border:#30363d;
-  --eui-mdx-border-strong:#484f58;
-  --eui-mdx-text:#c9d1d9;
-  --eui-mdx-heading:#f0f6fc;
-  --eui-mdx-muted:#8b949e;
-  --eui-mdx-link:#58a6ff;
-  --eui-mdx-link-hover:#79c0ff;
-  --eui-mdx-code-bg:rgba(148,163,184,.16);
-  --eui-mdx-focus:#60a5fa;
-  --eui-mdx-danger:#f87171;
+.eui-markdown-mdx-adapter:focus-within {
+  border-color: var(--eui-mdx-accent);
+  box-shadow: 0 0 0 3px var(--eui-mdx-accent-muted);
 }
 .eui-markdown-mdx-adapter.has-error {
   border-color: var(--eui-mdx-danger);
 }
+.eui-markdown-mdx-adapter.has-error:focus-within {
+  box-shadow: 0 0 0 3px hsla(0, 91%, 71%, .18);
+}
 .eui-markdown-mdx-adapter.is-disabled {
   cursor: not-allowed;
-  opacity: .6;
+  opacity: .62;
 }
 .eui-markdown-mdx-adapter.is-disabled .eui-markdown-mdx-toolbar {
   pointer-events: none;
 }
+.eui-markdown-mdx-adapter.is-disabled .eui-markdown-mdx-content {
+  cursor: not-allowed;
+}
+.eui-markdown-mdx-adapter.is-read-only .eui-markdown-mdx-content {
+  cursor: default;
+}
 .eui-markdown-mdx-adapter .eui-markdown-mdx-editor {
-  background: transparent !important;
+  background: var(--eui-mdx-surface) !important;
   color: var(--eui-mdx-text) !important;
   display: flex;
   flex-direction: column;
   max-height: inherit;
   min-height: inherit;
+  overflow: hidden;
+}
+.eui-markdown-mdx-adapter .mdxeditor-root-contenteditable {
+  background: var(--eui-mdx-surface);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content {
-  background: transparent !important;
+  background: var(--eui-mdx-surface) !important;
   caret-color: var(--eui-mdx-text);
   color: var(--eui-mdx-text) !important;
-  flex: 1 1 auto;
   font-size: .95rem;
   line-height: 1.7;
-  min-height: 12rem;
+  max-height: var(--eui-mdx-max-height,none);
+  min-height: var(--eui-mdx-min-height,12rem);
   outline: none;
   overflow-wrap: anywhere;
   overflow-y: auto;
@@ -10675,13 +10800,40 @@ video {
   -moz-user-select: text;
   user-select: text;
 }
-.eui-markdown-mdx-adapter.is-read-only .eui-markdown-mdx-content {
-  cursor: default;
+.eui-markdown-mdx-adapter .eui-markdown-mdx-content[contenteditable=true]:empty:before {
+  color: var(--eui-mdx-placeholder);
+}
+.eui-markdown-mdx-adapter [class*=_placeholder_].eui-markdown-mdx-content {
+  color: var(--eui-mdx-placeholder) !important;
+  pointer-events: none;
+}
+.eui-markdown-mdx-adapter ::-moz-selection {
+  background: var(--eui-mdx-selection);
+}
+.eui-markdown-mdx-adapter ::selection {
+  background: var(--eui-mdx-selection);
+}
+.eui-markdown-mdx-content::-webkit-scrollbar,
+.eui-markdown-mdx-toolbar::-webkit-scrollbar {
+  height: .625rem;
+  width: .625rem;
+}
+.eui-markdown-mdx-content::-webkit-scrollbar-track,
+.eui-markdown-mdx-toolbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.eui-markdown-mdx-content::-webkit-scrollbar-thumb,
+.eui-markdown-mdx-toolbar::-webkit-scrollbar-thumb {
+  background: var(--eui-mdx-border-strong);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar {
   align-items: center;
-  background: var(--eui-mdx-bg-soft) !important;
+  background: var(--eui-mdx-surface-soft) !important;
   border-bottom: 1px solid var(--eui-mdx-border) !important;
+  border-radius: 0 !important;
   color: var(--eui-mdx-text) !important;
   display: flex;
   flex: 0 0 auto;
@@ -10689,27 +10841,45 @@ video {
   gap: .125rem;
   min-height: 3rem;
   overflow-x: auto;
+  scrollbar-color: var(--eui-mdx-border-strong) transparent;
   scrollbar-width: thin;
   z-index: 2;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [data-radix-collection-item],
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [data-state],
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=button],
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=combobox],
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar button {
+  border-color: transparent !important;
   color: var(--eui-mdx-text) !important;
+  min-height: 2rem;
 }
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [data-state=checked],
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [data-state=on],
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [data-state=open],
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=button]:hover,
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=combobox]:hover,
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar button:hover {
-  background: var(--eui-mdx-bg-muted) !important;
+  background: var(--eui-mdx-surface-muted) !important;
+  color: var(--eui-mdx-heading) !important;
+}
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [aria-disabled=true],
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar button:disabled {
+  color: var(--eui-mdx-placeholder) !important;
+  opacity: .7;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=button]:focus-visible,
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar [role=combobox]:focus-visible,
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar button:focus-visible {
-  outline: 2px solid var(--eui-mdx-focus);
+  outline: 2px solid var(--eui-mdx-accent);
   outline-offset: 1px;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar svg {
   color: currentColor !important;
 }
+.eui-markdown-mdx-adapter .eui-markdown-mdx-toolbar div[role=separator] {
+  border-color: var(--eui-mdx-border) !important;
+}
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content :where(p, li) {
   color: var(--eui-mdx-text);
 }
@@ -10719,17 +10889,16 @@ video {
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content :where(h1, h2, h3, h4, h5, h6) {
   color: var(--eui-mdx-heading);
   font-weight: 700;
+  letter-spacing: 0;
   line-height: 1.25;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content h1 {
-  font-size: 2.25rem;
-  letter-spacing: -.035em;
+  font-size: 2.125rem;
   margin: 0 0 1rem;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content h2 {
   border-bottom: 1px solid var(--eui-mdx-border);
-  font-size: 1.75rem;
-  letter-spacing: -.025em;
+  font-size: 1.625rem;
   margin: 2rem 0 .75rem;
   padding-bottom: .375rem;
 }
@@ -10748,7 +10917,7 @@ video {
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content h6 {
   color: var(--eui-mdx-muted);
   font-size: .875rem;
-  letter-spacing: .06em;
+  letter-spacing: 0;
   margin: 1rem 0 .5rem;
   text-transform: uppercase;
 }
@@ -10776,7 +10945,7 @@ video {
   padding-left: .125rem;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content blockquote {
-  background: var(--eui-mdx-bg-soft);
+  background: var(--eui-mdx-surface-soft);
   border-left: 4px solid var(--eui-mdx-border-strong);
   border-radius: 0 .5rem .5rem 0;
   color: var(--eui-mdx-muted);
@@ -10786,7 +10955,7 @@ video {
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content code {
   background: var(--eui-mdx-code-bg);
   border-radius: .375rem;
-  color: var(--eui-mdx-text);
+  color: var(--eui-mdx-code-text);
   font-family:
     JetBrains Mono,
     Fira Code,
@@ -10799,10 +10968,10 @@ video {
   padding: .125rem .325rem;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content pre {
-  background: #0d1117 !important;
-  border: 1px solid #30363d;
+  background: var(--eui-mdx-pre-bg) !important;
+  border: 1px solid var(--eui-mdx-pre-border);
   border-radius: .625rem;
-  color: #c9d1d9 !important;
+  color: var(--eui-mdx-pre-text) !important;
   margin: 1rem 0;
   overflow: auto;
 }
@@ -10834,16 +11003,168 @@ video {
   text-align: left;
 }
 .eui-markdown-mdx-adapter .eui-markdown-mdx-content th {
-  background: var(--eui-mdx-bg-soft);
+  background: var(--eui-mdx-surface-soft);
   color: var(--eui-mdx-heading);
   font-weight: 700;
 }
-.eui-markdown-mdx-adapter :where([role=menu], [role=listbox]),
-.eui-markdown-mdx-adapter [data-radix-popper-content-wrapper] {
-  background: var(--eui-mdx-bg);
-  border-color: var(--eui-mdx-border);
+.eui-markdown-mdx-adapter .eui-markdown-mdx-content mark {
+  background: var(--eui-mdx-accent-soft);
+  border-radius: .25rem;
+  color: var(--eui-mdx-heading);
+}
+.eui-markdown-mdx-adapter .eui-markdown-mdx-content input[type=checkbox] {
+  accent-color: var(--eui-mdx-accent);
+}
+.eui-markdown-mdx-editor [class*=_codeMirrorWrapper_] {
+  background: var(--eui-mdx-surface-soft);
+  border-color: var(--eui-mdx-border) !important;
+}
+.eui-markdown-mdx-editor [class*=_codeMirrorToolbar_] {
+  background: var(--eui-mdx-surface-muted) !important;
+  border-color: var(--eui-mdx-border) !important;
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor .cm-editor {
+  background: var(--eui-mdx-pre-bg) !important;
+  color: var(--eui-mdx-pre-text) !important;
+}
+.eui-markdown-mdx-editor .cm-scroller {
+  color: inherit;
+  font-family:
+    JetBrains Mono,
+    Fira Code,
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
+}
+.eui-markdown-mdx-editor .cm-gutters {
+  background: var(--eui-mdx-pre-bg) !important;
+  border-color: var(--eui-mdx-pre-border) !important;
+  color: var(--eui-mdx-muted) !important;
+}
+.eui-markdown-mdx-editor .cm-activeLine,
+.eui-markdown-mdx-editor .cm-activeLineGutter {
+  background: rgba(148, 163, 184, .12) !important;
+}
+.eui-markdown-mdx-editor .cm-content ::-moz-selection {
+  background: var(--eui-mdx-selection) !important;
+}
+.eui-markdown-mdx-editor .cm-content ::selection,
+.eui-markdown-mdx-editor .cm-selectionBackground {
+  background: var(--eui-mdx-selection) !important;
+}
+.eui-markdown-mdx-editor .cm-focused {
+  outline: 2px solid var(--eui-mdx-accent);
+  outline-offset: -2px;
+}
+.eui-markdown-mdx-editor .cm-tooltip,
+.eui-markdown-mdx-editor .cm-tooltip-autocomplete {
+  background: var(--eui-mdx-surface-raised) !important;
+  border-color: var(--eui-mdx-border) !important;
+  box-shadow: var(--eui-mdx-shadow);
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor [class*=_frontmatterWrapper_],
+.eui-markdown-mdx-editor [class*=_genericComponentInnerEditor_],
+.eui-markdown-mdx-editor [class*=_nestedEditor_] {
+  background: var(--eui-mdx-surface-soft) !important;
+  border: 1px solid var(--eui-mdx-border);
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor [class*=_genericComponentInnerEditor_]:focus,
+.eui-markdown-mdx-editor [class*=_nestedEditor_]:focus {
+  outline: 2px solid var(--eui-mdx-accent);
+  outline-offset: 1px;
+}
+.eui-markdown-mdx-editor [class*=_frontmatterToggleButton_],
+.eui-markdown-mdx-editor [class*=_genericComponentName_] {
+  color: var(--eui-mdx-muted) !important;
+}
+.eui-markdown-mdx-editor [class*=_dialogTitle_],
+.eui-markdown-mdx-editor [class*=_propertyPanelTitle_] {
+  color: var(--eui-mdx-heading) !important;
+}
+.eui-markdown-mdx-editor :where([role=dialog], [role=menu], [role=listbox]),
+.eui-markdown-mdx-editor [class*=_dialogContent_],
+.eui-markdown-mdx-editor [class*=_largeDialogContent_],
+.eui-markdown-mdx-editor [class*=_linkDialogPopoverContent_],
+.eui-markdown-mdx-editor [class*=_popoverContent_],
+.eui-markdown-mdx-editor [class*=_selectContainer_],
+.eui-markdown-mdx-editor [class*=_tableColumnEditorPopoverContent_],
+.eui-markdown-mdx-editor [data-radix-popper-content-wrapper] > * {
+  background: var(--eui-mdx-surface-raised) !important;
+  border-color: var(--eui-mdx-border) !important;
+  box-shadow: var(--eui-mdx-shadow);
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor [class*=_dialogOverlay_] {
+  background: rgba(0, 0, 0, .48) !important;
+}
+.eui-markdown-mdx-editor [class*=_popoverArrow_] {
+  fill: var(--eui-mdx-surface-raised) !important;
+}
+.eui-markdown-mdx-editor [class*=_selectTrigger_],
+.eui-markdown-mdx-editor [class*=_toolbarButtonSelectTrigger_],
+.eui-markdown-mdx-editor [class*=_toolbarNodeKindSelectTrigger_] {
+  background: var(--eui-mdx-surface) !important;
+  border: 1px solid var(--eui-mdx-border) !important;
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor [class*=_selectItem_],
+.eui-markdown-mdx-editor [class*=_toolbarNodeKindSelectItem_],
+.eui-markdown-mdx-editor [role=menuitem],
+.eui-markdown-mdx-editor [role=option] {
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor [class*=_selectItem_][data-highlighted],
+.eui-markdown-mdx-editor [class*=_toolbarNodeKindSelectItem_][data-highlighted],
+.eui-markdown-mdx-editor [role=menuitem]:hover,
+.eui-markdown-mdx-editor [role=menuitem][data-highlighted],
+.eui-markdown-mdx-editor [role=option]:hover,
+.eui-markdown-mdx-editor [role=option][data-highlighted] {
+  background: var(--eui-mdx-surface-muted) !important;
+  color: var(--eui-mdx-heading) !important;
+}
+.eui-markdown-mdx-editor [class*=_selectItem_][data-state=checked],
+.eui-markdown-mdx-editor [class*=_toolbarNodeKindSelectItem_][data-state=checked],
+.eui-markdown-mdx-editor [role=option][data-state=checked] {
+  background: var(--eui-mdx-accent-soft) !important;
+  color: var(--eui-mdx-heading) !important;
+}
+.eui-markdown-mdx-editor input,
+.eui-markdown-mdx-editor textarea {
+  background: var(--eui-mdx-surface) !important;
+  border-color: var(--eui-mdx-border) !important;
+  color: var(--eui-mdx-text) !important;
+}
+.eui-markdown-mdx-editor input::-moz-placeholder,
+.eui-markdown-mdx-editor textarea::-moz-placeholder {
+  color: var(--eui-mdx-placeholder) !important;
+}
+.eui-markdown-mdx-editor input::placeholder,
+.eui-markdown-mdx-editor textarea::placeholder {
+  color: var(--eui-mdx-placeholder) !important;
+}
+.eui-markdown-mdx-editor input:focus,
+.eui-markdown-mdx-editor textarea:focus {
+  border-color: var(--eui-mdx-accent) !important;
+  outline: 2px solid var(--eui-mdx-accent-muted) !important;
+  outline-offset: 0;
+}
+.eui-markdown-mdx-editor button {
   color: var(--eui-mdx-text);
 }
+.eui-markdown-mdx-editor button:hover {
+  color: var(--eui-mdx-heading);
+}
+.eui-markdown-mdx-editor [class*=_primaryButton_],
+.eui-markdown-mdx-editor [data-variant=primary] {
+  background: var(--eui-mdx-accent) !important;
+  border-color: var(--eui-mdx-accent) !important;
+  color: var(--eui-mdx-surface) !important;
+}
 @media (max-width: 640px) {
   .eui-markdown-mdx-adapter .eui-markdown-mdx-content {
     padding: 1rem;