@syncfusion/ej2-fabric-dark-theme 33.2.15 → 34.1.29

package/styles/maskedtextbox/maskedtextbox-lite.scss

@@ -0,0 +1,2 @@
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;

package/styles/maskedtextbox/maskedtextbox.css

@@ -0,0 +1,134 @@
+/*! maskedtextbox layout */
+.e-control-wrapper.e-mask .e-maskedtextbox {
+  font-family: Arial, "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
+  font-size: 13px;
+}
+.e-content-placeholder.e-mask.e-placeholder-mask {
+  background-size: 300px 33px;
+  min-height: 33px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 18px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 20px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 17px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 20px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 19px;
+}
+div.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 25px;
+}
+.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  padding-left: 0;
+}
+.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  padding-right: 0;
+}
+.e-mask.e-input-group.e-prepend-wrapper input.e-input {
+  padding-left: 0;
+}
+.e-mask.e-rtl.e-input-group.e-prepend-wrapper input.e-input {
+  padding-right: 0;
+}
+.e-mask.e-input-group.e-prepend-wrapper input,
+.e-mask.e-input-group.e-append-wrapper input {
+  height: 37px;
+}
+/*! maskedtextbox theme */
+.e-control-wrapper.e-mask.e-error .e-maskedtextbox,
+.e-utility-mask.e-error {
+  color: #ff5f5f;
+}
+.e-bigger .e-control-wrapper.e-mask .e-maskedtextbox {
+  font-size: 14px;
+}
+.e-control-wrapper.e-mask.e-bigger .e-maskedtextbox {
+  font-size: 14px;
+}
+.e-bigger .e-content-placeholder.e-mask.e-placeholder-mask,
+.e-bigger.e-content-placeholder.e-mask.e-placeholder-mask {
+  background-size: 300px 40px;
+  min-height: 40px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: 20px;
+}
+div.e-bigger.e-mask.e-input-group.e-prepend-wrapper input, div.e-bigger.e-mask.e-input-group.e-append-wrapper input,
+.e-bigger div.e-mask.e-input-group.e-prepend-wrapper input,
+.e-bigger div.e-mask.e-input-group.e-append-wrapper input,
+span.e-bigger.e-mask.e-input-group.e-prepend-wrapper input,
+span.e-bigger.e-mask.e-input-group.e-append-wrapper input,
+.e-bigger span.e-mask.e-input-group.e-prepend-wrapper input,
+.e-bigger span.e-mask.e-input-group.e-append-wrapper input {
+  height: auto;
+}

package/styles/maskedtextbox/maskedtextbox.scss

@@ -0,0 +1,3 @@
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/mention/_all.scss

@@ -0,0 +1 @@
+@forward 'layout';

package/styles/mention/_fabric-dark-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/mention/_layout.scss

@@ -0,0 +1,7 @@
+@use 'variables' as *;
+@include export-module('mention-layout') {
+
+  //default
+  //undefined
+  //enddefault
+}

package/styles/mention/_variables.scss

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

package/styles/mention/index.css

@@ -0,0 +1,3 @@
+@import '../base/base.css';
+@import '../drop-down-base/drop-down-base.css';
+@import '../mention/mention.css';

package/styles/mention/index.scss

@@ -0,0 +1,3 @@
+@use '../base/base' as *;
+@use '../drop-down-base/drop-down-base' as *;
+@use '../mention/mention' as *;

package/styles/mention/mention.scss

@@ -0,0 +1,2 @@
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;

package/styles/menu/_all.scss

@@ -0,0 +1,2 @@
+@forward 'layout';
+@forward 'theme';

package/styles/menu/_bigger.scss

