fluent-next: drop the blanket disabled dim

The theme no longer dims a disabled widget wholesale. Every component with a
surface of its own paints the state from the disabled roles, which is what Fluent
specifies and how Blazor's themes are built - they carry no global rule either and
keep opacity for a composite dimmed as a whole, such as a scheduler appointment.
What stays in the shared rule is the part that is not a colour: no text selection,
no pointer cursor on something that cannot be used.

This is a fluent-next-only change. Each theme applies the dim from its own
widget/_index.scss and base merely defines the mixin, so generic, material and
fluent are untouched - fluent still measures 0.38 on a disabled widget.

ColorView was the one component the dim was really carrying. It cannot be greyed
out, its content is the colour, so it follows Blazor's colour palette: the tile
rings, the handles and the captions take the disabled roles and the swatches are
left alone. ContextMenu and ActionSheet got the same treatment as the other
item lists.

Measured on the comparison page, now 59 cases covering the whole base the dim used
to reach - 33 components were dimmed by it in legacy. Four of the 59 render no
disabled state, and three are Splitter, Drawer and Box: layout containers with no
surface, which is also what Blazor does, since their content is made of components
that mark themselves.

Not verified: ContextMenu and ActionSheet render into portals, so the gallery
measures their host rather than their content and cannot confirm them. Their rules
are in the bundle; they need a look on real demos.

The gate that asserted the dim exists is inverted: no rule may apply an opacity
through a selector that reaches any widget at all. It matches on the shape of the
selector, so a component-scoped rule like the TimeView reset is not caught.

Author: EugeniyKiyashko

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

@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$action-sheet-content-disabled: ds.$color-content-disabled !default;

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

@@ -16,3 +16,13 @@
   margin: 0;
   margin-top: var(--dx-action-sheet-item-margin-block-end);
 }
+
+/* The sheet's items are buttons that are not disabled themselves, so their text is painted here
+rather than through the button tier, which belongs to the button component. */
+.dx-actionsheet.dx-state-disabled,
+.dx-state-disabled .dx-actionsheet {
+  .dx-button-text,
+  .dx-actionsheet-title {
+    color: var(--dx-action-sheet-content-disabled);
+  }
+}

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

@@ -2,6 +2,7 @@
 @use "sizes" as *;
 
 @mixin publish {
+  --dx-action-sheet-content-disabled: #{$action-sheet-content-disabled};
   --dx-action-sheet-item-margin: #{$action-sheet-item-margin};
   --dx-action-sheet-item-margin-block-end: #{$action-sheet-item-margin-block-end};
 }

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

@@ -4,3 +4,10 @@ $color-view-border: ds.$color-border !default;
 $color-view-label-content: ds.$color-content-subtle !default;
 $color-view-handle-content: ds.$color-bg !default;
 $color-view-handle-border: ds.$color-border !default;
+
+/* A disabled palette cannot be greyed out: its content is the colour. Blazor marks the tile
+outlines and the captions instead (ds-themes/components/color-palette/states.scss) and leaves the
+swatches untouched; these three do the same here. */
+$color-view-border-disabled: ds.$color-border-disabled !default;
+$color-view-label-content-disabled: ds.$color-content-disabled !default;
+$color-view-handle-border-disabled: ds.$color-border-disabled !default;

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

@@ -110,3 +110,22 @@
     }
   }
 }
+
+.dx-colorview-container.dx-state-disabled,
+.dx-state-disabled .dx-colorview-container {
+  label {
+    color: var(--dx-color-view-label-content-disabled);
+  }
+
+  .dx-colorview-palette-cell,
+  .dx-colorview-alpha-channel-border,
+  .dx-colorview-hue-scale-wrapper,
+  .dx-colorview-color-preview-container {
+    box-shadow: 0 0 0 1px var(--dx-color-view-border-disabled); // dx-line-width: 1px hairline ring drawn as a shadow
+  }
+
+  .dx-colorview-palette-handle,
+  .dx-colorview-hue-scale-handle {
+    border-color: var(--dx-color-view-handle-border-disabled);
+  }
+}

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

