Skip to content

Fluent-next: validate role assignment across all components #35107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EugeniyKiyashko wants to merge 23 commits into
base: feature/26_2_new_fluent_theme_with_design_tokens
Choose a base branch
from
Open

Fluent-next: validate role assignment across all components #35107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
79557e4
Fluent-next: check role assignment against the package component tier…
EugeniyKiyashko Sep 8, 2026
2bd667c
Fluent-next: gate the role comparison so the 25 open disagreements ca…
EugeniyKiyashko Sep 8, 2026
c0347c9
Fluent-next: turn dx-no-semantic-role into a decision table and gate …
EugeniyKiyashko Sep 8, 2026
0d1a86c
Fluent-next: decide all 59 role disagreements and read the slot again…
EugeniyKiyashko Sep 8, 2026
f80043d
Fluent-next: measure the state ladders the theme declares but does no…
EugeniyKiyashko Sep 8, 2026
8463717
Fluent-next: measure contrast where the bundle itself pairs a text wi…
EugeniyKiyashko Sep 8, 2026
4639389
Fluent-next: ask whether one concept gets one role across all components
EugeniyKiyashko Sep 8, 2026
5ab7216
Fluent-next: fix the two role defects a standard decides, not a person
EugeniyKiyashko Sep 8, 2026
69ecb91
Fluent-next: record where a role decision was mine rather than read o…
EugeniyKiyashko Sep 8, 2026
6604d74
Fluent-next: check four questions against Fluent 2 itself, and revert…
EugeniyKiyashko Sep 8, 2026
bc1e526
Fluent-next: the package's focus-rect component was invisible to the …
EugeniyKiyashko Sep 8, 2026
9c03a63
Fluent-next: generate the decision pages, and fix the line numbers th…
EugeniyKiyashko Sep 8, 2026
fca2da7
Fluent-next: half the coverage gap was my spelling, not a missing cou…
EugeniyKiyashko Sep 8, 2026
e69961c
Fluent-next: put the coverage analysis on the page, and stop it contr…
EugeniyKiyashko Sep 8, 2026
49e9b14
Fluent-next: measure whether the neighbours agree with each other
EugeniyKiyashko Sep 8, 2026
f976abd
Fluent-next: record why a contrast pair below AA does not turn the da…
EugeniyKiyashko Sep 8, 2026
4ac0205
Fluent-next: make a stale decision page a red test instead of a habit
EugeniyKiyashko Sep 8, 2026
311facb
Fluent-next: Д7 was measuring the wrong element - the splitter bar it…
EugeniyKiyashko Sep 8, 2026
5ce585d
Fluent-next: Д8 is a dead declaration and Д9 is its own ladder - neit…
EugeniyKiyashko Sep 8, 2026
71d3c5e
Fluent-next: delete the dead list-border-disabled, rule and all
EugeniyKiyashko Sep 8, 2026
3ef8d77
Fluent-next: the tabs indicator is a selector, not a border - rename …
EugeniyKiyashko Sep 9, 2026
acbe2c4
Fluent-next: question numbers were positional, so closing one moved a…
EugeniyKiyashko Sep 9, 2026
104616a
Fluent-next: treeView should not style the checkbox at all - remove i…
EugeniyKiyashko Sep 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 203 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent-next/ROLES_QUESTIONS.html
View file
Open in desktop

Large diffs are not rendered by default.

75 changes: 75 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent-next/ROLES_TYPOGRAPHY.html
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ $palette-border: ds.$color-border !default;
$global-font-family: ds.$font-family-sans-serif !default;
$invalid-badge-bg: ds.$color-content-danger-shared !default;
$invalid-badge-content: ds.$color-content-static-dark !default;
$valid-badge-content: ds.$color-bg-success !default;
$valid-badge-content: ds.$color-content-success !default;
$palette-text: ds.$color-content !default;
$global-bg: ds.$color-bg !default;
$global-content: ds.$color-content !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use "../../../_design-system/variables/ds" as ds;

$fieldset-field-label-content: ds.$color-content !default;
$fieldset-field-value-invalid-content: ds.$color-border-danger !default;
$fieldset-field-value-invalid-content: ds.$color-content-danger !default;

$fieldset-field-label-content-disabled: ds.$color-content-disabled !default;
1 change: 0 additions & 1 deletion packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ $list-base-select-all-separator-bg: ds.$color-border-subtle !default;

$list-group-content: ds.$color-content !default;

$list-border-disabled: ds.$color-border-disabled !default;
$list-content-disabled: ds.$color-content-disabled !default;
$list-inverted-content: ds.$color-content-static-dark !default;

