@syncfusion/ej2-fabric-theme 34.2.9 → 35.1.37

package/styles/headless-editor/_bigger.scss

@@ -0,0 +1,138 @@
+@use 'variables' as *;
+@include export-module('headless-editor-bigger') {
+  .e-bigger.e-headless-editor,
+  .e-bigger .e-headless-editor {
+    font-size: $he-font-size-bigger;
+    font-weight: $he-font-weight-bigger;
+    line-height: 1.5;
+
+    blockquote {
+      border-left-width: $he-blockquote-left-width-bigger;
+      padding-left: $he-blockquote-text-padding-bigger;
+      margin: 8px 0;
+    }
+
+    /* Task List */
+    ul[data-type = 'taskList'] {
+      li {
+        > label {
+          padding-top: $he-checklist-padding-top-bigger;
+          padding-right: $he-checklist-padding-right-bigger;
+          input {
+            width: $he-checkbox-width-bigger;
+            height: $he-checkbox-height-bigger;
+          }
+        }
+      }
+    }
+
+    /* collapsible */
+    [data-type = 'collapsible'] {
+      margin: 8px 0;
+      .e-collapsible-body-content {
+        padding-left: calc($he-collapsible-header-gap-bigger + $he-toggle-icon-width-bigger);
+      }
+    }
+    [data-role = 'collapsible-header'] {
+      gap: $he-collapsible-header-gap-bigger;
+
+      /* Collapsible toggle button */
+      .e-toggle-btn {
+        width: $he-toggle-icon-width-bigger;
+        height: $he-toggle-icon-height-bigger;
+
+        svg {
+          width: $he-toggle-icon-width-bigger;
+          height: $he-toggle-icon-height-bigger;
+        }
+      }
+    }
+
+    /* Callout */
+    [data-type = 'callout'] {
+      margin: 8px 0;
+      .e-callout-icon {
+        width: $he-callout-icon-width-bigger;
+        height: $he-callout-icon-height-bigger;
+        padding-top: $he-callout-icon-padding-top-bigger;
+
+        svg {
+          width: $he-callout-icon-width-bigger;
+          height: $he-callout-icon-height-bigger;
+        }
+      }
+    }
+
+    /* Inline code */
+    code {
+      &:not(pre *) {
+        font-size: inherit;
+        line-height: inherit;
+        padding: $he-inline-code-padding-bigger;
+      }
+    }
+
+    /* Code Block Styles */
+    .e-code-block {
+      margin: 8px 0;
+      pre {
+        margin: $he-code-block-bigger-pre-margin;
+        padding-left: $he-code-block-bigger-padding;
+        overflow-x: auto;
+        font-size: $he-font-size-bigger;
+        line-height: $he-line-height-bigger;
+      }
+    }
+
+    /* ======== Divider Blocks Level styles ======== */
+    hr[contenteditable = 'false'] {
+      margin-block: $he-divider-margin-block-bigger;
+    }
+
+    /* ======== Table Block Styles ======== */
+    .tableWrapper {
+      table {
+        th {
+          height: $he-table-heading-height-bigger;
+          padding: $he-table-heading-padding-bigger;
+          font-size: $he-table-heading-font-size-bigger;
+          line-height: $he-table-heading-line-height-bigger;
+        }
+        td {
+          height: $he-table-col-height-bigger;
+          padding: $he-table-col-padding-bigger;
+          font-size: $he-table-col-font-size-bigger;
+          line-height: $he-table-col-line-height-bigger;
+        }
+      }
+    }
+
+    /* ======== RTL Styles ======== */
+    &.e-rtl {
+
+      blockquote {
+        border-left-width: unset;
+        border-right-width: $he-blockquote-left-width-bigger;
+        padding: 0 $he-blockquote-text-padding-bigger 0 0;
+      }
+
+      /* collapsible */
+      [data-type = 'collapsible'] {
+        .e-collapsible-body-content {
+          padding-left: unset;
+          padding-right: calc($he-collapsible-header-gap-bigger + $he-toggle-icon-width-bigger);
+        }
+      }
+
+      /* Task List */
+      ul[data-type = 'taskList'] {
+        li {
+          > label {
+            padding-right: unset;
+            padding-left: $he-checklist-padding-right-bigger;
+          }
+        }
+      }
+    }
+  }
+}

