@syncfusion/ej2-material-theme 34.2.8 → 35.1.37

package/styles/headless-editor/_material-definition.scss

@@ -0,0 +1,217 @@
+@use '../base/common/base-variables' as *;
+
+/* ======== Headless Editor Styles ======== */
+$he-font-family: $font-family !default;
+$he-font-size: 14px !default;
+$he-font-weight: 400 !default;
+$he-line-height: 22px !default;
+$he-font-size-bigger: 16px !default;
+$he-font-weight-bigger: 400 !default;
+$he-line-height-bigger: 24px !default;
+$he-bg-color: $grey-white !default;
+$he-color: rgba($grey-black, .87) !default;
+
+/* ======== Block level syles ======== */
+$he-heading-padding: 5px 0 !default;
+$he-heading-margin: 0 !default;
+$he-block-placeholder-color: rgba($grey-light-font, .54) !default;
+
+/* ======== Collapsible Styles ======== */
+$he-toggle-icon-height: 15px !default;
+$he-toggle-icon-width: 15px !default;
+$he-toggle-icon-height-bigger: 16px !default;
+$he-toggle-icon-width-bigger: 16px !default;
+$he-collapsible-header-gap: 8px !default;
+$he-collapsible-header-gap-bigger: 12px !default;
+$he-toggle-btn-hover: rgba(224, 224, 224, 1) !default;
+$he-toggle-btn-pressed: rgba(224, 224, 224, 1) !default;
+
+/* ======== Quote and Callout Block ======== */
+$he-blockquote-left-width: 3px !default;
+$he-blockquote-text-padding: 8px !default;
+$he-blockquote-margin: 8px 0 !default;
+$he-blockquote-left-width-bigger: 3px !default;
+$he-blockquote-text-padding-bigger: 8px !default;
+$he-blockquote-border-color: $grey-400 !default;
+$he-callout-border-radius: 4px !default;
+$he-callout-icon-gap: 8px !default;
+$he-callout-icon-padding-top: 13px !default;
+$he-callout-icon-height: 16px !default;
+$he-callout-icon-width: 16px !default;
+$he-callout-padding: 12px !default;
+$he-callout-padding-bigger: 16px !default;
+$he-callout-icon-padding-top-bigger: 14px !default;
+$he-callout-icon-height-bigger: 18px !default;
+$he-callout-icon-width-bigger: 18px !default;
+$he-callout-tip-text-color: rgba($grey-black, .87) !default;
+$he-callout-tip-bg-color: $grey-100 !default;
+$he-callout-info-text-color: $msg-info-color-alt1 !default;
+$he-callout-info-bg-color: rgba(220, 239, 254, 1) !default;
+$he-callout-note-text-color: $primary !default;
+$he-callout-note-bg-color: rgba($primary, .12) !default;
+$he-callout-warning-text-color: $msg-warning-color-alt1 !default;
+$he-callout-warning-bg-color: $msg-warning-bg-color !default;
+$he-callout-error-text-color: $msg-danger-color-alt1 !default;
+$he-callout-error-bg-color: $msg-danger-bg-color !default;
+$he-callout-success-text-color: $msg-success-color-alt1 !default;
+$he-callout-success-bg-color: $msg-success-bg-color !default;
+
+/* ======== Divider Block ======== */
+$he-divider-border: 2px !default;
+$he-divider-margin-block: 14px !default;
+$he-divider-margin-block-bigger: 14px !default;
+$he-divider-hover-bg-color: $grey-200 !default;
+$he-divider-selected-bg-color: $primary-100 !default;
+$he-divider-border-color: $grey-400 !default;
+
+/* ======== Link syles ======== */
+$he-link-anchor-color: rgb(0, 120, 212) !default;
+
+/* ======== Inline content syles ======== */
+$he-inline-code-font-size: 12px !default;
+$he-inline-code-font-weight: 400 !default;
+$he-inline-code-line-height: 18px !default;
+$he-inline-code-padding: 2px 4px !default;
+$he-inline-code-border-radius: 2px !default;
+$he-inline-code-font-size-bigger: 14px !default;
+$he-inline-code-line-height-bigger: 22px !default;
+$he-inline-code-padding-bigger: 1px 4px !default;
+$he-inline-code-bg-color: $grey-100 !default;
+$he-inline-code-text-color: rgba(214, 65, 19, 1) !default;
+
+/* ======== Check Box syles ======== */
+$he-checkbox-width: 14px !default;
+$he-checkbox-height: 14px !default;
+$he-checkbox-border-radius: 2px !default;
+$he-checkbox-border: 1px !default;
+$he-checkbox-width-bigger: 16px !default;
+$he-checkbox-height-bigger: 16px !default;
+$he-checkbox-border-bigger: 1px !default;
+$he-checklist-padding-top: 5px !default;
+$he-checklist-padding-right: 8px !default;
+$he-checklist-padding-top-bigger: 6px !default;
+$he-checklist-padding-right-bigger: 8px !default;
+$he-checklist-marker-border-color: $grey-600 !default;
+$he-checklist-marker-checked-bg-color: $accent !default;
+$he-checklist-marker-checked-border-color: $accent !default;
+
+/* ======== Table syles ======== */
+$he-block-table-padding: 12px 0 !default;
+$he-table-block-border: 1px !default;
+$he-table-heading-height: 38px !default;
+$he-table-heading-padding: 10px !default;
+$he-table-heading-font-weight: 500 !default;
+$he-table-heading-font-size: 12px !default;
+$he-table-heading-line-height: 18px !default;
+$he-table-col-height: 38px !default;
+$he-table-col-padding: 0 8px !default;
+$he-table-col-font-weight: 400 !default;
+$he-table-col-font-size: 14px !default;
+$he-table-col-line-height: 22px !default;
+$he-table-heading-height-bigger: 56px !default;
+$he-table-heading-padding-bigger: 19px !default;
+$he-table-heading-font-size-bigger: 12px !default;
+$he-table-heading-line-height-bigger: 18px !default;
+$he-table-col-height-bigger: 50px !default;
+$he-table-col-padding-bigger: 0 14px !default;
+$he-table-col-font-size-bigger: 14px !default;
+$he-table-col-line-height-bigger: 22px !default;
+$he-table-border-color: $grey-300 !default;
+$he-table-header-row-bg-color: $grey-100 !default;
+$he-table-header-color: rgba($grey-light-font, .87) !default;
+$he-table-body-row-bg-color: $grey-white !default;
+$he-table-body-color: rgba($grey-light-font, .87) !default;
+$he-cell-focus-outline: 1px !default;
+$he-table-cell-focus-color: $primary !default;
+$he-table-cell-focus-shadow: unset !default;
+$he-table-add-indicator-bg-color: $primary !default;
+$he-table-add-indicator-color: $primary-font !default;
+$he-table-hover-line-bg-color: $primary !default;
+$he-table-row-hover-bg-color: $grey-100 !default;
+$he-table-row-hover-color: rgba($grey-light-font, .87) !default;
+$he-table-row-focus-bg-color: $grey-300 !default;
+$he-table-row-focus-color: rgba($grey-light-font, .87) !default;
+$he-table-cell-hover-border: $primary !default;
+$he-table-dot-bg-color: $grey-600 !default;
+$he-table-gripper-border-radius: 4px !default;
+$he-table-gripper-hover-bg: $primary-100 !default;
+$he-table-gripper-hover-color: $primary !default;
+$he-table-row-selected-bg: $grey-300 !default;
+$he-table-row-gripper-pressed-bg: $primary !default;
+$he-table-row-gripper-pressed-color: $primary-font !default;
+$he-table-col-selected-bg: $grey-300 !default;
+$he-table-col-gripper-pressed-bg: $primary !default;
+$he-table-col-gripper-pressed-color: $primary-font !default;
+$he-table-row-col-selected-border: $primary !default;
+$he-table-insert-handle-border: $primary !default;
+$he-table-insert-handle-color: $primary !default;
+$he-table-row-col-hover-line: $primary !default;
+$he-table-row-col-insert-handle-size: 10px !default;
+$he-table-row-col-insert-handle-line-height: 11px !default;
+$he-table-row-col-action-handle-size-bigger: 16px !default;
+$he-table-action-handle-line-height-bigger: 100% !default;
+$he-table-icons-border-radius: 50% !default;
+$he-table-gripper-action-popup-border-radius: 6px !default;
+$he-table-gripper-action-popup-padding: 3px !default;
+$he-table-insert-handle-bg: $grey-white !default;
+$he-table-popup-icon-color: rgba($grey-light-font, .54) !default;
+$he-table-col-gripper-height: 20px !default;
+$he-table-row-gripper-width: 20px !default;
+$he-table-col-gripper-height-bigger: 28px !default;
+$he-table-row-gripper-width-bigger: 28px !default;
+$he-table-col-gripper-top: -4px !default;
+$he-table-row-gripper-left: 30px !default;
+$he-table-col-gripper-top-bigger: -12px !default;
+$he-table-row-gripper-left-bigger: 22px !default;
+$he-table-popup-icon-hover-bg: $grey-300 !default;
+$he-table-popup-icon-hover-color: rgba($grey-light-font, .54) !default;
+$he-table-popup-icon-pressed-bg: $grey-400 !default;
+$he-table-popup-icon-pressed-color: rgba($grey-light-font, .54) !default;
+$he-table-popup-icon-size: 16px !default;
+$he-table-popup-icon-size-bigger: 18px !default;
+$he-table-popup-icon-padding: 8px !default;
+$he-table-popup-icon-padding-bigger: 11px !default;
+
+/* ======== Selection syles ======== */
+$he-text-selection-bg-color: $primary-100 !default;
+
+/* ======== Heading syles ======== */
+$he-h1-font-size: 36px !default;
+$he-h1-font-weight: 500 !default;
+$he-h1-line-height: 40px !default;
+$he-h2-font-size: 30px !default;
+$he-h2-font-weight: 500 !default;
+$he-h2-line-height: 36px !default;
+$he-h3-font-size: 24px !default;
+$he-h3-font-weight: 500 !default;
+$he-h3-line-height: 28px !default;
+$he-h4-font-size: 20px !default;
+$he-h4-font-weight: 500 !default;
+$he-h4-line-height: 28px !default;
+$he-h5-font-size: 16px !default;
+$he-h5-font-weight: 500 !default;
+$he-h5-line-height: 24px !default;
+$he-h6-font-size: 14px !default;
+$he-h6-font-weight: 500 !default;
+$he-h6-line-height: 22px !default;
+
+/* ======== Image Styles ======== */
+$he-img-selected-outline-color: $primary !default;
+
+/* ======== Resize handle styles ======== */
+$he-resizable-handle-bg-color: $primary !default;
+$he-resizable-handle-border-color: $grey-white !default;
+$he-resizable-wrapper-outline-color: $primary !default;
+
+/* ======== Code Block Styles ======== */
+$he-code-block-border-radius: 6px !default;
+$he-code-block-container-border-width: 1px !default;
+$he-code-block-container-border-color: $grey-300 !default;
+$he-code-block-container-bg-color: $grey-50 !default;
+$he-code-block-pre-margin: 0 !default;
+$he-code-block-padding: 10px 24px !default;
+$he-code-block-pre-border: 0 !default;
+$he-code-block-pre-radius: 0 !default;
+$he-code-block-bigger-pre-margin: 0 !default;
+$he-code-block-bigger-padding: 24px !default;
+$he-code-block-font-family: 'Roboto Mono', monospace !default;

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 './_material-definition';