@syncfusion/ej2-richtexteditor 20.4.53 → 21.1.37

package/styles/material-dark.css

@@ -295,6 +295,10 @@
 .e-rte-dropdown-popup .e-rte-file-manager::before {
   content: "\e609";
 }
+.e-rte-toolbar .e-rte-format-painter::before,
+.e-rte-dropdown-popup .e-rte-format-painter::before {
+  content: "\e97b";
+}
 
 .e-richtexteditor .e-south-east::before,
 .e-richtexteditor .e-south-west::before {
@@ -317,6 +321,10 @@
   content: "\e89c";
 }
 
+.e-rte-cursor-brush {
+  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 9H4V3H16V5H20V13H12V20C12 20.55 11.5508 21 11 21H10C9.44922 21 9 20.55 9 20V11H18V7H16V9ZM6 7H14V5H6V7Z" fill="white"/><path d="M14 7H6V5H14V7Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 9V3H16V5H20V13H12V20C12 20.55 11.5508 21 11 21H10C9.44922 21 9 20.55 9 20V11H18V7H16V9H4ZM7 11H2V1H18V3H22V15H14V20C14 21.6536 12.6564 23 11 23H10C8.34364 23 7 21.6536 7 20V11Z" fill="black"/></svg>'), text;
+}
+
 /*! tab layout */
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
@@ -545,6 +553,7 @@
   margin-right: 0;
 }
 .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+  display: inline-block;
   margin-left: 0;
   margin-right: 0;
   overflow-x: auto;
@@ -1407,6 +1416,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
+  display: inline-block;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar.e-remove-white-space .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
@@ -2279,6 +2289,11 @@
   margin: 1px;
 }
 
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+  visibility: hidden;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid #616161;
@@ -2371,6 +2386,9 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
   color: #fff;
 }
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons {
+  color: #fff;
+}
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
   color: #fff;
 }
@@ -2389,6 +2407,9 @@
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
+.e-richtexteditor .e-toolbar-wrapper {
+  background: #212121;
+}
 .e-richtexteditor img.e-img-focus::selection,
 .e-richtexteditor audio.e-audio-focus::selection,
 .e-richtexteditor .e-video-focus::selection {
@@ -2587,7 +2608,8 @@
 
 .e-dialog .e-img-uploadwrap .e-droptext,
 .e-dialog .e-aud-uploadwrap .e-droptext,
-.e-dialog .e-vid-uploadwrap .e-droptext {
+.e-dialog .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device .e-vid-uploadwrap .e-droptext {
   border: dashed 2px rgba(255, 255, 255, 0.12);
   border-radius: 4px;
   color: rgba(255, 255, 255, 0.7);
@@ -2600,6 +2622,10 @@
   width: 300px;
 }
 
+.e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 108px;
+}
+
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -2752,6 +2778,10 @@ span.e-table-box.e-rbox-select {
   color: #fff;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+  color: #fff;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/material.css

@@ -295,6 +295,10 @@
 .e-rte-dropdown-popup .e-rte-file-manager::before {
   content: "\e609";
 }
+.e-rte-toolbar .e-rte-format-painter::before,
+.e-rte-dropdown-popup .e-rte-format-painter::before {
+  content: "\e97b";
+}
 
 .e-richtexteditor .e-south-east::before,
 .e-richtexteditor .e-south-west::before {
@@ -317,6 +321,10 @@
   content: "\e89c";
 }
 
+.e-rte-cursor-brush {
+  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 9H4V3H16V5H20V13H12V20C12 20.55 11.5508 21 11 21H10C9.44922 21 9 20.55 9 20V11H18V7H16V9ZM6 7H14V5H6V7Z" fill="white"/><path d="M14 7H6V5H14V7Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 9V3H16V5H20V13H12V20C12 20.55 11.5508 21 11 21H10C9.44922 21 9 20.55 9 20V11H18V7H16V9H4ZM7 11H2V1H18V3H22V15H14V20C14 21.6536 12.6564 23 11 23H10C8.34364 23 7 21.6536 7 20V11Z" fill="black"/></svg>'), text;
+}
+
 /*! tab layout */
 .e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
 .e-richtexteditor.e-bigger .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
@@ -545,6 +553,7 @@
   margin-right: 0;
 }
 .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+  display: inline-block;
   margin-left: 0;
   margin-right: 0;
   overflow-x: auto;
@@ -1407,6 +1416,7 @@
 }
 .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
