Design System: open up the fixed sizes in the shared base layer

packages/devextreme-scss/.gitignore

@@ -1,2 +1,3 @@
 scss/bundles
 scss/_design-system
+.size-runs

packages/devextreme-scss/scss/widgets/base/_contextMenu.scss

@@ -11,7 +11,7 @@ $contextmenu-menu-separator-margin: 5px 0 !default;
 
   .dx-menu-items-container {
 
-    // fluent-next passes null: its own rule paints this box, the base copy would be dead weight
+    // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
     @if $contextmenu-menu-items-container-padding {
       padding: $contextmenu-menu-items-container-padding;
     }

packages/devextreme-scss/scss/widgets/base/_fileUploader.scss

@@ -124,7 +124,7 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative
   align-items: center;
   width: 100%;
 
-  // fluent-next passes null: its own rule paints this box, the base copy would be dead weight
+  // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
   @if $fileuploader-file-container-padding {
     padding: $fileuploader-file-container-padding;
   }
@@ -210,7 +210,7 @@ $fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative
   float: left;
   width: 100%;
   height: $fileuploader-progressbar-height;
-  margin-top: -6px;
+  margin-top: -6px; // dx-fixed-size: pulls the status text onto the progress line
 }
 
 .dx-fileuploader-file-name {

packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use "sass:math";
+@use "sass:meta";
 @use "sass:selector";
 
 $htmleditor-code-block-bg: rgba(191, 191, 191, 0.15) !default;
@@ -11,12 +12,32 @@ $list-style-width: 1.2em;
 $list-style-margin: 0.3em;
 $list-style-outer-width: $list-style-margin + $list-style-width;
 $max-indent: 9;
+
+/*
+ * dx-fixed-size: the drag handle's size; its half is negated at twenty positions, so feeding a
+ * var() here would trade one knob nobody retunes for twenty calc() in the bundle.
+ */
 $resize-handle-size: 11px;
-$touch-resize-handle-size: 15px;
+$touch-resize-handle-size: 15px; // dx-fixed-size: the touch variant of the same handle
 $half-resize-handle-size: math.div($resize-handle-size, 2);
 $half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);
 