package/styles/headless-editor/_fabric-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: $neutral-white !default;
+$he-color: $theme-light-font !default;
+
+/* ======== Block level syles ======== */
+$he-heading-padding: 5px 0 !default;
+$he-heading-margin: 0 !default;
+$he-block-placeholder-color: $neutral-secondary-alt !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: $neutral-light !default;
+$he-toggle-btn-pressed: $neutral-tertiary-alt !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: $neutral-quintenary !default;
+$he-callout-border-radius: 4px !default;
+$he-callout-icon-gap: 8px !default;
+$he-callout-icon-padding-top: 17px !default;
+$he-callout-icon-height: 16px !default;
+$he-callout-icon-width: 16px !default;
+$he-callout-padding: 11px !default;
+$he-callout-padding-bigger: 16px !default;
+$he-callout-icon-padding-top-bigger: 17px !default;
+$he-callout-icon-height-bigger: 18px !default;
+$he-callout-icon-width-bigger: 18px !default;
+$he-callout-tip-text-color: $theme-light-font !default;
+$he-callout-tip-bg-color: $neutral-lighter !default;
+$he-callout-info-text-color: $msg-info-color-alt1 !default;
+$he-callout-info-bg-color: $msg-info-bg-color !default;
+$he-callout-note-text-color: $theme-primary !default;
+$he-callout-note-bg-color: rgba($theme-primary, .15) !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: $neutral-lighter-alt !default;
+$he-divider-selected-bg-color: $theme-lighter !default;
+$he-divider-border-color: $neutral-light !default;
+
+/* ======== Link syles ======== */
+$he-link-anchor-color: $theme-primary !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: $neutral-light !default;
+$he-inline-code-text-color: $error-font !default;
+
+/* ======== Check Box syles ======== */
+$he-checkbox-width: 18px !default;
+$he-checkbox-height: 18px !default;
+$he-checkbox-border-radius: 0 !default;
+$he-checkbox-border: 1px !default;
+$he-checkbox-width-bigger: 20px !default;
+$he-checkbox-height-bigger: 20px !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: $neutral-secondary-alt !default;
+$he-checklist-marker-checked-bg-color: $theme-primary !default;
+$he-checklist-marker-checked-border-color: $theme-primary !default;
+
+/* ======== Table syles ======== */
+$he-block-table-padding: 12px 0 !default;
+$he-table-block-border: 1px !default;
+$he-table-heading-height: 36px !default;
+$he-table-heading-padding: 7px !default;
+$he-table-heading-font-weight: 400 !default;
+$he-table-heading-font-size: 14px !default;
+$he-table-heading-line-height: 22px !default;
+$he-table-col-height: 36px !default;
+$he-table-col-padding: 0 7px !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: 44px !default;
+$he-table-heading-padding-bigger: 10px !default;
+$he-table-heading-font-size-bigger: 16px !default;
+$he-table-heading-line-height-bigger: 24px !default;
+$he-table-col-height-bigger: 44px !default;
+$he-table-col-padding-bigger: 0 11px !default;
+$he-table-col-font-size-bigger: 16px !default;
+$he-table-col-line-height-bigger: 24px !default;
+$he-table-border-color: $neutral-light !default;
+$he-table-header-row-bg-color: $neutral-lighter-alt !default;
+$he-table-header-color: $neutral-secondary !default;
+$he-table-body-row-bg-color: $neutral-white !default;
+$he-table-body-color: $theme-light-font !default;
+$he-cell-focus-outline: 1px !default;
+$he-table-cell-focus-color: $theme-primary !default;
+$he-table-cell-focus-shadow: unset !default;
+$he-table-add-indicator-bg-color: $theme-primary !default;
+$he-table-add-indicator-color: $theme-primary-font !default;
+$he-table-hover-line-bg-color: $theme-primary !default;
+$he-table-row-hover-bg-color: $neutral-lighter !default;
+$he-table-row-hover-color: $theme-light-font !default;
+$he-table-row-focus-bg-color: $theme-lighter !default;
+$he-table-row-focus-color: $theme-light-font !default;
+$he-table-cell-hover-border: $theme-primary !default;
+$he-table-dot-bg-color: $neutral-dark !default;
+$he-table-gripper-border-radius: 4px !default;
+$he-table-gripper-hover-bg: $theme-lighter !default;
+$he-table-gripper-hover-color: $neutral-light-font !default;
+$he-table-row-selected-bg: $theme-lighter !default;
+$he-table-row-gripper-pressed-bg: $theme-primary !default;
+$he-table-row-gripper-pressed-color: $theme-primary-font !default;
+$he-table-col-selected-bg: $theme-lighter !default;
+$he-table-col-gripper-pressed-bg: $theme-primary !default;
+$he-table-col-gripper-pressed-color: $theme-primary-font !default;
+$he-table-row-col-selected-border: $theme-primary !default;
+$he-table-insert-handle-border: $theme-primary !default;
+$he-table-insert-handle-color: $theme-primary !default;
+$he-table-row-col-hover-line: $theme-primary !default;
+$he-table-row-col-insert-handle-size: 10px !default;
+$he-table-row-col-insert-handle-line-height: 14px !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: 0 !default;
+$he-table-gripper-action-popup-padding: 3px !default;
+$he-table-insert-handle-bg: $neutral-white !default;
+$he-table-popup-icon-color: $theme-light-font !default;
+$he-table-col-gripper-height: 20px !default;
+$he-table-row-gripper-width: 36px !default;
+$he-table-col-gripper-height-bigger: 28px !default;
+$he-table-row-gripper-width-bigger: 46px !default;
+$he-table-col-gripper-top: -4px !default;
+$he-table-row-gripper-left: 14px !default;
+$he-table-col-gripper-top-bigger: -12px !default;
+$he-table-row-gripper-left-bigger: 4px !default;
+$he-table-popup-icon-hover-bg: $neutral-lighter !default;
+$he-table-popup-icon-hover-color: $theme-light-font !default;
+$he-table-popup-icon-pressed-bg: $theme-lighter !default;
+$he-table-popup-icon-pressed-color: $theme-light-font !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: $theme-light !default;
+
+/* ======== Heading syles ======== */
+$he-h1-font-size: 36px !default;
+$he-h1-font-weight: 600 !default;
+$he-h1-line-height: 40px !default;
+$he-h2-font-size: 30px !default;
+$he-h2-font-weight: 600 !default;
+$he-h2-line-height: 36px !default;
+$he-h3-font-size: 24px !default;
+$he-h3-font-weight: 600 !default;
+$he-h3-line-height: 28px !default;
+$he-h4-font-size: 20px !default;
+$he-h4-font-weight: 600 !default;
+$he-h4-line-height: 28px !default;
+$he-h5-font-size: 16px !default;
+$he-h5-font-weight: 600 !default;
+$he-h5-line-height: 24px !default;
+$he-h6-font-size: 14px !default;
+$he-h6-font-weight: 600 !default;
+$he-h6-line-height: 22px !default;
+
+/* ======== Image Styles ======== */
+$he-img-selected-outline-color: $theme-primary !default;
+
+/* ======== Resize handle styles ======== */
+$he-resizable-handle-bg-color: $theme-primary !default;
+$he-resizable-handle-border-color: $neutral-white !default;
+$he-resizable-wrapper-outline-color: $theme-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: $neutral-quintenary !default;
+$he-code-block-container-bg-color: $neutral-lighter-alt !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;