@syncfusion/ej2-react-form-renderer 0.1.0-beta

package/styles/bootstrap5.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap5.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap5.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap5.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap5.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap5.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap5.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap5.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap5.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap5.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap5.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap5.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap5.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap5.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --sf-text-color: #212529;
+  --sf-tooltip-text-color: #6c757d;
+  --sf-layout-border-color: #dee2e6;
+}

package/styles/fluent-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/fluent-dark.css';
+@import '@syncfusion/ej2-buttons/styles/fluent-dark.css';
+@import '@syncfusion/ej2-inputs/styles/fluent-dark.css';
+@import '@syncfusion/ej2-dropdowns/styles/fluent-dark.css';
+@import '@syncfusion/ej2-calendars/styles/fluent-dark.css';
+@import '@syncfusion/ej2-react-calendars/styles/fluent-dark.css';
+@import '@syncfusion/ej2-navigations/styles/fluent-dark.css';
+@import '@syncfusion/ej2-notifications/styles/fluent-dark.css';
+@import '@syncfusion/ej2-popups/styles/fluent-dark.css';
+@import '@syncfusion/ej2-lists/styles/fluent-dark.css';
+@import '@syncfusion/ej2-splitbuttons/styles/fluent-dark.css';
+@import "@syncfusion/ej2-react-popups/styles/fluent-dark.css";
+@import "@syncfusion/ej2-react-grids/styles/fluent-dark.css";
+@import "@syncfusion/ej2-splitbuttons/styles/fluent-dark.css";
+@import "@syncfusion/ej2-image-editor/styles/fluent-dark.css";
+@import "@syncfusion/ej2-layouts/styles/fluent-dark.css";
+@import '@syncfusion/ej2-richtexteditor/styles/fluent-dark.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #1b1a19;
+  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  --sf-text-color: #f3f2f1;
+  --sf-tooltip-text-color: #a19f9d;
+  --sf-layout-border-color: #292827;
+}

package/styles/fluent.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/fluent.css';
+@import '@syncfusion/ej2-buttons/styles/fluent.css';
+@import '@syncfusion/ej2-inputs/styles/fluent.css';
+@import '@syncfusion/ej2-dropdowns/styles/fluent.css';
+@import '@syncfusion/ej2-calendars/styles/fluent.css';
+@import '@syncfusion/ej2-react-calendars/styles/fluent.css';
+@import '@syncfusion/ej2-navigations/styles/fluent.css';
+@import '@syncfusion/ej2-notifications/styles/fluent.css';
+@import '@syncfusion/ej2-popups/styles/fluent.css';
+@import '@syncfusion/ej2-lists/styles/fluent.css';
+@import '@syncfusion/ej2-splitbuttons/styles/fluent.css';
+@import "@syncfusion/ej2-react-popups/styles/fluent.css";
+@import "@syncfusion/ej2-react-grids/styles/fluent.css";
+@import "@syncfusion/ej2-splitbuttons/styles/fluent.css";
+@import "@syncfusion/ej2-image-editor/styles/fluent.css";
+@import "@syncfusion/ej2-layouts/styles/fluent.css";
+@import '@syncfusion/ej2-richtexteditor/styles/fluent.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  --sf-text-color: #201f1e;
+  --sf-tooltip-text-color: #605e5c;
+  --sf-layout-border-color: #edebe9;
+}

package/styles/fluent2-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/fluent2.css';
+@import '@syncfusion/ej2-buttons/styles/fluent2.css';
+@import '@syncfusion/ej2-inputs/styles/fluent2.css';
+@import '@syncfusion/ej2-dropdowns/styles/fluent2.css';
+@import '@syncfusion/ej2-calendars/styles/fluent2.css';
+@import '@syncfusion/ej2-react-calendars/styles/fluent2.css';
+@import '@syncfusion/ej2-navigations/styles/fluent2.css';
+@import '@syncfusion/ej2-notifications/styles/fluent2.css';
+@import '@syncfusion/ej2-popups/styles/fluent2.css';
+@import '@syncfusion/ej2-lists/styles/fluent2.css';
+@import '@syncfusion/ej2-splitbuttons/styles/fluent2.css';
+@import "@syncfusion/ej2-react-popups/styles/fluent2.css";
+@import "@syncfusion/ej2-react-grids/styles/fluent2.css";
+@import "@syncfusion/ej2-splitbuttons/styles/fluent2.css";
+@import "@syncfusion/ej2-image-editor/styles/fluent2.css";
+@import "@syncfusion/ej2-layouts/styles/fluent2.css";
+@import '@syncfusion/ej2-richtexteditor/styles/fluent2.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #1f1f1f;
+  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  --sf-text-color: #fff;
+  --sf-tooltip-text-color: #d6d6d6;
+  --sf-layout-border-color: #525252;
+}