+  display: inline-block;
 }
 .e-rte-quick-popup .e-rte-quick-toolbar.e-remove-white-space .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
   white-space: nowrap;
@@ -2279,6 +2289,11 @@
   margin: 1px;
 }
 
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
+.e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
+  visibility: hidden;
+}
+
 /*! tab layout */
 .e-richtexteditor .e-rte-toolbar {
   border: 1px solid rgba(0, 0, 0, 0.12);
@@ -2371,6 +2386,9 @@
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
   color: #000;
 }
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons {
+  color: #000;
+}
 .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn .e-icons {
   color: #000;
 }
@@ -2389,6 +2407,9 @@
 .e-richtexteditor .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
   border: 0;
 }
+.e-richtexteditor .e-toolbar-wrapper {
+  background: #fafafa;
+}
 .e-richtexteditor img.e-img-focus::selection,
 .e-richtexteditor audio.e-audio-focus::selection,
 .e-richtexteditor .e-video-focus::selection {
@@ -2587,7 +2608,8 @@
 
 .e-dialog .e-img-uploadwrap .e-droptext,
 .e-dialog .e-aud-uploadwrap .e-droptext,
-.e-dialog .e-vid-uploadwrap .e-droptext {
+.e-dialog .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device .e-vid-uploadwrap .e-droptext {
   border: dashed 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   color: rgba(0, 0, 0, 0.38);
@@ -2600,6 +2622,10 @@
   width: 300px;
 }
 
+.e-dialog .e-vid-uploadwrap .e-droptext {
+  height: 108px;
+}
+
 .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
 .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
@@ -2752,6 +2778,10 @@ span.e-table-box.e-rbox-select {
   color: #000;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
+  color: #000;
+}
+
 .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
   border-bottom: 0;
 }

package/styles/rich-text-editor/_bootstrap-dark-definition.scss

@@ -7,13 +7,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 39px !default;
 $rte-big-split-btn-line-height: 38px !default;
-$skin-name: 'bootstrap' !default;
 $rte-border-color: $grey-99 !default;
 $rte-full-screen-bg: $grey-white !default;
 $rte-content-bg: $grey-base !default;
 $rte-content-font-color: $grey-dark-font !default;
 $rte-item-color: $grey-dark-font !default;
 $rte-icons-color: $grey-dark-font !default;
+$rte-tlbar-expand-active: $grey-dark-font !default;
+$rte-hover-icons-color: $grey-dark-font !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
 $rte-quick-item-btn-width: 27px !default;
@@ -138,6 +139,7 @@ $rte-table-span-active-bg-color: rgba($brand-primary, .2) !default;
 $rte-table-span-active-border-color: lighten($brand-primary, 0%) !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $grey-dark !default;
+$rte-table-resize-back-color: $grey-dark !default;
 $rte-table-popup-color: rgb(255, 0, 0) !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-base, .26) !default;
 $rte-table-border-color: $grey-e6 !default;
@@ -189,7 +191,29 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 330px !default;
 $rte-big-edit-table-dlg-max-height: 414px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $grey-darker;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //enddefault
 

package/styles/rich-text-editor/_bootstrap-definition.scss

@@ -6,13 +6,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 39px !default;
 $rte-big-split-btn-line-height: 38px !default;
-$skin-name: 'bootstrap' !default;
 $rte-border-color: $grey-dd !default;
 $rte-full-screen-bg: $grey-white !default;
 $rte-content-bg: $grey-white !default;
 $rte-content-font-color: #333 !default;
 $rte-item-color: $base-font !default;
 $rte-icons-color: $base-font !default;
+$rte-tlbar-expand-active: $base-font !default;
+$rte-hover-icons-color: $base-font !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
 $rte-quick-item-btn-width: 27px !default;
@@ -136,6 +137,7 @@ $rte-table-span-active-bg-color: rgba($brand-primary, .2) !default;
 $rte-table-span-active-border-color: $grey-cc !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $brand-primary-font !default;
