@syncfusion/ej2-navigations 23.2.7 → 24.1.46

package/styles/pager/tailwind.css

@@ -257,6 +257,30 @@
 .e-pager.e-bigger .e-np:hover {
   font-size: 14px;
 }
+.e-bigger .e-pager.e-adaptive div.e-parentmsgbar,
+.e-pager.e-bigger.e-adaptive div.e-parentmsgbar {
+  margin-top: -2px;
+}
+.e-bigger .e-pager.e-adaptive .e-pagerdropdown,
+.e-pager.e-bigger.e-adaptive .e-pagerdropdown {
+  margin: 0 2px 0 4px;
+}
+.e-bigger .e-pager.e-adaptive .e-pagerconstant.e-page-all,
+.e-pager.e-bigger.e-adaptive .e-pagerconstant.e-page-all {
+  top: 9px;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar {
+  margin-top: 0;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown {
+  margin: 2px 4px 0 2px;
+}
+.e-bigger .e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all,
+.e-pager.e-bigger.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all {
+  top: 12px;
+}
 
 .e-pager {
   border-style: solid;
@@ -483,6 +507,62 @@
   line-height: 18px;
   padding: 4.5px 8.7px 7px 8.7px;
 }
+.e-pager.e-adaptive {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  padding: 6px;
+}
+.e-pager.e-adaptive div.e-parentmsgbar {
+  margin: 0 5px;
+  margin-top: -4px;
+  -ms-flex-positive: 1;
+      flex-grow: 1;
+  min-width: 10px;
+  white-space: nowrap;
+}
+.e-pager.e-adaptive .e-pagesizes {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: auto;
+}
+.e-pager.e-adaptive .e-pagerdropdown {
+  margin: 2px 2px 0 4px;
+  width: 90px;
+  min-width: 90px;
+  -ms-flex-order: 2;
+      order: 2;
+  height: 40px;
+  padding-right: 5px;
+}
+.e-pager.e-adaptive .e-pagerconstant {
+  font-size: 12px;
+  position: relative;
+  top: 2px;
+  -ms-flex-order: 1;
+      order: 1;
+  min-width: 52px;
+  max-height: 42px;
+  margin: 0 8px 0 10px;
+}
+.e-pager.e-adaptive .e-pagerconstant.e-page-all {
+  top: 10px;
+  text-align: center;
+}
+.e-pager.e-adaptive .e-mfirst,
+.e-pager.e-adaptive .e-mprev,
+.e-pager.e-adaptive .e-mnext,
+.e-pager.e-adaptive .e-mlast {
+  padding: 1% 2%;
+  width: 5%;
+}
+.e-pager.e-adaptive .e-mfirst,
+.e-pager.e-adaptive .e-mlast {
+  width: calc(5% + 11px);
+}
 @media (max-width: 769px) {
   .e-pager {
     padding: 13px 0;
@@ -643,6 +723,33 @@
 .e-pager.e-rtl .e-np.e-focused, .e-pager.e-rtl .e-pp.e-focused {
   padding: 4.5px 8.7px 7px 8.7px;
 }
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar {
+  margin: 0 5px;
+  margin-top: -5px;
+  padding-top: 0;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant {
+  margin: -1px 10px 0 8px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerconstant.e-page-all {
+  top: 10px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl div.e-pagerdropdown {
+  min-width: 92px;
+  margin: 2px 4px 0 2px;
+  padding: 0 0 0 5px;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mfirst,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mprev,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mnext,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mlast {
+  padding: 1% 2%;
+  width: 5%;
+}
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mfirst,
+.e-pager.e-rtl.e-adaptive.e-rtl .e-mlast {
+  width: calc(5% + 11px);
+}
 @media (max-width: 769px) {
   .e-pager.e-rtl .e-mfirst,
   .e-pager.e-rtl .e-mprev,

package/styles/stepper/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/stepper/_bootstrap-dark-definition.scss

@@ -0,0 +1,79 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-primary, 0 0 0 8px $gray-base !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $grey-light-font, 0 0 0 8px $gray-base !default;
+$step-valid-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-success, 0 0 0 8px $gray-base !default;
+$step-error-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-danger, 0 0 0 8px $gray-base !default;
+$step-li-shadow: 0 0 0 8px $gray-base !default;
+
+$step-border-color: $grey-8c !default;
+$step-hover-text-color: $brand-primary-font !default;
+$step-hover-not-text-color: $grey-dark-font !default;
+$step-hover-border-color: $grey-f9 !default;
+$step-active-border-color: $grey-f9 !default;
+$stepper-outline-color: $gray-base !default;
+$step-color: $grey-dark-font !default;
+$step-optional-color: $grey-cc !default;
+$step-bg-color: $gray-light !default;
+$step-completed-color: $brand-primary-font !default;
+$step-completed-bg-color: $brand-primary !default;
+$step-progress-bg-color: $grey-8c !default;
+$step-progress-value-bg-color: $brand-primary !default;
+$step-disabled-bg-color: $grey-88 !default;
+$step-disabled-font-color: $grey-lighter !default;
+$step-disabled-color: $grey-88 !default;
+$stepper-text-color: $grey-light-font !default;
+$step-valid-icon-only-color:$brand-success !default;
+$step-error-icon-only-color: $brand-danger !default;
+$step-valid-completed-color: $grey-light-font !default;
+$step-valid-completed-bg-color: $brand-success !default;
+$step-error-icon-color: $grey-light-font !default;
+$step-error-completed-color: $brand-danger !default;
+$step-error-completed-bg-color: $brand-danger !default;
+$step-indicator-color: $grey-ad !default;
+$step-hover-color: $grey-88 !default;
+$step-active-color: $grey-8c !default;
+$step-selected-hover-color: $brand-primary-lighten-10 !default;
+$step-selected-active-color: $brand-primary-lighten-15 !default;

package/styles/stepper/_bootstrap-definition.scss

@@ -0,0 +1,79 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-primary, 0 0 0 8px $grey-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font, 0 0 0 8px $grey-white !default;
+$step-valid-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-success, 0 0 0 8px $grey-white !default;
+$step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-danger, 0 0 0 8px $grey-white !default;
+$step-li-shadow: 0 0 0 8px $grey-white !default;
+
+$step-border-color: $grey-cc !default;
+$step-hover-text-color: $grey-white !default;
+$step-hover-not-text-color: $grey-light-font !default;
+$step-hover-border-color: $grey-cc !default;
+$step-active-border-color: $grey-cc !default;
+$stepper-outline-color: $grey-white !default;
+$step-color: $grey-light-font !default;
+$step-optional-color: $gray !default;
+$step-bg-color: $grey-white !default;
+$step-completed-color: $grey-white !default;
+$step-completed-bg-color: $brand-primary !default;
+$step-progress-bg-color: $grey-cc !default;
+$step-progress-value-bg-color: $brand-primary !default;
+$step-disabled-bg-color: $grey-lighter !default;
+$step-disabled-font-color: $gray-light !default;
+$step-disabled-color: $gray-light !default;
+$stepper-text-color: $base-font !default;
+$step-valid-icon-only-color:$brand-success !default;
+$step-error-icon-only-color: $brand-danger !default;
+$step-valid-completed-color: $grey-white !default;
+$step-valid-completed-bg-color: $brand-success !default;
+$step-error-icon-color: $grey-white !default;
+$step-error-completed-color: $brand-danger !default;
+$step-error-completed-bg-color: $brand-danger !default;
+$step-indicator-color: $grey-white !default;
+$step-hover-color: $grey-lighter !default;
+$step-active-color: $grey-dd !default;
+$step-selected-hover-color: $brand-primary-darken-10 !default;
+$step-selected-active-color: $brand-primary-darken-15 !default;

package/styles/stepper/_bootstrap4-definition.scss

@@ -0,0 +1,79 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $primary, 0 0 0 8px $white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $gray-700, 0 0 0 8px $white !default;
+$step-valid-li-shadow: 0 0 0 2px $white, 0 0 0 4px $success, 0 0 0 8px $white !default;
+$step-error-li-shadow: 0 0 0 2px $white, 0 0 0 4px $danger, 0 0 0 8px $white !default;
+$step-li-shadow: 0 0 0 8px $white !default;
+
+$step-border-color: $gray-500 !default;
+$step-hover-text-color: $primary-font !default;
+$step-hover-not-text-color: $gray-700 !default;
+$step-hover-border-color: $gray-500 !default;
+$step-active-border-color: $gray-500 !default;
+$stepper-outline-color: $white !default;
+$step-color: $gray-700 !default;
+$step-optional-color: $gray-600 !default;
+$step-bg-color: $white !default;
+$step-completed-color: $primary-font !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $gray-500 !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $gray-300 !default;
+$step-disabled-font-color: $gray-500 !default;
+$step-disabled-color: $gray-100 !default;
+$stepper-text-color: $gray-700 !default;
+$step-valid-icon-only-color:$success !default;
+$step-error-icon-only-color: $danger !default;
+$step-valid-completed-color: $gray-100 !default;
+$step-valid-completed-bg-color: $success !default;
+$step-error-icon-color: $gray-100 !default;
+$step-error-completed-color: $danger !default;
+$step-error-completed-bg-color: $danger !default;
+$step-indicator-color: $primary-font !default;
+$step-hover-color: $gray-200 !default;
+$step-active-color: $gray-300 !default;
+$step-selected-hover-color: darken($primary, 10%) !default;
+$step-selected-active-color: darken($primary, 10%) !default;

package/styles/stepper/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/stepper/_bootstrap5-definition.scss

@@ -0,0 +1,80 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
+$step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
+$step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
+$step-li-shadow: 0 0 0 8px $content-bg-color !default;
+
+$step-border-color: $border-light !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color !default;
+$step-hover-border-color: $border-light !default;
+$step-active-border-color: $border-light !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $content-text-color !default;
+$step-optional-color: $content-text-color-alt3 !default;
+$step-bg-color: $content-bg-color !default;
+$step-completed-color: $primary-text-color !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $border-light !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $content-bg-color-alt3 !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $content-text-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color:$success !default;
+$step-error-icon-only-color: $danger !default;
+$step-valid-completed-color: $success-text !default;
+$step-valid-completed-bg-color: $success !default;
+$step-error-icon-color: $primary-text-color !default;
+$step-error-completed-color: $danger !default;
+$step-error-completed-bg-color: $danger !default;
+$step-indicator-color: $content-bg-color !default;
+$step-hover-color: $content-bg-color-alt3 !default;
+$step-active-color: $content-bg-color-alt4 !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;

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

@@ -0,0 +1,79 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 2px 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $neutral-light-fontalt, 0 0 0 8px $neutral-white !default;
+$step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
+$step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
+$step-li-shadow: 0 0 0 8px $neutral-white !default;
+
+$step-border-color: $neutral-tertiary !default;
+$step-hover-text-color: $theme-primary-font !default;
+$step-hover-not-text-color: $base-font !default;
+$step-hover-border-color: $neutral-tertiary !default;
+$step-active-border-color: $neutral-tertiary !default;
+$stepper-outline-color: $neutral-white !default;
+$step-color: $base-font !default;
+$step-optional-color: $neutral-secondary-alt !default;
+$step-bg-color: $neutral-white !default;
+$step-completed-color: $theme-primary-font !default;
+$step-completed-bg-color: $theme-primary !default;
+$step-progress-bg-color: $neutral-light !default;
+$step-progress-value-bg-color: $theme-primary !default;
+$step-disabled-bg-color: $neutral-light !default;
+$step-disabled-font-color: $neutral-tertiary !default;
+$step-disabled-color: $neutral-tertiary !default;
+$stepper-text-color: $neutral-light-fontalt !default;
+$step-valid-icon-only-color:$success-bg !default;
+$step-error-icon-only-color: $error-bg !default;
+$step-valid-completed-color: $success-font !default;
+$step-valid-completed-bg-color: $success-bg !default;
+$step-error-icon-color: $base-font !default;
+$step-error-completed-color: $error-font !default;
+$step-error-completed-bg-color: $error-bg !default;
+$step-indicator-color: $neutral-white !default;
+$step-hover-color: $neutral-lighter !default;
+$step-active-color: $neutral-light !default;
+$step-selected-hover-color: $theme-dark-alt !default;
+$step-selected-active-color: $theme-dark !default;

package/styles/stepper/_fabric-definition.scss

@@ -0,0 +1,79 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-text-radius: 15px !default;
+$stepper-text-block: 5px !default;
+$stepper-optional-top: 2em !default;
+$stepper-label-optional: 3em !default;
+$stepper-top-label-optional: 3.5em !default;
+$stepper-text-postion: 10px !default;
+$stepper-icon-padding: 0 3px 0 4px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $base-font, 0 0 0 8px $neutral-white !default;
+$step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
+$step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
+$step-li-shadow: 0 0 0 8px $neutral-white !default;
+
+$step-border-color: $neutral-tertiary !default;
+$step-hover-text-color: $theme-primary-font !default;
+$step-hover-not-text-color: $base-font !default;
+$step-hover-border-color: $neutral-tertiary !default;
+$step-active-border-color: $neutral-tertiary !default;
+$stepper-outline-color: $neutral-white !default;
+$step-color: $base-font !default;
+$step-optional-color: $neutral-secondary !default;
+$step-bg-color: $neutral-white !default;
+$step-completed-color: $theme-primary-font !default;
+$step-completed-bg-color: $theme-primary !default;
+$step-progress-bg-color: $neutral-tertiary !default;
+$step-progress-value-bg-color: $theme-primary !default;
+$step-disabled-bg-color: $neutral-light !default;
+$step-disabled-font-color: $neutral-tertiary !default;
+$step-disabled-color: $neutral-tertiary !default;
+$stepper-text-color: $base-font !default;
+$step-valid-icon-only-color:$success-font !default;
+$step-error-icon-only-color: $error-font !default;
+$step-valid-completed-color: $success-font !default;
+$step-valid-completed-bg-color: $success-bg !default;
+$step-error-icon-color: $error-font !default;
+$step-error-completed-color: $error-font !default;
+$step-error-completed-bg-color: $error-bg !default;
+$step-indicator-color: $neutral-white !default;
+$step-hover-color: $neutral-light !default;
+$step-active-color: $neutral-quintenary !default;
+$step-selected-hover-color: $theme-dark-alt !default;
+$step-selected-active-color: $theme-dark !default;

package/styles/stepper/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';