package/styles/fluent2.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/fluent2.css';
+@import '@syncfusion/ej2-buttons/styles/fluent2.css';
+@import '@syncfusion/ej2-inputs/styles/fluent2.css';
+@import '@syncfusion/ej2-dropdowns/styles/fluent2.css';
+@import '@syncfusion/ej2-calendars/styles/fluent2.css';
+@import '@syncfusion/ej2-react-calendars/styles/fluent2.css';
+@import '@syncfusion/ej2-navigations/styles/fluent2.css';
+@import '@syncfusion/ej2-notifications/styles/fluent2.css';
+@import '@syncfusion/ej2-popups/styles/fluent2.css';
+@import '@syncfusion/ej2-lists/styles/fluent2.css';
+@import '@syncfusion/ej2-splitbuttons/styles/fluent2.css';
+@import "@syncfusion/ej2-react-popups/styles/fluent2.css";
+@import "@syncfusion/ej2-react-grids/styles/fluent2.css";
+@import "@syncfusion/ej2-splitbuttons/styles/fluent2.css";
+@import "@syncfusion/ej2-image-editor/styles/fluent2.css";
+@import "@syncfusion/ej2-layouts/styles/fluent2.css";
+@import '@syncfusion/ej2-richtexteditor/styles/fluent2.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fafafa;
+  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  --sf-text-color: #242424;
+  --sf-tooltip-text-color: #424242;
+  --sf-layout-border-color: #e0e0e0;
+}

package/styles/form-renderer.base.css