@@ -0,0 +1,382 @@
+@use 'variables' as *;
+@mixin bigger-rtl-blank-icon {
+  padding-left: $cmenu-caret-blank-icon;
+
+  &.e-menu-caret-icon {
+    padding-left: $cmenu-caret-li-padding;
+  }
+}
+
+@mixin bigger-ul-size {
+  font-size: $cmenu-bigger-font-size;
+  padding: $cmenu-ul-bigger-padding;
+  white-space: nowrap;
+}
+
+@mixin bigger-li-size {
+  height: $cmenu-bigger-li-height;
+  line-height: $cmenu-bigger-li-line-height;
+  @if $skin-name == 'fluent2' {
+    height: $cmenu-bigger-li-size-height;
+    line-height: $cmenu-bigger-li-size-line-height;
+    padding: $cmenu-bigger-li-size-padding;
+  }
+
+  &.e-menu-caret-icon {
+    @if $skin-name == 'fluent2' {
+      padding: $cmenu-caret-icon-padding;
+    }
+  }
+
+  & .e-menu-icon {
+    font-size: $cmenu-icon-bigger-font-size;
+    line-height: $cmenu-bigger-li-line-height;
+    @if $skin-name == 'tailwind' {
+      margin-right: $cmenu-icon-bigger-margin-right;
+    }
+  }
+
+  & .e-caret {
+    line-height: $cmenu-bigger-li-line-height;
+    @if $skin-name == 'fluent2' {
+      margin: $cmenu-bigger-caret-icon-margin;
+    }
+  }
+
+  &.e-separator {
+    height: $menu-auto-height;
+    line-height: $menu-normal-line-height;
+  }
+}
+
+@include export-module('menu-bigger') {
+  .e-bigger .e-menu-wrapper ul,
+  .e-bigger.e-menu-wrapper ul,
+  .e-bigger .e-menu-container ul,
+  .e-bigger.e-menu-container ul {
+    font-size: $menu-bigger-font-size;
+
+    &.e-menu .e-menu-item {
+      line-height: $menu-bigger-li-line-height;
+      padding: $menu-bigger-li-padding;
+      height: $menu-bigger-li-height;
+
+      & .e-menu-icon {
+        font-size: $menu-icon-bigger-font-size;
+        line-height: $menu-bigger-li-line-height;
+        margin-right: $menu-bigger-icon-margin-right;
+        @if $skin-name == 'fluent2' {
+          margin-bottom: $menu-bigger-icon-item-margin-bottom;
+        }
+      }
+
+      & .e-caret {
+        font-size: $menu-bigger-caret-font-size;
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' {
+          line-height: $menu-bigger-li-icon-height;
+        }
+        @else {
+          line-height: $menu-bigger-li-line-height;
+        }
+        right: $menu-bigger-caret-right;
+      }
+
+      &.e-separator {
+        padding: $menu-separator-bigger-padding;
+      }
+    }
+
+    &.e-menu {
+      &:not(.e-vertical) {
+        padding: $menu-ul-bigger-header-padding;
+      }
+
+      &.e-vertical {
+        & .e-menu-item {
+          &.e-separator {
+            height: $menu-auto-height;
+            line-height: $menu-normal-line-height;
+          }
+        }
+      }
+    }
+
+    &.e-ul {
+      @include bigger-ul-size;
+      min-width: $cmenu-bigger-min-width;
+      @if $skin-name == 'tailwind3' {
+        font-weight: $menu-ul-font-weight;
+      }
+
+      & .e-menu-item  {
+        @include bigger-li-size;
+        @if $skin-name != 'fluent2' {
+          padding: $cmenu-li-padding;
+        }
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          padding: $menu-bigger-li-padding;
+        }
+
+        & .e-caret {
+          font-size: $submenu-bigger-caret-font-size;
+          right: $cmenu-caret-right;
+        }
+
+        &.e-menu-caret-icon {
+          padding-right: $cmenu-caret-li-padding;
+        }
+
+        & .e-menu-icon {
+          @if $skin-name == 'tailwind' {
+            margin-right: $menu-icon-bigger-margin-right;
+          }
+          @else {
+            margin-right: $cmenu-icon-margin-right;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu,
+  .e-bigger.e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-left: $menu-blank-icon-bigger;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper,
+  .e-bigger.e-menu-wrapper,
+  .e-bigger .e-menu-container,
+  .e-bigger.e-menu-container {
+    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
+      padding: $menu-padding-none $menu-bigger-hscroll-nav-size;
+
+      & .e-scroll-nav {
+        width: $menu-bigger-hscroll-nav-size;
+        @if $skin-name == 'tailwind3' {
+          min-height: 48px;
+        }
+      }
+    }
+
+    & .e-menu-vscroll.e-vscroll {
+      &:not(.e-scroll-device) {
+        padding: $menu-bigger-vscroll-nav-padding $menu-padding-none;
+      }
+
+      & .e-scroll-nav {
+        height: $menu-bigger-vscroll-nav-height;
+      }
+    }
+
+    &.e-menu-popup {
+      box-shadow: $cmenu-parent-ul-box-shadow;
+    }
+
+    & .e-scroll-nav .e-icons {
+      font-size: $menu-bigger-scroll-nav-icon-size;
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper ul,
+  .e-bigger.e-rtl.e-menu-wrapper ul,
+  .e-bigger .e-rtl.e-menu-container ul,
+  .e-bigger.e-rtl.e-menu-container ul {
+    & .e-menu-item {
+      text-align: right;
+
+      & .e-menu-icon {
+        margin-left: $menu-bigger-icon-margin-right;
+        margin-right: $menu-bigger-icon-mrg-right;
+      }
+
+      & .e-caret {
+        left: $menu-bigger-caret-right;
+        margin-left: $menu-bigger-icon-margin-left;
+        right: auto;
+      }
+
+      &.e-menu-caret-icon {
+        padding-left: $menu-bigger-caret-li-padding;
+        padding-right: $menu-bigger-li-right-padding;
+      }
+    }
+
+    &.e-ul {
+      & .e-menu-item {
+        & .e-menu-icon {
+          margin-left: $cmenu-icon-margin-right;
+        }
+
+        & .e-caret {
+          left: $cmenu-caret-right;
+        }
+
+        &.e-menu-caret-icon {
+          padding-left: $cmenu-caret-li-padding;
+          @if $skin-name == 'fluent2' {
+            padding-right: $menu-bigger-caret-icon-padding-right;
+          }
+          @else {
+            padding-right: $cmenu-li-right-padding;
+          }
+        }
+
+        &.e-blankicon {
+          @include bigger-rtl-blank-icon;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-container:not(.e-hamburger) .e-menu,
+  .e-bigger.e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-right: $menu-blank-icon-bigger;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-menu-container.e-hamburger ul,
+  .e-bigger.e-menu-container.e-hamburger ul {
+    & .e-ul {
+      max-width: 100%;
+
+      & .e-menu-item {
+        height: $menu-auto-height;
+        line-height: $menu-bigger-li-line-height;
+        padding: $menu-padding-none;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger,
+  .e-bigger.e-menu-wrapper.e-hamburger,
+  .e-bigger .e-menu-container.e-hamburger,
+  .e-bigger.e-menu-container.e-hamburger {
+    & .e-menu-header {
+      font-size: $menu-icon-bigger-font-size;
+      height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-line-height;
+    }
+
+    & ul.e-menu {
+      & .e-menu-item {
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+      }
+
+      & .e-ul {
+        font-size: $menu-bigger-font-size;
+
+        & .e-menu-item {
+          text-indent: inherit;
+
+          &.e-menu-caret-icon {
+            padding-right: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
+          }
+
+          & .e-caret {
+            font-size: $menu-bigger-caret-font-size;
+            right: $menu-bigger-caret-right;
+          }
+        }
+      }
+    }
+    @if $skin-name == 'tailwind3' {
+      .e-menu-header {
+        background: $content-bg-color-alt1;
+        .e-menu-icon {
+          font-size: $menu-bigger-scroll-nav-icon-size;
+        }
+      }
+      ul {
+        background: $content-bg-color;
+        .e-menu-item {
+          & .e-menu-icon,
+          & .e-caret {
+            font-size: $menu-bigger-scroll-nav-icon-size;
+          }
+        }
+      }
+      .e-ul {
+        font-weight: $menu-container-ul-font-weight;
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger {
+    & ul.e-menu {
+      & .e-menu-item {
+        padding: $menu-padding-none;
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+
+        & .e-menu-icon {
+          margin-left: $menu-bigger-icon-margin-left;
+          text-indent: inherit;
+        }
+
+        &.e-menu-caret-icon {
+          padding-left: $menu-padding-none;
+          padding-right: $menu-padding-none;
+        }
+
+        & .e-caret {
+          left: $menu-caret-right;
+          right: auto;
+        }
+      }
+
+      & .e-ul {
+        & .e-menu-item {
+          text-indent: inherit;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
+    @if $skin-name == 'fluent2' {
+      padding: $menu-container-caret-padding;
+    }
+  }
+
+  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator),
+  .e-bigger .e-menu-container:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator) {
+    @if $skin-name == 'fluent2' {
+      height: $menu-bigger-ul-item-height;
+    }
+    @else {
+      height: $cmenu-bigger-li-height;
+    }
+  }
+
+  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul .e-menu-item,
+  .e-bigger .e-menu-container:not(.e-hamburger) ul .e-menu-item {
+    &.e-menu-caret-icon {
+      padding-right: $menu-bigger-caret-li-padding;
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
+  .e-bigger .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
+    padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
+    height: $menu-auto-height !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/styles/menu/_fabric-dark-definition.scss

@@ -0,0 +1,94 @@
+@use '../base/common/base-variables' as *;
+@use '../context-menu/fabric-dark-definition' as *;
+
+@forward '../context-menu/fabric-dark-definition';
+$menu-bigger-icon-margin-right: 10px !default;
+$menu-caret-padding-left: 10px !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-ul-border: $menu-li-border-width $menu-li-border-style $neutral-light !default;
+$menu-ul-header-padding: 0 16px !default;
+$menu-ul-bigger-header-padding: 0 20px !default;
+$menu-font-size: 13px !default;
+$menu-ul-padding: 0 !default;
+$menu-blank-icon: 30px !default;
+$menu-separator-padding: 0 !default;
+$menu-li-height: 42px !default;
+$menu-li-line-height: 42px !default;
+$menu-li-padding: 0 8px !default;
+$menu-li-text-indent: 8px !default;
+$menu-icon-font-size: 14px !default;
+$menu-header-font-size: 14px !default;
+$menu-icon-font-size-text-indent: 14px !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-margin-right-text-indent: 8px !default;
+$menu-icon-width: 1em !default;
+$menu-caret-font-size: 11px !default;
+$menu-caret-right: 6px !default;
+$menu-caret-icon: '\e94d' !default;
+$menu-caret-li-padding: 26px !default;
+$menu-disable-opacity: 1 !default;
+$menu-li-right-padding: 8px !default;
+$menu-bigger-font-size: 14px !default;
+$menu-bigger-li-height: 52px !default;
+$menu-bigger-li-line-height: 52px !default;
+$menu-bigger-li-padding: 0 10px !default;
+$menu-bigger-li-text-indent: 10px !default;
+$menu-icon-bigger-font-size: 16px !default;
+$menu-bigger-caret-li-padding: 36px !default;
+$menu-bigger-caret-font-size: 16px !default;
+$menu-bigger-caret-right: 8px !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-blank-icon-bigger: 36px !default;
+$menu-ul-bgcolor: $neutral-lighter !default;
+$menu-li-border-color: $cmenu-li-border-color !default;
+$menu-color: $cmenu-color !default;
+$menu-seperator-border-color: $neutral-light !default;
+$menu-li-bgcolor: $cmenu-li-bgcolor !default;
+$menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-selection-bgcolor: $neutral-quintenary !default;
+$menu-selected-color: $cmenu-selected-color !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-bigger-li-right-padding: 16px !default;
+$menu-hscroll-nav-size: 30px !default;
+$menu-vscroll-nav-size: 16px !default;
+$menu-vscroll-nav-height: 16px !default;
+$menu-vscroll-nav-padding: 16px !default;
+$menu-scroll-nav-icon-size: 10px !default;
+$menu-bigger-hscroll-nav-size: 36px !default;
+$menu-bigger-vscroll-nav-size: 24px !default;
+$menu-bigger-vscroll-nav-height: 24px !default;
+$menu-bigger-vscroll-nav-padding: 24px !default;
+$menu-bigger-scroll-nav-icon-size: 12px !default;
+$menu-srollbar-ul-border: 1px solid $menu-seperator-border-color !default;
+$submenu-caret-font-size: $cmenu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$submenu-color: $cmenu-color !default;
+$menu-icon-color: $cmenu-caret-color !default;
+$menu-icon-hover-color: inherit !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-padding-none: 0 !default;
+$menu-bigger-icon-mrg-right: 0 !default;
+$menu-bigger-icon-margin-left: 0 !default;
+$menu-icon-margin-bottom: 4px !default;
+$menu-scroll-padding: 0 !default;
+$menu-hscroll-nav-interaction-border: 0 !default;
+$menu-hamburger-border: 0 !default;
+$menu-hamburger-border-radius: 0 !default;
+$menu-hamburger-padding: 0 !default;
+$menu-hamburger-rtl-icon-margin-left: 0 !default;
+$menu-border-none: 0 !default;
+$menu-inherit-height: inherit !default;
+$menu-inherit-line-height: inherit !default;
+$menu-auto-height: auto !default;
+$menu-header-font-family: $font-family !default;
+$menu-scroll-bar-height: 100% !default;
+$menu-container-height: 1px !default;
+$menu-normal-line-height: normal !default;
+$menu-container-ul-font-weight: 500 !default;
+$menu-wrapper-line-height: 0 !default;