Expand Down
4 changes: 0 additions & 4 deletions packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@
.dx-state-disabled {
.dx-list-select-all-label {
color: var(--dx-list-content-disabled);

&::after {
color: var(--dx-list-border-disabled);
}
}

.dx-list-item-chevron {
Expand Down
1 change: 0 additions & 1 deletion packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
@mixin publish {
--dx-list-base-select-all-separator-bg: #{$list-base-select-all-separator-bg};
--dx-list-border: #{$list-border};
--dx-list-border-disabled: #{$list-border-disabled};
--dx-list-border-width: #{$list-border-width};
--dx-list-bottom-padding: #{$list-bottom-padding};
--dx-list-content-disabled: #{$list-content-disabled};
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "../../../_design-system/variables/ds" as ds;

$switch-on-border: ds.$color-bg-primary-shared !default;
$switch-on-border-hovered: ds.$color-bg-primary-shared-hovered !default;
$switch-on-border: ds.$color-border-primary-shared !default;
$switch-on-border-hovered: ds.$color-border-primary-shared-hovered !default;
$switch-on-border-focused: ds.$color-bg-primary-active !default;

$switch-bg: ds.$color-none !default;
Expand Down
14 changes: 7 additions & 7 deletions packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,12 @@
--dx-tabs-nav-button-bg: #{$tabs-nav-button-bg};
--dx-tabs-nav-button-content-disabled: #{$tabs-nav-button-content-disabled};
--dx-tabs-tab-accent-font-weight: #{$tabs-tab-accent-font-weight};
--dx-tabs-tab-basic-border-selected: #{$tabs-tab-basic-border-selected};
--dx-tabs-tab-basic-font-weight: #{$tabs-tab-basic-font-weight};
--dx-tabs-tab-basic-selector-selected: #{$tabs-tab-basic-selector-selected};
--dx-tabs-tab-bg: #{$tabs-tab-bg};
--dx-tabs-tab-bg-active: #{$tabs-tab-bg-active};
--dx-tabs-tab-bg-focused: #{$tabs-tab-bg-focused};
--dx-tabs-tab-bg-hovered: #{$tabs-tab-bg-hovered};
--dx-tabs-tab-border-active: #{$tabs-tab-border-active};
--dx-tabs-tab-border-disabled: #{$tabs-tab-border-disabled};
--dx-tabs-tab-border-hovered: #{$tabs-tab-border-hovered};
--dx-tabs-tab-border-selected-active: #{$tabs-tab-border-selected-active};
--dx-tabs-tab-border-selected-focused: #{$tabs-tab-border-selected-focused};
--dx-tabs-tab-border-selected-hovered: #{$tabs-tab-border-selected-hovered};
--dx-tabs-tab-content: #{$tabs-tab-content};
--dx-tabs-tab-content-disabled: #{$tabs-tab-content-disabled};
--dx-tabs-tab-content-selected: #{$tabs-tab-content-selected};
Expand All @@ -44,6 +38,12 @@
--dx-tabs-tab-primary-bg-active: #{$tabs-tab-primary-bg-active};
--dx-tabs-tab-primary-bg-focused: #{$tabs-tab-primary-bg-focused};
--dx-tabs-tab-primary-bg-hovered: #{$tabs-tab-primary-bg-hovered};
--dx-tabs-tab-selector-active: #{$tabs-tab-selector-active};
--dx-tabs-tab-selector-disabled: #{$tabs-tab-selector-disabled};
--dx-tabs-tab-selector-hovered: #{$tabs-tab-selector-hovered};
--dx-tabs-tab-selector-selected-active: #{$tabs-tab-selector-selected-active};
--dx-tabs-tab-selector-selected-focused: #{$tabs-tab-selector-selected-focused};
--dx-tabs-tab-selector-selected-hovered: #{$tabs-tab-selector-selected-hovered};
--dx-tabs-tab-vertical-nav-button-content-padding: #{$tabs-tab-vertical-nav-button-content-padding};
--dx-tabs-text-column-gap: #{$tabs-text-column-gap};

Expand Down
32 changes: 16 additions & 16 deletions packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,36 +37,36 @@
&.dx-tab-indicator-position-bottom {
.dx-tab {
&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
}
}

.dx-tab-selected {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));

&.dx-state-focused {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
}

&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
}

&.dx-state-disabled {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}

&.dx-state-disabled .dx-tab-selected {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}

Expand All @@ -86,36 +86,36 @@
&.dx-tab-indicator-position-left {
.dx-tab {
&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
}
}

.dx-tab-selected {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));

&.dx-state-focused {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
}

&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
}

&.dx-state-disabled {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}

&.dx-state-disabled .dx-tab-selected {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}
}
32 changes: 16 additions & 16 deletions ...ges/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,38 +29,38 @@
&.dx-tab-indicator-position-bottom {
.dx-tab {
&.dx-state-hover .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-hovered));
}

&.dx-state-active .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
}

&.dx-tab-selected {
.dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));
}

&.dx-state-focused .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
}

&.dx-state-hover .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
}

&.dx-state-active .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
}

&.dx-state-disabled .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}
}

&.dx-state-disabled .dx-tab.dx-tab-selected .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}

Expand All @@ -82,36 +82,36 @@
&.dx-tab-indicator-position-left {
.dx-tab {
&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
}
}

.dx-tab-selected {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-border-selected));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));

&.dx-state-focused {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-focused));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
}

&.dx-state-hover {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-hovered));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
}

&.dx-state-active {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-selected-active));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
}

&.dx-state-disabled {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}