@@ -0,0 +1,473 @@
+/**
+ * Form Renderer Styles
+ * Clean production-ready styles without drag/drop UI elements
+ */
+
+/* Form Container */
+.form-renderer-container {
+  padding: 2rem;
+  background-color: var(--sf-bg-color);
+}
+
+/* Form */
+.form-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* ============================================================
+   TEMPLATE-BASED LAYOUT SYSTEM
+   Only applies when UI schema is NOT provided (auto-generated)
+   ============================================================ */
+
+/* Two-Column Layout */
+.form-renderer.twolayout {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+/* Three-Column Layout */
+.form-renderer.threelayout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+}
+
+/* Four-Column Layout */
+.form-renderer.fourlayout {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+}
+
+.form-renderer.twolayout > .form-group:has(.e-btn),
+.form-renderer.threelayout > .form-group:has(.e-btn),
+.form-renderer.fourlayout > .form-group:has(.e-btn) {
+  align-self: flex-end;
+}
+
+.form-renderer.twolayout > .form-group:has(.e-message),
+.form-renderer.threelayout > .form-group:has(.e-message),
+.form-renderer.fourlayout > .form-group:has(.e-message) {
+  align-self: flex-end;
+}
+
+.form-renderer.twolayout > .form-group:has(.e-checkbox),
+.form-renderer.threelayout > .form-group:has(.e-checkbox),
+.form-renderer.fourlayout > .form-group:has(.e-checkbox) {
+  align-self: flex-end;
+}
+
+.form-renderer.twolayout > .form-group:has(.e-switch),
+.form-renderer.threelayout > .form-group:has(.e-switch),
+.form-renderer.fourlayout > .form-group:has(.e-switch) {
+  align-self: flex-end;
+}
+
+/* Submit/Reset buttons handling:
+   - If they're at the end, display side by side
+   - If not at the end, display normally
+*/
+/* When submit button is the only button at the end */
+.form-renderer.twolayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
+.form-renderer.threelayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
+.form-renderer.fourlayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)) {
+  grid-column: 1 / -1; 
+}
+
+/* When both reset and submit are the last two children, display them in adjacent cells side by side */
+.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type),
+.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
+.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type),
+.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
+.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type),
+.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type) {
+  grid-column: auto;
+}
+
+/* Responsive: Collapse to fewer columns on tablets */
+@media (max-width: 1024px) {
+  .form-renderer.fourlayout {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .form-renderer.threelayout {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Responsive: Single column on mobile */
+@media (max-width: 768px) {
+  .form-renderer.twolayout,
+  .form-renderer.threelayout,
+  .form-renderer.fourlayout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Form Group */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Field Wrapper */
+.field-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.field-wrapper.label-top {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field-wrapper.label-bottom {
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+.field-wrapper.label-left {
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.field-wrapper.label-right {
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+/* Input grows in left/right label layouts */
+.field-wrapper.label-left .field-input,
+.field-wrapper.label-right .field-input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Label */
+.field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--sf-text-color);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  font-family: var(--sf-font-family);
+}
+
+.field-label .required-asterisk {
+  color: #ef4444;
+  margin-left: 2px;
+}
+
+.field-label .tooltip-icon {
+  cursor: help;
+  color: var(--sf-tooltip-text-color);
+  font-size: 0.875rem;
+}
+
+/* Input Field */
+.field-input {
+  width: 100%;
+}
+
+.field-input .e-image-editor {
+  min-height: 250px;
+}
+
+.field-input .e-switch-wrapper,
+.field-input .e-checkbox-wrapper {
+  margin: 5px 0;
+}
+
+/* Error Message */
+.field-error {
+  color: #ef4444;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+/* Radio Button Group */
+.e-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.e-radio-group .e-radio + label {
+  margin-left: 0.5rem;
+}
+
+/* Layout Components - Clean Styles */
+
+/* Panel (Fieldset) */
+.form-panel-renderer {
+  border: none;
+  border-radius: 8px;
+  padding: 0;
+  margin: 1rem 0;
+}
+
+.form-panel-renderer:has(.panel-legend) {
+  border: 1px solid var(--sf-layout-border-color);
+  padding: 1.5rem;
+  font-family: var(--sf-font-family)
+}
+
+.form-panel-renderer legend {
+  font-size: 1.5rem;
+  font-weight: 600;
+  padding-bottom: 1.5rem;
+}
+
+.form-panel-renderer .panel-legend {
+  font-size: 1.5rem;
+  font-weight: 600;
+  padding: 0 0.5rem;
+}
+
+
+.panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Table Layout */
+.form-table-renderer {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.form-table-renderer.table-border {
+  border: 1px solid var(--sf-layout-border-color);
+}
+
+.form-table-renderer {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0px; 
+  overflow-x: auto;
+  overflow-y: hidden; 
+}
+
+.form-table-renderer .table-row {
+  display: table-row;
+  background: transparent;
+}
+
+.form-table-renderer .table-cell {
+  display: table-cell;
+  padding: 12px;
+  vertical-align: top;
+}
+
+.table-border .table-cell {
+  border-bottom: 1px solid var(--sf-layout-border-color);
+  border-right: 1px solid var(--sf-layout-border-color);
+}
+
+.table-cell:last-child {
+  border-right: none;
+}
+
+.form-table-renderer .table-row:last-child .table-cell {
+  border-bottom: none;
+}
+
+.table-cell > .form-table-renderer,
+.table-cell > .form-tabs-renderer,
+.table-cell > .form-card-renderer,
+.table-cell > .form-panel-renderer,
+.table-cell > .form-group
+ {
+    margin-bottom: 0.5rem;
+}
+
+
+.table-cell > .form-table-renderer:last-child,
+.table-cell > .form-tabs-renderer:last-child,
+.table-cell > .form-card-renderer:last-child,
+.table-cell > .form-panel-renderer:last-child,
+.table-cell > .form-group:last-child
+{
+  margin-bottom: 0;
+}
+
+
+/* Column helper classes (col, col-1..col-12) — copied from preview styles
+   Scoped under .form-table-renderer so renderer respects `col-{n}` classes
+   without changing the renderer's flex-based layout. These only set widths.
+*/
+.form-table-renderer .col,
+.form-table-renderer [class^="col-"] {
+  min-height: 100%;
+  vertical-align: top;
+}
+
+.form-table-renderer .col { width: auto; }
+.form-table-renderer .col-1 { width: 8.33333333%; }
+.form-table-renderer .col-2 { width: 16.66666667%; }
+.form-table-renderer .col-3 { width: 25%; }
+.form-table-renderer .col-4 { width: 33.33333333%; }
+.form-table-renderer .col-5 { width: 41.66666667%; }
+.form-table-renderer .col-6 { width: 50%; }
+.form-table-renderer .col-7 { width: 58.33333333%; }
+.form-table-renderer .col-8 { width: 66.66666667%; }
+.form-table-renderer .col-9 { width: 75%; }
+.form-table-renderer .col-10 { width: 83.33333333%; }
+.form-table-renderer .col-11 { width: 91.66666667%; }
+.form-table-renderer .col-12 { width: auto; }
+
+/* Tabs Layout */
+.form-tabs-renderer {
+  width: 100%;
+}
+
+.tab-content-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Submit Button */
+.form-submit-button {
+  margin-top: 1.5rem;
+  align-self: flex-start;
+}
+
+/* Syncfusion Component Overrides */
+.field-input .e-input-group,
+.field-input .e-control-wrapper {
+  width: 100%;
+}
+
+.field-input .e-float-input {
+  width: 100%;
+}
+
+/* Unsupported Component */
+.unsupported-component {
+  padding: 1rem;
+  background-color: #fff3cd;
+  border: 1px solid #ffc107;
+  border-radius: 4px;
+  color: #856404;
+  font-size: 0.875rem;
+}
+
+/* Dark Mode Support */
+[data-theme="dark"] .form-renderer-container {
+  background-color: #1e1e1e;
+}
+
+[data-theme="dark"] .field-label {
+  color: #e0e0e0;
+}
+
+[data-theme="dark"] .form-panel-renderer,
+[data-theme="dark"] .form-table-renderer {
+  border-color: #3d3d3d;
+}
+
+[data-theme="dark"] .table-row {
+  border-color: #3d3d3d;
+}
+
+[data-theme="dark"] .table-cell {
+  border-color: #3d3d3d;
+}
+
+.e-tooltip .e-msg-icon::before {
+  content: "\e800";
+  font-family: "e-icons";
+  color: var(--color-sf-msg-icon-color);
+  font-size: 16px;
+  height: 16px;
+  margin: 3px 4px;
+  display: flex;
+  line-height: 16px;
+}
+
+.e-card .e-card-content {
+  padding: 12px 18px 12px 18px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .form-renderer-container {
+    padding: 1rem;
+  }
+  
+  .field-wrapper.label-left,
+  .field-wrapper.label-right {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .field-wrapper.label-left .field-input,
+  .field-wrapper.label-right .field-input {
+    width: 100%;
+  }
+  
+  /* Convert table layout to flex layout for mobile */
+  .form-table-renderer .table-grid {
+    display: flex;
+    flex-direction: column;
+    border-spacing: 0;
+    gap: 0.75rem;
+  }
+  
+  .form-table-renderer .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    width: 100%;
+  }
+  
+  .form-table-renderer .table-cell {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 250px; /* minimum width before wrapping to next row */
+    padding: 12px;
+  }
+  
+  /* Override column width classes on mobile - let content flow naturally */
+  .form-table-renderer .col,
+  .form-table-renderer [class^="col-"] {
+    width: auto !important;
+    min-width: 250px;
+    flex: 1 1 auto;
+  }
+  
+  .table-border .table-cell  {
+    border-right: none;
+    border-bottom: 1px solid var(--sf-layout-border-color);
+    border-radius: 4px;
+  }
+  
+  .form-table-renderer .table-cell:last-child {
+    border-bottom: 1px solid var(--sf-layout-border-color);
+  }
+  
+  .form-table-renderer .row:last-child .table-cell {
+    border-bottom: none;
+  }
+}

package/styles/material-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/material-dark.css';
+@import '@syncfusion/ej2-buttons/styles/material-dark.css';
+@import '@syncfusion/ej2-inputs/styles/material-dark.css';
+@import '@syncfusion/ej2-dropdowns/styles/material-dark.css';
+@import '@syncfusion/ej2-calendars/styles/material-dark.css';
+@import '@syncfusion/ej2-react-calendars/styles/material-dark.css';
+@import '@syncfusion/ej2-navigations/styles/material-dark.css';
+@import '@syncfusion/ej2-notifications/styles/material-dark.css';
+@import '@syncfusion/ej2-popups/styles/material-dark.css';
+@import '@syncfusion/ej2-lists/styles/material-dark.css';
+@import '@syncfusion/ej2-splitbuttons/styles/material-dark.css';
+@import "@syncfusion/ej2-react-popups/styles/material-dark.css";
+@import "@syncfusion/ej2-react-grids/styles/material-dark.css";
+@import "@syncfusion/ej2-splitbuttons/styles/material-dark.css";
+@import "@syncfusion/ej2-image-editor/styles/material-dark.css";
+@import "@syncfusion/ej2-layouts/styles/material-dark.css";
+@import '@syncfusion/ej2-richtexteditor/styles/material-dark.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #000;
+  --sf-font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont';
+  --sf-text-color: #fff;
+  --sf-tooltip-text-color: #fff;
+  --sf-layout-border-color: #fff;
+}

package/styles/material.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/material.css';
+@import '@syncfusion/ej2-buttons/styles/material.css';
+@import '@syncfusion/ej2-inputs/styles/material.css';
+@import '@syncfusion/ej2-dropdowns/styles/material.css';
+@import '@syncfusion/ej2-calendars/styles/material.css';
+@import '@syncfusion/ej2-react-calendars/styles/material.css';
+@import '@syncfusion/ej2-navigations/styles/material.css';
+@import '@syncfusion/ej2-notifications/styles/material.css';
+@import '@syncfusion/ej2-popups/styles/material.css';
+@import '@syncfusion/ej2-lists/styles/material.css';
+@import '@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "@syncfusion/ej2-react-popups/styles/material.css";
+@import "@syncfusion/ej2-react-grids/styles/material.css";
+@import "@syncfusion/ej2-splitbuttons/styles/material.css";
+@import "@syncfusion/ej2-image-editor/styles/material.css";
+@import "@syncfusion/ej2-layouts/styles/material.css";
+@import '@syncfusion/ej2-richtexteditor/styles/material.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont';
+  --sf-text-color: #000;
+  --sf-tooltip-text-color: #000;
+  --sf-layout-border-color: #000;
+}

package/styles/material3-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/material3-dark.css';
+@import '@syncfusion/ej2-buttons/styles/material3-dark.css';
+@import '@syncfusion/ej2-inputs/styles/material3-dark.css';
+@import '@syncfusion/ej2-dropdowns/styles/material3-dark.css';
+@import '@syncfusion/ej2-calendars/styles/material3-dark.css';
+@import '@syncfusion/ej2-react-calendars/styles/material3-dark.css';
+@import '@syncfusion/ej2-navigations/styles/material3-dark.css';
+@import '@syncfusion/ej2-notifications/styles/material3-dark.css';
+@import '@syncfusion/ej2-popups/styles/material3-dark.css';
+@import '@syncfusion/ej2-lists/styles/material3-dark.css';
+@import '@syncfusion/ej2-splitbuttons/styles/material3-dark.css';
+@import "@syncfusion/ej2-react-popups/styles/material3-dark.css";
+@import "@syncfusion/ej2-react-grids/styles/material3-dark.css";
+@import "@syncfusion/ej2-splitbuttons/styles/material3-dark.css";
+@import "@syncfusion/ej2-image-editor/styles/material3-dark.css";
+@import "@syncfusion/ej2-layouts/styles/material3-dark.css";
+@import '@syncfusion/ej2-richtexteditor/styles/material3-dark.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: rgb(28, 27, 31);
+  --sf-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
+  --sf-text-color: rgb(230, 225, 229);
+  --sf-tooltip-text-color: rgb(202, 196, 208);
+  --sf-layout-border-color: rgb(68, 71, 70);
+}