@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-text-editor.scss

@@ -1,151 +1,105 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-text-editor.scss — Rich text editor wrapper (Tiptap)
-// Aligned with Figma matcha/text-editor:
-//   Toolbar (icon-buttons) + Editor area (Tiptap content) + Footer (word count)
-// Angular: matcha-text-editor
-// =============================================================================
-
 @mixin matcha-text-editor-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  .matcha-text-editor {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    border-color: var(--matcha-color-border, #{getGrey($theme)});
-
-    &:focus-within {
-      border-color: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-  }
-
-  .matcha-text-editor__placeholder {
-    color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)});
-  }
-
-  .matcha-text-editor__content {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-text-editor__word-count {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
-  }
-
-  .matcha-text-editor__toolbar-btn--active {
-    background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-    color: var(--matcha-color-accent, #{getAccent($theme)});
-  }
-
-  // ── ProseMirror color overrides (need $theme) ──
-  .matcha-text-editor__content .ProseMirror {
-    a {
-      color: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    blockquote {
-      border-left-color: var(--matcha-color-accent, #{getAccent($theme)});
+    matcha-text-editor .sun-editor,
+    matcha-text-editor .sun-editor-editable {
+        // ── Backgrounds ──────────────────────────────────────────────────────
+        --se-main-background-color:              #{getBackground($theme)};
+        --se-edit-background-color:              #{getSurface($theme)};
+        --se-edit-background-pre:                #{getBackground($theme)};
+        --se-modal-background-color:             #{getSurface($theme)};
+        --se-controller-background-color:        #{getSurface($theme)};
+        --se-code-view-background-color:         #{getBackground($theme)};
+        --se-code-view-line-background-color:    #{getSurface($theme)};
+        --se-markdown-view-background-color:     #{getBackground($theme)};
+        --se-markdown-view-line-background-color:#{getSurface($theme)};
+        --se-table-picker-color:                 #{getSurface($theme)};
+        --se-doc-background:                     #{getBackground($theme)};
+
+        // ── Text / foreground ─────────────────────────────────────────────
+        --se-main-color:              #{getForeground($theme)};
+        --se-main-font-color:         #{getForeground($theme)};
+        --se-main-color-lighter:      #{getForegroundAlpha($theme)};
+        --se-edit-font-color:         #{getForeground($theme)};
+        --se-edit-font-pre:           #{getForegroundAlpha($theme)};
+        --se-edit-font-quote:         #{getForegroundAlpha($theme)};
+        --se-modal-color:             #{getForeground($theme)};
+        --se-controller-color:        #{getForeground($theme)};
+        --se-dropdown-font-color:     #{getForeground($theme)};
+        --se-statusbar-font-color:    #{getForegroundAlpha($theme)};
+        --se-code-view-color:         #{getForeground($theme)};
+        --se-code-view-line-color:    #{getForegroundAlpha($theme)};
+        --se-markdown-view-color:     #{getForeground($theme)};
+        --se-markdown-view-line-color:#{getForegroundAlpha($theme)};
+        --se-caret-color:             #{getForeground($theme)};
+        --se-placeholder-color:       #{getDisabled($theme)};
+
+        // ── Borders / dividers ────────────────────────────────────────────
+        --se-main-border-color:           #{getDisabled($theme)};
+        --se-main-divider-color:          #{getDisabled($theme)};
+        --se-main-outline-color:          #{getDisabled($theme)};
+        --se-main-out-color:              #{getDisabled($theme)};
+        --se-main-shadow-color:           #{getDisabled($theme)};
+        --se-modal-border-color:          #{getDisabled($theme)};
+        --se-controller-border-color:     #{getDisabled($theme)};
+        --se-input-btn-border-color:      #{getDisabled($theme)};
+        --se-edit-border-light:           #{getDisabled($theme)};
+        --se-edit-border-dark:            #{getDisabled($theme)};
+        --se-edit-border-dark-n1:         #{getDisabled($theme)};
+        --se-edit-border-dark-n2:         #{getDisabled($theme)};
+        --se-edit-border-table:           #{getDisabled($theme)};
+        --se-edit-hr-color:               #{getDisabled($theme)};
+        --se-table-picker-border-color:   #{getDisabled($theme)};
+
+        // ── Active / accent ───────────────────────────────────────────────
+        --se-active-color:           #{getAccent($theme)};
+        --se-active-hover-color:     #{getAccent($theme)};
+        --se-active-dark-color:      #{getAccent($theme)};
+        --se-active-dark2-color:     #{getAccent($theme)};
+        --se-active-dark3-color:     #{getAccent($theme)};
+        --se-active-dark4-color:     #{getAccent($theme)};
+        --se-active-dark5-color:     #{getAccent($theme)};
+        --se-active-light-color:     #{getAccentAlpha($theme)};
+        --se-active-light2-color:    #{getAccentAlpha($theme)};
+        --se-active-light3-color:    #{getAccentAlpha($theme)};
+        --se-active-light4-color:    #{getAccentAlpha($theme)};
+        --se-active-light5-color:    #{getAccentAlpha($theme)};
+        --se-active-light6-color:    #{getAccentAlpha($theme)};
+        --se-edit-active:            #{getAccent($theme)};
+        --se-edit-hover:             #{getAccentAlpha($theme)};
+        --se-edit-hr-on-back:        #{getAccentAlpha($theme)};
+        --se-edit-anchor:            #{getAccent($theme)};
+        --se-edit-anchor-on-back:    #{getAccentAlpha($theme)};
+        --se-edit-anchor-on-font:    #{getAccent($theme)};
+        --se-table-picker-highlight-color:        #{getAccentAlpha($theme)};
+        --se-table-picker-highlight-border-color: #{getAccent($theme)};
+        --se-loading-color:          #{getAccent($theme)};
+        --se-drag-caret-color:       #{getAccent($theme)};
+
+        // ── Modals / overlays ─────────────────────────────────────────────
+        --se-modal-anchor-color:                  #{getAccent($theme)};
+        --se-overlay-background-color:            #{getBackground($theme)};
+        --se-modal-file-input-background-color:   #{getBackground($theme)};
+        --se-modal-input-disabled-background-color: #{getDisabled($theme)};
+        --se-modal-input-disabled-color:          #{getForegroundAlpha($theme)};
+        --se-modal-preview-color:                 #{getForegroundAlpha($theme)};
+
+        // ── Hover states ──────────────────────────────────────────────────
+        --se-hover-color:        #{getForeground($theme)};
+        --se-hover-dark-color:   #{getForegroundAlpha($theme)};
+        --se-hover-dark2-color:  #{getForegroundAlpha($theme)};
+        --se-hover-dark3-color:  #{getForegroundAlpha($theme)};
+        --se-hover-light-color:  #{getDisabled($theme)};
+        --se-hover-light2-color: #{getDisabled($theme)};
+        --se-hover-light3-color: #{getDisabled($theme)};
     }
-  }
 }
 
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-text-editor {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: var(--matcha-border-hairline, 1px) solid transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  overflow: hidden;
-  box-sizing: border-box;
-  transition: border-color var(--matcha-duration-instant, 80ms) linear;
-}
-
-// ── Toolbar ──
-.matcha-text-editor__toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-025, 2px);
-  padding: var(--matcha-space-050, 4px) var(--matcha-space-100, 8px);
-  flex-wrap: wrap;
-}
-
-.matcha-text-editor__toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-025, 2px);
-}
+// ── Estrutura (não depende de tema) ──────────────────────────────────────────
+matcha-text-editor {
+    display: block;
+    width: 100%;
 
-.matcha-text-editor__toolbar-sep {
-  width: 1px;
-  height: var(--matcha-icon-size-md, 24px);
-  margin: 0 var(--matcha-space-050, 4px);
-  opacity: 0.2;
-}
-
-// ── Editor content ──
-.matcha-text-editor__content {
-  flex: 1;
-  min-height: 200px;
-  padding: var(--matcha-space-200, 16px);
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  line-height: var(--matcha-leading-body-md, 20px);
-  outline: none;
-
-  // Tiptap overrides
-  .ProseMirror {
-    outline: none;
-    min-height: inherit;
-
-    p { margin: 0 0 var(--matcha-space-100, 8px); }
-    h1, h2, h3 { font-family: var(--matcha-font-family); font-weight: 700; }
-    ul, ol { padding-left: var(--matcha-space-300, 24px); }
-    a { color: var(--matcha-color-accent); text-decoration: underline; }
-    blockquote {
-      border-left: var(--matcha-border-medium, 4px) solid var(--matcha-color-accent);
-      padding-left: var(--matcha-space-200, 16px);
-      margin-left: 0;
-      opacity: 0.8;
+    .sun-editor {
+        border-radius: 8px;
+        overflow: hidden;
     }
-  }
-}
-
-.matcha-text-editor__placeholder {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-}
-
-// ── Footer ──
-.matcha-text-editor__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
-}
-
-.matcha-text-editor__word-count {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-caption, 11px);
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-  .matcha-text-editor__content {
-    min-height: 160px;
-    padding: var(--matcha-space-150, 12px);
-  }
-
-  .matcha-text-editor__toolbar {
-    padding: var(--matcha-space-050, 4px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-text-editor {
-    transition: none;
-  }
 }