@@ -2,6 +2,9 @@
 @use "sizes" as *;
 
 @mixin publish {
+  --dx-color-view-border-disabled: #{$color-view-border-disabled};
+  --dx-color-view-handle-border-disabled: #{$color-view-handle-border-disabled};
+  --dx-color-view-label-content-disabled: #{$color-view-label-content-disabled};
   --dx-color-view-alpha-margin: #{$color-view-alpha-margin};
   --dx-color-view-alpha-width: #{$color-view-alpha-width};
   --dx-color-view-bg-box-palette-cell-bg: var(--dx-surface-overlay);

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

@@ -81,3 +81,14 @@
     background-color: menuColors.$menu-separator-bg;
   }
 }
+
+/* A disabled context menu had nothing of its own once the blanket dim was gone: its items are
+plain markup, not widgets that mark themselves. */
+.dx-context-menu.dx-state-disabled,
+.dx-state-disabled .dx-context-menu {
+  .dx-menu-item-text,
+  .dx-menu-item-content,
+  .dx-menu-item-popout {
+    color: var(--dx-context-menu-content-disabled);
+  }
+}

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

@@ -2,19 +2,25 @@
 @use "sizes" as *;
 @use "../common/mixins" as *;
 @use "../../base/widget";
+@use "../../base/mixins" as *;
 
 .dx-widget {
   @include dx-base-typography();
 }
 
+/* No blanket dim. Every component that has a surface of its own paints its disabled state from
+the disabled roles, the way Fluent does it and the way Blazor's themes do - they carry no global
+rule either, and reserve opacity for a composite that is dimmed as a whole, such as a scheduler
+appointment. What is left here is the part that is not a colour: no text selection and no pointer
+cursor on something that cannot be used. Layout containers - splitter, drawer, box - show nothing
+of their own, which is also what Blazor does: their content is made of components that mark
+themselves. The remaining opacity users are named and listed in DISABLED_STATES.md. */
 .dx-state-disabled {
   &.dx-widget,
   .dx-widget {
-    .dx-widget {
-      opacity: 1;
-    }
+    @include user-select(none);
 
-    @include disabled-widget();
+    cursor: default;
   }
 }
 

packages/devextreme-scss/tests/disabled-paint.test.ts

@@ -175,11 +175,25 @@ describe.each(bundleNames)('%s', (bundleName) => {
     expect(findBorrowedNames(css)).toEqual([]);
   });
 
