@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/form-builder/_theme.scss

@@ -0,0 +1,711 @@
+@use 'variables' as *;
+@use 'mixin' as *;
+
+@include export-module('form-builder-theme') {
+  .e-form-builder {
+
+    .builder-container.e-component {
+      border-color: $fb-container-border-color;
+    }
+
+    .builder-container.e-component .main-header {
+      border-bottom: 1px solid $fb-main-header-border-color;
+    }
+
+    .main-header {
+      background-color: $fb-main-header-bg-color;
+    }
+
+    .main-header .separator {
+      background: $fb-main-header-separator-color;
+    }
+
+    // .contentSection {
+    //   background-color: $fb-color-background;
+    // }
+
+    .left-pane {
+      background-color: $fb-pane-bg-color;
+      border-right: 1px solid $fb-container-border-color;
+    }
+
+    .sidebar-header {
+      background-color: $fb-pane-bg-color;
+      border-bottom: 1px solid $fb-container-border-color;
+    }
+
+    .sidebar-header h3 {
+      color: $fb-heading-text-color;
+    }
+
+    .left-pane .e-accordion {
+      background: $fb-pane-bg-color;
+    }
+
+    .left-pane .e-accordion .e-acrdn-item {
+      border-bottom: none;
+    }
+
+    .left-pane .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
+      background: $fb-pane-bg-color;
+    }
+
+    .palette-item {
+      background-color: $fb-pane-bg-color;
+      border: 1px solid $fb-palette-item-border-color;
+    }
+
+    .palette-item-icon-svg {
+      color: $fb-palette-icon-color;
+    }
+
+    .palette-item-label {
+      color: $fb-palette-item-text-color;
+    }
+    
+    .palette-item-clone {
+      background: $fb-color-surface;
+    }
+
+    // start
+    .palette-item:hover,
+    .palette-item:focus-visible:not(:hover),
+    .template-item:hover,
+    .template-item:focus-visible:not(:hover) {
+      border-color: $fb-toolbox-icons-hover-color;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+    }
+
+    .palette-item:active,
+    .template-item:active {
+      cursor: grabbing;
+      opacity: .7;
+    }
+
+    .palette-item:hover .palette-item-icon-svg,
+    .palette-item:focus-visible:not(:hover) .palette-item-icon-svg {
+      color: $fb-toolbox-icons-hover-color;
+      opacity: 1;
+    }
+    // end
+
+    .left-pane-toggle.e-btn,
+    .right-pane-toggle.e-btn {
+      @if ($theme-name != 'fluent2-highcontrast') {
+        background: $fb-pane-button-bg-color;
+      }
+      border-color: $fb-pane-button-border-color;
+    }
+
+    .left-pane-toggle.e-btn.expanded,
+    .right-pane-toggle.e-btn.expanded {
+      height: $fb-expand-btn-height;
+      width: $fb-expand-btn-width;
+    }
+
+    .listbox-pane-popup {
+      background-color: $fb-color-surface;
+      border: 1px solid $fb-color-line-color;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
+    }
+
+    .listbox-pane-popup .e-listbox-wrapper:not(.e-listbox-container) {
+      overflow: unset;
+    }
+
+    .listbox-pane-popup .e-filter-input {
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .listbox-pane-popup .e-filter-parent {
+      padding: 12px 8px !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .listbox-pane-popup .e-filter-parent .e-filterinput {
+      background-color: $fb-color-background;
+      color: $fb-color-on-surface;
+    }
+
+    .listbox-pane-popup .e-list-group-item {
+      background-color: $fb-color-background;
+    }
+
+    .listbox-pane-popup .e-list-item-content {
+      color: $fb-color-on-surface;
+    }
+
+    .listbox-item-icon {
+      color: $fb-color-on-surface-variant;
+    }
+
+    .listbox-item-label {
+      color: $fb-jsonview-text-color;
+    }
+
+    .listbox-item-with-icon.e-btn:hover {
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+    }
+
+    .main-section {
+      background-color: $fb-color-background;
+    }
+
+    .main-content {
+      background-color: $fb-color-background;
+    }
+
+    .form-preview-area {
+      background: $fb-bg-surface-color;
+    }
+
+    .preview-main-content .form-renderer-container {
+      background-color: $fb-color-background;
+      @if ($theme-name == 'fluent2-highcontrast') {
+        border: 1px solid $fb-container-border-color;
+      }
+    }
+
+    .form-dropzone {
+      border: 2px dashed $fb-container-border-color;
+    }
+
+    .form-preview-area.dragging-over .empty-state .form-dropzone {
+      border: 2px dashed $fb-dragover-border-color;
+      background: $fb-dragover-background-color;
+    }
+
+    .empty-state {
+      background: $fb-color-background;
+      @if ($theme-name == 'fluent2-highcontrast') {
+        border: 1px solid $fb-main-section-border-color;
+      }
+      box-shadow: $fb-shadow-md;
+    }
+
+    .form-components {
+      background: $fb-color-background;
+      @if ($theme-name == 'fluent2-highcontrast') {
+        border: 1px solid $fb-main-section-border-color;
+      }
+    }
+
+    .field-label {
+      color: $fb-jsonview-text-color;
+    }
+
+    .field-description {
+      color: $fb-jsonview-text-color;
+    }
+
+    .field-label .required {
+      color: $fb-field-label-error-color;
+    }
+
+    .split-view-container {
+      background: $fb-bg-surface-color;
+    }
+
+    .split-header {
+      background-color: $fb-color-surface;
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .download-btn {
+      border: 1px solid $fb-dragover-border-color;
+      background-color: $fb-color-surface;
+      color: $fb-color-on-surface;
+    }
+
+    .download-btn:hover {
+      border-color: $fb-dragover-border-color;
+      background-color: $fb-color-background;
+      color: $fb-color-on-surface;
+    }
+
+    .split-panel .json-header {
+      background-color: $fb-jsonview-header-color;
+      border-bottom: 1px solid $fb-jsonview-border-color;
+    }
+
+    .split-panel .json-title {
+      color: $fb-color-on-surface;
+    }
+
+    .json-header {
+      background-color: $fb-color-surface;
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .json-title {
+      color: $fb-color-on-surface;
+    }
+
+    .json-content {
+      color: $fb-jsonview-text-color;
+      background-color: $fb-jsonview-background-color;
+    }
+
+    .e-dropdown-popup ul {
+      background-color: $fb-color-background;
+    }
+
+    .form-panel {
+      border: 1px solid $fb-color-line-color;
+    }
+
+    .panel-legend {
+      color: $fb-jsonview-text-color;
+    }
+
+    .panel-drop-zone,
+    .tab-drop-zone {
+      border: 2px dashed $fb-drop-zone-border-color;
+      background-color: $fb-color-surface;
+    }
+
+    .panel-drop-zone.dragging-over.empty,
+    .tab-drop-zone.dragging-over.empty {
+      border-color: $fb-dragover-border-color;
+      background-color: $fb-dragover-background-color;
+    }
+
+    .drop-zone-text {
+      color: $fb-jsonview-text-color;
+    }
+
+    .form-table {
+      border: none;
+    }
+
+    .table-row {
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .table-cell {
+      border-right: 1px solid $fb-color-line-color;
+    }
+
+    .table-cell.drop-zone {
+      border: 2px dashed $fb-drop-zone-border-color;
+      background-color: $fb-color-surface;
+    }
+
+    .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+      border-color: $fb-dragover-border-color;
+      background-color: $fb-dragover-background-color;
+      border-width: 2px;
+    }
+
+    .table-row:last-child .table-cell.drop-zone {
+      border-bottom: 2px dashed $fb-drop-zone-border-color;
+    }
+
+    .table-row:last-child .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+      border-bottom: 2px dashed $fb-dragover-border-color;
+    }
+
+    .table-cell .nested-field-label {
+      color: $fb-jsonview-text-color;
+    }
+
+    .table-cell .nested-field-label .required {
+      color: $fb-field-label-error-color;
+    }
+
+    .form-field-draggable.is-being-dragged .panel-drop-zone:hover,
+    .form-field-draggable.is-being-dragged .tab-drop-zone:hover,
+    .form-field-draggable.is-being-dragged .table-cell:hover {
+      border-color: $fb-color-on-surface-variant;
+      background-color: transparent;
+    }
+
+    .e-tooltip .e-msg-icon::before {
+      color: $fb-color-on-surface;
+    }
+
+    .dialog-instruction {
+      background-color: $fb-color-surface;
+      border-left-color: $fb-dragover-border-color;
+    }
+
+    .dialog-instruction p {
+      color: $fb-color-on-surface;
+    }
+
+    .dialog-instruction strong {
+      color: $fb-dragover-border-color;
+      font-weight: 600;
+    }
+
+    .json-input {
+      border-color: $fb-color-line-color;
+      background-color: $fb-color-background;
+      color: $fb-color-on-surface;
+    }
+
+    .json-input:focus {
+      border-color: $fb-dragover-border-color;
+      box-shadow: 0 0 0 3px $fb-dragover-border-color;
+    }
+
+    .json-input::placeholder {
+      color: $fb-color-on-surface-variant;
+    }
+
+    .import-dialog-footer .validate-btn {
+      background-color: $fb-color-surface;
+      color: $fb-color-on-surface;
+    }
+
+    .import-dialog-footer .validate-btn:hover:not(:disabled) {
+      background-color: $fb-dragover-border-color;
+      color: $fb-color-background;
+    }
+
+    .split-schema-container label {
+      color: $fb-color-on-surface;
+    }
+
+    .split-schema-container label span {
+      color: $fb-color-on-surface-variant;
+    }
+
+    .options-grid .e-rowcell input[type = 'checkbox'] {
+      accent-color: $fb-dragover-border-color;
+    }
+
+    .options-grid input[type = 'checkbox']:focus {
+      outline-color: $fb-dragover-border-color;
+    }
+
+    .options-actions .e-primary {
+      color: $fb-color-background;
+    }
+
+    .close-btn {
+      color: $fb-right-pane-close-btn-color;
+    }
+
+    .property-tabs .e-tab-header,
+    .left-pane-tabs .e-tab-header {
+      border-bottom: $fb-left-pane-header-border-width solid $fb-color-line-color;
+    }
+
+    .property-label {
+      color: $fb-jsonview-text-color;
+    }
+    
+    @if ($theme-name == 'bootstrap') {
+      .property-label {
+        color: $gray-dark;
+      }
+    }
+
+    .property-label .required {
+      color: $fb-field-label-error-color;
+    }
+
+    .property-description {
+      color: $fb-hint-text-color;
+    }
+
+    .condition-builder-placeholder {
+      border-color: $fb-color-on-surface-variant;
+      background-color: $fb-color-surface;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar-track {
+      background: $fb-color-background;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar-thumb {
+      background: $fb-color-on-surface-variant;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar-thumb:hover {
+      background: $fb-color-on-surface;
+    }
+
+    // .properties-section {
+    //   background: $fb-color-surface;
+    // }
+
+    .preview-section {
+      background: $fb-color-background;
+    }
+
+    // .e-toolbar .e-toolbar-items,
+    // .e-toolbar .e-toolbar-items .e-toolbar-item {
+    //   background: $fb-toolbar-background
+    // }
+
+    .section-header {
+      border-bottom: 1px solid $fb-color-line-color;
+      background: $fb-color-surface;
+      color: $fb-jsonview-text-color;
+    }
+
+    .custom-tab-headers {
+      border-bottom: 1px solid $fb-color-line-color;
+      background-color: $fb-color-surface;
+    }
+
+    .custom-tab-header {
+      color: $fb-color-on-surface-variant;
+    }
+
+    .custom-tab-header:hover {
+      background-color: $fb-dragover-border-color;
+      color: $fb-dragover-border-color;
+    }
+
+    .custom-tab-header.active {
+      color: $fb-dragover-border-color;
+      border-bottom-color: $fb-dragover-border-color;
+      background-color: $fb-dragover-border-color;
+    }
+
+    .custom-tab-content {
+      background-color: $fb-color-background;
+    }
+
+    .right-sidebar {
+      background-color: $fb-right-pane-bg-color;
+      border-left-color: $fb-color-line-color;
+    }
+
+    .e-rtl .right-sidebar {
+      border-right-color: $fb-color-line-color;
+    }
+
+    .dropzone-title {
+      color: $fb-color-on-surface;
+    }
+
+    .dropzone-hint {
+      color: $fb-hint-text-color;
+    }
+
+    .builder-container {
+      color: $fb-jsonview-text-color;
+      background-color: $fb-color-background;
+    }
+
+    .builder-container hr {
+      background-color: $fb-color-line-color;
+    }
+
+    .sidebar-overlay {
+      background-color: $fb-color-scrim;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)),
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:focus-visible:not(:has(.form-field-wrapper:focus-visible)) {
+      border-color: $fb-dragover-border-color;
+      border-radius: 6px;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active {
+      border-color: $fb-dragover-border-color;
+      border-radius: 6px;
+      background-color: $fb-dragover-background-color;
+    }
+
+    .form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)),
+    .form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)),
+    .form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)),
+    .form-preview-area.is-nesteditemreordering:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      border-bottom-color: $fb-dragover-border-color;
+      border-top-color: transparent;
+    }
+
+    .form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)),
+    .form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)),
+    .form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)),
+    .form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      border-top-color: $fb-dragover-border-color;
+      border-bottom-color: transparent;
+    }
+
+    .form-field-clone,
+    .nested-field-clone {
+      color: $fb-jsonview-text-color;
+    }
+
+    .clone-content {
+      color: $fb-jsonview-text-color;
+    }
+
+    .e-dragging {
+      opacity: .5;
+    }
+
+    .form-field-draggable.drag-over-top,
+    .form-field-draggable.drag-over-bottom {
+      border-color: $fb-dragover-border-color;
+    }
+
+    .form-field-wrapper .form-field-draggable.drop-target-before,
+    .form-field-wrapper .form-field-draggable.drop-target-after,
+    .form-field-wrapper .panel-child-field-draggable.drop-target-before,
+    .form-field-wrapper .panel-child-field-draggable.drop-target-after,
+    .form-field-wrapper .tab-child-field-draggable.drop-target-before,
+    .form-field-wrapper .tab-child-field-draggable.drop-target-after,
+    .form-field-wrapper .table-cell-child-draggable.drop-target-before,
+    .form-field-wrapper .table-cell-child-draggable.drop-target-after {
+      border-color: $fb-dragover-border-color;
+    }
+
+    .column-item {
+      border-color: $fb-color-line-color;
+      background: $fb-color-background;
+    }
+
+    .right-sidebar-column {
+      border-left: 1px solid $fb-color-line-color;
+      background-color: $fb-color-background;
+    }
+
+    .column-sidebar-header {
+      background-color: $fb-color-surface;
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .column-sidebar-header h3 {
+      color: $fb-dashboard-heading-color;
+    }
+
+    .column-header {
+      background: $fb-color-surface;
+    }
+
+    .column-header:hover {
+      background: rgba(0, 0, 0, .04);
+    }
+
+    .column-field {
+      color: $fb-color-on-surface;
+    }
+
+    .column-header-text {
+      color: $fb-color-on-surface-variant;
+    }
+
+    .rule-item {
+      border-color: $fb-color-line-color;
+      background: $fb-color-background;
+    }
+
+    .rule-header:hover {
+      background-color: rgba(0, 0, 0, .04);
+    }
+
+    .rule-header:focus-visible,
+    .custom-accordion-header:focus-visible,
+    .add-field-message-wrapper:focus-visible,
+    .palette-item:focus-visible:not(:hover),
+    .tab:focus-visible,
+    .close-btn:focus-visible {
+      border: 2px solid $fb-anchor-highlight-color;
+      outline-offset: 2px;
+      outline: none;
+    }
+
+    .rule-title {
+      color: $fb-jsonview-text-color;
+    }
+
+    .rule-details {
+      background: $fb-color-background;
+    }
+
+    .datagrid-label {
+      color: $fb-color-on-surface;
+    }
+
+    .e-menu-item.e-focused:has(.e-menu-icon.e-icons.e-repeat) {
+      background: $fb-menu-color;
+      border-color: $fb-menu-color;
+    }
+
+    .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon.e-icons.e-repeat
+    {
+      color: $fb-repeat-icon-color;
+    }
+
+    .e-menu-wrapper .e-menu .e-menu-item .e-menu-icon {
+      color: $fb-palette-icon-color;
+    }
+
+    .action-button-wrapper {
+      z-index: 1000;
+    }
+
+    .action-buttons {
+      background: $fb-action-buttons-bg-color;
+    }
+
+    .left-pane-toggle.e-btn.expanded {
+      padding: $fb-expand-left-padding;
+    }
+
+    .right-pane-toggle.e-btn.expanded {
+      padding: $fb-expand-right-padding;
+    }
+
+    .e-formbuilder-toolbar {
+      box-shadow: $fb-bottom-toolbar-box-shadow;
+    }
+
+    .mode-button {
+      @if ($theme-name == 'Material3') {
+        box-shadow: none;
+      }
+    }
+
+    .e-menu-wrapper .e-menu .e-menu-item .e-menu-icon.e-icons.e-repeat {
+      @if ($theme-name == 'tailwind3-dark' or $theme-name == 'tailwind3') {
+        font-size: 12px;
+      }
+    }
+
+    @if ($theme-name == 'fluent2-highcontrast') {
+      .split-panels {
+        border: 1px solid $fb-container-border-color;
+      }
+    }
+
+    @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
+      .left-pane-tabs .e-tab-header {
+        padding-top: 16px;
+      }
+
+      .property-tabs .e-tab-header {
+        padding-top: 12px;
+      }
+    }
+
+    @keyframes field-inserted {
+      0% {
+        border: 2px solid $fb-anchor-highlight-color;
+        background-color: $fb-anchor-highlight-color;
+      }
+      100% {
+        border: 1px solid transparent;
+        background-color: transparent;
+      }
+    }
+
+    .field-inserted {
+      animation: field-inserted 2s ease-out forwards;
+    }
+
+    *,
+    ::after,
+    ::before {
+      box-sizing: border-box;
+    }
+  }
+}

package/styles/form-builder/_variables.scss

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