-$transparent-border: 1px solid transparent;
+$htmleditor-border-width: 1px !default;
+$transparent-border: $htmleditor-border-width solid transparent;
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$variable-padding: 3px 6px !default;
+$variable-border-radius: 8px !default;
+$blockquote-padding-inline-start: 12px !default;
+$blockquote-border-inline-start-width: 4px !default;
+$table-cell-padding: 2px 5px !default;
+$placeholder-inset-inline: 15px !default;
+$htmleditor-content-padding: 12px 15px !default;
+$mention-padding-block: 1px !default;
+$mention-border-radius: 2px !default;
+$mention-margin-inline: 2px !default;
+$table-resizer-thickness: 5px !default;
+$table-resizer-highlight-thickness: 3px !default;
 
 @function add-counter-reset($counter, $start: 1) {
   @if $counter > $start {
@@ -130,15 +151,15 @@ $transparent-border: 1px solid transparent;
   display: flex;
   flex: 1;
   flex-basis: auto;
-  min-height: 1px;
+  min-height: 1px; // dx-structural: lets the flex item shrink below its content, not a designed height
   margin: 0;
   position: relative;
   overflow: hidden;
 }
 
 .ql-clipboard { // stylelint-disable-line selector-class-pattern
-  left: -100000px;
-  height: 1px;
+  left: -100000px; // dx-structural: parks Quill's clipboard element off-screen
+  height: 1px; // dx-structural: collapses the off-screen clipboard element, not a designed height
   overflow-y: hidden;
   position: absolute;
   top: 50%;
@@ -155,14 +176,14 @@ $transparent-border: 1px solid transparent;
   width: 100%;
   outline: none;
   overflow-y: auto;
-  padding: 12px 15px;
+  padding: $htmleditor-content-padding;
   white-space: pre-wrap;
   word-wrap: break-word;
 
   .dx-variable {
     & > span {
-      padding: 3px 6px;
-      border-radius: 8px;
+      padding: $variable-padding;
+      border-radius: $variable-border-radius;
     }
   }
 
@@ -202,8 +223,8 @@ $transparent-border: 1px solid transparent;
 
   td,
   th {
-    border: 1px solid #000;
-    padding: 2px 5px;
+    border: 1px solid #000; // dx-line-width: a table hairline; the colour beside it is hard-coded too
+    padding: $table-cell-padding;
   }
 
   ol {
@@ -319,10 +340,10 @@ $transparent-border: 1px solid transparent;
       color: $htmleditor-placeholder-color;
       content: attr(data-placeholder);
       font-style: italic;
-      left: 15px;
+      left: $placeholder-inset-inline;
       pointer-events: none;
       position: absolute;
-      right: 15px;
+      right: $placeholder-inset-inline;
     }
 
     &::after {
@@ -332,21 +353,21 @@ $transparent-border: 1px solid transparent;
     }
 
     &[data-placeholder] > p {
-      height: 0.1px;
+      height: 0.1px; // dx-structural: a non-zero height the placeholder needs, not a designed size
     }
   }
 
   // stylelint-enable selector-class-pattern
 
   blockquote {
-    padding-inline-start: 12px;
-    border-inline-start: 4px solid;
+    padding-inline-start: $blockquote-padding-inline-start;
+    border-inline-start: $blockquote-border-inline-start-width solid;
   }
 }
 
 .dx-suggestion-list-wrapper {
   .dx-list {
-    min-height: 35px;
+    min-height: 35px; // dx-fixed-size: the mention suggestion list keeps a row of space while filtering
 
     .dx-scrollable-content {
       margin: 0;
@@ -355,7 +376,7 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-suggestion-list {
-  min-width: 50px;
+  min-width: 50px; // dx-fixed-size: the narrowest the mention suggestion list may get
 
   .dx-list-item {
     display: block;
@@ -368,7 +389,7 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-formdialog-form {
-  min-width: 360px;
+  min-width: 360px; // dx-fixed-size: the link/image dialog form width
 }
 
 .dx-aidialog {
@@ -393,14 +414,14 @@ $transparent-border: 1px solid transparent;
 .dx-aidialog-title {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 6px; // dx-fixed-size: gap between the AI dialog title icon and its text
   font-weight: $htmleditor-aidialog-title-font-weight;
 }
 
 .dx-overlay-content {
   &.dx-popup-fullscreen {
     .dx-formdialog-form {
-      min-width: 240px;
+      min-width: 240px; // dx-fixed-size: the same dialog form once the popup goes fullscreen
     }
   }
 }
@@ -413,7 +434,7 @@ $transparent-border: 1px solid transparent;
 .dx-background-format {
   .dx-icon-color,
   .dx-icon-background {
-    border-bottom: 3px solid transparent;
+    border-bottom: 3px solid transparent; // dx-line-width: the strip under the colour-format icon that shows the picked colour
   }
 }
 
@@ -433,7 +454,7 @@ $transparent-border: 1px solid transparent;
 .dx-resize-frame {
   position: absolute;
   box-sizing: content-box;
-  border: 1px dashed lightslategrey;
+  border: 1px dashed lightslategrey; // dx-line-width: hairline of the image resize frame
   pointer-events: none;
 
   .dx-resizable-handle {
@@ -444,7 +465,7 @@ $transparent-border: 1px solid transparent;
   .dx-resizable-handle-corner-top-left,
   .dx-resizable-handle-corner-bottom-right,
   .dx-resizable-handle-corner-bottom-left {
-    border: 1px solid white;
+    border: 1px solid white; // dx-line-width: hairline around a resize handle
     width: $resize-handle-size;
     height: $resize-handle-size;
     border-radius: 0;
@@ -500,7 +521,7 @@ $transparent-border: 1px solid transparent;
       position: absolute;
       width: $resize-handle-size;
       height: $resize-handle-size;
-      border: 1px solid white;
+      border: 1px solid white; // dx-line-width: hairline around a resize handle // dx-line-width: hairline around a resize handle
 
       @at-root #{selector.append(".dx-touch-device", &)} {
         width: $touch-resize-handle-size;
@@ -565,16 +586,16 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-mention {
-  padding: 1px 0;
-  border-radius: 2px;
+  padding: $mention-padding-block 0;
+  border-radius: $mention-border-radius;
 
   .dx-template-wrapper {
     white-space: nowrap;
     display: inline-block;
   }
 
   & > span {
-    margin: 0 2px;
+    margin: 0 $mention-margin-inline;
   }
 }
 
@@ -589,27 +610,27 @@ $transparent-border: 1px solid transparent;
   }
 
   .dx-htmleditor-column-resizer {
-    width: 5px;
+    width: $table-resizer-thickness;
     top: 0;
     height: 100%;
     cursor: col-resize;
   }
 
   .dx-htmleditor-highlighted-column {
-    width: 3px;
+    width: $table-resizer-highlight-thickness;
     top: 0;
     height: 100%;
   }
 
   .dx-htmleditor-row-resizer {
-    height: 5px;
+    height: $table-resizer-thickness;
     left: 0;
     width: 100%;
     cursor: row-resize;
   }
 
   .dx-htmleditor-highlighted-row {
-    height: 3px;
+    height: $table-resizer-highlight-thickness;
     left: 0;
     width: 100%;
   }

packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss

@@ -304,7 +304,7 @@
 }
 
 @mixin dx-font-icon($glyph) {
-  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package
 
   &::before {
     content: $glyph;
@@ -672,7 +672,7 @@ $icons: (
   }
 
   %icon-font {
-    font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+    font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package
   }
 
   @each $key, $glyph in $icons {

packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss

@@ -1,7 +1,26 @@
 @use "sass:math";
-
-$loadindicator-width: 32px;
-$loadindicator-height: 32px;
+@use "sass:meta";
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$loadindicator-width: 32px !default;
+$loadindicator-height: 32px !default;
+
+/*
+ * The container centres the indicator by pulling it back half its own size. A theme that feeds a
+ * var() into the sizes above leaves Sass nothing to halve, so the halves are knobs of their own: the
+ * theme passes one derived token instead of four calc() expressions reaching the browser. The
+ * defaults compute at build time and keep every other theme byte-identical.
+ */
+$loadindicator-offset-top: if(
+  meta.type-of($loadindicator-height) == number,
+  math.div(-$loadindicator-height, 2),
+  calc(#{$loadindicator-height} / -2)
+) !default;
+$loadindicator-offset-left: if(
+  meta.type-of($loadindicator-width) == number,
+  math.div(-$loadindicator-width, 2),
+  calc(#{$loadindicator-width} / -2)
+) !default;
 
 .dx-loadindicator {
   width: $loadindicator-width;
@@ -49,12 +68,12 @@ $loadindicator-height: 32px;
     top: 50%;
     left: 50%;
     position: absolute;
-    margin-top: math.div(-1 * $loadindicator-height, 2);
-    margin-left: math.div(-1 * $loadindicator-width, 2);
+    margin-top: $loadindicator-offset-top;
+    margin-left: $loadindicator-offset-left;
 
     &.dx-loadindicator {
-      margin-top: math.div(-1 * $loadindicator-height, 2);
-      margin-left: math.div(-1 * $loadindicator-width, 2);
+      margin-top: $loadindicator-offset-top;
+      margin-left: $loadindicator-offset-left;
     }
   }
 }

packages/devextreme-scss/scss/widgets/base/_multiView.scss

@@ -36,8 +36,8 @@
 }
 
 .dx-multiview-item-hidden {
-  top: -9999px;
-  left: -9999px;
+  top: -9999px; // dx-structural: parks the hidden slide off-screen
+  left: -9999px; // dx-structural: parks the hidden slide off-screen
   visibility: hidden;
 
   .dx-accordion-item-opened .dx-accordion-item-body {

packages/devextreme-scss/scss/widgets/base/_numberBox.scss

@@ -2,8 +2,8 @@
 
 $numberbox-spin-idle-opacity: 0.2 !default;
 
-$spin-container-width: 22px;
-$touch-friendly-spin-container-width: 64px;
+$spin-container-width: 22px !default;
+$touch-friendly-spin-container-width: 64px !default;
 
 .dx-numberbox {
   position: relative;