+$rte-table-resize-back-color: $brand-primary-font !default;
 $rte-table-popup-color: $grey-base !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($grey-base, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -188,7 +190,29 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 330px !default;
 $rte-big-edit-table-dlg-max-height: 414px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $grey-f8;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 @include export-module('richtexteditor-bootstrap') {
   .e-richtexteditor {

package/styles/rich-text-editor/_bootstrap4-definition.scss

@@ -8,13 +8,14 @@ $rte-big-split-btn-line-height: 40px !default;
 
 $rte-list-btn-flex: unset !default;
 $rte-list-btn-line-height: unset !default;
-$skin-name: 'bootstrap4' !default;
 $rte-border-color: $gray-300 !default;
 $rte-full-screen-bg: $content-bg !default;
 $rte-content-bg: $content-bg !default;
 $rte-content-font-color: $gray-900 !default;
 $rte-item-color: $gray-900 !default;
 $rte-icons-color: $gray-900 !default;
+$rte-tlbar-expand-active: $gray-900 !default;
+$rte-hover-icons-color: $gray-900 !default;
 $rte-big-quick-item-btn-width: 38px !default;
 $rte-quick-item-btn-width: 32px !default;
 $rte-big-quick-item-btn-height: 38px !default;
@@ -128,6 +129,7 @@ $rte-table-span-active-bg-color: $content-bg !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color: $primary !default;
 $rte-table-popup-bg: $content-bg !default;
+$rte-table-resize-back-color: $content-bg !default;
 $rte-table-popup-color: $gray-900 !default;
 $rte-table-popup-box: none !default;
 $rte-table-border-color: $gray-500 !default;
@@ -184,7 +186,29 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 302px !default;
 $rte-big-edit-table-dlg-max-height: 378px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $gray-100;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 @include export-module('richtexteditor-bootstrap4') {
   .e-richtexteditor {

package/styles/rich-text-editor/_bootstrap5-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'bootstrap5' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -29,8 +27,8 @@ $rte-big-quick-drop-btn-icon-size: 16px !default;
 $rte-quick-drop-btn-icon-size: 14px !default;
 $rte-big-quick-drop-btn-caret-icon-size: 10px !default;
 $rte-quick-drop-btn-caret-icon-size: 12px !default;
-$rte-big-quick-drop-btn-caret-font-size: 12px !default;
-$rte-quick-drop-btn-caret-font-size: 10px !default;
+$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
+$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
 $rte-big-tb-items-margin-left: 3px !default;
 $rte-tb-items-margin-left: 7px !default;
 $rte-big-tb-items-padding-left: 3px !default;
@@ -82,6 +80,22 @@ $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 55px;
 $rte-big-color-list-span-common-padding-left-right: 0;
 $rte-default-character-count-opacity: 1;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-tlbar-expand-active:$msg-color-alt2;
 
 //Layout Variables End
 
@@ -93,6 +107,7 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $content-text-color !default;
 $rte-icons-color: $icon-color !default;
+$rte-hover-icons-color: $white !default;
 $rte-img-popup-border: 1px solid $border-light !default;
 $rte-img-popup-box-shadow: $shadow !default;
 $rte-img-popup-color: $border-light !default;
@@ -141,7 +156,7 @@ $rte-drop-text-clr: $content-text-color-alt2 !default;
 $rte-default-character-count-color: $placeholder-text-color !default;
 $rte-warning-character-count-color: $warning !default;
 $rte-error-character-count-color: $danger !default;
-$rte-img-border: dashed 2px $primary !default;
+$rte-img-border: solid 2px $primary !default;
 $rte-font-family: $font-family !default;
 $rte-content-color: $content-text-color !default;
 $rte-content-blockquote-border-left-color: solid 2px $content-text-color !default;
@@ -160,12 +175,18 @@ $rte-table-span-active-bg-color: $primary-lighter !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color: $primary !default;
 $rte-table-popup-bg: $flyout-bg-color !default;
+$rte-table-resize-back-color: $flyout-bg-color !default;
 $rte-table-popup-color: $border-light !default;
 $rte-table-popup-box: $shadow !default;
 $rte-table-border-color: $border-light !default;
 $rte-table-alternate-color: $content-bg-color-alt1 !default;
 $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
 
 //Theme Variables End
 
@@ -193,4 +214,6 @@ $rte-big-edit-table-dlg-max-height: 373px !default;
 $toolbar-expand-icon-min-height: 40px !default;
 $rte-align-caret-icon-min-width: 24px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $content-bg-color-alt1;

package/styles/rich-text-editor/_fabric-dark-definition.scss

@@ -7,13 +7,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 41px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'fabric' !default;
 $rte-border-color: $neutral-light !default;
 $rte-full-screen-bg: $neutral-white !default;
 $rte-content-bg: $neutral-white !default;
 $rte-content-font-color: $neutral-light-font !default;
 $rte-item-color: $neutral-light-font !default;
 $rte-icons-color: $neutral-light-font !default;
+$rte-tlbar-expand-active: $neutral-light-font !default;
+$rte-hover-icons-color: $neutral-light-font !default;
 
 $rte-big-quick-item-btn-width: 39px !default;
 $rte-quick-item-btn-width: 27px !default;
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: $theme-darker !default;
 $rte-table-span-active-border-color: $theme-tertiary !default;
 $rte-table-select-border-color: $theme-primary !default;
 $rte-table-popup-bg: $neutral-lighter-alt !default;
+$rte-table-resize-back-color: $neutral-lighter-alt !default;
 $rte-table-popup-color: $neutral-light-font !default;
 $rte-table-popup-box: 0 2px 5px 0 rgba($shadow, .26) !default;
 $rte-table-border-color: $neutral-tertiary !default;
@@ -187,6 +189,28 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 335px !default;
 $rte-big-edit-table-dlg-max-height: 427px !default;
 $rte-drop-text-width: 300px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 250px !default;
+$rte-tbar-default-bg: $neutral-lighter;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //enddefault

package/styles/rich-text-editor/_fabric-definition.scss

@@ -6,13 +6,14 @@ $rte-list-btn-flex: column !default;
 $rte-list-btn-line-height: 1 !default;
 $rte-split-btn-line-height: 41px !default;
 $rte-big-split-btn-line-height: 50px !default;
-$skin-name: 'fabric' !default;
 $rte-border-color: $neutral-quintenaryalt !default;
 $rte-full-screen-bg: $neutral-white !default;
 $rte-content-bg: $neutral-white !default;
 $rte-content-font-color: #333 !default;
 $rte-item-color: $neutral-light-fontalt !default;
 $rte-icons-color: $neutral-light-fontalt !default;
+$rte-tlbar-expand-active: $neutral-light-fontalt !default;
+$rte-hover-icons-color: $neutral-light-fontalt !default;
 $rte-content-padding: 16px !default;
 $rte-table-popup-padding: 10px !default;
 
@@ -137,6 +138,7 @@ $rte-table-span-active-bg-color: rgba($theme-primary, .2) !default;
 $rte-table-span-active-border-color: $theme-primary !default;
 $rte-table-select-border-color: #0478d7 !default;
 $rte-table-popup-bg: $neutral-white !default;
+$rte-table-resize-back-color: $neutral-white !default;
 $rte-table-popup-color: $theme-light-font !default;
 $rte-table-popup-box: 0 3px 8px 0 rgba($neutral-light-fontalt, .26) !default;
 $rte-table-border-color: #bdbdbd !default;
@@ -187,4 +189,26 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 335px !default;
 $rte-big-edit-table-dlg-max-height: 427px !default;
 $rte-drop-text-width: 290px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 240px !default;
+$rte-tbar-default-bg: $neutral-white;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;

package/styles/rich-text-editor/_fluent-definition.scss

@@ -1,5 +1,3 @@
-$skin-name: 'FluentUI' !default;
-
 //Layout Variables Start
 $rte-border-size: 1px !default;
 $rte-2px-border-size: 2px !default;
@@ -31,8 +29,8 @@ $rte-big-quick-drop-btn-icon-size: 16px !default;
 $rte-quick-drop-btn-icon-size: 14px !default;
 $rte-big-quick-drop-btn-caret-icon-size: 10px !default;
 $rte-quick-drop-btn-caret-icon-size: 12px !default;
-$rte-big-quick-drop-btn-caret-font-size: 12px !default;
-$rte-quick-drop-btn-caret-font-size: 10px !default;
+$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
+$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
 $rte-big-tb-items-margin-left: 8px !default;
 $rte-tb-items-margin-left: 8px !default;
 $rte-big-tb-items-padding-left: 8px !default;
@@ -56,8 +54,8 @@ $rte-big-drop-btn-action-padding-left: 10px !default;
 $rte-big-drop-btn-action-padding-right: 6px !default;
 $rte-colorpicker-parent-padding: 7px !default;
 $rte-colorpicker-parent-padding-hover: 7px !default;
-$rte-colorpicker-parent-padding-top: 7px !default;
-$rte-colorpicker-parent-padding-hover-top: 7px !default;
+$rte-colorpicker-parent-padding-top: 0 !default;
+$rte-colorpicker-parent-padding-hover-top: 0 !default;
 $rte-colorpicker-parent-padding-active-hover: 7px !default;
 $rte-font-icon-width: 30px !default;
 $rte-font-arrow-width: 12px !default;
@@ -86,6 +84,21 @@ $rte-big-inline-tmp-color-min-width: 50px;
 $rte-inline-tmp-color-min-width: 36px;
 $rte-big-color-list-span-common-padding-left-right: 7px;
 $rte-default-character-count-opacity: .8;
+$rte-droparea-line-height: 10;
+$rte-droparea-browsebtn-height: 36px;
+$rte-droparea-browsebtn-padding: 0 18px;
+$rte-droparea-browsebtn-top: -50px;
+$rte-insert-dialog-font-size: 15px;
+$rte-big-insert-dialog-font-size: 15px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
+$rte-toolbar-item-frist-last-child-margin: 0 6px;
+$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
 
 //Layout Variables End
 
@@ -97,6 +110,8 @@ $rte-full-screen-bg: $content-bg-color !default;
 $rte-content-font-color: $content-text-color !default;
 $rte-item-color: $icon-color !default;
 $rte-icons-color: $icon-color !default;
+$rte-tlbar-expand-active: $icon-color !default;
+$rte-hover-icons-color: $icon-color !default;
 $rte-img-popup-border: 1px solid $border-light !default;
 $rte-img-popup-box-shadow: $shadow-lg !default;
 $rte-img-popup-color: $border-light !default;
@@ -145,7 +160,7 @@ $rte-drop-text-clr: $content-text-color-alt2 !default;
 $rte-default-character-count-color: $placeholder-text-color !default;
 $rte-warning-character-count-color: $warning !default;
 $rte-error-character-count-color: $danger !default;
-$rte-img-border: dashed 2px $primary !default;
+$rte-img-border: solid 2px $primary !default;
 $rte-font-family: $font-family !default;
 $rte-content-color: $content-text-color !default;
 $rte-content-blockquote-border-left-color: solid 2px $content-text-color !default;
@@ -164,12 +179,18 @@ $rte-table-span-active-bg-color: $primary-lighter !default;
 $rte-table-span-active-border-color: $primary !default;
 $rte-table-select-border-color: $primary !default;
 $rte-table-popup-bg: $flyout-bg-color !default;
+$rte-table-resize-back-color: $flyout-bg-color !default;
 $rte-table-popup-color: $flyout-border !default;
 $rte-table-popup-box: $shadow-lg !default;
 $rte-table-border-color: $border-light !default;
 $rte-table-alternate-color: $content-bg-color-alt1 !default;
 $rte-table-header-bg: $content-bg-color-alt1 !default;
 $rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
+$rte-border-top-left-radius: 0;
+$rte-border-top-right-radius: 0;
+$rte-border-bottom-right-radius: 0;
+$rte-border-bottom-left-radius: 0;
+$rte-big-border-radius: 0;
 
 //Theme Variables End
 
@@ -196,4 +217,6 @@ $rte-big-file-browser-dlg-max-height: 557px !default;
 $rte-big-table-dlg-max-height: 306px !default;
 $rte-big-edit-table-dlg-max-height: 388px !default;
 $rte-drop-text-width: 292px !default;
+$rte-drop-text-height: 185px !default;
 $rte-drop-text-mobile-width: 242px !default;
+$rte-tbar-default-bg: $content-bg-color-alt2;