-  test('the blanket dim is still in force for components that do not paint', () => {
-    const blanket = rules.find((r) => /\.dx-state-disabled\.dx-widget(,|\{|$)/.test(`${r.selector}{`)
-      && /opacity\s*:\s*var\(--dx-global-disabled-opacity\)/.test(r.body));
-
-    expect(blanket).toBeDefined();
+  // The theme has no blanket dim any more: every component with a surface of its own paints its
+  // disabled state from the roles, the way Fluent specifies it and the way Blazor's themes are
+  // built. A rule that dims whatever it finds would put that back and hide the next gap.
+  test('no rule dims every widget at once', () => {
+    // A blanket selector is one that reaches any widget at all: nothing but the state class and
+    // .dx-widget. A component-scoped rule such as `.dx-timeview .dx-state-disabled .dx-widget`
+    // is not one, and neither is anything that resets the opacity back to 1.
+    const isBlanket = (selector: string): boolean => selector
+      .split(',')
+      .map((part) => part.trim())
+      .some((part) => /^\.dx-state-disabled(\.dx-widget)?( \.dx-widget)?$/.test(part));
+
+    const dimming = rules
+      .filter((r) => isBlanket(r.selector))
+      .filter((r) => /(^|;)\s*opacity\s*:\s*([^;]+)/.test(r.body)
+        && !/(^|;)\s*opacity\s*:\s*1\s*(;|$)/.test(r.body))
+      .map((r) => r.selector);
+
+    expect(dimming).toEqual([]);
   });
 });
 

packages/devextreme/playground/disabled-readonly-compare-frame.html

@@ -104,12 +104,24 @@
   ['treeList', 'TreeList', 190, (h, f) => $(h).dxTreeList({ dataSource: [{ id: 1, head: 0, name: 'Root' }, { id: 2, head: 1, name: 'Child' }], keyExpr: 'id', parentIdExpr: 'head', autoExpandAll: true, showBorders: true, ...f })],
   ['cardView', 'CardView', 200, (h, f) => $(h).dxCardView({ dataSource: [{ id: 1, name: 'Alpha' }], keyExpr: 'id', headerPanel: { visible: true }, ...f })],
   ['pivotGrid', 'PivotGrid', 200, (h, f) => $(h).dxPivotGrid({ dataSource: { fields: [{ dataField: 'a', area: 'row' }, { dataField: 'v', area: 'data', summaryType: 'sum' }], store: [{ a: 'x', v: 1 }, { a: 'y', v: 2 }] }, height: 170, ...f })],
-  ['recurrenceEditor', 'RecurrenceEditor', 200, (h, f) => $(h).dxRecurrenceEditor({ value: 'FREQ=WEEKLY;BYDAY=MO', startDate: new Date(2026, 0, 5), ...f })],
   ['splitter', 'Splitter', 130, (h, f) => $(h).dxSplitter({ height: 100, items: [{ text: 'One' }, { text: 'Two' }], ...f })],
   ['scheduler', 'Scheduler', 300, (h, f) => $(h).dxScheduler({ dataSource: [{ text: 'Event', startDate: new Date(2026, 0, 5, 10), endDate: new Date(2026, 0, 5, 11) }], currentDate: new Date(2026, 0, 5), currentView: 'day', height: 260, ...f })],
   ['fileManager', 'FileManager', 300, (h, f) => $(h).dxFileManager({ fileSystemProvider: [{ name: 'Folder', isDirectory: true, items: [{ name: 'file.txt', size: 10 }] }], height: 260, ...f })],
   ['drawer', 'Drawer', 150, (h, f) => $(h).dxDrawer({ opened: true, height: 120, template: () => $('<div>').text('panel'), ...f })],
   ['box', 'Box', 90, (h, f) => $(h).dxBox({ direction: 'row', height: 60, items: [{ ratio: 1, text: 'One' }, { ratio: 1, text: 'Two' }], ...f })],
+
+  // --- the rest of what the blanket dim used to reach, so its whole base is visible here ----
+  ['scrollView', 'ScrollView', 130, (h, f) => { h.innerHTML = '<div style="height:200px">scrollable content</div>'; $(h).dxScrollView({ height: 100, ...f }); }],
+  ['loadIndicator', 'LoadIndicator', 80, (h, f) => $(h).dxLoadIndicator({ visible: true, ...f })],
+  ['speedDialAction', 'SpeedDialAction', 110, (h, f) => $(h).dxSpeedDialAction({ icon: 'add', ...f })],
+  ['contextMenu', 'ContextMenu', 140, (h, f) => $(h).dxContextMenu({ items: [{ text: 'One' }, { text: 'Two' }], visible: true, target: h, ...f })],
+  ['actionSheet', 'ActionSheet', 130, (h, f) => $(h).dxActionSheet({ items: [{ text: 'One' }, { text: 'Two' }], usePopover: false, ...f })],
+  // Markup-only blocks: the dim reached them through .dx-widget just like a real widget.
+  ['badge', 'Badge  (markup)', 70, (h, f) => { h.innerHTML = '<span class="dx-badge">7</span>'; h.classList.add('dx-widget'); if (f.disabled) h.classList.add('dx-state-disabled'); }],
+  ['card', 'Card  (markup)', 90, (h, f) => { h.innerHTML = '<div class="dx-card" style="width:180px;padding:8px">Card</div>'; h.classList.add('dx-widget'); if (f.disabled) h.classList.add('dx-state-disabled'); }],
+  ['informer', 'Informer  (markup)', 80, (h, f) => { h.innerHTML = '<div class="dx-informer"><div class="dx-informer-icon"></div>Informer</div>'; h.classList.add('dx-widget'); if (f.disabled) h.classList.add('dx-state-disabled'); }],
+  ['fieldset', 'Fieldset  (markup)', 110, (h, f) => { h.innerHTML = '<div class="dx-fieldset"><div class="dx-field"><div class="dx-field-label">Label</div><div class="dx-field-value-static">Value</div></div></div>'; h.classList.add('dx-widget'); if (f.disabled) h.classList.add('dx-state-disabled'); }],
+  ['splitterBar', 'SplitterBar  (markup)', 70, (h, f) => { h.innerHTML = '<div class="dx-splitter-bar"><div class="dx-splitter-bar-icon"></div></div>'; h.classList.add('dx-widget'); if (f.disabled) h.classList.add('dx-state-disabled'); }],
 ];
 
 // readonly is not a thing for every component: only those with .dx-state-readonly rules