&.dx-state-disabled .dx-tab-selected .dx-tab-content {
@include dx-tabs-indicator-background(var(--dx-tabs-tab-border-disabled));
@include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
}
}
}
16 changes: 8 additions & 8 deletions packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ $tabs-tab-content-selected: ds.$color-content !default;

$tabs-tab-content-disabled: ds.$color-content-disabled !default;

$tabs-tab-basic-border-selected: ds.$color-content-primary !default;
$tabs-tab-border-selected-active: ds.$color-content-primary-active !default;
$tabs-tab-border-selected-hovered: ds.$color-content-primary-hovered !default;
$tabs-tab-border-selected-focused: ds.$color-content-primary !default;
$tabs-tab-border-active: ds.$color-border-active !default;
$tabs-tab-border-hovered: ds.$color-border-hovered !default;

$tabs-tab-border-disabled: ds.$color-content-disabled !default;
$tabs-tab-basic-selector-selected: ds.$color-border-primary-shared !default;
$tabs-tab-selector-selected-active: ds.$color-border-primary-shared-active !default;
$tabs-tab-selector-selected-hovered: ds.$color-border-primary-shared-hovered !default;
$tabs-tab-selector-selected-focused: ds.$color-border-primary-shared !default;
$tabs-tab-selector-active: ds.$color-border-active !default;
$tabs-tab-selector-hovered: ds.$color-border-hovered !default;

$tabs-tab-selector-disabled: ds.$color-content-disabled !default;

$tabs-tab-bg: transparent !default;

Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,4 @@ $text-editor-label-content-focused: ds.$color-content-primary !default;
}

// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
$text-editor-invalid-content: ds.$color-border-danger-shared !default;
$text-editor-invalid-content: ds.$color-content-danger !default;
4 changes: 0 additions & 4 deletions packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ $tree-view-spin-icon: ds.$color-content-subtle !default;
$tree-view-spin-icon-disabled: ds.$color-content-disabled !default;
$tree-view-checkbox-checked-border-focused: ds.$color-border-primary-shared-active !default;

$tree-view-checkbox-border-disabled: ds.$color-content-disabled !default;
$tree-view-checkbox-icon-disabled: ds.$color-content-disabled !default;
$tree-view-checkbox-indeterminate-bg-disabled: ds.$color-content-disabled !default;
$tree-view-checkbox-bg-disabled: ds.$color-bg-disabled !default;
$tree-view-item-content-disabled: ds.$color-content-disabled !default;

/* Was fed by a *-disabled token holding a neutral grey; 262.15.0 dropped it. The neutral border
Expand Down
33 changes: 0 additions & 33 deletions packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,6 @@
}

.dx-treeview-item-with-checkbox {
.dx-treeview-item {
.dx-checkbox.dx-state-disabled {
.dx-checkbox-icon {
border-color: var(--dx-tree-view-item-content-disabled);
}

&.dx-checkbox-indeterminate {
.dx-checkbox-icon::before {
background-color: var(--dx-tree-view-item-content-disabled);
}
}
}
}

&.dx-state-focused > .dx-treeview-item {
.dx-checkbox {
.dx-checkbox-icon {
Expand All @@ -81,25 +67,6 @@
}
}
}

.dx-checkbox.dx-state-disabled {
.dx-checkbox-icon {
background-color: var(--dx-tree-view-checkbox-bg-disabled);
border-color: var(--dx-tree-view-checkbox-border-disabled);
}

&.dx-checkbox-checked {
.dx-checkbox-icon {
color: var(--dx-tree-view-checkbox-icon-disabled);
}
}

&.dx-checkbox-indeterminate {
.dx-checkbox-icon::before {
background-color: var(--dx-tree-view-checkbox-indeterminate-bg-disabled);
}
}
}
}
}

Expand Down
4 changes: 0 additions & 4 deletions packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,10 @@
--dx-tree-view-border-padding: #{$tree-view-border-padding};
--dx-tree-view-border-visible-border: #{$tree-view-border-visible-border};
--dx-tree-view-checkbox-accent-content-focused: #{$tree-view-checkbox-accent-content-focused};
--dx-tree-view-checkbox-bg-disabled: #{$tree-view-checkbox-bg-disabled};
--dx-tree-view-checkbox-bg-focused: #{$tree-view-checkbox-bg-focused};
--dx-tree-view-checkbox-border-disabled: #{$tree-view-checkbox-border-disabled};
--dx-tree-view-checkbox-border-focused: #{$tree-view-checkbox-border-focused};
--dx-tree-view-checkbox-checked-border-focused: #{$tree-view-checkbox-checked-border-focused};
--dx-tree-view-checkbox-container-size: #{$tree-view-checkbox-container-size};
--dx-tree-view-checkbox-icon-disabled: #{$tree-view-checkbox-icon-disabled};
--dx-tree-view-checkbox-indeterminate-bg-disabled: #{$tree-view-checkbox-indeterminate-bg-disabled};
--dx-tree-view-checkbox-offset: #{$tree-view-checkbox-offset};
--dx-tree-view-container-with-border-offset: #{$tree-view-container-with-border-offset};
--dx-tree-view-content: #{$tree-view-content};
Expand Down
Loading
Loading