@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/styles/color-picker/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
@@ -16,6 +86,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 .e-container .e-value-switch-btn::before {
   content: "\e748";
 }
@@ -32,7 +150,7 @@
 }
 .e-colorpicker-wrapper .e-colorpicker,
 .e-colorpicker-container .e-colorpicker {
-  height: 1px;
+  height: 1;
   opacity: 0;
   position: absolute;
   width: 1px;
@@ -47,7 +165,7 @@
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
   background-size: 8px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   height: 24px;
   margin-top: 0;
   position: relative;
@@ -55,7 +173,7 @@
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
@@ -129,7 +247,7 @@ body.e-colorpicker-overflow {
 
 .e-container {
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   display: inline-block;
   line-height: 0;
   outline: none;
@@ -213,7 +331,7 @@ body.e-colorpicker-overflow {
 }
 .e-container .e-hsv-container .e-handler {
   border: 2px solid rgba(var(--color-sf-white));
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-black), 1);
           box-shadow: 0 0 0 1px rgba(var(--color-sf-black), 1);
   cursor: pointer;
@@ -249,10 +367,10 @@ body.e-colorpicker-overflow {
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
   height: 6px !important; /* stylelint-disable-line declaration-no-important */
   top: calc(50% - 4px);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   cursor: pointer;
   height: 10px;
   top: calc(68% - 10px);
@@ -282,7 +400,7 @@ body.e-colorpicker-overflow {
   top: calc(50% - 4px);
   width: 100%;
   z-index: 1;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle, .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle-start {
   -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-black), 1);
@@ -294,13 +412,12 @@ body.e-colorpicker-overflow {
   border: 1px solid var(--color-sf-border-light);
   cursor: pointer;
   display: inline-block;
-  height: 32px;
+  height: 36px;
   margin-left: 5.205%;
   position: relative;
   top: 0;
   width: 32px;
-  height: 36px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-container .e-slider-preview .e-preview-container .e-preview {
   display: block;
@@ -311,14 +428,14 @@ body.e-colorpicker-overflow {
 .e-container .e-slider-preview .e-preview-container .e-preview.e-current {
   border-bottom: 1px solid var(--color-sf-border-light);
   top: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-container .e-slider-preview .e-preview-container .e-preview.e-previous {
   height: 18px;
   top: 18px;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-container .e-selected-value {
   -webkit-box-align: center;
@@ -345,9 +462,8 @@ body.e-colorpicker-overflow {
   font-family: "e-icons";
   margin-top: 24px;
   padding: 2px 3px;
-  font-size: 16px;
-  line-height: 16px;
   font-size: 14px;
+  line-height: 16px;
 }
 .e-container .e-input-container {
   display: inline-block;
@@ -559,10 +675,10 @@ body.e-colorpicker-overflow {
 }
 
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip {
-  border-bottom-left-radius: 50%;
-  border-bottom-right-radius: 0%;
-  border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 999px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: 999px;
+  border-top-right-radius: 999px;
   -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-black), 1);
           box-shadow: 0 0 0 1px rgba(var(--color-sf-black), 1);
   cursor: pointer;
@@ -577,7 +693,7 @@ body.e-colorpicker-overflow {
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip .e-tip-content {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
   background-size: 8px;
-  border-radius: 50%;
+  border-radius: 999px;
   height: 24px;
   position: relative;
   -webkit-transform: rotate(45deg);
@@ -680,8 +796,8 @@ body.e-colorpicker-overflow {
 }
 
 .e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
-  margin: 2px 0;
   font-size: 16px;
+  margin: 2px 0;
 }
 .e-bigger .e-container.e-color-picker {
   width: 440px;
@@ -735,7 +851,7 @@ body.e-colorpicker-overflow {
   height: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   height: 10px;
   top: calc(76% - 11px);
   width: 10px;

package/styles/color-picker/tailwind3.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import 'ej2-splitbuttons/styles/split-button/tailwind3-definition.scss';
-@import './../input/tailwind3-definition.scss';
-@import './../numerictextbox/tailwind3-definition.scss';
-@import './../slider/tailwind3-definition.scss';
-@import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use 'ej2-splitbuttons/styles/split-button/tailwind3-definition' as *;
+@use './../input/tailwind3-definition' as *;
+@use './../numerictextbox/tailwind3-definition' as *;
+@use './../slider/tailwind3-definition' as *;
+@use 'ej2-popups/styles/tooltip/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/data-form/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/data-form/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 /*! FileManager's bds theme wise override definitions and variables */
 // form field styles
 $field-label-color: $content-text-color-alt1 !default;
@@ -39,3 +42,14 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap-dark-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 /*! Form bootstrap theme wise override definitions and variables */
 
@@ -42,3 +44,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
+
 /*! Form bootstrap theme wise override definitions and variables */
 // form field styles
 $field-label-color: var(--content-text-color-alt-1, #343a40) !default;
@@ -39,3 +42,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 /*! Form bootstrap theme wise override definitions and variables */
 // form field styles
@@ -41,3 +43,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap5-dark-definition.scss

@@ -1 +1,54 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+/*! Form tailwind theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 12px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 400 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 5px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $gray-300;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 4px !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 12px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 /*! Form tailwind theme wise override definitions and variables */
 // form field styles
 $field-label-color: $content-text-color-alt1 !default;
@@ -39,3 +42,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_bootstrap5.3-definition.scss

@@ -1,9 +1,12 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 /*! Form tailwind theme wise override definitions and variables */
 // form field styles
 $field-label-color: $content-text-color-alt1 !default;
 $field-label-font-size: 12px !default;
 $field-label-margin-bottom: 4px !default;
-$field-label-font-weight: 400 !default;
+$field-label-font-weight: $font-weight-normal !default;
 $form-layout-margin-top: 20px !default;
 $field-label-right-margin-top: 5px !default;
 
@@ -37,5 +40,15 @@ $form-label-text-align: center !default;
 $form-button-left-justify: flex-start !default;
 $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
-$form-button-border-radius: 20px !default;
+$form-button-border-radius: $radius-20 !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_fabric-dark-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 
 /*! Form fabric theme wise override definitions and variables */
 // form field styles
@@ -41,3 +43,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_fabric-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
+
 /*! Form fabric theme wise override definitions and variables */
 // form field styles
 $field-label-color: $neutral-primary !default;
@@ -39,3 +42,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_fluent-dark-definition.scss

@@ -1 +1,54 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+/*! Form tailwind theme wise override definitions and variables */
+// form field styles
+$field-label-color: $content-text-color-alt1 !default;
+$field-label-font-size: 14px !default;
+$field-label-margin-bottom: 4px !default;
+$field-label-font-weight: 600 !default;
+$form-layout-margin-top: 20px !default;
+$field-label-right-margin-top: 3px !default;
+
+// group title styles
+$group-title-color: $content-text-color-alt2 !default;
+$group-title-border-color: $border-light !default;
+$form-group-border-none: none !default;
+$form-padding-zero: 0 !default;
+$form-margin-zero: 0 !default;
+$form-group-title-position: relative !default;
+$form-group-title-display: inline-block !default;
+$form-group-title-padding-bottom: 8px !default;
+$form-group-title-margin-bottom: 0 !default;
+$form-group-title-font-size: 16px !default;
+$form-group-title-border-position: absolute !default;
+$form-group-title-border-bottom: 0 !default;
+$form-group-title-border-left: 0 !default;
+$form-group-title-border-width: 100% !default;
+$form-group-title-border-height: 1px !default;
+$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
+
+//tooltip styles
+$form-tooltip-background-color: $danger-light !default;
+$form-tooltip-color: $danger !default;
+$form-validation-message-font-size: 14px;
+
+// form common styles
+$form-display-flex: flex !default;
+$form-label-top-direction: column !default;
+$form-label-text-align: center !default;
+$form-button-left-justify: flex-start !default;
+$form-button-right-justify: flex-end !default;
+$form-button-center-justify: center !default;
+$form-button-border-radius: 20px !default;
+$form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_fluent-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 /*! Form tailwind theme wise override definitions and variables */
 // form field styles
 $field-label-color: $content-text-color-alt1 !default;
@@ -39,3 +42,13 @@ $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
 $form-button-border-radius: 20px !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;

package/styles/data-form/_fluent2-definition.scss

@@ -1,9 +1,12 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 /*! FileManager's bds theme wise override definitions and variables */
 // form field styles
 $field-label-color: $content-text-color-alt1 !default;
 $field-label-font-size: 12px !default;
 $field-label-margin-bottom: 4px !default;
-$field-label-font-weight: 500 !default;
+$field-label-font-weight: $font-weight-medium !default;
 $form-layout-margin-top: 20px !default;
 $field-label-right-margin-top: 6px !default;
 
@@ -38,5 +41,15 @@ $form-label-text-align: center !default;
 $form-button-left-justify: flex-start !default;
 $form-button-right-justify: flex-end !default;
 $form-button-center-justify: center !default;
-$form-button-border-radius: 20px !default;
+$form-button-border-radius: $radius-20 !default;
 $form-button-padding: 7px 16px !default;
+
+$form-data-label-margin-right: 12px !default;
+$form-switch-wrapper-margin-top: 3px !default;
+$form-switch-wrapper-margin-left: 5px !default;
+$form-button-margin-top: 24px !default;
+$form-button-gap: 10px !default;
+$form-child-layout-margin-top: 0 !default;
+$form-item-wrapper-width: calc(75% - 12px);
+$form-label-q-width: 25%;
+$form-full-width: 100%;