Fluent-next: extend the component tier to every component that owns v…

apps/demos/utils/visual-tests/helpers/theme-utils.js

@@ -28,10 +28,12 @@ export async function testScreenshot(
   const testTheme = process.env.THEME;
 
   const themeOptions = {
-    looksSameComparisonOptions: {
-      tolerance: 20,
-      antialiasingTolerance: 20,
-    },
+    // ВРЕМЕННО отключено, чтобы прогон поймал даже малые расхождения (волна H, 28.08.2026).
+    // Вернуть перед мержем: без него сравнение строже дефолтов компаратора для ВСЕХ тем.
+    // looksSameComparisonOptions: {
+    //   tolerance: 20,
+    //   antialiasingTolerance: 20,
+    // },
     textDiffTreshold: 0.2,
   };
 

packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss

@@ -4,48 +4,76 @@
 @use "box/public" as boxPublic;
 @use "button/public" as buttonPublic;
 @use "buttonGroup/public" as buttonGroupPublic;
+@use "calendar/public" as calendarPublic;
 @use "card/public" as cardPublic;
+@use "cardView/public" as cardViewPublic;
+@use "chat/public" as chatPublic;
+@use "checkBox/public" as checkBoxPublic;
 @use "colorBox/public" as colorBoxPublic;
+@use "colorView/public" as colorViewPublic;
 @use "common/public" as commonPublic;
 @use "contextMenu/public" as contextMenuPublic;
 @use "dataGrid/public" as dataGridPublic;
 @use "dateBox/public" as dateBoxPublic;
 @use "dateRangeBox/public" as dateRangeBoxPublic;
 @use "dateView/public" as dateViewPublic;
+@use "diagram/public" as diagramPublic;
+@use "drawer/public" as drawerPublic;
 @use "dropDownButton/public" as dropDownButtonPublic;
 @use "dropDownEditor/public" as dropDownEditorPublic;
 @use "dropDownList/public" as dropDownListPublic;
 @use "dropDownMenu/public" as dropDownMenuPublic;
 @use "fieldset/public" as fieldsetPublic;
+@use "fileManager/public" as fileManagerPublic;
+@use "fileUploader/public" as fileUploaderPublic;
+@use "filterBuilder/public" as filterBuilderPublic;
+@use "form/public" as formPublic;
 @use "gallery/public" as galleryPublic;
+@use "gantt/public" as ganttPublic;
 @use "gridBase/public" as gridBasePublic;
+@use "htmlEditor/public" as htmlEditorPublic;
 @use "informer/public" as informerPublic;
+@use "list/public" as listPublic;
 @use "loadIndicator/public" as loadIndicatorPublic;
 @use "loadPanel/public" as loadPanelPublic;
 @use "lookup/public" as lookupPublic;
+@use "map/public" as mapPublic;
 @use "menu/public" as menuPublic;
 @use "numberBox/public" as numberBoxPublic;
+@use "pagination/public" as paginationPublic;
+@use "pivotGrid/public" as pivotGridPublic;
 @use "popover/public" as popoverPublic;
+@use "popup/public" as popupPublic;
 @use "progressBar/public" as progressBarPublic;
 @use "radioButton/public" as radioButtonPublic;
+@use "radioGroup/public" as radioGroupPublic;
+@use "recurrenceEditor/public" as recurrenceEditorPublic;
+@use "scheduler/public" as schedulerPublic;
 @use "scrollView/public" as scrollViewPublic;
 @use "scrollable/public" as scrollablePublic;
 @use "selectBox/public" as selectBoxPublic;
+@use "slider/public" as sliderPublic;
 @use "sortable/public" as sortablePublic;
+@use "speedDialAction/public" as speedDialActionPublic;
 @use "splitter/public" as splitterPublic;
 @use "splitterBar/public" as splitterBarPublic;
+@use "stepper/public" as stepperPublic;
 @use "switch/public" as switchPublic;
 @use "tabPanel/public" as tabPanelPublic;
+@use "tabs/public" as tabsPublic;
 @use "tagBox/public" as tagBoxPublic;
 @use "textArea/public" as textAreaPublic;
 @use "textBox/public" as textBoxPublic;
 @use "textEditor/public" as textEditorPublic;
 @use "tileView/public" as tileViewPublic;
+@use "timeView/public" as timeViewPublic;
 @use "toast/public" as toastPublic;
 @use "toolbar/public" as toolbarPublic;
 @use "tooltip/public" as tooltipPublic;
 @use "treeList/public" as treeListPublic;
+@use "treeView/public" as treeViewPublic;
 @use "validation/public" as validationPublic;
+@use "widget/public" as widgetPublic;
 
 :root {
   @include commonPublic.publish();
@@ -86,6 +114,10 @@
   @include colorBoxPublic.publish();
 }
 
+.dx-colorview-container {
+  @include colorViewPublic.publish();
+}
+
 .dx-context-menu {
   @include contextMenuPublic.publish();
 }
@@ -267,3 +299,137 @@
 .dx-validationsummary {
   @include validationPublic.publish();
 }
+
+.dx-calendar {
+  @include calendarPublic.publish();
+}
+
+.dx-checkbox {
+  @include checkBoxPublic.publish();
+}
+
+.dx-drawer {
+  @include drawerPublic.publish();
+}
+
+.dx-filterbuilder,
+.dx-filterbuilder-overlay,
+.dx-filterbuilder-operations {
+  @include filterBuilderPublic.publish();
+}
+
+.dx-form {
+  @include formPublic.publish();
+}
+
+.dx-htmleditor,
+.dx-aidialog,
+.dx-htmleditor-add-image-popup {
+  @include htmlEditorPublic.publish();
+}
+
+.dx-list,
+.dx-list-context-menucontent {
+  @include listPublic.publish();
+}
+
+.dx-popup-wrapper {
+  @include popupPublic.publish();
+}
+
+.dx-radiogroup {
+  @include radioGroupPublic.publish();
+}
+
+.dx-fa-button {
+  @include speedDialActionPublic.publish();
+}
+
+.dx-timeview {
+  @include timeViewPublic.publish();
+}
+
+.dx-treeview {
+  @include treeViewPublic.publish();
+}
+
+.dx-surface {
+  @include widgetPublic.publish();
+}
+
+.dx-filemanager,
+.dx-filemanager-dialog-popup {
+  @include fileManagerPublic.publish();
+}
+
+.dx-scheduler,
+.dx-scheduler-appointment-popup,
+.dx-scheduler-appointment-tooltip-wrapper {
+  @include schedulerPublic.publish();
+}
+
+.dx-tabs {
+  @include tabsPublic.publish();
+}
+
+.dx-chat,
+.dx-messagelist-context-menu-content,
+.dx-chat-confirmation-popup-wrapper {
+  @include chatPublic.publish();
+}
+
+.dx-diagram,
+.dx-diagram-properties-popup,
+.dx-diagram-toolbox-popup,
+.dx-diagram-contextmenu,
+.dx-diagram-context-toolbox,
+.dx-diagram-floating-toolbar-container {
+  @include diagramPublic.publish();
+}
+
+.dx-fileuploader {
+  @include fileUploaderPublic.publish();
+}
+
+.dx-gantt {
+  @include ganttPublic.publish();
+}
+
+.dx-map-container {
+  @include mapPublic.publish();
+}
+
+.dx-pagination,
+.dx-pager {
+  @include paginationPublic.publish();
+}
+
+.dx-pivotgrid,
+.dx-pivotgridfieldchooser,
+.dx-pivotgrid-fields-container {
+  @include pivotGridPublic.publish();
+}
+
+.dx-recurrence-repeat-on,
+.dx-recurrence-button-group,
+.dx-recurrence-numberbox-interval-wrapper,
+.dx-recurrence-radiogroup-repeat-type,
+.dx-recurrence-datebox-until-date,
+.dx-recurrence-numberbox-repeat-count {
+  @include recurrenceEditorPublic.publish();
+}
+
+.dx-slider {
+  @include sliderPublic.publish();
+}
+
+.dx-stepper {
+  @include stepperPublic.publish();
+}
+
+.dx-cardview,
+.dx-cardview-header-item,
+.dx-cardview-column-chooser-list,
+.dx-cardview-column-chooser-plain {
+  @include cardViewPublic.publish();
+}

packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss

@@ -4,21 +4,14 @@ $calendar-content: ds.$color-content !default;
 
 $calendar-navigator-content: ds.$color-content !default;
 
-$calendar-header-content: $calendar-content !default;
-
 $calendar-cell-other-content: ds.$color-content-subtle !default;
 $calendar-bg: transparent !default;
 $calendar-bg-hovered: ds.$color-bg-primary-subtler-selected !default;
-$calendar-cell-border-hovered: $calendar-bg-hovered !default;
-$calendar-cell-content-hovered: $calendar-content !default;
 
 $calendar-cell-bg-selected: ds.$color-bg-primary !default;
 $calendar-cell-content-selected: ds.$color-content-static-dark !default;
 $calendar-cell-bg-active: ds.$color-bg-primary-subtler-active !default;
-$calendar-cell-contoured-border: $calendar-cell-bg-active !default;
 $calendar-invalid-border: ds.$color-border-danger !default;
 $calendar-invalid-border-focused: ds.$color-border-danger-hovered !default;
 $calendar-week-number-cell-content: ds.$color-content-subtle !default;
 $calendar-week-number-cell-bg: ds.$color-bg-canvas !default;
-
-$calendar-cell-other-content-hovered: $calendar-cell-other-content !default;

packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss

@@ -4,18 +4,18 @@
 @use "../sizes" as *;
 @use "../button/mixins" as *;
 @use "../../base/calendar/calendar" with (
-  $calendar-week-day-header-font-size: $calendar-week-day-header-font-size,
-  $calendar-week-day-header-font-weight: $calendar-week-day-header-font-weight,
+  $calendar-week-day-header-font-size: var(--dx-calendar-week-day-header-font-size),
+  $calendar-week-day-header-font-weight: var(--dx-calendar-week-day-header-font-weight),
 );
 @use "../../base/calendar/mixins" as *;
 @include dx-calendar-mixin(
-  $calendar-bg,
+  var(--dx-calendar-bg),
   $calendar-legacy-width,
-  $calendar-legacy-height,
-  $calendar-element-padding,
-  $calendar-footer-button-height,
-  $calendar-invalid-border,
-  $calendar-invalid-border-focused,
+  var(--dx-calendar-legacy-height),
+  var(--dx-calendar-element-padding),
+  var(--dx-calendar-footer-button-height),
+  var(--dx-calendar-invalid-border),
+  var(--dx-calendar-invalid-border-focused),
 );
 
 .dx-calendar-navigator-previous-view,
@@ -24,42 +24,42 @@
 }
 
 @include dx-calendar-navigator-mixin(
-  $calendar-navigator-content,
+  var(--dx-calendar-navigator-content),
 );
 @include dx-calendar-body-mixin(
-  $calendar-week-number-cell-content,
-  $calendar-week-number-cell-bg,
-  $calendar-week-number-border-radius,
-  $calendar-cell-font-size,
-  $calendar-header-content,
+  var(--dx-calendar-week-number-cell-content),
+  var(--dx-calendar-week-number-cell-bg),
+  var(--dx-calendar-week-number-border-radius),
+  var(--dx-calendar-cell-font-size),
+  var(--dx-calendar-header-content),
 );
 @include dx-calendar-cell-mixin(
-  $calendar-cell-contoured-border-radius,
-  $calendar-content,
+  var(--dx-calendar-cell-contoured-border-radius),
+  var(--dx-calendar-content),
   $global-border-radius,
-  $calendar-cell-bg-selected,
-  $calendar-bg-hovered,
-  $calendar-cell-content-hovered,
-  $calendar-cell-bg-active,
-  $calendar-cell-bg-selected,
-  $calendar-cell-content-selected,
-  $calendar-cell-contoured-border,
-  $calendar-cell-other-content,
-  $calendar-cell-other-content-hovered,
-  $calendar-cell-border-hovered,
+  var(--dx-calendar-cell-bg-selected),
+  var(--dx-calendar-bg-hovered),
+  var(--dx-calendar-cell-content-hovered),
+  var(--dx-calendar-cell-bg-active),
+  var(--dx-calendar-cell-bg-selected),
+  var(--dx-calendar-cell-content-selected),
+  var(--dx-calendar-cell-contoured-border),
+  var(--dx-calendar-cell-other-content),
+  var(--dx-calendar-cell-other-content-hovered),
+  var(--dx-calendar-cell-border-hovered),
   999em,
 );
 @include dx-calendar-cell-in-range-mixin(
   "::before",
-  $calendar-bg-hovered,
-  $calendar-cell-border-hovered,
+  var(--dx-calendar-bg-hovered),
+  var(--dx-calendar-cell-border-hovered),
   999em,
   0,
 );
 @include dx-calendar-cell-in-range-mixin(
   "::after",
   inherit,
-  $calendar-cell-border-hovered,
+  var(--dx-calendar-cell-border-hovered),
   999em,
   1px, // dx-line-width: 1px, the range cell border passed to dx-calendar-cell-in-range-mixin
   ".dx-calendar-cell-range-hover",

packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss

@@ -0,0 +1,31 @@
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-calendar-bg: #{$calendar-bg};
+  --dx-calendar-bg-hovered: #{$calendar-bg-hovered};
+  --dx-calendar-cell-bg-active: #{$calendar-cell-bg-active};
+  --dx-calendar-cell-bg-selected: #{$calendar-cell-bg-selected};
+  --dx-calendar-cell-border-hovered: var(--dx-calendar-bg-hovered);
+  --dx-calendar-cell-content-hovered: var(--dx-calendar-content);
+  --dx-calendar-cell-content-selected: #{$calendar-cell-content-selected};
+  --dx-calendar-cell-contoured-border: var(--dx-calendar-cell-bg-active);
+  --dx-calendar-cell-contoured-border-radius: #{$calendar-cell-contoured-border-radius};
+  --dx-calendar-cell-font-size: #{$calendar-cell-font-size};
+  --dx-calendar-cell-other-content: #{$calendar-cell-other-content};
+  --dx-calendar-cell-other-content-hovered: var(--dx-calendar-cell-other-content);
+  --dx-calendar-content: #{$calendar-content};
+  --dx-calendar-element-padding: #{$calendar-element-padding};
+  --dx-calendar-footer-button-height: #{$calendar-footer-button-height};
+  --dx-calendar-header-content: var(--dx-calendar-content);
+  --dx-calendar-invalid-border: #{$calendar-invalid-border};
+  --dx-calendar-invalid-border-focused: #{$calendar-invalid-border-focused};
+  --dx-calendar-legacy-height: #{$calendar-legacy-height};
+  --dx-calendar-legacy-width: #{$calendar-legacy-width};
+  --dx-calendar-navigator-content: #{$calendar-navigator-content};
+  --dx-calendar-week-day-header-font-size: #{$calendar-week-day-header-font-size};
+  --dx-calendar-week-day-header-font-weight: #{$calendar-week-day-header-font-weight};
+  --dx-calendar-week-number-border-radius: #{$calendar-week-number-border-radius};
+  --dx-calendar-week-number-cell-bg: #{$calendar-week-number-cell-bg};
+  --dx-calendar-week-number-cell-content: #{$calendar-week-number-cell-content};
+}