@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/headless-editor/_theme.scss

@@ -0,0 +1,260 @@
+@use 'variables' as *;
+@include export-module('headless-editor-theme') {
+
+  /* ======== Main Editor ======== */
+  .e-headless-editor {
+    background: $he-bg-color;
+    color: $he-color;
+
+    > :first-child {
+      &::selection {
+        background: $he-text-selection-bg-color;
+      }
+    }
+
+    /* Task List */
+    ul[data-type = 'taskList'] {
+      li {
+        > label {
+          input {
+            &:checked {
+              accent-color: $he-checklist-marker-checked-bg-color;
+            }
+          }
+        }
+      }
+    }
+
+    [data-role = 'collapsible-header'] {
+      display: flex;
+      align-items: center;
+      gap: $he-collapsible-header-gap;
+
+      /* Collapsible toggle button */
+      .e-toggle-btn {
+        border: none;
+        background: none;
+        color: none;
+        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
+
+        &:focus-visible {
+          outline: none;
+        }
+        &:hover {
+          background: $he-toggle-btn-hover;
+        }
+        &:active {
+          background: $he-toggle-btn-pressed;
+        }
+      }
+    }
+
+    blockquote {
+      border-left-color: $he-blockquote-border-color;
+    }
+
+    /* Callout */
+    [data-type = 'callout'] {
+      &[data-variant = 'tip'] {
+        color: $he-callout-tip-text-color;
+        background-color: $he-callout-tip-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(26, 26, 26, 1);
+        }
+        svg path {
+          fill: $he-callout-tip-text-color;
+        }
+      }
+
+      &[data-variant = 'note'] {
+        color: $he-callout-note-text-color;
+        background-color: $he-callout-note-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(255, 217, 57, 1);
+        }
+        svg path {
+          fill: $he-callout-note-text-color;
+        }
+      }
+
+      &[data-variant = 'info'] {
+        color: $he-callout-info-text-color;
+        background-color: $he-callout-info-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(34, 248, 255, 1);
+        }
+        svg path {
+          fill: $he-callout-info-text-color;
+        }
+      }
+
+      &[data-variant = 'warning'] {
+        color: $he-callout-warning-text-color;
+        background-color: $he-callout-warning-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(255, 91, 4, 1);
+        }
+        svg path {
+          fill: $he-callout-warning-text-color;
+        }
+      }
+
+      &[data-variant = 'error'] {
+        color: $he-callout-error-text-color;
+        background-color: $he-callout-error-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(253, 1, 0, 1);
+        }
+        svg path {
+          fill: $he-callout-error-text-color;
+        }
+      }
+
+      &[data-variant = 'success'] {
+        color: $he-callout-success-text-color;
+        background-color: $he-callout-success-bg-color;
+        @if $theme-name == 'highcontrast' {
+          border: 1px solid rgba(117, 249, 76, 1);
+        }
+        svg path {
+          fill: $he-callout-success-text-color;
+        }
+      }
+    }
+
+    a {
+      color: $he-link-anchor-color;
+    }
+
+    /* Inline code */
+    code {
+      &:not(pre *) {
+        background: $he-inline-code-bg-color;
+        color: $he-inline-code-text-color;
+      }
+    }
+
+    /* ======== Code Block Styles ======== */
+    .e-code-block {
+      background: $he-code-block-container-bg-color;
+      border: $he-code-block-container-border-width solid $he-code-block-container-border-color;
+
+      pre {
+        background-color: $he-code-block-container-bg-color;
+        color: $he-color;
+        code {
+          background: transparent;
+        }
+      }
+    }
+
+    /* ======== Divider Blocks Level styles ======== */
+    hr[contenteditable = 'false'] {
+      border: $he-divider-border solid $he-divider-border-color;
+      &:hover {
+        outline: 7px solid $he-divider-hover-bg-color;
+      }
+      &.ProseMirror-selectednode {
+        outline: 7px solid $he-divider-selected-bg-color;
+      }
+    }
+
+    /* ======== Table Block Styles ======== */
+    .tableWrapper {
+      th,
+      td {
+        border: $he-table-block-border solid $he-table-border-color;
+      }
+      th {
+        background: $he-table-header-row-bg-color;
+        color: $he-table-header-color;
+      }
+      tr:has(th) {
+        background: $he-table-header-row-bg-color;
+        color: $he-table-header-color;
+      }
+      tr:has(td) {
+        background: $he-table-body-row-bg-color;
+        color: $he-table-body-color;
+      }
+      tr:hover:not(:has(> th.column-resize-dragging, > td.column-resize-dragging)) {
+        background: $he-table-row-hover-bg-color;
+        color: $he-table-row-hover-color;
+        .selectedCell {
+          @if $theme-name == 'fluent2-highcontrast'{
+            border-color: rgba(255, 255, 255, 1);
+          }
+        }
+      }
+      tr:has(.selectedCell) {
+        color: $he-table-row-focus-color;
+        @if $theme-name == 'fluent2-highcontrast' {
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+      .selectedCell {
+        border: $he-cell-focus-outline double $he-table-cell-focus-color;
+        background-color: $he-table-col-selected-bg;
+        @if $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' {
+          border-color: rgba(255, 255, 255, 1);
+        }
+      }
+
+      /* table row selection */
+      tr:not(:has(> th:not(.selectedCell), > td:not(.selectedCell))) {
+        background-color: $he-table-col-selected-bg;
+      }
+
+      /* border style for row selection */
+      tr.e-row-selected td {
+        border: 1px double $he-table-row-col-selected-border;
+        @if $theme-name == 'fluent2-highcontrast' {
+          border-color: rgba(255, 255, 255, 1);
+        }
+        box-shadow: unset;
+      }
+
+      .column-resize-handle {
+        background-color: $he-table-row-col-hover-line;
+      }
+    }
+
+    /* ======== Placeholder Styles ======== */
+    .e-placeholder-is-empty::before {
+      color: $he-block-placeholder-color;
+    }
+
+    /* Resizable NodeView */
+    .e-resizable-wrapper {
+      .e-resizable-handle {
+        background: $he-resizable-handle-bg-color;
+        border: 1px solid $he-resizable-handle-border-color;
+      }
+
+      /* Selection ring — tight around the image, only visible when node is selected */
+      &.is-selected > img {
+        outline: 2px solid $he-resizable-wrapper-outline-color;
+      }
+    }
+    
+    /* Prosemirror dynamic styles */
+    .ProseMirror-hideselection *::selection {
+      background: transparent;
+    }
+    .ProseMirror-hideselection {
+      caret-color: transparent;
+    }
+    .ProseMirror-selectednode {
+      outline: 3px solid $he-divider-selected-bg-color;
+    }
+
+    /* ======== RTL Styles ======== */
+    &.e-rtl {
+
+      blockquote {
+        border-left-color: unset;
+        border-right-color: $he-blockquote-border-color;
+      }
+    }
+  }
+}

package/styles/headless-editor/_variables.scss

@@ -0,0 +1,2 @@
+@forward '../base/common/_base-variables.scss';
+@forward './_fabric-definition';