npm - @syncfusion/blazor-themes - Versions diffs - 27.1.48 → 27.1.50 - Mend

@syncfusion/blazor-themes 27.1.48 → 27.1.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (169) hide show

package/SCSS-Themes/richtexteditor/rich-text-editor/fluent-dark.scss CHANGED Viewed

@@ -1296,6 +1296,22 @@ $rte-dialog-upload-status-progress: $info;
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1364,7 +1380,7 @@ $rte-dialog-upload-status-progress: $info;
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3205,6 +3221,12 @@ $rte-dialog-upload-status-progress: $info;
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3231,6 +3253,12 @@ $rte-dialog-upload-status-progress: $info;
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3249,7 +3277,7 @@ $rte-dialog-upload-status-progress: $info;
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3367,7 +3395,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3387,7 +3415,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3449,7 +3477,7 @@ $rte-dialog-upload-status-progress: $info;
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3460,7 +3488,7 @@ $rte-dialog-upload-status-progress: $info;
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3754,8 +3782,14 @@ $rte-dialog-upload-status-progress: $info;
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {

package/SCSS-Themes/richtexteditor/rich-text-editor/fluent.scss CHANGED Viewed

@@ -1296,6 +1296,22 @@ $rte-dialog-upload-status-progress: $info;
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1364,7 +1380,7 @@ $rte-dialog-upload-status-progress: $info;
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3205,6 +3221,12 @@ $rte-dialog-upload-status-progress: $info;
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3231,6 +3253,12 @@ $rte-dialog-upload-status-progress: $info;
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3249,7 +3277,7 @@ $rte-dialog-upload-status-progress: $info;
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3367,7 +3395,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3387,7 +3415,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3449,7 +3477,7 @@ $rte-dialog-upload-status-progress: $info;
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3460,7 +3488,7 @@ $rte-dialog-upload-status-progress: $info;
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3754,8 +3782,14 @@ $rte-dialog-upload-status-progress: $info;
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {

package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2-dark.scss CHANGED Viewed

@@ -1304,6 +1304,22 @@ $rte-dialog-upload-status-progress: $info;
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1372,7 +1388,7 @@ $rte-dialog-upload-status-progress: $info;
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3213,6 +3229,12 @@ $rte-dialog-upload-status-progress: $info;
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3239,6 +3261,12 @@ $rte-dialog-upload-status-progress: $info;
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3257,7 +3285,7 @@ $rte-dialog-upload-status-progress: $info;
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3375,7 +3403,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3395,7 +3423,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3457,7 +3485,7 @@ $rte-dialog-upload-status-progress: $info;
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3468,7 +3496,7 @@ $rte-dialog-upload-status-progress: $info;
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3762,8 +3790,14 @@ $rte-dialog-upload-status-progress: $info;
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {

package/SCSS-Themes/richtexteditor/rich-text-editor/fluent2.scss CHANGED Viewed

@@ -1304,6 +1304,22 @@ $rte-dialog-upload-status-progress: $info;
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1372,7 +1388,7 @@ $rte-dialog-upload-status-progress: $info;
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3213,6 +3229,12 @@ $rte-dialog-upload-status-progress: $info;
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3239,6 +3261,12 @@ $rte-dialog-upload-status-progress: $info;
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3257,7 +3285,7 @@ $rte-dialog-upload-status-progress: $info;
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3375,7 +3403,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3395,7 +3423,7 @@ $rte-dialog-upload-status-progress: $info;
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3457,7 +3485,7 @@ $rte-dialog-upload-status-progress: $info;
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3468,7 +3496,7 @@ $rte-dialog-upload-status-progress: $info;
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3762,8 +3790,14 @@ $rte-dialog-upload-status-progress: $info;
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {

package/SCSS-Themes/richtexteditor/rich-text-editor/highcontrast.scss CHANGED Viewed

@@ -1291,6 +1291,22 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1359,7 +1375,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3200,6 +3216,12 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3226,6 +3248,12 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3244,7 +3272,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3362,7 +3390,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3382,7 +3410,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3444,7 +3472,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3455,7 +3483,7 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3749,8 +3777,14 @@ $rte-dialog-upload-status-progress: #0056b3 !default;
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {

package/SCSS-Themes/richtexteditor/rich-text-editor/material-dark.scss CHANGED Viewed

@@ -1295,6 +1295,22 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         margin-block-start: 10px;
       }
+      .e-content ul {
+        list-style-type: disc;
+      }
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -1363,7 +1379,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         word-break: inherit;
         word-wrap: break-word;
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -3204,6 +3220,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
             color: $rte-drop-btn-active-color;
           }
         }
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
       .e-toolbar-extended {
@@ -3230,6 +3252,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           background: $rte-drop-btn-active-bg;
         }
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -3248,7 +3276,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -3366,7 +3394,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-rte-list-primary-content {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3386,7 +3414,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-caret {
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -3448,7 +3476,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3459,7 +3487,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -3753,8 +3781,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       }
     }
   }
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
   .e-rte-emojipicker-popup.e-popup.e-popup-open {